/* =====================================================================
   themen.css – Ergänzung zu zahnimplantate.css für die Themenseiten
   notfall.html, angstpatienten.html und mundgeruch.html.

   Der Landingpage-Baukasten liefert Hero, Kapitel, Zeitleiste, Ehrlich-
   Karten, Arztblock, Rezensionen, FAQ und Abschluss. Hier stehen nur die
   Bausteine, die es dort noch nicht gibt:

     .th-tri     drei Dringlichkeits-Spalten (rot / bernstein / grün)
     .th-grid    Tipp-Karten mit Strichsymbol
     .th-list    Ursachen als zweispaltige Liste mit Verweisen
     .th-hot     Notdienst-Karte mit großer Nummer (dunkles Panel)
     .th-ways    drei Wege (Schritt für Schritt / Sedierung / Narkose)
     .th-two     Text neben Bild oder Karte

   Alles arbeitet mit den Token des Baukastens (--card, --rule, --accent …),
   die einseitig.css auf dem Handy auf die Sandtöne umstellt. Eigene Farben
   gibt es nur für die drei Dringlichkeitsstufen.
   ===================================================================== */

/* --- Kapitelnummern (wie zahnklinik.css) ------------------------------
   Fällt Fraunces aus, werden „01"–„07" breiter als die festen 120 px. */
.th-page .chapter-head{grid-template-columns:minmax(120px,max-content) 1fr;}
.th-page .chapter-head .no{overflow:visible; padding-right:4px;}
@media (max-width:760px){ .th-page .chapter-head{grid-template-columns:1fr;} }

/* --- Bildausschnitt der Heros ------------------------------------------
   Die Motive haben die Personen rechts, links Luft für den Text. */
.th-notfall .imp-hero-bg{object-position:72% 45%;}
.th-angstpatienten .imp-hero-bg{object-position:60% 45%;}
.th-mundgeruch .imp-hero-bg{object-position:66% 40%;}
@media (max-width:900px){
  .th-notfall .imp-hero-bg{object-position:70% 40%;}
  .th-angstpatienten .imp-hero-bg{object-position:58% 40%;}
  .th-mundgeruch .imp-hero-bg{object-position:64% 30%;}
}

/* --- Kürzerer Hero auf allen drei Seiten ------------------------------
   Der Baukasten legt den Hero am Rechner auf volle Fensterhöhe (100 vh).
   Bei hohen Fenstern wird das 16:9-Bild dann stark beschnitten und
   hochskaliert und wirkt unscharf. Hier: begrenzte Höhe, weniger Luft,
   Überschrift eine Stufe kleiner. Auf dem Handy bleibt der Aufbau der
   Startseite (einseitig.css), nur die Überschrift wird etwas kleiner. */
@media (min-width:641px){
  .th-page .imp-hero{min-height:clamp(560px,78vh,820px);}
  .th-page .imp-hero-inner{padding:40px 0 70px;}
  .th-page .imp-hero h1{font-size:clamp(2.6rem,5.4vw,4.8rem);}
  .th-page .imp-hero p.lead{max-width:480px;}
}
@media (max-width:640px){
  .th-page .imp-hero h1{font-size:clamp(1.6rem,6.4vw,2.05rem);}
}

/* --- Dringlichkeit: drei Spalten --------------------------------------- */
.th-tri{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;}
.th-tri > div{
  min-width:0; background:var(--card); border:1px solid var(--rule);
  border-top:4px solid var(--accent); border-radius:var(--radius-lg);
  padding:28px 26px 26px;
}
.th-tri > div.now{border-top-color:#B8322A;}
.th-tri > div.today{border-top-color:#C98A1B;}
.th-tri > div.soon{border-top-color:var(--good);}
.th-tri .tag{
  display:inline-block; font:600 11.5px 'Inter',sans-serif; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim); margin-bottom:8px;
}
.th-tri > div.now .tag{color:#B8322A;}
.th-tri > div.today .tag{color:#A66F0F;}
.th-tri > div.soon .tag{color:var(--good);}
.th-tri h3{font-size:22px; margin:0 0 14px;}
.th-tri ul{list-style:none; margin:0; padding:0; display:grid; gap:9px;}
.th-tri li{position:relative; padding-left:18px; font-size:15px; line-height:1.5; color:var(--fg);}
.th-tri li::before{
  content:""; position:absolute; left:0; top:.62em; width:7px; height:7px;
  border-radius:50%; background:currentColor; opacity:.45;
}
.th-tri .then{
  margin-top:18px; padding-top:14px; border-top:1px solid var(--rule);
  font:600 14px 'Inter',sans-serif; color:var(--fg-strong);
}
.th-tri .then a{color:var(--accent); text-decoration:underline; text-underline-offset:3px;}
@media (max-width:900px){ .th-tri{grid-template-columns:1fr;} }

/* --- Tipp-Karten -------------------------------------------------------- */
.th-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;}
.th-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));}
.th-card{
  min-width:0; background:var(--card); border:1px solid var(--rule);
  border-radius:var(--radius-md); padding:24px 22px 22px;
  display:grid; gap:10px; align-content:start;
}
.th-card svg{
  width:30px; height:30px; fill:none; stroke:var(--accent); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.th-card h3{font-size:19px; margin:0;}
.th-card p{font-size:14.5px; color:var(--dim); margin:0;}
.th-card p strong{color:var(--fg-strong); font-weight:600;}
:root:not([data-theme="dark"]) .th-card{background:rgba(255,253,249,.8);}
@media (max-width:900px){ .th-grid, .th-grid.two{grid-template-columns:1fr;} }

/* --- Ursachen-Liste ----------------------------------------------------- */
.th-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px;}
.th-list > div{min-width:0; padding:22px 0 20px; border-top:1px solid var(--rule);}
.th-list h3{font-size:19px; margin:0 0 6px;}
.th-list p{font-size:14.5px; color:var(--dim); margin:0;}
.th-list p a{color:var(--accent); text-decoration:underline; text-underline-offset:3px;}
.th-list .rare{font:600 11.5px 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-left:8px;}
@media (max-width:900px){ .th-list{grid-template-columns:1fr;} }

