@font-face{font-family:Fraunces;src:url(/assets/fonts/fraunces.woff2) format('woff2-variations');font-weight:100 900;font-display:swap;font-style:normal}
@font-face{font-family:'Public Sans';src:url(/assets/fonts/public-sans.woff2) format('woff2-variations');font-weight:100 900;font-display:swap;font-style:normal}

:root{
  --creme:#f4efe3; --creme-tief:#e9e1d0; --schild:#fffdf7;
  --tinte:#17140f; --tinte-weich:#4c4437;
  --rot:#b83027; --navy:#1b3a5c; --messing:#7d5d1c;
  --linie:#d8cdb6; --linie-stark:#bfb094;
  --serif:Fraunces,'Times New Roman',serif;
  --sans:'Public Sans','Segoe UI',sans-serif;
  --easing:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--creme);color:var(--tinte);font-family:var(--sans);font-size:1.0625rem;line-height:1.65;font-weight:380;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--navy);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--rot)}
:focus-visible{outline:3px solid var(--rot);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--tinte);color:var(--creme);padding:12px 20px;z-index:99;font-weight:600}
.skip:focus{left:0}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.nurlesbar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Kopf */
.kopf{background:var(--navy);color:#f0e9db;border-bottom:4px solid var(--rot)}
.kopf-in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:66px;flex-wrap:wrap}
.marke{font-family:var(--serif);font-weight:800;font-size:1.22rem;letter-spacing:-.02em;color:#fff;text-decoration:none;display:flex;align-items:center;gap:11px;padding:8px 0}
.marke em{font-style:normal;width:12px;height:26px;border-radius:6px;border:2px solid #f0e9db;background:linear-gradient(to top,var(--rot) 48%,transparent 48%);flex:none}
.nav{display:flex;gap:2px;list-style:none;flex-wrap:wrap}
.nav a{display:flex;align-items:center;min-height:44px;padding:8px 14px;font-size:.93rem;font-weight:500;color:#d3cbba;text-decoration:none;border-radius:6px}
.nav a:hover,.nav a[aria-current=page]{background:rgba(255,255,255,.14);color:#fff}

/* Antwortblock */
.poster{padding:48px 0 42px;border-bottom:1px solid var(--linie);
  background:radial-gradient(90% 70% at 92% 5%,rgba(27,58,92,.08),transparent 60%),radial-gradient(80% 70% at 0% 100%,rgba(184,48,39,.07),transparent 55%)}
.krumen{font-size:.85rem;color:var(--tinte-weich);margin-bottom:20px}
.krumen a{color:var(--tinte-weich)}
.krumen ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.krumen li+li::before{content:"/";margin-right:6px;color:var(--linie-stark)}
.poster-grid{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:40px;align-items:start}
h1{font-family:var(--serif);font-weight:700;font-size:clamp(1.7rem,4.2vw,2.6rem);line-height:1.1;letter-spacing:-.03em;margin-bottom:28px;max-width:16ch}

/* Emailleschild mit Thermometer */
.schild{background:var(--schild);border:2px solid var(--navy);border-radius:14px;overflow:hidden;max-width:560px;box-shadow:0 2px 0 var(--linie-stark),0 14px 28px -18px rgba(27,58,92,.5)}
.therm{display:grid;grid-template-columns:auto auto 1fr;gap:0 22px;align-items:center;padding:22px 26px}
.roehre{position:relative;width:26px;height:190px;border:2px solid var(--navy);border-radius:13px;background:var(--creme-tief);overflow:hidden;flex:none}
.roehre span{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(to top,var(--rot),#d05a4f);border-radius:0 0 11px 11px}
.roehre::before{content:"";position:absolute;left:50%;bottom:5px;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;background:var(--rot);z-index:2}
.leiter{display:grid;grid-template-rows:repeat(5,1fr);height:190px;align-items:center}
.leiter i{font-style:normal;font-size:.66rem;font-weight:700;letter-spacing:.06em;color:var(--tinte-weich);font-variant-numeric:tabular-nums;border-top:1px solid var(--linie-stark);padding-top:2px;min-width:34px}
.ablesung{display:grid;gap:12px}
.wert{font-family:var(--serif);font-variant-numeric:tabular-nums;line-height:.92}
.wert b{display:block;font-size:clamp(2.2rem,6.5vw,3.5rem);font-weight:800;letter-spacing:-.045em}
.wert i{display:block;font-style:normal;font-size:.71rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tinte-weich);margin-top:6px}
.wert.f b{color:var(--rot)}
.wert.c b{color:var(--navy)}
.gleich{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--messing)}
.werteleiste{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--navy);background:var(--creme-tief)}
.werteleiste div{padding:13px 12px;text-align:center;border-left:1px solid var(--linie-stark)}
.werteleiste div:first-child{border-left:none}
.werteleiste dt{font-size:.63rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--tinte-weich)}
.werteleiste dd{font-family:var(--serif);font-size:1.16rem;font-weight:800;margin-top:3px;letter-spacing:-.02em}

.merksatz{margin-top:28px;padding-left:20px;border-left:4px solid var(--rot);max-width:58ch;color:var(--tinte-weich)}
.merksatz b{color:var(--tinte);font-weight:600}

/* Anzeigen */
/* Die Hoehe steht bewusst nicht im CSS. AdSense setzt auf dem Anzeigenelement
   und auf diesem Rahmen "height:auto !important; min-height:0 !important" und
   raeumt reservierten Platz selbst wieder frei. Steuern laesst sich die Groesse
   nur ueber die erlaubten Formate im AdSense-Konto, nicht hier. */
.anzeige{background:var(--schild);border:2px solid var(--linie-stark);border-radius:12px;padding:14px}
.anzeige-label{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#7d7466;margin-bottom:10px;font-weight:700}
.anzeige .adsbygoogle{display:block;width:100%}
.anzeige-breit{margin:36px 0}
.anzeige-breit .adsbygoogle{min-height:280px}

/* Rechner */
.rechner{background:var(--schild);border:2px solid var(--navy);border-radius:14px;padding:26px;margin:40px 0;box-shadow:0 2px 0 var(--linie-stark)}
.rechner h2{font-family:var(--serif);font-size:1.3rem;font-weight:700;letter-spacing:-.02em;margin-bottom:18px}
.felder{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:end}
.feld label{display:block;font-size:.71rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-weich);margin-bottom:8px}
.feld input{width:100%;font-family:var(--serif);font-size:1.85rem;font-weight:700;font-variant-numeric:tabular-nums;padding:12px 16px;min-height:64px;border:2px solid var(--linie-stark);border-radius:10px;background:var(--creme);color:var(--tinte)}
.feld.f input{border-bottom-color:var(--rot);border-bottom-width:4px}
.feld.c input{border-bottom-color:var(--navy);border-bottom-width:4px}
.tausch{min-width:48px;min-height:48px;border:2px solid var(--linie-stark);background:var(--creme);border-radius:10px;cursor:pointer;font-size:1.15rem;color:var(--tinte-weich);margin-bottom:8px;transition:transform .5s var(--easing),color .3s,border-color .3s}
.tausch:hover{transform:rotate(180deg);color:var(--rot);border-color:var(--rot)}

/* Inhalt */
main section{padding:40px 0;border-top:1px solid var(--linie)}
main section:first-child{border-top:none}
.dachzeile{font-size:.71rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rot);font-weight:800;margin-bottom:10px}
h2{font-family:var(--serif);font-size:clamp(1.35rem,2.7vw,1.8rem);font-weight:700;letter-spacing:-.025em;margin-bottom:12px;max-width:26ch}
h3{font-family:var(--serif);font-size:1.2rem;font-weight:700;letter-spacing:-.02em;margin:26px 0 8px}
p{max-width:66ch;margin-bottom:16px;color:#2b251d}
/* minmax(0,...) statt blossem fr: Grid-Felder haben von Haus aus min-width auto
   und schrumpfen sonst nicht unter ihren Inhalt. Die Tabellen mit min-width
   sprengen damit auf schmalen Displays das Layout. */
.zwei{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:44px;align-items:start}
.zwei>*,.poster-grid>*{min-width:0}

/* Tabellen */
.tabelle-rahmen{overflow-x:auto;margin-top:18px}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;background:var(--schild);min-width:420px}
caption{text-align:left;font-size:.85rem;color:var(--tinte-weich);margin-bottom:10px}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--linie)}
thead th{font-size:.69rem;letter-spacing:.13em;text-transform:uppercase;color:#fff;background:var(--navy);border-bottom:none}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--creme-tief)}
td.zahl,th.zahl{font-family:var(--serif);font-weight:700}
td a{display:inline-block;padding:5px 0}
tr.aktiv td{background:rgba(184,48,39,.09)}
tr.aktiv td.zahl{color:var(--rot)}
tr.aktiv td:first-child::after{content:"diese Seite";display:block;font-family:var(--sans);font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--rot);margin-top:2px}
/* Nur farbliche Hervorhebung, ohne den Zusatz "diese Seite" */
tr.hervor td{background:rgba(184,48,39,.09)}
tr.hervor td.zahl{color:var(--rot)}

