/* Vogt Tragwerksplanung : Seitenspezifisch. Konzept A "Das Kapitelband". */

/* ---------- Kapitelband: das Signature-Element ---------- */
.kapitel{position:relative;padding-top:var(--luft);margin-bottom:clamp(2.5rem,5vw,4rem)}
.kapitel__ziffer{
  position:absolute;left:calc(var(--rand) * -1 - .26em);top:calc(var(--luft) - .40em);
  font-size:clamp(7rem,17vw,15.5rem);font-weight:700;line-height:.94;
  letter-spacing:-.05em;pointer-events:none;user-select:none;
  color:var(--akzent-blass);
}
@supports (-webkit-text-stroke:1px black){
  .kapitel__ziffer{
    color:transparent;
    -webkit-text-stroke:clamp(1.5px,.28vw,3px) var(--akzent);
  }
}
.kapitel__kopf{position:relative;margin-left:var(--versatz);max-width:44rem}
.kapitel__name{
  margin:0 0 1.1rem;font-size:.79rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--akzent-tief);
}
.kapitel__titel{font-size:clamp(1.9rem,4.2vw,3.35rem)}
.kapitel__lead{margin-top:1.35rem;max-width:36rem;color:var(--tinte-2);font-size:1.06em}

.sektion{padding-inline:var(--rand);position:relative}
.sektion--flaeche{background:var(--papier-2);padding-bottom:var(--luft)}
.spalte{margin-left:var(--versatz)}
.akzent{color:var(--akzent-tief);font-weight:500}

/* ---------- 01 Hero ---------- */
.hero{padding:0 var(--rand) var(--luft);position:relative}
.hero__raster{display:grid;grid-template-columns:repeat(12,1fr);align-items:end}
.hero__film{
  grid-column:1 / 9;grid-row:1;position:relative;
  aspect-ratio:16/10;overflow:hidden;background:var(--papier-3);
}
.hero__film video,.hero__film img{width:100%;height:100%;object-fit:cover;filter:var(--bild-filter)}
/* Ausnahme: Dieser Schalter liegt auf dem Film und braucht dort eine Platte,
   sonst ist er auf hellen Bildstellen nicht lesbar. */
.hero__pause{
  position:absolute;left:1rem;bottom:1rem;z-index:3;
  background:rgba(16,20,15,.74);color:#EDEFEA;padding:.6rem .9rem .55rem;
  --fokus-kern:#EDEFEA;--fokus-ring:rgba(16,20,15,.92);
}
.hero__pause::after{background:#9CD1B0;left:.9rem;right:.9rem;bottom:.4rem}
.hero__pause:hover{color:#fff}
.hero__panel{
  grid-column:7 / 13;grid-row:1;position:relative;z-index:2;
  background:var(--papier);
  padding:clamp(1.75rem,3.2vw,3rem) 0 0 clamp(1.75rem,3.2vw,3rem);
  margin-bottom:clamp(-1rem,-3vw,-3rem);
}
.hero__ziffer{
  font-size:.79rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--akzent-tief);margin:0 0 1.4rem;
}
.hero h1{font-size:clamp(1.85rem,3.5vw,3.2rem);letter-spacing:-.028em}
.hero__unter{margin-top:1.5rem;max-width:30rem;color:var(--tinte-2)}
/* Auf breiten Schirmen passen alle vier Länder in eine Zeile. Wo nicht, wird daraus
   ein sauberes Zweispaltenraster statt eines 2+1+1-Umbruchs (Mitch, 13.08.2026). */
.hero__orte{
  margin-top:2rem;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tinte-2);
}
.hero__tat{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:.9rem}
/* Der Handlungsknopf: zwei Felder mit einer 1px-Fuge dazwischen, wie zwei
   aneinandergesetzte Profile. Das Zeichenfeld wächst beim Zeigen. */