/* --- Notdienst-Karte ---------------------------------------------------- */
.th-hot{
  display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;
  background:var(--dark-panel); color:var(--dark-panel-fg);
  border-radius:var(--radius-lg); padding:44px 46px;
}
.th-hot .eyebrow{color:var(--blue-light);}
.th-hot h3{font-size:clamp(1.6rem,2.6vw,2.2rem); color:inherit; margin:8px 0 14px;}
.th-hot p{color:inherit; opacity:.8; font-size:15.5px; margin:0 0 10px;}
.th-hot p a{color:inherit; text-decoration:underline; text-underline-offset:3px;}
.th-hot .num{
  display:block; text-decoration:none; color:inherit;
  border:1px solid rgba(255,255,255,.18); border-radius:var(--radius-md);
  padding:26px 28px; text-align:center;
}
.th-hot .num small{display:block; font:600 11.5px 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase; opacity:.7;}
.th-hot .num b{display:block; font:500 clamp(1.9rem,3.4vw,2.8rem)/1.1 'Fraunces',serif; margin:8px 0 6px; letter-spacing:.01em; white-space:nowrap;}
.th-hot .num span{display:block; font-size:13px; opacity:.7;}
.th-hot .num + .num{margin-top:12px;}
.th-hot .num.red{border-color:rgba(255,120,110,.5);}
.th-hot .num.red b{color:#FF9A8F;}
@media (max-width:900px){ .th-hot{grid-template-columns:1fr; padding:30px 24px;} }

/* --- Drei Wege ---------------------------------------------------------- */
.th-ways{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;}
.th-way{
  min-width:0; background:var(--card); border:1px solid var(--rule);
  border-radius:var(--radius-lg); padding:30px 28px 28px; display:grid; gap:12px; align-content:start;
}
.th-way .step{font:600 11.5px 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);}
.th-way h3{font-size:24px; margin:0;}
.th-way p{font-size:14.5px; color:var(--dim); margin:0;}
.th-way ul{list-style:none; margin:4px 0 0; padding:0; display:grid; gap:7px;}
.th-way li{position:relative; padding-left:18px; font-size:14.5px; color:var(--fg);}
.th-way li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--accent); opacity:.5;}
.th-way .for{margin-top:6px; padding-top:12px; border-top:1px solid var(--rule); font-size:13.5px; color:var(--dim);}
.th-way .for a{color:var(--accent); text-decoration:underline; text-underline-offset:3px;}
:root:not([data-theme="dark"]) .th-way{background:rgba(255,253,249,.8);}
@media (max-width:900px){ .th-ways{grid-template-columns:1fr;} }

/* --- Text neben Bild ---------------------------------------------------- */
.th-two{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center;}
.th-two figure{margin:0; border-radius:var(--radius-lg); overflow:hidden;}
.th-two img{width:100%; height:100%; object-fit:cover; display:block;}
.th-two p{color:var(--dim); font-size:15.5px; margin-bottom:12px;}
.th-two p a{color:var(--accent); text-decoration:underline; text-underline-offset:3px;}
.th-two h3{font-size:clamp(1.5rem,2.4vw,2rem); margin:8px 0 12px;}
@media (max-width:900px){ .th-two{grid-template-columns:1fr;} .th-two figure{order:-1;} }

/* --- Kennzahl im Fließtext --------------------------------------------- */
.th-stat{
  display:grid; grid-template-columns:1fr; gap:10px; align-items:start;
  padding:22px 26px; border:1px solid var(--rule); border-radius:var(--radius-md);
  background:var(--card); margin:18px 0 8px;
}
.th-stat b{font:500 clamp(2rem,4vw,3rem)/1 'Fraunces',serif; color:var(--accent); white-space:nowrap;}
.th-stat span{font-size:14.5px; color:var(--dim);}
:root:not([data-theme="dark"]) .th-stat{background:rgba(255,253,249,.8);}

/* --- Handy --------------------------------------------------------------
   Die Strichsymbole tragen width/height im Markup, damit einseitig.css sie
   nicht auf 16 px setzt. Der Rest stapelt sich über die 900-px-Regeln. */
@media (max-width:640px){
  .th-tri > div, .th-way{padding:24px 20px 22px;}
  .th-hot{padding:26px 20px;}
  .th-hot .num{padding:20px 18px;}
}