/* =====================================================================
   zahnklinik.css – Ergänzung zu zahnimplantate.css für die Landingpage
   „Zahnklinik in Darmstadt". Es sind nur drei Bausteine, die der
   gemeinsame Landingpage-Baukasten noch nicht hat:

     .zk-fields   die acht Fachbereiche als Karten mit Linkliste
     .zk-tech     Technik im Haus, Bildkarten
     .zk-chips    Stadtteile und Umland

   Alles andere (Hero, Kapitel, Vergleichstabelle, Zeitleiste, Arzt,
   Rezensionen, FAQ, Abschluss) kommt unverändert aus zahnimplantate.css
   und gilt damit auch auf dem Handy, wo einseitig.css nur die Farbtoken
   austauscht.
   ===================================================================== */

/* --- Bildausschnitt des Heros ---------------------------------------
   Das Motiv hat die leere Flurhälfte links, den Tresen rechts. Der
   Baukasten schiebt das Bild sonst weit nach rechts (72 % / 40 %) und
   auf dem Handy nach oben (62 % / 12 %) – beides passt hier nicht.
   -------------------------------------------------------------------- */
.imp-hero-bg{object-position:55% 50%;}
@media (max-width:900px){ .imp-hero-bg{object-position:66% 38%;} }

/* --- Kapitelnummern --------------------------------------------------
   Der Baukasten gibt der Ziffernspalte feste 120 px. Solange Fraunces
   geladen ist, passen „01" bis „08" hinein (105 px bei 112 px Schrift).
   Fällt die Schrift auf den Systemserif zurück – beim ersten Aufbau
   oder wenn die Datei fehlt –, werden die Ziffern breiter und die
   zweite rechts abgeschnitten. Die Spalte darf deshalb mitwachsen.
   -------------------------------------------------------------------- */
.chapter-head{grid-template-columns:minmax(120px,max-content) 1fr;}
.chapter-head .no{overflow:visible; padding-right:4px;}
@media (max-width:760px){ .chapter-head{grid-template-columns:1fr;} }

/* --- Fachbereiche ----------------------------------------------------
   Acht Karten, in jeder die Behandlungsseiten des Bereichs. Jede Karte
   ist ein <details>: auf dem Rechner stehen alle offen, auf dem Handy
   klappt das Skript am Ende von main.html sie zu, damit die acht
   Bereiche auf einen Blick passen. Ohne Javascript bleiben sie offen –
   dann ist die Liste nur lang, nicht kaputt.

   Der Kopf der Karte ist ein Raster mit benannten Feldern. Auf dem
   Rechner stehen Bild und Nummer nebeneinander, der Titel
   darunter über die volle Breite – so kann kein Titel und keine Zahl
   mehr in einer zu engen Spalte abgeschnitten werden. Auf dem Handy
   wandert alles in eine Zeile: Bild · Titel · Pfeil.
   -------------------------------------------------------------------- */
.zk-fields{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;}

.zk-field{
  position:relative; overflow:hidden;
  background:var(--card); border:1px solid var(--rule);
  border-radius:var(--radius-md); padding:20px 20px 18px;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.zk-field::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  opacity:0; transition:opacity .25s ease;
}
.zk-field:hover{
  border-color:color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow:0 22px 44px -30px rgba(42,38,34,.55);
  transform:translateY(-2px);
}
.zk-field:hover::before{opacity:1;}

/* Kopf der Karte */
.zk-field > summary{
  display:grid; list-style:none; cursor:default;
  grid-template-columns:auto 1fr;
  grid-template-areas:"bild nr" "titel titel";
  align-items:start;
}
.zk-field > summary::-webkit-details-marker{display:none;}
.zk-pic{
  grid-area:bild; width:72px; height:72px; display:block;
  border-radius:18px; object-fit:cover; background:var(--bg3);
  border:1px solid color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow:0 6px 14px -8px rgba(42,38,34,.45);
  transition:transform .3s ease;
}
.zk-field:hover .zk-pic{transform:scale(1.05);}
.zk-no{
  grid-area:nr; justify-self:end; align-self:start;
  font:500 40px/1 'Fraunces',Georgia,serif; letter-spacing:-.03em;
  color:color-mix(in srgb, var(--accent) 28%, transparent);
}
.zk-field h3{
  grid-area:titel; font-size:20px; line-height:1.15;
  margin:18px 0 0; color:var(--fg-strong);
}
.zk-chev{display:none;}

/* Rumpf der Karte */
.zk-body > p{font-size:13.5px; line-height:1.6; color:var(--dim); margin:16px 0 2px;}
.zk-field ul{list-style:none; margin:10px 0 0; padding:0;}
.zk-field li{border-top:1px solid var(--rule);}
.zk-field a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 0; text-decoration:none; color:var(--fg);
  font:500 14px 'Inter',sans-serif; line-height:1.35;
  transition:color .2s ease;
}
.zk-field a::after{
  content:"\2192"; color:var(--accent); opacity:0;
  transform:translateX(-4px); transition:opacity .2s ease, transform .2s ease;
}
.zk-field a:hover{color:var(--accent);}
.zk-field a:hover::after{opacity:1; transform:none;}
.zk-field a:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}
.zk-more{margin-top:12px; border-top:1px solid var(--rule); padding-top:12px;}
.zk-more a{font-size:13px; color:var(--accent); justify-content:flex-start; padding:0;}
.zk-more a::after{content:none;}

