/* ===========================================================
   FramePoint — Entwurf D
   Gestaltung aus C ("Handschlag"), Aufbau aus B ("Leitwarte").
   Hell. Keine Fremdressourcen. Keine Cookies. Kein Framework.
   Kein JavaScript: das Aufklappen macht <details>.
   =========================================================== */

:root{
  --papier:      #FBFAF7;   /* Seitengrund, warm gebrochenes Weiss */
  --grund:       #F0EEE8;   /* abgesetzter Abschnittsgrund        */
  --weiss:       #FFFFFF;   /* Bildrahmen, Karten                 */
  --tinte:       #15181C;   /* Haupttext, Ueberschriften          */
  --tinte-2:     #4A4F55;   /* Beitext, Bildunterschriften        */
  --linie:       #D6D2C9;   /* Haarlinie hell                     */
  --linie-stark: #15181C;   /* Haarlinie als Kante                */
  --akzent:      #1D4A2E;   /* der einzige Farbton                */
  --rot:         #8E1F18;   /* nur in der Legende                 */
  --gelb:        #6E5410;   /* nur in der Legende                 */

  --schmal: "Bahnschrift", "Arial Narrow", "Liberation Sans Narrow", system-ui, sans-serif;
  --text:   system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --breite: 1180px;
  --rand:   clamp(20px, 4vw, 48px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:5.5rem;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--text);
  font-size:clamp(1rem, 0.975rem + 0.12vw, 1.0625rem);
  line-height:1.62;
  overflow-x:hidden;            /* Sicherung gegen waagerechtes Rutschen */
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; }
a{ color:inherit; }

:focus-visible{
  outline:2px solid var(--akzent);
  outline-offset:3px;
}

.breite{
  max-width:var(--breite);
  margin:0 auto;
  padding-inline:var(--rand);
}

.sprung{
  position:absolute; left:-9999px; top:0;
  background:var(--tinte); color:var(--papier);
  padding:.7rem 1rem; z-index:50; text-decoration:none;
}
.sprung:focus{ left:0; }

/* ---------- Kopf (Aufbau B: Marke mit Zusatz, sieben Ziele) --- */

.kopf{
  position:sticky; top:0; z-index:20;
  background:var(--papier);
  border-bottom:1px solid var(--linie);
}
.kopf-reihe{
  display:flex; align-items:center; justify-content:space-between;
  gap:.6rem 1.5rem; min-height:4rem; flex-wrap:wrap;
  padding-block:.5rem;
}
.marke{ text-decoration:none; display:block; }
.marke-name{
  display:block;
  font-family:var(--schmal);
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.1;
}
.marke-zusatz{
  display:block;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--tinte-2);
}
.kopf-nav{ display:flex; gap:clamp(.7rem,1.8vw,1.5rem); flex-wrap:wrap; }
.kopf-nav a{
  font-size:.86rem;
  color:var(--tinte-2);
  text-decoration:none;
  padding:.35rem 0;
  border-bottom:1px solid transparent;
}
.kopf-nav a:hover{ color:var(--tinte); border-bottom-color:var(--tinte); }

/* ---------- Aufmacher ----------------------------------- */
/* Aufbau B: Text links, Startbild rechts, Zahlen darunter
   noch im Aufmacher — nicht als eigenes Band. */

.aufmacher{
  padding-block:clamp(2.2rem, 5vw, 4.5rem) 0;
}
.aufmacher-gitter{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,460px);
  gap:clamp(1.8rem, 4vw, 3.5rem);
  align-items:start;
}

h1{
  font-family:var(--schmal);
  font-weight:700;
  font-size:clamp(2.4rem, 5.6vw, 4.5rem);
  line-height:1.0;
  letter-spacing:-.012em;
  margin:0 0 clamp(1.1rem,2.4vw,1.8rem);
  text-wrap:balance;
}

.vorlauf{
  margin:0 0 1.9rem;
  font-size:clamp(1.05rem, 1rem + .3vw, 1.22rem);
  line-height:1.56;
  max-width:46ch;
}
.vorlauf:has(+ .vorlauf-schluss){ margin-bottom:1rem; }
.vorlauf-schluss{ font-weight:600; }

