/* =============================================================================
   Insta Poster - Produktseite
   =============================================================================
   Farbwelt, Rundungen und das Markenzeichen sind aus der Anwendung uebernommen
   (insta-poster.css), damit Seite und Werkzeug erkennbar zusammengehoeren.

   Bewusst ohne Fremdressourcen: keine Schriften von Google, keine CDN, keine
   Zaehlpixel. Damit laedt die Seite nichts von fremden Servern - das haelt die
   Datenschutzerklaerung kurz und die Seite schnell.
   ========================================================================== */

:root {
    /* Marke */
    --accent:        #f87a00;
    --accent-dark:   #dc6c00;
    --accent-soft:   #fff3e7;
    --accent-grad:   linear-gradient(145deg, #ff9a36, #f05d00);

    /* Flaechen und Schrift */
    --bg:            #f4f5f7;
    --bg-deep:       #eceff3;
    --panel:         #ffffff;
    --panel-soft:    #f8f9fb;
    --text:          #20242a;
    --text-strong:   #14171c;
    --muted:         #6d7480;
    --line:          #dfe3e8;
    --ok:            #16833c;
    --ok-soft:       #effaf2;

    --radius:        18px;
    --radius-lg:     26px;
    --shadow:        0 18px 50px rgba(28, 35, 45, .08);
    --shadow-lift:   0 26px 70px rgba(28, 35, 45, .13);

    --breite:        1140px;
    --luft:          clamp(64px, 9vw, 116px);

    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:          #12151a;
        --bg-deep:     #0d1014;
        --panel:       #1a1e25;
        --panel-soft:  #21262e;
        --text:        #e6e9ee;
        --text-strong: #ffffff;
        --muted:       #9aa3af;
        --line:        #2b313a;
        --accent-soft: #2a1c0e;
        --ok-soft:     #10241a;
        --shadow:      0 18px 50px rgba(0, 0, 0, .45);
        --shadow-lift: 0 26px 70px rgba(0, 0, 0, .55);
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    /* Inter, falls vorhanden - sonst die Systemschrift. Nichts wird nachgeladen. */
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
a { color: var(--accent-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (prefers-color-scheme: dark) { a { color: #ffa64d; } }

h1, h2, h3, h4 { color: var(--text-strong); line-height: 1.2; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(34px, 6vw, 60px); letter-spacing: -.03em; }
h2 { font-size: clamp(27px, 4vw, 41px); }
h3 { font-size: clamp(19px, 2vw, 22px); }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.container { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 22px; }
section { padding: var(--luft) 0; }

/* Ueberschrift-Block einer Sektion ------------------------------------------ */
.sektion-kopf { max-width: 680px; margin-bottom: clamp(34px, 5vw, 56px); }
.sektion-kopf.mitte { margin-left: auto; margin-right: auto; text-align: center; }
.sektion-kopf p { color: var(--muted); font-size: clamp(17px, 2vw, 19px); }

.marke-klein {
    display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--accent-dark);
    background: var(--accent-soft); border-radius: 999px; padding: 6px 13px; margin-bottom: 16px;
}
@media (prefers-color-scheme: dark) { .marke-klein { color: #ffa64d; } }

/* Schaltflaechen ------------------------------------------------------------- */
.knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
    padding: 14px 24px; border-radius: 12px; border: 1px solid var(--line);
    background: var(--panel); color: var(--text);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.knopf:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.knopf.stark {
    border-color: transparent; background: var(--accent-grad); color: #fff;
    box-shadow: 0 12px 30px rgba(248, 122, 0, .28);
}
.knopf.stark:hover { box-shadow: 0 18px 40px rgba(248, 122, 0, .38); }
.knopf.leise { background: transparent; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Kopfzeile ------------------------------------------------------------------ */
.kopf {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
}
.kopf-innen { display: flex; align-items: center; gap: 18px; padding: 13px 22px; max-width: var(--breite); margin: 0 auto; }

.wortmarke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-strong); }
.zeichen {
    width: 40px; height: 40px; border-radius: 12px; background: var(--accent-grad);
    display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 15px;
    box-shadow: 0 10px 22px rgba(248, 122, 0, .28); flex: 0 0 auto;
}
.wortmarke b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
/* :not(.zeichen), sonst gewinnt diese Regel gegen .zeichen - gleiche Klasse, aber ein Element
   mehr im Selektor - und aus dem Markenzeichen wird ein grauer Zwölf-Punkt-Text. */
.wortmarke span:not(.zeichen) { display: block; font-size: 12px; color: var(--muted); }

.haupt-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.haupt-nav a {
    text-decoration: none; color: var(--muted); font-size: 15px; font-weight: 600;
    padding: 9px 13px; border-radius: 9px;
}
.haupt-nav a:hover { color: var(--text-strong); background: var(--panel-soft); }
.haupt-nav .knopf { margin-left: 8px; padding: 10px 18px; font-size: 15px; }

.nav-schalter {
    display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 11px;
    border: 1px solid var(--line); background: var(--panel); cursor: pointer;
    align-items: center; justify-content: center; padding: 0;
}
.nav-schalter span { display: block; width: 19px; height: 2px; background: var(--text); border-radius: 2px; position: relative; }
.nav-schalter span::before, .nav-schalter span::after {
    content: ""; position: absolute; left: 0; width: 19px; height: 2px; background: var(--text); border-radius: 2px;
    transition: transform .2s ease, top .2s ease;
}
.nav-schalter span::before { top: -6px; }
.nav-schalter span::after  { top:  6px; }

@media (max-width: 900px) {
    .nav-schalter { display: flex; }
    .haupt-nav {
        position: fixed; inset: 62px 0 auto; margin: 0; flex-direction: column; align-items: stretch;
        gap: 2px; padding: 14px 18px 22px; background: var(--panel);
        border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
        transform: translateY(-130%); transition: transform .25s ease; visibility: hidden;
    }
    .haupt-nav.offen { transform: translateY(0); visibility: visible; }
    .haupt-nav a { padding: 13px 12px; font-size: 17px; }
    .haupt-nav .knopf { margin: 8px 0 0; padding: 14px; }
}

/* Buehne --------------------------------------------------------------------- */
.buehne { padding: clamp(46px, 7vw, 86px) 0 var(--luft); overflow: hidden; }
.buehne-raster { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 66px); align-items: center; }
@media (max-width: 940px) { .buehne-raster { grid-template-columns: 1fr; } }

.buehne h1 { margin-bottom: 20px; }
.buehne h1 em { font-style: normal; color: var(--accent-dark); }
@media (prefers-color-scheme: dark) { .buehne h1 em { color: #ff9a36; } }
.buehne-text { font-size: clamp(18px, 2.2vw, 21px); color: var(--muted); max-width: 34em; }

.beleg-reihe { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; padding: 0; list-style: none; }
.beleg-reihe li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--muted); }
.haken { width: 19px; height: 19px; border-radius: 50%; background: var(--ok-soft); color: var(--ok);
         display: grid; place-items: center; font-size: 11px; font-weight: 900; flex: 0 0 auto; }

/* Telefon mit Karussell ------------------------------------------------------ */
.geraet-feld { display: grid; place-items: center; position: relative; }
.geraet-feld::before {
    content: ""; position: absolute; width: 118%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, rgba(248,122,0,.16), transparent 62%); z-index: 0;
}
.telefon {
    position: relative; z-index: 1; width: min(310px, 82vw); border-radius: 42px; padding: 11px;
    background: linear-gradient(160deg, #2c313a, #14171c); box-shadow: var(--shadow-lift);
}
.telefon-schirm { border-radius: 32px; overflow: hidden; background: var(--panel); }
.telefon-leiste { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.telefon-leiste .punkt { width: 25px; height: 25px; border-radius: 50%; background: var(--marke-farbe, #f87a00); flex: 0 0 auto; }
.telefon-leiste b { font-size: 12.5px; font-weight: 700; }
.telefon-leiste small { margin-left: auto; color: var(--muted); font-size: 11px; }

.folien { position: relative; aspect-ratio: 1; }
.folie {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
    padding: 26px 22px; background: var(--marke-farbe, #f87a00); color: var(--marke-schrift, #fff);
    opacity: 0; transform: scale(1.03); transition: opacity .5s ease, transform .5s ease;
}
.folie.sichtbar { opacity: 1; transform: scale(1); }
.folie-oben { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px;
              font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .82; }
.folie-titel { font-size: clamp(20px, 5.4vw, 25px); font-weight: 800; line-height: 1.22; letter-spacing: -.02em; }
.folie-titel small { display: block; font-size: 13.5px; font-weight: 600; opacity: .85; margin-top: 10px; line-height: 1.5; letter-spacing: 0; }
.folie-unten { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; opacity: .9; }

.folien-punkte { display: flex; justify-content: center; gap: 6px; padding: 12px; }
.folien-punkte b { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background .3s, width .3s; }
.folien-punkte b.an { width: 18px; border-radius: 3px; background: var(--marke-farbe, #f87a00); }

.telefon-fuss { padding: 0 13px 14px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.telefon-fuss b { color: var(--text); }

/* Markenwechsler ------------------------------------------------------------- */
.marken-wahl { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; position: relative; z-index: 1; }
.marken-wahl button {
    font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
    border: 1px solid var(--line); background: var(--panel); color: var(--muted);
    border-radius: 999px; padding: 8px 15px; display: inline-flex; align-items: center; gap: 8px;
    transition: .18s;
}
.marken-wahl button i { width: 11px; height: 11px; border-radius: 50%; background: var(--chip, currentColor); }
.marken-wahl button:hover { color: var(--text); }
.marken-wahl button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
@media (prefers-color-scheme: dark) { .marken-wahl button[aria-pressed="true"] { color: #ffa64d; } }

/* Karten --------------------------------------------------------------------- */
.karten { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(266px, 1fr)); }
.karte {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px 24px; box-shadow: 0 6px 20px rgba(28, 35, 45, .04);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.karte:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.karte h3 { margin-bottom: 9px; }
.karte p { color: var(--muted); font-size: 15.5px; }
.karte-zeichen {
    width: 44px; height: 44px; border-radius: 13px; background: var(--accent-soft);
    display: grid; place-items: center; margin-bottom: 16px; font-size: 21px;
}
.karte.breit { grid-column: 1 / -1; }

/* Ablauf in Schritten -------------------------------------------------------- */
.schritte { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: schritt; }
.schritt { position: relative; padding-top: 54px; }
.schritt::before {
    counter-increment: schritt; content: counter(schritt);
    position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 12px;
    background: var(--accent-grad); color: #fff; display: grid; place-items: center;
    font-weight: 900; font-size: 16px; box-shadow: 0 10px 22px rgba(248, 122, 0, .26);
}
.schritt h3 { margin-bottom: 7px; }
.schritt p { color: var(--muted); font-size: 15.5px; }

/* Zweispaltiger Block --------------------------------------------------------- */
.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.zwei-spalten.schmal-links { grid-template-columns: .9fr 1.1fr; }
@media (max-width: 900px) { .zwei-spalten, .zwei-spalten.schmal-links { grid-template-columns: 1fr; } }

.liste-klar { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; }
.liste-klar li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; }
.liste-klar li b { display: block; color: var(--text-strong); }
.liste-klar li span { color: var(--muted); }

/* Formatkacheln --------------------------------------------------------------- */
.formate { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.format { text-align: center; }
.format-rahmen {
    border-radius: 14px; background: var(--accent-grad); box-shadow: var(--shadow);
    display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12.5px;
    border: 5px solid var(--panel);
}
.format-reel      { width: 92px;  aspect-ratio: 9 / 16; }
.format-quadrat   { width: 128px; aspect-ratio: 1; }
.format-quer      { width: 172px; aspect-ratio: 16 / 9; }
.format small { display: block; margin-top: 9px; font-size: 13px; color: var(--muted); font-weight: 600; }

/* Betriebsarten ---------------------------------------------------------------- */
.betrieb { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.betrieb .karte { display: flex; flex-direction: column; }
.betrieb .karte ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 9px; font-size: 14.5px; color: var(--muted); }
.betrieb .karte ul li { display: flex; gap: 9px; }
.marke-status {
    display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    border-radius: 999px; padding: 4px 11px; margin-bottom: 14px;
}
.marke-status.jetzt   { background: var(--ok-soft); color: var(--ok); }
.marke-status.bald    { background: var(--accent-soft); color: var(--accent-dark); }
@media (prefers-color-scheme: dark) { .marke-status.bald { color: #ffa64d; } }

/* Preise ------------------------------------------------------------------------ */
.preis-schalter {
    display: inline-flex; gap: 3px; padding: 4px; border: 1px solid var(--line);
    border-radius: 999px; background: var(--panel); margin: 0 auto 40px; 
}
.preis-schalter button {
    font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; border: 0;
    background: transparent; color: var(--muted); border-radius: 999px; padding: 9px 20px; transition: .18s;
}
.preis-schalter button[aria-pressed="true"] { background: var(--accent-grad); color: #fff; }
.mitte-flex { display: flex; justify-content: center; }

.preise { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); align-items: start; }
.preis {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 30px 26px; display: flex; flex-direction: column; box-shadow: 0 6px 20px rgba(28,35,45,.04);
}
.preis.hervor { border-color: var(--accent); box-shadow: var(--shadow-lift); position: relative; }
.preis.hervor::after {
    content: "Empfehlung"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--accent-grad); color: #fff; font-size: 11.5px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px;
    box-shadow: 0 8px 18px rgba(248,122,0,.3); white-space: nowrap;
}
.preis h3 { margin-bottom: 4px; }
.preis .fuer { color: var(--muted); font-size: 14.5px; margin-bottom: 20px; }
.preis .zahl { font-size: 42px; font-weight: 800; letter-spacing: -.03em; color: var(--text-strong); line-height: 1; }
.preis .takt { color: var(--muted); font-size: 14.5px; margin: 8px 0 0; }
.preis ul { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 11px; font-size: 15px; }
.preis ul li { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); }
.preis ul li b { color: var(--text); font-weight: 700; }
.preis .knopf { margin-top: auto; width: 100%; }
.preis-fuss { margin-top: 26px; text-align: center; color: var(--muted); font-size: 14.5px; }

/* Hinweiskasten ------------------------------------------------------------------ */
.kasten {
    border: 1px solid var(--line); border-left: 4px solid var(--accent);
    background: var(--panel); border-radius: 14px; padding: 20px 22px; font-size: 15.5px;
}
.kasten.entwurf { border-left-color: #b42318; background: color-mix(in srgb, #b42318 6%, var(--panel)); }
.kasten h3 { font-size: 17px; margin-bottom: 6px; }
.kasten p { color: var(--muted); }
.fuellen { background: var(--accent-soft); color: var(--accent-dark); border-radius: 5px; padding: 1px 7px;
           font-weight: 700; font-size: .93em; }
@media (prefers-color-scheme: dark) { .fuellen { color: #ffa64d; } }

/* Fragen ------------------------------------------------------------------------- */
.fragen { display: grid; gap: 12px; max-width: 820px; margin: 0 auto; }
.frage { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.frage summary {
    cursor: pointer; padding: 19px 22px; font-weight: 700; font-size: 16.5px; color: var(--text-strong);
    display: flex; align-items: center; gap: 14px; list-style: none;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
    content: "+"; margin-left: auto; font-size: 22px; font-weight: 400; color: var(--accent);
    transition: transform .2s ease; line-height: 1;
}
.frage[open] summary::after { transform: rotate(45deg); }
.frage .antwort { padding: 0 22px 21px; color: var(--muted); font-size: 15.5px; }

/* Abschluss und Fuss --------------------------------------------------------------- */
.abschluss {
    background: var(--accent-grad); color: #fff; border-radius: var(--radius-lg);
    padding: clamp(38px, 6vw, 64px); text-align: center; box-shadow: var(--shadow-lift);
}
.abschluss h2 { color: #fff; }
.abschluss p { color: rgba(255, 255, 255, .92); max-width: 44em; margin-inline: auto; font-size: 18px; }
.abschluss .knopf { background: #fff; color: var(--accent-dark); border-color: transparent; }
.abschluss .knopf.leise { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.4); }
.abschluss .knopf-reihe { justify-content: center; }

.fuss { border-top: 1px solid var(--line); background: var(--panel); padding: 48px 0 34px; margin-top: var(--luft); }
.fuss-raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; }
@media (max-width: 760px) { .fuss-raster { grid-template-columns: 1fr; gap: 26px; } }
.fuss h4 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.fuss ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.fuss a { color: var(--muted); text-decoration: none; font-size: 15px; }
.fuss a:hover { color: var(--accent-dark); text-decoration: underline; }
.fuss-text { color: var(--muted); font-size: 14.5px; max-width: 32em; margin-top: 14px; }
.fuss-zeile {
    margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between;
    color: var(--muted); font-size: 13.5px;
}

/* Rechtstexte ---------------------------------------------------------------------- */
.rechtstext { max-width: 780px; }
.rechtstext h2 { font-size: clamp(22px, 3vw, 28px); margin-top: 2em; }
.rechtstext h2:first-of-type { margin-top: 1em; }
.rechtstext h3 { font-size: 18px; margin-top: 1.6em; }
.rechtstext ul { padding-left: 22px; color: var(--muted); }
.rechtstext li { margin-bottom: 8px; }
.rechtstext p { color: var(--muted); }
.rechtstext table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
.rechtstext th, .rechtstext td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rechtstext th { color: var(--text-strong); font-weight: 700; width: 34%; }
.rechtstext td { color: var(--muted); }
.tabelle-huelle { overflow-x: auto; }

/* Sanftes Einblenden beim Scrollen --------------------------------------------------
   Bewusst an .js gebunden: Ohne JavaScript nimmt niemand die Klasse "da" wieder weg, und
   die halbe Seite bliebe unsichtbar. Die Klasse setzt ein winziges Skript im <head>. */
.js .zeigen { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .zeigen.da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .js .zeigen { opacity: 1; transform: none; transition: none; }
    .folie { transition: none; }
}

/* Nur fuer Vorlesegeraete ----------------------------------------------------------- */
.nur-vorlesen {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Kopfzeile der Rechtstexte -------------------------------------------------------- */
.kopf-zurueck {
    margin-left: auto; text-decoration: none; color: var(--muted); font-size: 15px;
    font-weight: 600; padding: 9px 13px; border-radius: 9px; white-space: nowrap;
}
.kopf-zurueck:hover { color: var(--text-strong); background: var(--panel-soft); }
@media (max-width: 460px) {
    /* Auf schmalen Schirmen konkurrieren Wortmarke und Verweis um denselben Platz. */
    .wortmarke span:not(.zeichen) { display: none; }
    .kopf-zurueck { font-size: 14px; padding: 9px 6px; }
}

/* Lange Wörter (E-Mail-Adressen, Verweise) duerfen die Seite nicht seitlich aufziehen.
   break-word statt anywhere: bricht nur, wenn es sein muss, und zerhackt keine Tabellenkoepfe. */
.rechtstext { overflow-wrap: break-word; }

@media (max-width: 620px) {
    /* Zweispaltige Tabellen werden auf dem Telefon zu Bloecken - sonst quetscht sich die
       Kopfspalte auf ein Drittel und trennt jedes zweite Wort mitten im Wort. */
    .rechtstext table, .rechtstext tbody, .rechtstext tr, .rechtstext th, .rechtstext td { display: block; width: auto; }
    .rechtstext tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
    .rechtstext th, .rechtstext td { border: 0; padding: 0; }
    .rechtstext th { margin-bottom: 5px; }
    .rechtstext tr:last-child { border-bottom: 0; }
}

/* Kleinschreibung technischer Namen im Fliesstext ----------------------------------- */
code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9em; background: var(--panel-soft); border: 1px solid var(--line);
    border-radius: 6px; padding: 1px 6px;
}

/* Echte Ausschnitte aus der Anwendung ------------------------------------------------ */
.schirme { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 860px) { .schirme { grid-template-columns: 1fr; } }
.schirm { margin: 0; }
.schirm img {
    display: block; width: 100%; height: auto; background: var(--panel);
    border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
}
.schirm figcaption { margin-top: 13px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.schirm figcaption b { color: var(--text-strong); }

.folienband { margin: 0 0 24px; }
.folienband img {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
}
.folienband figcaption { margin-top: 11px; color: var(--muted); font-size: 14px; }

/* Firmenzeichen im Fuß */
.firmenzeichen { display: block; width: 168px; height: auto; margin-bottom: 14px; }