@media (max-width:1000px){ .zk-fields{grid-template-columns:repeat(2,minmax(0,1fr));} }

@media (max-width:640px){
  .zk-fields{grid-template-columns:1fr; gap:10px;}
  .zk-field{padding:0; border-radius:15px;}
  .zk-field:hover{transform:none; box-shadow:none; border-color:var(--rule);}
  .zk-field:hover::before{opacity:0;}   /* der Finger bleibt nach dem Tippen „auf" der Karte */
  .zk-field > summary{
    grid-template-columns:56px 1fr auto;
    grid-template-areas:"bild titel pfeil";
    align-items:center; column-gap:13px; align-content:center;
    padding:12px 15px; cursor:pointer;
  }
  .zk-field[open] > summary{border-bottom:1px solid var(--rule);}
  .zk-pic{width:56px; height:56px; border-radius:14px;   /* 24 % – das Mass der App-Symbole */
          box-shadow:0 2px 5px rgba(30,42,36,.18);}
  .zk-field:hover .zk-pic{transform:none;}
  .zk-no{display:none;}
  .zk-field h3{font-size:17px; margin:0;}
    .zk-chev{
    display:block; grid-area:pfeil; width:18px; height:18px;
    fill:none; stroke:currentColor; color:var(--dim);
    transition:transform .25s ease;
  }
  .zk-field[open] .zk-chev{transform:rotate(180deg);}
  .zk-body{padding:2px 15px 8px;}
  .zk-body > p{margin:10px 0 0; font-size:13px;}
  .zk-field ul{margin-top:6px;}
  .zk-field a{padding:13px 0; font-size:14.5px;}
  .zk-field a::after{opacity:1; transform:none; color:var(--dim);}
  .zk-more a{padding:0;}
}

/* --- Technik im Haus -------------------------------------------------
   Flache Zeilen statt hoher Bildkacheln: Bild links als kleines Quadrat,
   Text rechts. Der Block ist damit rund ein Viertel so hoch wie vorher.
   Auf dem Handy sind die Bildchen als App-Symbole gestaltet – gerundetes
   Quadrat mit Schattenkante, wie auf einem iPhone-Startbildschirm.
   -------------------------------------------------------------------- */
.zk-tech{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;}
.zk-tech a{
  text-decoration:none; color:inherit; background:var(--card);
  border:1px solid var(--rule); border-radius:var(--radius-md);
  display:flex; align-items:flex-start; gap:14px; padding:16px 16px 17px;
  transition:transform .25s ease, border-color .25s ease;
}
.zk-tech a:hover{transform:translateY(-3px); border-color:var(--accent);}
.zk-tech img{
  width:56px; height:56px; flex:none; display:block;
  border-radius:14px; object-fit:cover; background:var(--bg3);
}
.zk-tech .body{min-width:0; padding:0;}
.zk-tech h3{font-size:15.5px; line-height:1.2; margin:1px 0 6px; color:var(--fg-strong);}
.zk-tech p{font-size:12.5px; line-height:1.5; color:var(--dim);}
@media (max-width:1000px){ .zk-tech{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:640px){
  .zk-tech{grid-template-columns:1fr; gap:8px;}
  .zk-tech a{padding:12px 14px; gap:13px; align-items:center; border-radius:15px;}
  .zk-tech a:hover{transform:none; border-color:var(--rule);}
  .zk-tech img{
    width:54px; height:54px;
    border-radius:13px;                       /* 24 % – das Mass der App-Symbole */
    box-shadow:0 2px 5px rgba(30,42,36,.18), 0 0 0 .5px rgba(30,42,36,.12) inset;
  }
  .zk-tech h3{font-size:15px; margin-bottom:3px;}
  .zk-tech p{font-size:12.5px;}
}

/* --- Teamleiste ------------------------------------------------------
   Die Leiste selbst kommt unverändert von der Karriereseite (.kr-pan-*
   in styles.css und mobile.css). Hier nur die Verweise im Vorspann, die
   im Kapitelkopf sonst wie gewöhnlicher Fliesstext aussehen.
   -------------------------------------------------------------------- */
#k4 .chapter-head p a{color:var(--accent); text-decoration:underline; text-underline-offset:3px;}
#k4 .chapter-head p a:hover{text-decoration-thickness:2px;}

/* mobile.css gibt .review die Breite der alten Wischreihe (min(78vw,300px)).
   Hier stehen die Karten untereinander im Raster und sollen die volle
   Spaltenbreite haben. */
@media (max-width:640px){ #k4 .review{width:auto;} }

/* --- Stadtteile und Umland ------------------------------------------- */
.zk-area{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;}
.zk-area p{color:var(--dim); font-size:15.5px; margin-bottom:14px;}
.zk-chips-t{
  font:600 11.5px 'Inter',sans-serif; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim); margin:0 0 10px;
}
.zk-chips-t2{margin-top:20px;}
.zk-chips{display:flex; flex-wrap:wrap; gap:8px;}
.zk-chips span{
  font:500 13.5px 'Inter',sans-serif; color:var(--dim);
  border:1px solid var(--rule); border-radius:999px; padding:7px 14px;
  background:var(--card);
}
@media (max-width:900px){ .zk-area{grid-template-columns:1fr; gap:26px;} }
@media (max-width:640px){ .zk-chips span{font-size:12.5px; padding:6px 11px;} }