.tasten{ display:flex; flex-wrap:wrap; gap:.8rem; margin:0 0 1.8rem; }
.taste{
  display:inline-block;
  padding:.85rem 1.45rem;
  font-size:.97rem;
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  border:2px solid var(--tinte);
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.taste-voll{ background:var(--tinte); color:var(--papier); }
.taste-voll:hover{ background:var(--akzent); border-color:var(--akzent); }
.taste-leer{ background:transparent; color:var(--tinte); }
.taste-leer:hover{ background:var(--tinte); color:var(--papier); }

.signatur{
  margin:0;
  padding-top:1.1rem;
  border-top:1px solid var(--linie);
  font-size:.84rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--tinte-2);
}

/* ---------- Zahlen (im Aufmacher) ----------------------- */

.zahlen{
  list-style:none; margin:clamp(2.2rem,5vw,3.6rem) 0 0; padding:0;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  border-top:1px solid var(--linie-stark);
  border-bottom:1px solid var(--linie-stark);
}
.zahlen li{
  padding:clamp(1.1rem,2.2vw,1.7rem) clamp(.8rem,1.6vw,1.6rem);
  border-left:1px solid var(--linie);
  min-width:0;
}
.zahlen li:first-child{ border-left:0; padding-left:0; }
.zahl{
  display:block;
  font-family:var(--schmal);
  font-weight:700;
  font-size:clamp(2.2rem, 4.2vw, 3.4rem);
  line-height:1;
  letter-spacing:-.01em;
}
.zahl-text{
  display:block;
  margin-top:.4rem;
  font-size:.85rem;
  line-height:1.4;
  color:var(--tinte-2);
}

/* ---------- Abschnitte ---------------------------------- */

.block{ padding-block:clamp(3rem, 7vw, 6rem); }
.block-grund{ background:var(--grund); }

.satz{ max-width:62ch; }
.breite.satz{ max-width:var(--breite); }
.breite.satz > *{ max-width:62ch; }

.kennung{
  margin:0 0 .7rem;
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--tinte-2);
}
.kennung::before{
  content:"";
  display:inline-block;
  width:1.6rem; height:1px;
  margin-right:.65rem;
  vertical-align:.3em;
  background:var(--tinte-2);
}

h2{
  font-family:var(--schmal);
  font-weight:700;
  font-size:clamp(1.85rem, 3.6vw, 3rem);
  line-height:1.07;
  letter-spacing:-.008em;
  margin:0 0 clamp(1rem,2vw,1.5rem);
  text-wrap:balance;
}

.spalte p{ margin:0 0 1.05rem; max-width:62ch; }
.spalte p:last-child{ margin-bottom:0; }

.merksatz{
  margin-top:1.6rem !important;
  padding-left:1.1rem;
  border-left:3px solid var(--akzent);
  font-size:1.06rem;
  line-height:1.5;
}

/* ---------- Leistung: Zweierraster (Aufbau B) ----------- */

.leistungen{
  list-style:none; margin:clamp(2rem,4vw,3rem) 0 0; padding:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(2rem,4vw,3.2rem) clamp(1.8rem,4.5vw,4rem);
}
.leistungen li{
  padding-top:1.1rem;
  border-top:2px solid var(--linie-stark);
  min-width:0;
}
.leistungen h3{
  margin:0 0 .6rem;
  font-family:var(--schmal);
  font-weight:700;
  font-size:clamp(1.35rem, 1.1rem + .9vw, 1.75rem);
  line-height:1.15;
  letter-spacing:.005em;
}
.leistungen p{ margin:0; max-width:52ch; }

/* ---------- Fehleranalyse ------------------------------- */
/* Aufbau B: weisser Block ueber die volle Breite, Kopf links,
   Text rechts, der Schlusssatz als Leiste ueber beide Spalten. */

.block-ki{
  background:var(--weiss);
  border-top:5px solid var(--akzent);
  border-bottom:1px solid var(--linie-stark);
  padding-block:clamp(3.5rem, 8vw, 7rem);
}
.ki-gitter{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.8rem, 5vw, 4.5rem);
  align-items:start;
}
.block-ki .kennung{ color:var(--akzent); }
.block-ki .kennung::before{ background:var(--akzent); }
.h2-gross{
  font-size:clamp(2.2rem, 4.8vw, 3.8rem);
  line-height:1.02;
  letter-spacing:-.01em;
}
.ki-kopf .vorlauf{ margin:0; max-width:34ch; }
.ki-text{ padding-top:clamp(0rem, 2.6vw, 2.3rem); font-size:1.04em; }
.zitat{ font-family:var(--schmal); font-size:1.06em; letter-spacing:.01em; }

