/* ==========================================================================
   Gestaltungssystem michael-engwicht.de
   Farben aus dem bestehenden Auftritt: Marineblau #082336, Petrol #15779b.
   Aufbau und Typografie in Anlehnung an teamvollmer-fuchs.de (Michaels Wunsch),
   aber mit eigener Farbwelt - erkennbar dasselbe Team, nicht dieselbe Seite.
   ========================================================================== */

/* --- Schriften, ausgeliefert vom eigenen Server (kein Google-Aufruf) ------
   Tinos (Serife) fuer Ueberschriften und DM Sans fuer Text sind Michaels
   eigene Schriftwahl. Serifen vertragen KEINE so enge Laufweite wie Grotesken -
   die Werte weiter unten sind entsprechend angepasst.
   Beide SIL Open Font License, Selbsthosten ausdruecklich erlaubt.          */
@font-face{font-family:'Tinos';font-style:normal;font-weight:400;font-display:swap;
  src:url('/schriften/tinos-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:'Tinos';font-style:normal;font-weight:400;font-display:swap;
  src:url('/schriften/tinos-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:'Tinos';font-style:normal;font-weight:700;font-display:swap;
  src:url('/schriften/tinos-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;}
@font-face{font-family:'Tinos';font-style:normal;font-weight:700;font-display:swap;
  src:url('/schriften/tinos-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:'DM Sans';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('/schriften/dmsans-300-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:'DM Sans';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('/schriften/dmsans-300-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* --- Werte ---------------------------------------------------------------- */
:root{
  --papier:#f3f1ec;        /* warmes Cremeweiss - kein Reinweiss */
  --papier-rein:#ffffff;   /* fuer Karten */
  --tinte:#082336;         /* Marineblau, Michaels Hauptfarbe */
  --tinte-weich:#46586a;   /* Nebentext */
  --signal:#15779b;        /* Petrol, Michaels Akzent - Knoepfe und Verweise */
  --signal-tief:#0f5c79;   /* beim Ueberfahren */
  --linie:#dfdad2;
  --radius:4px;            /* fast eckig - wirkt seriös */
  /* Rahmen und Textspalte sind bewusst GLEICH breit (11.09.2026).
     Vorgeschichte: Am 10.09. wurde der Rahmen auf 1440px verbreitert und die
     Textspalte mit 1225px darin zentriert. Folge: Ueberschriften standen am
     Rahmenrand (79px), der Text 84px weiter rechts (163px) - auf jeder Seite.
     Michael hat es sofort gesehen. Sind beide gleich breit, fluchtet alles
     UND die Seite bleibt mittig. 1232px innen sind rund 150 % der urspruenglichen
     817px - genau die Breite, die er wollte. */
  --breite:1280px;
  --lesebreite:1232px;  /* = 1280 minus 2 x 24px Innenabstand */
  --h1:clamp(2.35rem,5.4vw,4.75rem);
  --h2:clamp(1.85rem,3.4vw,2.9rem);
  --h3:clamp(1.25rem,2vw,1.75rem);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --papier:#0c1922; --papier-rein:#122530; --tinte:#eef1f3; --tinte-weich:#a8b6c1;
    --signal:#4fb3d4; --signal-tief:#78c7e2; --linie:#22394a;
  }
}
:root[data-theme="dark"]{
  --papier:#0c1922; --papier-rein:#122530; --tinte:#eef1f3; --tinte-weich:#a8b6c1;
  --signal:#4fb3d4; --signal-tief:#78c7e2; --linie:#22394a;
}

/* --- Grundlagen ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* Deutsche Komposita sind laenger als schmale Telefone breit sind:
   'Berufsunfaehigkeitsversicherung' passt bei 320px in keine Zeile und
   schob die ganze Seite zur Seite (am 10.09.2026 gemessen). Trennung per
   Silbentrennung, und wo die nicht reicht, notfalls harter Umbruch. */
body{margin:0;background:var(--papier);color:var(--tinte);
  font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;}
/* Silbentrennung nur dort, wo die Spalte wirklich schmal wird. Auf breiten
   Schirmen wirkt sie unruhig, auf dem Telefon rettet sie den Zeilenfall. */
@media(max-width:700px){
  body{hyphens:auto;-webkit-hyphens:auto}
  .knopf,.hauptmenue a,.vorzeile{hyphens:manual;-webkit-hyphens:manual}
}
/* Ueberschriften trennen IMMER mit Silbentrennung, nicht nur auf schmalen
   Schirmen. Sonst bricht 'overflow-wrap:break-word' ein zu langes Wort ohne
   Trennstrich mitten durch - am 10.09.2026 auf /partner/einwertung/iaa/ als
   'Arbeitskraftabsicherun' + 'g' zu sehen gewesen. */
h1,h2,h3,h4{hyphens:auto;-webkit-hyphens:auto}
h1,h2,h3,h4{font-family:'Tinos','Times New Roman',Georgia,serif;
  font-weight:700;letter-spacing:-0.012em;line-height:1.08;margin:0 0 .5em;}
h1{font-size:var(--h1)} h2{font-size:var(--h2)} h3{font-size:var(--h3);letter-spacing:-0.005em}
p{margin:0 0 1.1em;max-width:68ch}
a{color:var(--signal);text-underline-offset:3px}
a:hover{color:var(--signal-tief)}
img{max-width:100%;height:auto}
.huelle{max-width:var(--breite);margin:0 auto;padding:0 24px}
.vorzeile{font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--signal);margin:0 0 1.25rem}
.leise{color:var(--tinte-weich)}
section{padding:clamp(3.5rem,8vw,7rem) 0;border-top:1px solid var(--linie)}
section:first-of-type{border-top:0}

/* --- Knoepfe -------------------------------------------------------------- */
.knopf{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.6rem;border-radius:var(--radius);
  font-weight:600;font-size:.95rem;text-decoration:none;border:1.5px solid transparent;transition:.15s}
.knopf-haupt{background:var(--signal);color:#fff;border-color:var(--signal)}
.knopf-haupt:hover{background:var(--signal-tief);border-color:var(--signal-tief);color:#fff}
.knopf-rand{background:transparent;color:var(--tinte);border-color:var(--tinte)}
.knopf-rand:hover{background:var(--tinte);color:var(--papier)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

/* --- Kopfzeile ------------------------------------------------------------ */
.kopf{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--papier) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linie)}
.kopf .huelle{display:flex;align-items:center;gap:1.25rem;height:76px}
.marke{display:flex;align-items:center;flex-shrink:0}
.marke img{height:40px;width:auto;display:block}
:root[data-theme="dark"] .marke img{filter:invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .marke img{filter:invert(1)}}
/* Die Menuepunkte stehen auf 'nowrap'. Duerfte das Menue schrumpfen (flex:1
   mit min-width:0), liefen die Woerter unter die Knoepfe - genau das ist am
   10.09.2026 passiert, nachdem 'Glossar' dazukam. Deshalb: 'flex:0 1 auto'
   ohne min-width, und die Knoepfe schrumpfen ueberhaupt nicht. Reicht der
   Platz nicht, greifen die Haltepunkte unten - dann verschwindet erst der
   zweite Knopf, dann das ganze Menue zugunsten des Burgers. */
.hauptmenue{display:flex;gap:1.1rem;margin-left:.25rem;flex:0 1 auto}
.hauptmenue a{color:var(--tinte);text-decoration:none;font-size:.9375rem;font-weight:500;white-space:nowrap}
.hauptmenue a:hover{color:var(--signal)}
.kopf-knoepfe{display:flex;gap:.5rem;flex-shrink:0;margin-left:auto}
.kopf-knoepfe .knopf{padding:.55rem 1rem;font-size:.875rem;white-space:nowrap}
@media(max-width:1240px){.kopf-knoepfe .knopf-rand{display:none}}
@media(max-width:1000px){.hauptmenue{display:none}}

/* --- Aufmacher ------------------------------------------------------------ */
.aufmacher{padding-top:clamp(2.5rem,6vw,5rem)}
.aufmacher .huelle{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:end;padding-bottom:0}
.aufmacher>.huelle>div:first-child{padding-bottom:clamp(2rem,4vw,3.5rem)}
.aufmacher h1{max-width:20ch;text-wrap:balance}
.portrait{justify-self:end;width:100%;max-width:460px;align-self:end;position:relative}
/* Freigestellt - bewusst ohne Rahmen und ohne Schatten. Die Person steht
   direkt auf dem Papierton; ein Kasten wuerde die Wirkung zunichtemachen. */
.portrait img{width:100%;height:auto;display:block}
@media(max-width:820px){
  .aufmacher .huelle{grid-template-columns:1fr}
  .portrait{justify-self:center;max-width:320px;order:-1;margin-bottom:.5rem}
}
.aufmacher .einleitung{font-size:clamp(1.0625rem,1.5vw,1.25rem);max-width:78ch;color:var(--tinte-weich)}
.vertrauen{display:flex;flex-wrap:wrap;gap:.45rem 1.5rem;margin-top:2.25rem;
  font-size:.8125rem;color:var(--tinte-weich)}
.vertrauen span{display:flex;align-items:center;gap:.45rem}

/* --- Karten und Raster ---------------------------------------------------- */
.raster{display:grid;gap:1.25rem}
.raster-2{grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr))}
.raster-3{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.karte{background:var(--papier-rein);border:1px solid var(--linie);border-radius:var(--radius);
  padding:1.75rem}
.karte h3{margin-top:.25rem}
.nummer{font-family:'DM Sans',sans-serif;font-weight:700;font-size:.8125rem;
  color:var(--signal);letter-spacing:.05em}
.punkte{list-style:none;padding:0;margin:1rem 0 0}
.punkte li{position:relative;padding-left:1.4rem;margin-bottom:.6rem;font-size:.9375rem;color:var(--tinte-weich)}
.punkte li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;
  border-radius:50%;background:var(--signal)}

/* --- Knopf am Kartenfuss ---------------------------------------------------
   Die drei Schwerpunktkarten sind verschieden lang. 'margin-top:auto' schiebt
   den Knopf in jeder Karte auf dieselbe Hoehe, damit die Reihe ruhig wirkt. */
.karte{display:flex;flex-direction:column}
.karte-fuss{margin-top:auto;padding-top:1.5rem}
.karte-fuss .knopf{width:100%;justify-content:center;font-size:.875rem;padding:.7rem 1rem}

/* Aufzaehlung im Fliesstext - groesser als in den Karten */
.punkte-weit li{font-size:1rem;margin-bottom:.5rem}

/* --- Stimmen -------------------------------------------------------------- */
.raster-stimmen{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
.stimme{background:var(--papier-rein);border:1px solid var(--linie);border-radius:var(--radius);padding:1.6rem}
.stimme blockquote{margin:0 0 1rem;font-size:1.0625rem;line-height:1.55}
.stimme .wer{font-size:.8125rem;color:var(--tinte-weich);font-weight:600}
.sterne{color:var(--signal);letter-spacing:.1em;font-size:.8125rem}

/* --- Abschluss mit zwei Wegen --------------------------------------------- */
.zwei-wege{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.zwei-wege .karte{display:flex;flex-direction:column}
.zwei-wege .karte .knopfreihe{margin-top:auto;padding-top:1.5rem}

/* --- Fusszeile ------------------------------------------------------------ */
.fuss{border-top:1px solid var(--linie);padding:3rem 0 2.5rem;font-size:.875rem;color:var(--tinte-weich)}
.fuss a{color:var(--tinte-weich);text-decoration:none}
.fuss a:hover{color:var(--signal)}
.fuss-raster{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.fuss h4{font-size:.8125rem;text-transform:uppercase;letter-spacing:.1em;color:var(--tinte);margin-bottom:.9rem}
.fuss ul{list-style:none;padding:0;margin:0}
.fuss li{margin-bottom:.5rem}

/* --- Inhaltsseiten (Ratgeber, Uebersichten) ------------------------------- */
.aufmacher-text .huelle{display:block}
.aufmacher-text h1{max-width:24ch}
/* Bis zum 10.09.2026 stand hier '70ch' (817px) ohne Zentrierung. Der Rahmen
   war mittig, die Textspalte darin klebte links - bei 1550px Fensterbreite
   blieben links 202px frei und rechts 555px. Das sah unabsichtlich aus, und
   das war es auch. Jetzt breiter und mittig im Rahmen. */
.satzspiegel{max-width:var(--lesebreite)}
.satzspiegel p{max-width:none}
.satzspiegel h2{margin-top:3.25rem;font-size:clamp(1.9rem,3.1vw,2.5rem);line-height:1.1}
.satzspiegel h3{margin-top:2.5rem;font-size:clamp(1.45rem,2.1vw,1.75rem);line-height:1.15}
.satzspiegel h2:first-child,.satzspiegel h3:first-child{margin-top:0}
.satzspiegel ul,.satzspiegel ol{padding-left:1.25rem;margin:0 0 1.2em}
.satzspiegel li{margin-bottom:.55rem}
.satzspiegel strong{font-weight:600;color:var(--tinte)}
/* Breite Tabellen scrollen in ihrem eigenen Rahmen. Ohne das schiebt eine
   einzige Tabelle die ganze Seite waagerecht - auf dem Telefon am 10.09.2026
   bei jeder Inhaltsseite gemessen, bis zu 737px auf einem 375px-Schirm. */
.tabelle-rahmen{overflow-x:auto;margin:1.5rem 0;-webkit-overflow-scrolling:touch}
.tabelle-rahmen table{margin:0}
.tabelle-rahmen:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.satzspiegel table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.9375rem}
.satzspiegel th,.satzspiegel td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--linie);vertical-align:top}
.satzspiegel th{font-weight:600;background:var(--papier-rein)}
.satzspiegel blockquote{margin:1.75rem 0;padding:1.25rem 1.5rem;background:var(--papier-rein);
  border-left:3px solid var(--signal);border-radius:0 var(--radius) var(--radius) 0}
.satzspiegel blockquote p:last-child{margin-bottom:0}
.satzspiegel hr{border:0;border-top:1px solid var(--linie);margin:2.5rem 0}

/* --- Kurzfassung und Gliederung auf Inhaltsseiten ------------------------- */
.kurzfassung{background:var(--papier-rein);border:1px solid var(--linie);
  border-left:3px solid var(--signal);border-radius:0 var(--radius) var(--radius) 0;
  padding:1.5rem 1.75rem;margin:0 0 2.5rem}
.kurzfassung h2{margin:0 0 .9rem;font-size:1.0625rem;letter-spacing:.06em;
  text-transform:uppercase;font-family:'DM Sans',sans-serif;font-weight:700;color:var(--signal)}
.kurzfassung ul{margin:0;padding-left:1.15rem}
.kurzfassung li{margin-bottom:.5rem}
.kurzfassung li:last-child{margin-bottom:0}
.satzspiegel .toc{margin:0 0 3rem;padding:1.25rem 0 1.5rem;border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie)}
.satzspiegel .toc::before{content:"Auf dieser Seite";display:block;font-size:.75rem;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tinte-weich);
  margin-bottom:.9rem;font-family:'DM Sans',sans-serif}
.satzspiegel .toc>ul{list-style:none;margin:0;padding:0;counter-reset:agenda}
.satzspiegel .toc>ul>li{counter-increment:agenda;display:flex;gap:.7rem;align-items:baseline}
.satzspiegel .toc>ul>li::before{content:counter(agenda) ".";color:var(--signal);
  font-weight:600;font-variant-numeric:tabular-nums;min-width:1.4em;text-align:right}
.satzspiegel .toc li{margin:0}
.satzspiegel .toc a{text-decoration:none;font-size:1rem;color:var(--tinte);padding:.18rem 0}
.satzspiegel .toc a:hover{color:var(--signal);text-decoration:underline}
.satzspiegel .toc ul ul{display:none}
.satzspiegel h2{scroll-margin-top:96px}

/* --- Menue fuer schmale Bildschirme (ohne JavaScript, per <details>) ------ */
.mobilmenue{display:none}
.mobilmenue>summary{list-style:none;cursor:pointer;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;color:var(--tinte);
  border:1px solid var(--linie);border-radius:var(--radius);background:var(--papier-rein)}
.mobilmenue>summary::-webkit-details-marker{display:none}
.mobilmenue>summary:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.mobilmenue .strich-zu{display:none}
.mobilmenue[open]>summary .strich-menue{display:none}
.mobilmenue[open]>summary .strich-zu{display:block}
.mobilmenue-tafel{position:absolute;left:0;right:0;top:100%;background:var(--papier);
  border-bottom:1px solid var(--linie);padding:1rem 24px 1.5rem;
  display:grid;gap:.5rem;box-shadow:0 14px 28px -16px rgba(8,35,54,.35)}
.mobilmenue-tafel nav{display:grid;margin-bottom:.5rem}
.mobilmenue-tafel nav a{padding:.85rem 0;border-bottom:1px solid var(--linie);
  color:var(--tinte);text-decoration:none;font-size:1.0625rem;font-weight:500}
.mobilmenue-tafel nav a:hover{color:var(--signal)}
.mobilmenue-tafel .knopf{justify-content:center}
@media(max-width:1000px){
  .mobilmenue{display:block;margin-left:auto}
}
@media(max-width:560px){
  .kopf-knoepfe{display:none}
}

/* --- Terminkalender: laedt erst auf Klick --------------------------------- */
.kalender-platz{background:var(--papier-rein);border:1px solid var(--linie);
  border-radius:var(--radius);padding:2rem;text-align:center;margin-top:2rem}
.kalender-hinweis{font-size:.9375rem;color:var(--tinte-weich);max-width:52ch;
  margin:0 auto 1.5rem}
/* Hoehe am 10.09.2026 an Acuity gemessen, statt sie zu schaetzen: die
   Terminuebersicht braucht 1186px, eine einzelne Terminart 1076px, auf 380px
   Schirmbreite bis 1384px. Eingestellt waren 820px - deshalb musste man IM
   Kalender scrollen. Die Werte liegen bewusst darueber, weil nach der Auswahl
   eines Termins noch das Formular folgt. Zu viel Weissraum ist harmlos,
   ein Bildlauf im Rahmen nicht. */
.kalender-rahmen{width:100%;min-height:1350px;border:0;margin-top:2rem;
  border-radius:var(--radius)}
@media(max-width:600px){.kalender-rahmen{min-height:1550px}.kalender-platz{padding:1.5rem}}