.knopf{
  display:inline-grid;grid-template-columns:3.3rem minmax(0,1fr);
  gap:1px;padding:1px;min-height:56px;
  font:inherit;font-weight:500;text-decoration:none;border:0;cursor:pointer;
  text-align:left;
}
.knopf > span{display:flex;align-items:center;transition:background var(--dauer) ease,color var(--dauer) ease}
.knopf__mal{justify-content:center;font-size:1.05em;transition:none}
.knopf__text{padding:0 1.4rem}
.knopf--voll{background:var(--akzent-tief)}
.knopf--voll > span{background:var(--akzent);color:var(--knopf-text)}
.knopf--voll:hover > span{background:var(--akzent-tief)}
.knopf--leer{background:var(--tinte)}
.knopf--leer > span{background:var(--papier);color:var(--tinte)}
.knopf--leer:hover > span{background:var(--tinte);color:var(--papier)}
.knopf--leer .knopf__mal{color:var(--akzent-tief)}
.knopf--leer:hover .knopf__mal{color:var(--papier)}
/* Das Zeichenfeld wächst beim Zeigen um zwei Rasterschritte. */
.knopf{transition:grid-template-columns var(--dauer) cubic-bezier(.22,.61,.36,1)}
.knopf:hover,.knopf:focus-visible{grid-template-columns:4.1rem minmax(0,1fr)}
@media (prefers-reduced-motion:reduce){.knopf:hover,.knopf:focus-visible{grid-template-columns:3.3rem minmax(0,1fr)}}

/* ---------- 02 Projekte: gleich große Bilder, aufgeräumt ----------
   Mitch, 13.08.2026: In einer Projektübersicht dürfen die Bilder NICHT unterschiedlich
   groß sein. Der Charakter kommt hier aus dem nach rechts versetzten Raster und aus der
   angeschnittenen Kapitelziffer, nicht aus wechselnden Bildformaten. */
.projekte{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(2.2rem,4vw,3.2rem) clamp(1.5rem,2.6vw,2.2rem);margin-top:1rem;
  align-items:start;
}
.projekt{margin:0}
.projekt__bild{overflow:hidden;background:var(--papier-3);aspect-ratio:4/3}
.projekt__bild img{
  width:100%;height:100%;object-fit:cover;filter:var(--bild-filter);
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1);
}
.projekt:hover .projekt__bild img{transform:scale(1.035)}
.projekt figcaption{margin-top:1rem}
.projekt__these{font-size:clamp(1.1rem,1.55vw,1.35rem);font-weight:500;letter-spacing:-.018em;line-height:1.22}
.projekt__daten{
  margin-top:.65rem;display:flex;flex-wrap:wrap;gap:.25rem .85rem;
  font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--tinte-2);
}
.projekt__ort{color:var(--akzent-tief);font-weight:700}

/* ---------- 03 Zahlen: gestaffelte Reihe, keine vier gleichen Kacheln ---------- */
.zahlen{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.6rem,3vw,2.6rem);margin-top:1rem}
.zahl{grid-column:span 3;border-top:1px solid var(--linie-stark);padding-top:1.1rem}
.zahl:nth-child(2){margin-top:clamp(1rem,3vw,3.2rem)}
.zahl:nth-child(3){margin-top:clamp(2rem,6vw,6.4rem)}
.zahl:nth-child(4){margin-top:clamp(3rem,9vw,9.6rem)}
.zahl__wert{font-size:clamp(2.6rem,5.6vw,4.6rem);font-weight:700;line-height:.98;letter-spacing:-.045em;display:block}
.zahl__wert>span{font-size:.3em;font-weight:500;letter-spacing:.01em;margin-left:.5em}
.zahl__text{display:block;margin-top:.75rem;color:var(--tinte-2);font-size:.96rem;max-width:15rem}
.zahlen__fussnote{margin-top:clamp(2.5rem,5vw,4rem);max-width:34rem;color:var(--tinte-2);font-size:.95rem}

