/* ==========================================================================
   /schweiz/ - Zielseite fuer den Schweizer Markt
   Eigenes Stylesheet, damit die bestehenden Seiten unberuehrt bleiben.
   Alles Uebrige kommt aus /styles.css und /relaunch.css.
   ========================================================================== */

/* --- Trust-Leiste, einzeilig, mit Schweizer Fahne (Sektion 2) ------------- */
.ch-trustline {
    background: var(--gray-50, #f8fafc);
    border-top: 1px solid var(--gray-200, #e2e8f0);
    border-bottom: 1px solid var(--gray-200, #e2e8f0);
    padding: 1.1rem 0;
}

.ch-trustline ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .95rem;
    font-weight: 500;
    color: var(--gray-700, #334155);
}

.ch-trustline li + li::before {
    content: "·";
    margin-right: 1.5rem;
    color: var(--gray-400, #94a3b8);
}

/* Die Fahne sitzt im ersten Punkt und ist rein dekorativ. */
.ch-trustline__flag {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.ch-flag {
    flex: 0 0 auto;
    display: block;
    border-radius: 3px;
}

/* --- Verordnungszitat (Sektion 3) ---------------------------------------- */
.gav-quote {
    max-width: 760px;
    margin: 2.5rem auto 0;
    padding: 1.75rem 2rem;
    border-left: 4px solid var(--primary, #e8365d);
    border-radius: 0 12px 12px 0;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
}

.gav-quote blockquote {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.55;
    font-weight: 600;
    color: var(--gray-900, #0f172a);
}

.gav-quote cite {
    display: block;
    margin-top: .9rem;
    font-size: .85rem;
    font-style: normal;
    color: var(--gray-500, #64748b);
}

/* --- Visierungskette: gezeichnetes Drei-Stufen-Diagramm (Sektion 9) ------- */
.visa-chain {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    max-width: 940px;
    margin: 2.5rem auto 0;
    counter-reset: visa;
}

.visa-step {
    position: relative;
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--gray-200, #e2e8f0);
    border-radius: 14px;
    background: #fff;
    text-align: center;
}

/* Pfeil zwischen den Stufen. */
.visa-step + .visa-step::before {
    content: "";
    position: absolute;
    left: -1.05rem;
    top: 50%;
    width: .85rem;
    height: .85rem;
    margin-top: -.45rem;
    border-top: 2px solid var(--gray-300, #cbd5e1);
    border-right: 2px solid var(--gray-300, #cbd5e1);
    transform: rotate(45deg);
}

.visa-step__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: .9rem;
    border-radius: 14px;
    background: rgba(232, 54, 93, .1);
    color: var(--primary, #e8365d);
}

.visa-step__no {
    counter-increment: visa;
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gray-400, #94a3b8);
}
.visa-step__no::before { content: "Schritt " counter(visa); }

.visa-step h3 {
    margin: .35rem 0 .5rem;
    font-size: 1.05rem;
}

.visa-step p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--gray-600, #475569);
}

@media (max-width: 760px) {
    .visa-chain { grid-template-columns: 1fr; }
    .visa-step + .visa-step::before {
        left: 50%;
        top: -1.05rem;
        margin: 0 0 0 -.45rem;
        transform: rotate(135deg);
    }
}

/* --- Zwei Hervorhebungen unter der Visierungskette ------------------------ */
.visa-notes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    max-width: 940px;
    margin: 2rem auto 0;
}
.visa-notes > div {
    padding: 1.4rem 1.5rem;
    border-radius: 14px;
    background: var(--gray-50, #f8fafc);
}
.visa-notes h3 { margin: 0 0 .45rem; font-size: 1rem; }
.visa-notes p  { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--gray-600, #475569); }

@media (max-width: 760px) {
    .visa-notes { grid-template-columns: 1fr; }
}

/* --- Platzhalter fuer die noch fehlenden Screenshots (Teil D) -------------
   Bewusst sichtbar: Die Seite ist bis zur Freigabe eine Vorschau, und der
   Platzhalter benennt genau, was das Bild zeigen muss.
   Beim Einsetzen des echten Assets ersatzlos entfernen.
   ------------------------------------------------------------------------ */
.asset-todo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 240px;
    padding: 2rem 1.5rem;
    border: 2px dashed var(--gray-300, #cbd5e1);
    border-radius: 14px;
    background: repeating-linear-gradient(
        45deg, transparent, transparent 12px,
        rgba(148, 163, 184, .08) 12px, rgba(148, 163, 184, .08) 24px);
    text-align: center;
}

.asset-todo__tag {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--primary, #e8365d);
}

.asset-todo p {
    margin: 0;
    max-width: 40ch;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--gray-500, #64748b);
}

/* ==========================================================================
   Gezeichnete Schemata (Entscheidung Oliver, 26.08.2026): Statt Screenshots
   aus dem GAV-Modul, das es als Aufnahme noch nicht gibt, sind die Sektionen
   1, 5, 6, 7, 8 und 10 als Schema gesetzt - im Stil des Visierungsdiagramms.
   Kein Bild, sondern Markup: bleibt scharf und steht im Quelltext.
   ========================================================================== */

.dia {
    padding: 1.5rem;
    border: 1px solid var(--gray-200, #e2e8f0);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
}

.dia__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1.1rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--gray-100, #f1f5f9);
}

.dia__title {
    font-size: .95rem;
    font-weight: 600;
    color: var(--gray-900, #0f172a);
}

.dia__pills { display: flex; flex-wrap: wrap; gap: .4rem; }

.dia__pill {
    padding: .25rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--gray-200, #e2e8f0);
    font-size: .78rem;
    color: var(--gray-600, #475569);
    background: var(--gray-50, #f8fafc);
}
.dia__pill--on {
    border-color: transparent;
    background: var(--primary, #e8365d);
    color: #fff;
    font-weight: 600;
}

.dia__status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .28rem .75rem;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    font-size: .8rem;
    font-weight: 600;
}
.dia__status::before { content: "\2713"; }

.dia__caption {
    margin: 1rem 0 0;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--gray-500, #64748b);
}

/* --- Farbschluessel der Zeitarten ---------------------------------------- */
.dia-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    margin-top: 1rem;
    font-size: .8rem;
    color: var(--gray-600, #475569);
}
.dia-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.dia-legend i {
    width: 12px; height: 12px; border-radius: 3px;
    display: inline-block; font-style: normal;
}

.blk-aktiv  { background: #2f6fed; }
.blk-bereit { background: #f5a524; }
.blk-pause  { background: #94a3b8; }
.blk-ruhe   { background: #e2e8f0; }

/* --- Wochenraster: sieben Tagesspalten aus gestapelten Bloecken ----------- */
.week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .4rem;
}

.week__day { display: flex; flex-direction: column; }

.week__label {
    margin-bottom: .4rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
    color: var(--gray-400, #94a3b8);
}

.week__stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 210px;
}

.week__stack > i { display: block; border-radius: 3px; }

/* Kleine Variante fuer die vier Wochenvorlagen */
.week--mini .week__stack { height: 96px; }
.week--mini .week__label { font-size: .62rem; margin-bottom: .25rem; }
.week--mini { gap: .25rem; }

.tpl-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.1rem;
}
.tpl {
    padding: .9rem;
    border: 1px solid var(--gray-200, #e2e8f0);
    border-radius: 12px;
    background: var(--gray-50, #f8fafc);
}
.tpl h4 {
    margin: 0 0 .6rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--gray-700, #334155);
}
@media (max-width: 620px) { .tpl-grid { grid-template-columns: 1fr; } }

/* --- Regeltabelle und Exporttabelle -------------------------------------- */
.dia-table-wrap { overflow-x: auto; }

.dia-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .86rem;
}
.dia-table th,
.dia-table td {
    padding: .6rem .75rem;
    text-align: left;
    border-bottom: 1px solid var(--gray-100, #f1f5f9);
    white-space: nowrap;
}
.dia-table th {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gray-400, #94a3b8);
}
.dia-table td:first-child { white-space: normal; font-weight: 500; color: var(--gray-800, #1e293b); }
.dia-table tbody tr:last-child td { border-bottom: 0; }

.lvl {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
}
.lvl--tag    { background: #e0edff; color: #1d4ed8; }
.lvl--woche  { background: #fef3c7; color: #b45309; }
.lvl--vier   { background: #ede9fe; color: #6d28d9; }

.eff { font-size: .82rem; color: var(--gray-600, #475569); }
.eff--block { color: #b91c1c; font-weight: 600; }

/* --- Tagesleiste mit geaendertem Block ----------------------------------- */
.dayline { display: flex; gap: 3px; height: 46px; }
.dayline > div {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: .72rem;
    font-weight: 600;
    color: #fff;
}
.dayline .blk-ruhe  { color: var(--gray-500, #64748b); }
.dayline .blk-pause { color: #fff; }

.dayline__changed {
    position: relative;
    outline: 2px solid var(--primary, #e8365d);
    outline-offset: 2px;
}

.change-note {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    margin-top: 1.4rem;
    font-size: .86rem;
    color: var(--gray-700, #334155);
}
.change-note s { color: var(--gray-400, #94a3b8); }
.change-note strong { color: var(--gray-900, #0f172a); }
.change-note em {
    font-style: normal;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: rgba(232, 54, 93, .1);
    color: var(--primary, #e8365d);
    font-size: .78rem;
    font-weight: 600;
}

/* --- Bereitschaft: Zwei-Zustands-Grafik ---------------------------------- */
.states {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.25rem;
}
.state {
    padding: 1.1rem;
    border: 1px solid var(--gray-200, #e2e8f0);
    border-radius: 12px;
    background: var(--gray-50, #f8fafc);
}
.state h4 {
    margin: 0 0 .75rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--gray-700, #334155);
}
.state__bar {
    height: 34px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 600;
    color: #fff;
}
.state__dots { display: flex; gap: .35rem; margin-top: .75rem; }
.state__dots i {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--gray-300, #cbd5e1);
}
.state__dots i.on { background: var(--gray-700, #334155); }
.state__dots i.trigger { background: var(--primary, #e8365d); }
.state p { margin: .7rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--gray-600, #475569); }

.states__arrow { color: var(--gray-300, #cbd5e1); }

@media (max-width: 760px) {
    .states { grid-template-columns: 1fr; }
    .states__arrow { transform: rotate(90deg); justify-self: center; }
}

/* --- Enge Bildausschnitte in Sektion 11 ----------------------------------
   Vier Bilder aus dem Bestand, bewusst eng beschnitten: kein Sidebar-Menue,
   keine AT-Begriffe, keine echten Adressen oder Mailadressen im Ausschnitt
   (Auflage Oliver, 26.08.2026). -------------------------------------------- */
.related-card .crop {
    display: block;
    margin: 0 0 1rem;
    border: 1px solid var(--gray-200, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
    background: var(--gray-50, #f8fafc);
}
.related-card .crop img {
    display: block;
    width: 100%;
    height: 148px;
    object-fit: cover;
    object-position: left top;
}
/* Hochformat: unten ausrichten, damit die Schaltflaeche im Ausschnitt bleibt. */
.related-card .crop--tall img { object-position: center bottom; }

/* Breite Schemata duerfen die Split-Spalte nicht aufblaehen - ohne min-width:0
   waechst das Grid-Item auf die Mindestbreite der Tabelle und schiebt die
   Textspalte aus dem Container. */
.feature-split-inner > * { min-width: 0; }
.dia { min-width: 0; }

/* --- Echte Produktaufnahmen aus dem GAV-Modul ----------------------------
   Aufgenommen aus der laufenden Oberflaeche mit einer Demo-Agentur; die
   App-Seitenleiste ist weggeschnitten, weil dort "Turnus" steht. */
.ui-shot {
    display: block;
    margin: 0;
    /* Gleiche Breite und gleicher Abstand wie die gezeichneten Schemata,
       damit die Sektionen einen Rhythmus haben. */
    max-width: 1100px;
    border: 1px solid var(--gray-200, #e2e8f0);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .10);
}

/* Steht die Aufnahme direkt im Container, bekommt sie denselben Abstand
   nach oben wie ein Schema und wird zentriert. */
.container > .ui-shot,
.dia + .ui-shot {
    margin: 2.5rem auto 0;
}

/* Im Hero fuellt sie ihre Spalte. */
.page-hero-visual .ui-shot { max-width: none; }
.ui-shot img {
    display: block;
    width: 100%;
    height: auto;
}