/* ═══════════════════════════════════════════════════════════════════════
   Gestaltung der Rechtstext-Musterseiten

   Bewusst schlicht: Diese Seiten werden gelesen, nicht überflogen. Eine
   Spalte, grosszuegige Zeilenhoehe, keine Kaesten, keine Farbflaechen
   ausser der Kennzeichnung als Muster.

   Schriften und Farbwerte sind dieselben wie auf der Hauptseite. Nichts
   wird von fremden Servern geladen.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Fira Mono';font-style:normal;font-weight:400;font-display:swap;
    src:url(schriften/fira-mono-400-latin-ext.woff2) format('woff2');
    unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fira Mono';font-style:normal;font-weight:400;font-display:swap;
    src:url(schriften/fira-mono-400-latin.woff2) format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fira Mono';font-style:normal;font-weight:500;font-display:swap;
    src:url(schriften/fira-mono-500-latin-ext.woff2) format('woff2');
    unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fira Mono';font-style:normal;font-weight:500;font-display:swap;
    src:url(schriften/fira-mono-500-latin.woff2) format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fira Sans';font-style:italic;font-weight:400;font-display:swap;
    src:url(schriften/fira-sans-400-italic-latin-ext.woff2) format('woff2');
    unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fira Sans';font-style:italic;font-weight:400;font-display:swap;
    src:url(schriften/fira-sans-400-italic-latin.woff2) format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;
    src:url(schriften/fira-sans-400-latin-ext.woff2) format('woff2');
    unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;
    src:url(schriften/fira-sans-400-latin.woff2) format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:500;font-display:swap;
    src:url(schriften/fira-sans-500-latin-ext.woff2) format('woff2');
    unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:500;font-display:swap;
    src:url(schriften/fira-sans-500-latin.woff2) format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:600;font-display:swap;
    src:url(schriften/fira-sans-600-latin-ext.woff2) format('woff2');
    unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:600;font-display:swap;
    src:url(schriften/fira-sans-600-latin.woff2) format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;
    src:url(schriften/fira-sans-700-latin-ext.woff2) format('woff2');
    unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;
    src:url(schriften/fira-sans-700-latin.woff2) format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
    --marine:#16263C;       /* Überschriften, Header */
    --tief:#101C2C;         /* Footer, dunkle Flächen */
    --weiss:#FFFFFF;        /* Karten, Tabelle, Sektionen – weiß */
    --papier:#FFFFFF;       /* Seitengrund – weiß */
    --bk-blau:#D1DBE8;      /* BK-CI: Theme-Farbe von baumeister-kollegen.de */
    --rein:#FFFFFF;         /* reines Weiß: Header, Menü, Abo-Felder, Eingabefelder */
    /* Auf den hellblauen Flächen (Hero, Anmeldebox) werden Linien und
       Sekundärtext lokal abgedunkelt – siehe .hero / .anmeldebox */
    --porzellan:#EDF1F7;    /* nur noch kleine Tönungen: gewähltes Abo, Hinweis, Menü-Hover */
    --blau:#1D4E76;         /* Aktionsfarbe: Links, Marken-Akzent */
    --blau-d:#163C5B;
    /* Fokusrahmen und Platzhaltermarkierung. Gegenüber dem Entwurf
       (#A87C23) abgedunkelt: auf der hellblauen Anmeldebox erreichte der
       Fokusrahmen nur 2,7:1 und verfehlte damit WCAG 1.4.11 (mind. 3:1).
       Jetzt auf allen vier Flächen der Seite über 3:1 — weiß 4,9 ·
       hellblau 3,5 · marine und dunkelblau 3,5. */
    --akzent:#916A15;
    --linie:#E3E9F1;        /* Haarlinie auf Weiß, zurückgenommen */
    --linie-stark:#CFD9E6;  /* betonte Kante auf Weiß */
    /* Rahmen von Bedienelementen (Eingabefelder, Auswahlkästchen). Muss
       nach WCAG 1.4.11 mind. 3:1 gegen die Umgebung halten — dafür reicht
       --linie-stark nicht aus. */
    --kante-bedien:#5A6675;
    --text:#2C3542;
    --muted:#5E6773;
    --display:"Fira Sans","Helvetica Neue",Arial,sans-serif;
    --body:"Fira Sans","Helvetica Neue",Arial,sans-serif;
    --mono:"Fira Mono",ui-monospace,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--text);
  font:400 17px/1.62 var(--body);overflow-wrap:break-word}
a{color:var(--blau)}
a:focus-visible,button:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}

.springen{position:absolute;left:-9999px;top:0;background:var(--rein);
  padding:10px 16px;z-index:10}