.ki-fuss{
  grid-column:1 / -1;
  margin:clamp(1.8rem,3.5vw,2.8rem) 0 0;
  padding-top:1.2rem;
  border-top:1px solid var(--linie-stark);
  font-size:1.08rem;
  line-height:1.5;
  max-width:76ch;
}

/* ---------- Arbeitsweise: nummerierte Schritte ---------- */

.schritte{
  list-style:none; margin:clamp(2rem,4vw,3rem) 0 0; padding:0;
  counter-reset:schritt;
  max-width:54rem;
  border-top:2px solid var(--linie-stark);
}
.schritte li{
  counter-increment:schritt;
  display:grid;
  grid-template-columns:clamp(2.6rem, 6vw, 4.5rem) minmax(0,1fr);
  gap:clamp(.6rem, 2vw, 1.4rem);
  padding:clamp(1.1rem,2.2vw,1.6rem) 0;
  border-bottom:1px solid var(--linie);
}
.schritte li::before{
  content:counter(schritt);
  font-family:var(--schmal);
  font-weight:700;
  font-size:clamp(2rem, 3.6vw, 2.8rem);
  line-height:.95;
  color:var(--tinte-2);
  grid-row:1 / span 2;          /* Ziffer neben BEIDEN Zeilen, nicht nur neben der Ueberschrift */
}
.schritte h3, .schritte p{ grid-column:2; }
.schritte h3{
  margin:0 0 .35rem;
  font-family:var(--schmal);
  font-weight:700;
  font-size:clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
  line-height:1.2;
}
.schritte p{ margin:0; max-width:62ch; }

/* ---------- Bildkacheln (Aufbau B) ---------------------- */
/* Jede Kachel traegt eine Kopfzeile: links der Name, rechts der
   Weg zum Original. Darunter der Rahmen, darunter die Unterschrift. */

.bildkachel{ margin:0; }

.bildkopf{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:.6rem 1.2rem; flex-wrap:wrap;
  padding-bottom:.5rem;
  margin-bottom:.85rem;
  border-bottom:1px solid var(--linie-stark);
}
.bildkopf-name{
  font-family:var(--schmal);
  font-size:1.05rem;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.bildkopf-link{
  font-size:.79rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--tinte-2);
  text-decoration:underline;
  text-underline-offset:2px;
}
.bildkopf-link:hover{ color:var(--akzent); }

/* Haarlinie als Schattenring statt border: das Bild fuellt so die
   volle Breite, ohne den 1,2-px-Versatz bei fast quadratischen Bildern. */
.rahmen{
  background:var(--weiss);
  box-shadow:0 0 0 1px var(--linie), 0 1px 3px 1px rgba(21,24,28,.07);
  overflow-x:auto;
  overflow-y:hidden;
  max-width:100%;
}
.rahmen img{ display:block; width:100%; height:auto; }

.bildtext{
  margin:.85rem 0 0;
  font-size:.9rem;
  line-height:1.5;
  color:var(--tinte-2);
  max-width:66ch;
}
.bildtext b{ color:var(--tinte); font-weight:700; }

/* ---------- Symbolkatalog ------------------------------- */
/* Aufbau B: zwei Blaetter offen, der Rest hinter <details>.
   Volle Breite je Blatt — die Blaetter sind 1500 px breit. */

.blaetter{
  display:grid;
  gap:clamp(2rem, 4vw, 3rem);
  margin-top:clamp(1.6rem, 3vw, 2.4rem);
}
/* Ohne min-width:0 wachsen Rasterzellen auf die Breite ihres Inhalts.
   Die Katalogblaetter sind 1500 px breit — dann laeuft die ganze Seite
   waagerecht ueber, statt dass nur .rahmen schiebt. */