/* ---------- 04 Leistungen: Liste mit Trennlinien, keine Icon-Kacheln ---------- */
.leistungen{border-top:1px solid var(--linie-stark);margin-top:1rem}
.leistung{
  display:grid;grid-template-columns:3.2rem minmax(0,15rem) minmax(0,1fr);
  gap:.4rem 1.8rem;align-items:baseline;
  padding:1.5rem 0;border-bottom:1px solid var(--linie);
}
.leistung__nr{font-size:.78rem;font-weight:700;letter-spacing:.12em;color:var(--akzent-tief)}
.leistung__titel{font-size:clamp(1.15rem,1.7vw,1.45rem);font-weight:500;letter-spacing:-.018em}
.leistung__text{color:var(--tinte-2);margin:0}
.bildband{
  margin-top:clamp(3rem,6vw,5rem);margin-right:calc(var(--rand) * -1);
  position:relative;
}
.bildband img{width:100%;aspect-ratio:21/8;object-fit:cover;filter:var(--bild-filter)}
.bildband figcaption{
  margin-top:.8rem;font-size:.84rem;color:var(--tinte-2);
  max-width:34rem;padding-right:var(--rand);
}

/* ---------- 05 Team: fünf gleich große Porträts ----------
   Mitch, 13.08.2026: Jeder Mitarbeiter ist gleich viel wert, also gleiche Bildgröße.
   Struktur darf sein, deshalb der leichte Höhenversatz jeder zweiten Person. */
.team{margin-top:1rem}
.zitat{
  margin:0 0 clamp(2.5rem,5vw,4rem);max-width:34rem;
  font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.3;letter-spacing:-.015em;
}
.zitat cite{
  display:block;margin-top:1rem;font-style:normal;font-size:.82rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tinte-2);
}
.leute{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(1rem,2vw,1.8rem);align-items:start}
.person{margin:0}
.person:nth-child(even){margin-top:clamp(1.2rem,2.6vw,2.4rem)}
.person__bild{overflow:hidden;background:var(--papier-3);aspect-ratio:4/5}
.person__bild img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04) var(--bild-filter)}
.person__name{margin-top:.85rem;font-weight:500;font-size:1rem}
.person__rolle{color:var(--tinte-2);font-size:.88rem;margin-top:.15rem}

/* ---------- 06 Karriere ---------- */
.karriere{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2rem,4vw,3.5rem);align-items:stretch;margin-top:1rem}
.karriere__bild{grid-column:1 / 6;min-height:100%}
.karriere__bild img{width:100%;height:100%;min-height:22rem;object-fit:cover;filter:var(--bild-filter)}
.karriere__text{grid-column:7 / 13}
.karriere__text h3{font-size:clamp(1.4rem,2.4vw,2rem);margin-bottom:1.1rem}
.karriere__punkte{margin:1.6rem 0 1.9rem;border-top:1px solid var(--linie)}
.karriere__punkte li{padding:.75rem 0;border-bottom:1px solid var(--linie);display:flex;gap:.9rem}
.karriere__punkte li::before{content:"→";color:var(--akzent-tief);flex:0 0 auto}