.springen:focus{left:8px;top:8px}

header{background:var(--rein);border-bottom:1px solid var(--linie-stark)}
header .innen{max-width:820px;margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
header img{height:32px;width:auto;display:block}
header a.zurueck{font:600 14px var(--body);text-decoration:none;white-space:nowrap}
header a.zurueck:hover{text-decoration:underline}

main{max-width:820px;margin:0 auto;padding:34px 24px 60px}

.musterhinweis{border:1px solid var(--kante-bedien);background:var(--porzellan);
  padding:16px 18px;margin:0 0 34px;font-size:15.5px;line-height:1.55}
.musterhinweis b{display:block;font-family:var(--display);font-size:17px;
  color:var(--marine);margin-bottom:5px}

h1{font:700 clamp(26px,3.4vw,34px)/1.2 var(--display);letter-spacing:-.02em;
  color:var(--marine);margin:0 0 6px}
.untertitel{font-size:16px;color:var(--muted);margin:0 0 30px}
h2{font:700 20px/1.3 var(--display);color:var(--marine);
  margin:34px 0 10px;letter-spacing:-.01em}
h3{font:600 16.5px/1.35 var(--body);color:var(--marine);margin:24px 0 8px}
/* Die Datenschutzerklärung hat vier Ebenen: Abschnitt, Verarbeitung,
   Unterpunkt, und darunter die immer gleichen vier Fragen (Beschreibung,
   Rechtsgrundlage, Zweck, Dauer). Die unterste Ebene bleibt bewusst
   zurückhaltend, sonst zerfällt die Seite optisch in lauter Titel. */
h4{font:600 14.5px/1.35 var(--body);color:var(--muted);margin:20px 0 5px;
  letter-spacing:.02em}
.stand{margin-top:30px;padding-top:18px;border-top:1px solid var(--linie-stark);
  color:var(--muted);font-size:15px}
p{margin:0 0 14px}
ol,ul{margin:0 0 14px;padding-left:22px}
li{margin-bottom:7px}
.kurz{border-left:3px solid var(--blau);padding:2px 0 2px 16px;margin:0 0 26px;
  font-size:17.5px;color:var(--marine)}

/* Stelle, an der im echten Dokument die Angaben des Mandanten stehen */
.feld{background:var(--porzellan);border-bottom:1px solid var(--kante-bedien);
  padding:1px 6px;font-family:var(--mono);font-size:.86em;white-space:nowrap}
/* Teile, die nur im Vertrag eines bestimmten Abos stehen. Im Muster
   zeigen wir alle vier und sagen dazu, wann der Punkt erscheint. */
.nurwenn{display:inline-block;margin-left:8px;padding:1px 8px;
  background:var(--porzellan);border:1px solid var(--linie-stark);
  font-size:12.5px;line-height:1.5;color:var(--muted);white-space:nowrap}
@media (max-width:560px){
  .nurwenn{display:block;margin:5px 0 0;white-space:normal}
}

/* Ausfuellzeile im Muster-Widerrufsformular: soll leer bleiben */
.ausfuellen{display:inline-block;min-width:190px;max-width:100%;
  border-bottom:1px solid var(--kante-bedien);vertical-align:baseline}

.unterschrift{margin-top:34px;padding-top:22px;border-top:1px solid var(--linie-stark);
  color:var(--muted);font-size:15px}
.unterschrift .linie{display:block;border-bottom:1px solid var(--kante-bedien);
  max-width:340px;margin:26px 0 6px}

table{border-collapse:collapse;width:100%;margin:0 0 18px;font-size:15.5px}
th,td{text-align:left;vertical-align:top;padding:9px 12px 9px 0;
  border-bottom:1px solid var(--linie)}
th{font:600 12px var(--body);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted)}

footer{background:var(--tief);color:#C6CFDB;margin-top:50px}
footer .innen{max-width:820px;margin:0 auto;padding:26px 24px;font-size:14px}
footer a{color:#fff}

/* Auf schmalen Schirmen passen Logo und voller Linktext nicht
   nebeneinander — dann nur "Zurück". */
@media (max-width:480px){
  header img{height:26px}
  header .zurueck .lang{display:none}
}

@media (max-width:620px){
  body{font-size:16px}
  main{padding:26px 18px 44px}
  header .innen,footer .innen{padding-left:18px;padding-right:18px}
  table,thead,tbody,tr,th,td{display:block}
  th{display:none}
  td{border:0;padding:3px 0}
  td::before{content:attr(data-label);display:block;
    font:600 10px var(--body);letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted);margin-bottom:2px}
  tr{border-bottom:1px solid var(--linie);padding:10px 0}
}