.blaetter > *, .weitere-inhalt > *, .schirme > *{ min-width:0; }
.weitere{ border-top:1px solid var(--linie); padding-top:1.2rem; }
.weitere > summary{
  cursor:pointer;
  list-style:none;
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--schmal);
  font-size:1.1rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:.6rem 0;
}
.weitere > summary::-webkit-details-marker{ display:none; }
.weitere > summary::before{
  content:"+";
  display:inline-grid; place-items:center;
  width:1.7rem; height:1.7rem;
  border:2px solid var(--tinte);
  font-family:var(--text);
  font-size:1.05rem;
  font-weight:700;
  line-height:1;
}
.weitere[open] > summary::before{ content:"–"; }
.weitere > summary:hover{ color:var(--akzent); }
.weitere > summary:hover::before{ border-color:var(--akzent); }
.weitere-inhalt{
  display:grid;
  gap:clamp(2rem, 4vw, 3rem);
  margin-top:clamp(1.4rem, 3vw, 2.2rem);
}
.gewerk-marke{
  margin:clamp(1rem,2vw,1.6rem) 0 0;
  padding-top:.8rem;
  border-top:2px solid var(--linie-stark);
  font-family:var(--schmal);
  font-size:1.3rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.gewerk-marke:first-child{ margin-top:0; }
.blatt-zahl{
  font-family:var(--text);
  font-size:.79rem;
  font-weight:400;
  letter-spacing:.09em;
  color:var(--tinte-2);
  margin-left:.7rem;
}

/* ---------- Arbeiten ------------------------------------ */

.schirme{
  display:grid;
  gap:clamp(2.2rem, 4.5vw, 3.6rem);
  margin-top:clamp(1.6rem, 3vw, 2.4rem);
}

.legende{
  display:flex; flex-wrap:wrap; gap:.4rem 1.4rem;
  margin:clamp(1.6rem,3vw,2.2rem) 0 0;
  font-size:.85rem;
  color:var(--tinte-2);
}
.lg{ display:inline-flex; align-items:center; gap:.45rem; }
.pkt{
  display:inline-block;
  width:.65rem; height:.65rem;
  border-radius:50%;
}
.pkt-stoerung{ background:var(--rot); }
.pkt-ohne{ background:var(--gelb); }
.pkt-keine{ background:var(--akzent); }

.schiebe-hinweis{
  display:none;
  margin:1.4rem 0 0;
  font-size:.82rem;
  color:var(--tinte-2);
}

/* ---------- Person -------------------------------------- */

.person-gitter{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,21rem);
  gap:clamp(1.8rem,4vw,3.5rem);
  align-items:start;
  margin-top:clamp(1.5rem,3vw,2.2rem);
}
/* Aufbau B: das Portraet steht im Textblock, nicht im Aufmacher. */
.person-text{ display:flow-root; }
.portraet{
  float:left;
  width:clamp(150px, 22vw, 230px);
  margin:.35rem clamp(1.1rem,2.4vw,1.8rem) 1rem 0;
}
.portraet img{
  display:block; width:100%;
  background:var(--weiss);
  border:1px solid var(--linie);
  box-shadow:0 2px 10px rgba(21,24,28,.09);
}
.portraet figcaption{
  margin-top:.6rem;
  font-size:.76rem;
  line-height:1.4;
  color:var(--tinte-2);
}

.karte{
  background:var(--weiss);
  border:1px solid var(--linie);
  padding:clamp(1.1rem,2vw,1.5rem);
}
.karte h3{
  margin:0 0 .9rem;
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--tinte-2);
}
.karte dl{ margin:0; }
.karte dl > div{
  display:grid;
  grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);
  gap:.6rem;
  padding:.55rem 0;
  border-top:1px solid var(--linie);
  font-size:.92rem;
  line-height:1.45;
}
.karte dt{ color:var(--tinte-2); }
.karte dd{ margin:0; font-weight:600; }

/* ---------- Kontakt ------------------------------------- */

.block-kontakt{ border-top:1px solid var(--linie-stark); }

.draht{
  display:grid; gap:0;
  margin:clamp(1.8rem,3.5vw,2.6rem) 0 0;
  border-top:1px solid var(--linie);
}
.breite.satz > .draht{ max-width:46rem; }
.draht-zeile{
  display:grid;
  grid-template-columns:7rem minmax(0,1fr);
  align-items:baseline;
  gap:.4rem 1.2rem;
  padding:.95rem 0;
  border-bottom:1px solid var(--linie);
  text-decoration:none;
}
.draht-zeile span{
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tinte-2);
}
.draht-zeile b{
  font-family:var(--schmal);
  font-size:clamp(1.25rem,2.6vw,1.9rem);
  font-weight:700;
  letter-spacing:.01em;
  overflow-wrap:anywhere;
}
.draht-zeile:hover b{ color:var(--akzent); }

/* ---------- Fuss ---------------------------------------- */

