/* freeehouse Erfahrungen · Dossier. Regeln in DESIGN.md */
@font-face{font-family:"Geist";src:url(fonts/geist-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;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:"Geist";src:url(fonts/geist-latinext.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4}

:root{
  --tinte:#0F1426;--himmel:#E9EFF9;--weiss:#FFFFFF;--schiefer:#4A5470;--linie:#C9D3E6;--gelb:#FFC83D;
  --tinte-2:#1A2140;--hell-auf-tinte:#C3CADD;
  --f:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:4px;--rand:16px;--breite:1120px;--spalte:220px;
  color-scheme:light;
}
@media (min-width:900px){:root{--rand:32px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:24px}
body{margin:0;background:var(--himmel);color:var(--tinte);font:400 1.0625rem/1.65 var(--f);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-feature-settings:"tnum" 0}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--schiefer)}
a:hover{text-decoration-color:var(--tinte);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--gelb);outline-offset:2px;border-radius:2px}
h1,h2,h3{margin:0;letter-spacing:-.025em;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0}
.skip{position:absolute;left:-9999px;top:8px;background:var(--gelb);color:var(--tinte);padding:8px 16px;z-index:10}
.skip:focus{left:16px}

/* Kopf */
.kopf{background:var(--tinte);color:#fff}
.kopf-in{max-width:var(--breite);margin:0 auto;padding:12px var(--rand);display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}
.marke{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:#fff;font-weight:620;font-size:1.125rem;letter-spacing:-.02em}
.marke svg{width:34px;height:24px;flex:none}
.wort .eee i{font-style:normal}
.wort .eee i:nth-child(1){opacity:.45}.wort .eee i:nth-child(2){opacity:.72}
.zusatz{font-weight:450;color:var(--hell-auf-tinte);font-size:.9375rem;padding-left:8px;border-left:1px solid #3A4366;margin-left:2px}
.hauptnav{display:flex;gap:4px 20px;order:3;width:100%;font-size:.9375rem;flex-wrap:wrap}
.hauptnav a{color:var(--hell-auf-tinte);text-decoration:none;padding:6px 0}
.hauptnav a:hover,.hauptnav a[aria-current]{color:#fff;text-decoration:underline;text-decoration-color:var(--gelb);text-underline-offset:.4em}
.knopf{display:inline-block;background:var(--gelb);color:var(--tinte);font-weight:600;text-decoration:none;padding:13px 20px;border-radius:var(--r);line-height:1.25;transition:background-color .15s}
.knopf:hover{background:#FFD566;text-decoration:none}
.knopf-klein{margin-left:auto;padding:8px 14px;font-size:.9375rem}
@media (min-width:900px){.hauptnav{order:0;width:auto;margin-left:16px}.kopf-in{flex-wrap:nowrap;padding-block:16px}}

.transparenz{background:var(--weiss);border-bottom:1px solid var(--linie)}
.transparenz-in{max-width:var(--breite);margin:0 auto;padding:12px var(--rand);font-size:.9375rem;line-height:1.5;color:var(--schiefer)}
.transparenz b{color:var(--tinte)}

/* Raster mit Belegspalte */
.raster{max-width:var(--breite);margin:0 auto;padding:0 var(--rand);display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:900px){.raster{grid-template-columns:var(--spalte) minmax(0,1fr);gap:48px}}
.inhalt{min-width:0}
.seitenkopf{padding:56px 0 40px}
@media (min-width:900px){.seitenkopf{padding:88px 0 64px}}
.seitenkopf .beleg{display:none}
@media (min-width:900px){.seitenkopf .beleg{display:block}}
h1{font-size:2.375rem;line-height:1.08;font-weight:620;letter-spacing:-.032em;max-width:20ch}
@media (min-width:900px){h1{font-size:3.625rem;line-height:1.03}}
.lead{margin-top:24px;font-size:1.1875rem;line-height:1.55;max-width:62ch;color:#2A3352}
.aktion{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.aktion-info{font-size:.875rem;color:var(--schiefer)}
.krumen{font-size:.875rem;color:var(--schiefer);margin-bottom:20px;display:flex;gap:8px;flex-wrap:wrap}
.krumen a{text-decoration:none}.krumen a:hover{text-decoration:underline}

.abschnitt{padding:40px 0;border-top:1px solid var(--linie)}
@media (min-width:900px){.abschnitt{padding:64px 0}}
.abschnitt h2{font-size:1.75rem;line-height:1.14;font-weight:600;max-width:24ch}
@media (min-width:900px){.abschnitt h2{font-size:2.25rem;line-height:1.1}}
.beleg{font-size:.8125rem;line-height:1.5;color:var(--schiefer);font-variant-numeric:tabular-nums;order:2}
@media (min-width:900px){.beleg{order:0;padding-top:6px}}
.beleg .nr{display:block;font-size:.8125rem;font-weight:600;color:var(--tinte);letter-spacing:.04em;margin-bottom:12px}
.beleg dl{margin:0;display:grid;gap:8px;border:1px solid var(--linie);border-radius:var(--r);padding:12px 14px;background:rgba(255,255,255,.45)}
@media (min-width:900px){.beleg dl{border:0;border-left:1px solid var(--linie);border-radius:0;background:none;padding:0 0 0 14px}}
.beleg dt{font-weight:600;color:var(--tinte)}
.beleg dd{margin:0}
.abschnitt .raster{grid-template-areas:"i" "b"}
.abschnitt .inhalt{grid-area:i}.abschnitt .beleg{grid-area:b}
@media (min-width:900px){.abschnitt .raster{grid-template-areas:"b i"}}
.abschnitt-kurz{padding-bottom:24px}
.einleitung{margin-top:16px;max-width:64ch;color:#2A3352}
.weiter{margin-top:24px;font-weight:600}
.fliess{margin-top:20px;max-width:68ch;display:grid;gap:16px}
.punkte{padding-left:20px;display:grid;gap:6px}

mark{background:linear-gradient(var(--gelb),var(--gelb)) 0 88%/100% 38% no-repeat;color:inherit;padding:0 1px}
.js mark{background-size:0 38%;transition:background-size .6s cubic-bezier(.2,.7,.2,1) .15s}
.js mark.an{background-size:100% 38%}

/* Steckbrief */
.steckbrief{margin:24px 0 0;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r)}
.steckbrief div{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:12px 16px;border-top:1px solid var(--linie)}
.steckbrief div:first-child{border-top:0}
@media (min-width:640px){.steckbrief div{grid-template-columns:170px minmax(0,1fr);gap:16px;padding:14px 20px}}
.steckbrief dt{font-weight:600;font-size:.9375rem}
.steckbrief dd{margin:0}

/* Zitate */
.zitate{list-style:none;margin-top:24px;display:grid;gap:12px}
.zitat{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);padding:20px}
@media (min-width:900px){.zitat{padding:24px 28px}}
.zitat blockquote{margin:0;font-size:1.0625rem;line-height:1.6;max-width:68ch}
.zitat blockquote p::before{content:"„"}.zitat blockquote p::after{content:"“"}
.zitat-fuss{margin-top:14px;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.875rem;color:var(--schiefer);align-items:baseline}
.zitat-fuss .wer{color:var(--tinte)}
.zitat-fuss .sterne{font-variant-numeric:tabular-nums}
.zitat-fuss .wo{flex-basis:100%}

/* Tabellen */
.tabelle-wrap{margin-top:24px;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r)}
.tabelle{width:100%;border-collapse:collapse;font-size:.9375rem;line-height:1.5}
.tabelle caption{text-align:left;padding:12px 16px;font-size:.8125rem;color:var(--schiefer);border-bottom:1px solid var(--linie)}
.tabelle th,.tabelle td{text-align:left;vertical-align:top;padding:14px 16px;border-top:1px solid var(--linie)}
.tabelle thead th{font-size:.8125rem;font-weight:600;color:var(--schiefer);border-top:0}
.tabelle small{display:block;color:var(--schiefer);font-size:.8125rem;font-weight:400;margin-top:2px}
.tabelle tbody th{font-weight:600}
.fall-name{display:flex;gap:12px;align-items:flex-start}
.fall-name img{width:56px;height:28px;object-fit:contain;object-position:left center;flex:none;margin-top:2px}
.mess{color:var(--schiefer);font-size:.8125rem}
@media (max-width:759px){
  .tabelle thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tabelle tr{display:block;padding:14px 16px;border-top:1px solid var(--linie)}
  .tabelle tbody tr:first-child{border-top:0}
  .tabelle th,.tabelle td{display:block;padding:0;border:0}
  .tabelle td{margin-top:6px}
  .tabelle td:nth-child(3){font-size:.8125rem}
  .tabelle td:nth-child(3)::before{content:"Kanal: ";color:var(--schiefer)}
  .tabelle-refs td:nth-child(3)::before{content:""}
  .tabelle td a{overflow-wrap:anywhere}
}

/* Platz 1 */
.platz1{list-style:none;margin-top:24px;display:grid;gap:0;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r)}
.platz1 li{display:grid;gap:2px;padding:14px 16px;border-top:1px solid var(--linie)}
.platz1 li:first-child{border-top:0}
@media (min-width:640px){.platz1 li{grid-template-columns:260px minmax(0,1fr);gap:16px;padding:14px 20px}}
.platz1 span{color:#2A3352}

/* Fragen */
.fragen{margin-top:24px;display:grid;gap:0;border-top:1px solid var(--linie)}
.frage{padding:20px 0;border-bottom:1px solid var(--linie)}
.frage h3{font-size:1.1875rem;line-height:1.35;font-weight:600}
.antwort{margin-top:8px;max-width:68ch;display:grid;gap:10px;color:#232B47}
.frage-quelle{font-size:.8125rem;color:var(--schiefer)}
.inhaltsliste{margin-top:16px;padding-left:22px;display:grid;gap:6px;columns:1}
@media (min-width:900px){.inhaltsliste{display:block;columns:2;column-gap:40px}.inhaltsliste li{margin-bottom:6px;break-inside:avoid}}

/* Referenzen */
.refs{list-style:none;margin-top:24px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:640px){.refs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.refs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ref a{display:block;text-decoration:none;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;height:100%;transition:border-color .15s}
.ref a:hover{border-color:var(--tinte)}
.ref img{aspect-ratio:16/10;object-fit:cover;object-position:top;width:100%;border-bottom:1px solid var(--linie);background:var(--himmel)}
.ref-text{display:grid;gap:2px;padding:14px 16px;font-size:.9375rem;line-height:1.45}
.ref-text span{color:var(--schiefer)}
.ref-dom{text-decoration:underline;text-underline-offset:.2em;color:var(--tinte)!important;overflow-wrap:anywhere}
.ref-erg{margin-top:6px;color:var(--tinte)!important;font-size:.875rem}

/* Schluss */
.schluss{background:var(--tinte);color:#fff;padding:56px 0}
@media (min-width:900px){.schluss{padding:88px 0}}
.schluss h2{font-size:1.75rem;line-height:1.14;font-weight:600;max-width:22ch}
@media (min-width:900px){.schluss h2{font-size:2.25rem}}
.schluss p{margin-top:16px;max-width:60ch;color:var(--hell-auf-tinte)}
.schluss .aktion{margin-top:28px}
.textlink-hell{color:#fff;text-decoration-color:var(--gelb)}

/* Recht */
.recht-wrap{padding:0 0 88px}
.recht{max-width:72ch}
.recht h3{font-size:1.0625rem;font-weight:600;margin-top:28px}
.recht p{margin-top:8px}
.recht a{overflow-wrap:anywhere}

/* Fuß */
.fuss{background:var(--tinte);color:var(--hell-auf-tinte);border-top:1px solid #262E52;font-size:.9375rem;line-height:1.55}
.fuss-in{max-width:var(--breite);margin:0 auto;padding:48px var(--rand) 40px;display:grid;gap:32px}
@media (min-width:900px){.fuss-in{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.fuss-a{display:grid;gap:14px;max-width:60ch}
.fuss-a b{color:#fff}
.fuss a{color:#fff;text-decoration-color:#5A648A}
.fuss-b{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;align-content:start}
.fuss-b a{text-decoration:none}.fuss-b a:hover{text-decoration:underline}
.fuss-c{font-size:.8125rem;grid-column:1/-1;border-top:1px solid #262E52;padding-top:20px}

/* Bewegung */
@media (prefers-reduced-motion:reduce){
  .js mark{background-size:100% 38%;transition:none}
}
@media print{.kopf,.schluss,.fuss-b{display:none}body{background:#fff}}