.faktenkarte{background:var(--navy);color:#eee6d6;border-radius:12px;padding:24px}
.faktenkarte dt{font-size:.69rem;letter-spacing:.13em;text-transform:uppercase;color:#b0c3d6;font-weight:700;margin-top:16px}
.faktenkarte dt:first-child{margin-top:0}
.faktenkarte dd{font-family:var(--serif);font-size:1.18rem;font-weight:700;margin-top:2px;color:#fff}

/* Nachbarwerte */
.nachbarn{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:20px}
.nachbarn a{display:grid;place-items:center;align-content:center;min-height:62px;padding:8px 6px;background:var(--schild);border:2px solid var(--linie-stark);border-radius:9px;text-decoration:none;color:var(--tinte);font-family:var(--serif);font-weight:700;text-align:center;transition:transform .3s var(--easing),border-color .3s,color .3s}
.nachbarn a:hover{transform:translateY(-3px);border-color:var(--rot);color:var(--rot)}
.nachbarn small{display:block;font-family:var(--sans);font-size:.7rem;font-weight:500;color:var(--tinte-weich)}

/* FAQ */
details{border-bottom:1px solid var(--linie);padding:14px 0}
summary{font-family:var(--serif);font-size:1.06rem;font-weight:700;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:12px;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";color:var(--rot);font-weight:800;width:20px;flex:none;font-size:1.2rem}
details[open] summary::before{content:"\2013"}
details p{margin:10px 0 4px}

/* Startseite */
.start-hero{padding:56px 0 44px;border-bottom:1px solid var(--linie);background:radial-gradient(80% 80% at 85% 0%,rgba(27,58,92,.09),transparent 60%)}
.start-hero h1{font-size:clamp(2rem,5.5vw,3.4rem);max-width:14ch;margin-bottom:18px}
.start-hero .vor{font-size:1.15rem;max-width:52ch;color:var(--tinte-weich);margin-bottom:0}
.kacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.kachel{display:block;padding:20px;background:var(--schild);border:2px solid var(--linie-stark);border-radius:12px;text-decoration:none;color:var(--tinte);transition:transform .3s var(--easing),border-color .3s}
.kachel:hover{transform:translateY(-3px);border-color:var(--rot)}
.kachel b{display:block;font-family:var(--serif);font-size:1.14rem;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}
.kachel span{display:block;font-size:.88rem;color:var(--tinte-weich);line-height:1.5}
.wertliste{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;margin-top:18px}
.wertliste a{display:block;padding:11px 8px;min-height:44px;text-align:center;background:var(--schild);border:1px solid var(--linie-stark);border-radius:7px;text-decoration:none;color:var(--tinte);font-family:var(--serif);font-weight:700;font-size:.98rem;transition:border-color .3s,color .3s}
.wertliste a:hover{border-color:var(--rot);color:var(--rot)}

/* Fuss */
.fuss{border-top:4px solid var(--rot);background:var(--navy);color:#c8c0af;padding:36px 0;font-size:.9rem;margin-top:48px}
.fuss a{color:#e6dfd0}
.fuss-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.fuss h2{font-family:var(--sans);font-size:.71rem;letter-spacing:.16em;text-transform:uppercase;color:#93a7bd;margin-bottom:12px;font-weight:700}
.fuss ul{list-style:none;display:grid;gap:6px}
.fuss p{color:#c8c0af;max-width:42ch}
.fuss-unten{margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.15);font-size:.85rem}

@media(max-width:1100px){
  .poster-grid{grid-template-columns:1fr;gap:30px}
  .anzeige{max-width:420px}
}
@media(max-width:980px){
  .zwei{grid-template-columns:1fr;gap:30px}
  .kacheln{grid-template-columns:repeat(2,1fr)}
  .fuss-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .nachbarn{grid-template-columns:repeat(3,1fr)}
  .felder{grid-template-columns:1fr;gap:12px}
  .tausch{justify-self:center;margin:0}
  .schild{max-width:none}
  .fuss-grid{grid-template-columns:1fr;gap:24px}
}
@media(max-width:520px){
  .therm{grid-template-columns:auto auto;gap:0 16px;padding:18px}
  .ablesung{grid-column:1/-1;margin-top:18px}
  .kacheln{grid-template-columns:1fr}
  .werteleiste{grid-template-columns:1fr}
  .werteleiste div{border-left:none;border-top:1px solid var(--linie-stark);text-align:left;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
  .werteleiste div:first-child{border-top:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
@media print{
  .kopf,.fuss,.anzeige,.anzeige-breit,.rechner,.nachbarn{display:none}
  body{background:#fff}
}

/* Von weihmann.de eingebundene Rechtstexte */
.legal{max-width:78ch}
.legal h1{margin-bottom:20px}
.legal h2{font-size:1.3rem;margin:32px 0 10px}
.legal h3{font-size:1.08rem}
.legal ul,.legal ol{margin:0 0 16px 22px}
.legal li{margin-bottom:6px;max-width:66ch}
.legal table{margin-bottom:18px}
.legal a{overflow-wrap:anywhere}
.rechner-hinweis{margin:16px 0 0;font-size:.94rem;color:var(--tinte-weich)}

/* Hinweis-Kasten, etwa fuer den Gesundheitshinweis auf der Fieberseite */
.hinweis{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  background:#fdf5f3;border:2px solid var(--rot);border-left-width:8px;border-radius:12px;
  padding:20px 24px;margin:26px 0}
.hinweis-zeichen{display:grid;place-items:center;width:38px;height:38px;flex:none;
  border-radius:50%;background:var(--rot);color:#fff;
  font-family:var(--serif);font-size:1.5rem;font-weight:800;line-height:1}
.hinweis-text{min-width:0}
.hinweis-text b{display:block;font-size:.71rem;font-weight:800;letter-spacing:.17em;
  text-transform:uppercase;color:var(--rot);margin-bottom:6px}
.hinweis-text p{margin:0;color:#2b251d;max-width:62ch}
@media(max-width:520px){
  .hinweis{grid-template-columns:1fr;gap:12px;padding:18px}
}

/* Rechtstexte */
.legal{max-width:78ch}
.legal h1{margin-bottom:10px}
.legal .stand{font-size:.88rem;color:var(--tinte-weich);margin-bottom:30px}
.legal h2{font-size:1.3rem;margin:34px 0 10px}
.legal ul{margin:0 0 16px 22px}
.legal li{margin-bottom:6px;max-width:66ch}
.legal a{overflow-wrap:anywhere}
.kasten{display:block;background:var(--schild);border:2px solid var(--linie-stark);
  border-left-width:6px;border-radius:10px;padding:16px 20px;margin:0 0 16px;
  font-style:normal;line-height:1.7;max-width:52ch}
.einwilligung-knopf{display:inline-block;margin-top:6px;padding:12px 20px;min-height:44px;
  background:var(--navy);color:#fff;border:2px solid var(--navy);border-radius:10px;
  font-family:var(--sans);font-size:.95rem;font-weight:600;cursor:pointer;
  transition:background .3s,color .3s}
.einwilligung-knopf:hover{background:var(--schild);color:var(--navy)}
.hinweis-klein{display:block;margin-top:10px;font-size:.88rem;color:var(--tinte-weich)}
/* Negative Werte heissen "minus 40 °F" und brauchen mehr Platz, sonst brechen
   sie um und ziehen die ganze Zeile auf doppelte Hoehe. */
.wertliste a.breit{grid-column:span 2}