.fuss{
  border-top:1px solid var(--linie-stark);
  padding-block:1.6rem 2.2rem;
}
.fuss-reihe{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
  justify-content:space-between; align-items:baseline;
}
.fuss p{ margin:0; font-size:.85rem; color:var(--tinte-2); }
.fuss-links a{ color:var(--tinte-2); text-decoration:underline; text-underline-offset:2px; }
.fuss-links a:hover{ color:var(--tinte); }

/* ---------- Rechtsseiten (Impressum, Datenschutz) ------- */
/* Deren Auszeichnung kommt unveraendert aus den alten Seiten; hier bekommt
   sie nur die Gestaltung von D. Eine Spalte, kein Bild, ruhig zu lesen. */

.rechtstext{ padding-block:clamp(2.5rem, 6vw, 5rem); }
.huelle{
  max-width:var(--breite);
  margin:0 auto;
  padding-inline:var(--rand);
}
.rechtstext__spalte{ max-width:74ch; }

.rechtstext .augenbraue{
  margin:0 0 .7rem;
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--tinte-2);
}
.rechtstext .augenbraue::before{
  content:"";
  display:inline-block;
  width:1.6rem; height:1px;
  margin-right:.65rem;
  vertical-align:.3em;
  background:var(--tinte-2);
}
.rechtstext h1{
  font-size:clamp(2rem, 4vw, 3rem);
  line-height:1.07;
  margin:0 0 1.1rem;
}
.rechtstext h2{
  font-size:clamp(1.3rem, 1.1rem + .8vw, 1.65rem);
  line-height:1.2;
  margin:2.4rem 0 .7rem;
  padding-top:1rem;
  border-top:1px solid var(--linie);
}
.rechtstext .fuehrung{
  font-size:clamp(1.05rem, 1rem + .3vw, 1.2rem);
  line-height:1.56;
  margin:0 0 1.6rem;
}
.rechtstext p{ margin:0 0 1rem; }
.rechtstext ul{ margin:0 0 1rem; padding-left:1.3rem; }
.rechtstext li{ margin-bottom:.4rem; }
.rechtstext a{ color:var(--akzent); text-underline-offset:2px; }
.rechtstext code{
  font-family:Consolas, "Cascadia Mono", monospace;
  font-size:.92em;
  background:var(--grund);
  padding:.1em .35em;
}
.rechtstext .stand{
  margin-top:2.4rem;
  padding-top:1rem;
  border-top:1px solid var(--linie-stark);
  font-size:.85rem;
  color:var(--tinte-2);
}

/* ===========================================================
   Schmale Schirme
   =========================================================== */

@media (max-width:1000px){
  .aufmacher-gitter{ grid-template-columns:minmax(0,1fr); }
  .startbild{ max-width:612px; }
  .person-gitter{ grid-template-columns:minmax(0,1fr); }
  .ki-gitter{ grid-template-columns:minmax(0,1fr); }
  .ki-kopf .vorlauf{ max-width:46ch; }
  .ki-text{ padding-top:0; }
}

@media (max-width:900px){
  /* Bilder bleiben in Originalgroesse und werden geschoben, damit die
     9-px-Schrift darin lesbar bleibt. */
  .rahmen img{ width:auto; max-width:none; }
  .schiebe-hinweis{ display:block; }
  .startbild{ max-width:none; }
}

@media (max-width:700px){
  .leistungen{ grid-template-columns:minmax(0,1fr); }
  .portraet{ float:none; width:min(230px,70%); margin:0 0 1.4rem; }
}

@media (max-width:620px){
  .zahlen{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .zahlen li{ border-left:0; border-top:1px solid var(--linie); padding-inline:0; }
  .zahlen li:nth-child(2),
  .zahlen li:nth-child(4){ border-left:1px solid var(--linie); padding-left:1rem; }
  .zahlen li:first-child, .zahlen li:nth-child(2){ border-top:0; }
  .kopf-nav{ gap:.7rem; }
  .kopf-nav a{ font-size:.8rem; }
  .karte dl > div{ grid-template-columns:minmax(0,1fr); gap:.1rem; }
  .draht-zeile{ grid-template-columns:minmax(0,1fr); gap:.15rem; }
}

/* ---------- Bewegung sparen ----------------------------- */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ---------- Druck --------------------------------------- */

@media print{
  .kopf,.sprung,.schiebe-hinweis{ display:none; }
  body{ background:#fff; }
  .rahmen{ overflow:visible; box-shadow:none; }
  .weitere[open] > summary{ display:none; }
}