/* ---------- 07 Kontakt ---------- */
.kontakt{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2rem,4vw,3.5rem);margin-top:1rem;align-items:start}
.kontakt__daten{grid-column:1 / 5}
.kontakt__daten h3{font-size:1.1rem;margin-bottom:.8rem}
.kontakt__daten address{font-style:normal;line-height:1.9;color:var(--tinte-2)}
.kontakt__daten address a{color:var(--tinte);font-weight:500;display:inline-flex;align-items:center;min-height:44px}
.bogen{grid-column:6 / 13;display:grid;gap:1.3rem;grid-template-columns:1fr 1fr}
.feld{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.feld--breit{grid-column:1 / -1}
.feld label{font-size:.86rem;font-weight:500;letter-spacing:.02em}
.feld label span{color:var(--tinte-2);font-weight:400}
.feld input,.feld textarea{
  font:inherit;color:inherit;background:var(--papier);
  border:1px solid var(--rahmen);padding:.8rem .9rem;min-height:48px;width:100%;
  transition:border-color var(--dauer) ease;
}
.feld textarea{min-height:9.5rem;resize:vertical;line-height:1.6}
.feld input:hover,.feld textarea:hover{border-color:var(--tinte-2)}
.feld input::placeholder,.feld textarea::placeholder{color:var(--tinte-2);opacity:1}
.feld__hinweis{font-size:.85rem;color:var(--tinte-2)}
.feld__fehler{font-size:.85rem;font-weight:500;color:var(--akzent-tief);min-height:1.2em}
.feld[data-fehler="ja"] input,.feld[data-fehler="ja"] textarea{border-color:var(--akzent-tief);border-width:2px}
.bogen__fuss{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center}
.bogen__antwort{font-size:.88rem;color:var(--tinte-2);max-width:24rem}
.bogen__meldung{grid-column:1 / -1;font-weight:500;color:var(--akzent-tief)}

/* ---------- Einblenden beim Scrollen ---------- */
.auf{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.auf[data-da="ja"]{opacity:1;transform:none}

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  .hero__raster{grid-template-rows:auto auto}
  .hero__film{grid-column:1 / 13;grid-row:1;aspect-ratio:16/9}
  .hero__pause{left:auto;right:1rem;top:1rem;bottom:auto}
  .hero__panel{
    grid-column:1 / 11;grid-row:2;margin-bottom:0;margin-top:clamp(-4rem,-5vw,-3rem);
    padding:clamp(1.75rem,3vw,2.5rem) clamp(1.75rem,3vw,2.5rem) 0 clamp(1.75rem,3vw,2.5rem);
  }
  .projekte{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zahl{grid-column:span 6}
  .zahl:nth-child(3){margin-top:1rem}
  .zahl:nth-child(4){margin-top:clamp(1rem,3vw,3.2rem)}
  .leute{grid-template-columns:repeat(3,minmax(0,1fr))}
  .person:nth-child(even){margin-top:0}
  .person:nth-child(2),.person:nth-child(4){margin-top:clamp(1.2rem,2.6vw,2.4rem)}
  .karriere__bild{grid-column:1 / 7}
  .karriere__text{grid-column:7 / 13}
  .kontakt__daten{grid-column:1 / 13}
  .bogen{grid-column:1 / 13}
}

/* ---------- Mobil: alle Mehrspalten-Raster auflösen ---------- */
@media (max-width:768px){
  :root{--versatz:0rem}
  .hero__raster,.zahlen,.karriere,.kontakt{grid-template-columns:1fr}
  .hero__film,.hero__panel,.karriere__bild,.karriere__text,
  .kontakt__daten,.bogen,.zahl{grid-column:1 / -1}
  .projekte{grid-template-columns:1fr}
  .leute{grid-template-columns:repeat(2,minmax(0,1fr))}
  .person:nth-child(n){margin-top:0}
  .person:nth-child(even){margin-top:clamp(1rem,4vw,1.8rem)}
  .hero__raster{grid-template-rows:auto auto}
  .hero__film{grid-row:1;aspect-ratio:5/4}
  .hero__panel{
    grid-row:2;margin-bottom:0;margin-top:-2.75rem;margin-right:3rem;
    padding:1.75rem 0 0 1.5rem;
  }
  .hero__pause{left:auto;right:1rem;top:1rem;bottom:auto}
  .zahl:nth-child(2),.zahl:nth-child(3),.zahl:nth-child(4){margin-top:0}
  .leistung{grid-template-columns:2.6rem minmax(0,1fr);row-gap:.5rem}
  .leistung__text{grid-column:2}
  .bogen{grid-template-columns:1fr}
  .kapitel__ziffer{font-size:clamp(5rem,24vw,8.5rem);top:calc(var(--luft) - .36em)}
  .kapitel__kopf{padding-top:4.6rem}
  .hero__orte{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    gap:.5rem clamp(1rem,4vw,1.6rem);width:fit-content;
  }
  .hero__tat{flex-direction:column;align-items:stretch}
  .hero__tat .knopf{width:100%}
  .bildband{margin-right:calc(var(--rand) * -1)}
  .bildband img{aspect-ratio:16/10}
  .karriere__bild img{min-height:0;aspect-ratio:3/4;max-height:70vh}
}

/* ---------- Sehr schmale Schirme: Knopfbeschriftung bleibt einzeilig ---------- */
@media (max-width:400px){
  .knopf{grid-template-columns:2.8rem minmax(0,1fr)}
  .knopf:hover,.knopf:focus-visible{grid-template-columns:3.4rem minmax(0,1fr)}
  .knopf__text{padding:0 .95rem;font-size:.96rem}
  .hero__orte{font-size:.78rem;letter-spacing:.04em}
}