/* ==========================================================================
   Zeitreise-Manufaktur — Gestaltungsraster
   Farben, Schrift und Bauteile für alle Seiten.
   Klassennamen entsprechen dem bestehenden Markup, damit die Seiten
   unverändert bleiben können.
   ========================================================================== */

:root{
  /* Gründe */
  --paper:#F2F8F9;
  --paper-deep:#DCEEF2;
  --white:#FFFFFF;
  /* Leitfarben */
  --steel-deep:#1D4E5F;
  --ink:#16303C;
  --steel:#4A7C8C;
  /* Text */
  --ink-soft:#47646F;
  --ink-faint:#5E757E;
  --on-dark:#AAB9BF;
  /* Akzent */
  --apricot:#F2B183;
  --apricot-deep:#DC5314;
  --ember:#C44A12;
  --label-ink:#7A2E08;
  /* Linien */
  --rule-soft:#C2DCE2;

  --sans:'Source Sans 3','Segoe UI',system-ui,-apple-system,sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;

  --wrap-w:1180px;
  --head-h:71px;
  --r:2px;
}

/* ---------- Grundlagen ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-soft);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

h1,h2,h3,h4,h5{
  font-family:var(--sans);
  color:var(--steel-deep);
  letter-spacing:-.02em;
  line-height:1.08;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1 em,h2 em,h3 em{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  color:var(--steel);
  letter-spacing:-.008em;
}
p{margin:0 0 1.1em}

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

.wrap{max-width:var(--wrap-w);margin:0 auto;padding:0 32px}

/* ==========================================================================
   Kopfleiste
   ========================================================================== */
.nav-logo,.nav-links,.nav-cta,.hamburger{font-family:var(--sans)}

/* Die Unterseiten nutzen <nav id="nav">, die Startseite <header class="topbar">.
   Beide bekommen dieselbe Leiste: Logo links, Menü rechts, Luft nach oben. */
#nav,header.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(242,248,249,.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--rule-soft);
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;flex-wrap:nowrap;
  padding-block:15px;
  padding-inline:max(22px,calc((100% - var(--wrap-w)) / 2));
}

.nav-logo{
  display:flex;align-items:center;gap:14px;
  text-decoration:none;flex:none;
}
.nav-icon{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--rule-soft);object-fit:cover;flex:none;
}
.nav-logo-text{
  display:flex;flex-direction:column;line-height:1.15;
  font-family:var(--serif);font-style:italic;font-size:17px;
  color:var(--steel-deep);white-space:nowrap;
}
.nav-logo-text small{
  font-family:var(--sans);font-style:normal;
  font-size:9.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ember);margin-top:3px;
}

.nav-links{list-style:none;margin:0;padding:0;display:flex;gap:22px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.nav-links li{margin:0}
.nav-links a{
  font-size:11.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  padding:6px 0;border-bottom:2px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.nav-links a:hover{color:var(--steel-deep);border-bottom-color:var(--apricot-deep)}
.nav-links a.active{color:var(--steel-deep);border-bottom-color:var(--apricot-deep)}

.nav-cta{
  display:inline-block;background:var(--ink);color:var(--white);
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:11px 20px;border-radius:var(--r);text-decoration:none;
  border:1px solid var(--ink);
  transition:background .18s ease,border-color .18s ease;
}
.nav-cta:hover{background:var(--steel-deep);border-color:var(--steel-deep)}

.hamburger{
  display:none;background:none;cursor:pointer;padding:0;
  border:1px solid var(--rule-soft);border-radius:var(--r);
  width:42px;height:38px;align-items:center;justify-content:center;
  position:relative;
}
.hamburger span,
.hamburger span::before,
.hamburger span::after{
  display:block;width:19px;height:1.5px;background:var(--ink);
  transition:transform .2s ease,opacity .2s ease;
}
.hamburger span::before,.hamburger span::after{content:'';position:absolute;left:11px}
.hamburger span::before{top:12px}
.hamburger span::after{top:24px}
.hamburger.open span{background:transparent}
.hamburger.open span::before{transform:translateY(6px) rotate(45deg)}
.hamburger.open span::after{transform:translateY(-6px) rotate(-45deg)}

.mobile-menu{
  display:none;
  border-top:1px solid var(--rule-soft);
  background:var(--paper);
}
.mobile-menu.open{display:block}
.mobile-menu a{
  display:block;padding:13px 32px;text-decoration:none;
  font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid var(--rule-soft);
}
.mobile-menu a:last-child{border-bottom:none}
.mobile-menu a:hover{background:var(--paper-deep);color:var(--steel-deep)}

/* ==========================================================================
   Seitenkopf
   ========================================================================== */
/* Seitenkopf: dunkle Sektion des Farbsystems.
   Gibt jeder Unterseite Gewicht und setzt sich klar vom hellen Inhalt ab.
   Kontraste auf steel-deep: paper 8,48:1 · paper-deep 7,61:1 · apricot 4,94:1 */
/* Seitenkopf: Vollformat-Foto, entsättigt und ins Petrol getönt,
   darüber ein feiner Rahmen mit apricotfarbenen Ecken.
   Kontraste auf dem getönten Grund: paper 8,5:1 · paper-deep 7,6:1 · apricot 4,9:1 */
/* Feste Hoehe: jeder Seitenkopf ausser dem der Startseite ist gleich hoch,
   unabhaengig davon, wie viel Text darin steht. */
.page-hero{
  position:relative;overflow:hidden;
  background:var(--steel-deep);
  color:var(--paper-deep);
  height:600px;min-height:600px;
  display:flex;align-items:center;
}

/* Das vorhandene Kopfbild wird zur vollflächigen Ebene */
.page-hero-img{
  position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;
  border:none;border-radius:0;background:none;overflow:hidden;
}
.page-hero-img img{
  width:100%;height:100%;object-fit:cover;
  aspect-ratio:auto;
  filter:grayscale(1) contrast(1.06) brightness(.95);
}
/* Petrol-Tönung über dem Foto */
.page-hero-img::after{
  content:'';position:absolute;top:0;right:0;bottom:0;left:0;
  background:
    linear-gradient(100deg, rgba(22,48,60,.90) 0%, rgba(22,48,60,.80) 42%,
                            rgba(29,78,95,.66) 72%, rgba(29,78,95,.58) 100%),
    linear-gradient(to top, rgba(22,48,60,.62) 0%, rgba(22,48,60,.08) 46%);
}

.page-hero-inner{
  position:relative;z-index:2;width:100%;
  max-width:var(--wrap-w);margin:0 auto;padding:56px 32px;
}
.page-hero-grid{display:block}
.page-hero-grid > div{position:relative;z-index:2}

/* Rahmen mit apricotfarbenen Ecken */
.page-hero::after,
.hero::after{
  content:'';position:absolute;top:20px;right:20px;bottom:20px;left:20px;z-index:3;pointer-events:none;
  border:1px solid rgba(220,238,242,.30);
  background:
    linear-gradient(var(--apricot-deep),var(--apricot-deep)) left  top/34px 2px no-repeat,
    linear-gradient(var(--apricot-deep),var(--apricot-deep)) left  top/2px 34px no-repeat,
    linear-gradient(var(--apricot-deep),var(--apricot-deep)) right top/34px 2px no-repeat,
    linear-gradient(var(--apricot-deep),var(--apricot-deep)) right top/2px 34px no-repeat,
    linear-gradient(var(--apricot-deep),var(--apricot-deep)) left  bottom/34px 2px no-repeat,
    linear-gradient(var(--apricot-deep),var(--apricot-deep)) left  bottom/2px 34px no-repeat,
    linear-gradient(var(--apricot-deep),var(--apricot-deep)) right bottom/34px 2px no-repeat,
    linear-gradient(var(--apricot-deep),var(--apricot-deep)) right bottom/2px 34px no-repeat;
}

.page-hero h1{
  font-size:clamp(36px,5.6vw,64px);font-weight:700;
  letter-spacing:-.028em;line-height:1.03;
  color:var(--paper);margin:0 0 20px;max-width:15em;
}
.page-hero h1 em{color:var(--apricot)}
.page-hero-badge{
  display:inline-block;
  font-size:12px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--apricot);margin:0 0 20px;
}
.page-hero-badge::before{
  content:'';display:inline-block;width:34px;height:1px;
  background:var(--apricot);vertical-align:middle;
  margin-right:14px;margin-bottom:3px;
}
.page-hero-lead{
  max-width:34em;font-size:17.5px;font-weight:300;line-height:1.6;
  color:var(--paper-deep);margin:0 0 30px;
}

/* Bildnachweis, falls vorhanden */
.page-hero-credit{
  margin:34px 0 0;padding-top:12px;max-width:34em;
  border-top:1px solid rgba(220,238,242,.28);
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(220,238,242,.72);line-height:1.6;
}

/* Schaltflächen im dunklen Seitenkopf */
.page-hero .btn-outline-blue,
.page-hero .btn-outline{background:transparent;color:var(--paper);border-color:rgba(220,238,242,.5)}
.page-hero .btn-outline-blue:hover,
.page-hero .btn-outline:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

@media (max-width:820px){
  .page-hero{height:auto;min-height:440px}
  .page-hero-inner{padding:56px 22px}
  .page-hero::after,
  .hero::after{top:12px;right:12px;bottom:12px;left:12px}
}

/* Motiv als Linienzeichnung in Apricot — auf dunklem Grund gut sichtbar,
   ohne dem Text Aufmerksamkeit zu nehmen. */
.hero-deco{
  position:absolute;right:0;top:0;bottom:0;
  width:min(38%,380px);z-index:1;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  padding:30px 46px 30px 0;opacity:.30;
}
.hero-deco svg{width:100%;height:auto;max-height:82%}
.hero-deco svg *{stroke:var(--apricot)}
.hero-deco svg [fill]:not([fill="none"]){fill:rgba(242,177,131,.10)}
@media (max-width:820px){ .hero-deco{display:none} }

/* ---------- Brotkrumen ---------- */
.breadcrumb{
  font-size:12px;font-weight:600;letter-spacing:.06em;
  color:var(--ink-faint);margin:0 0 22px;
}
.breadcrumb a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent}
.breadcrumb a:hover{color:var(--steel-deep);border-bottom-color:var(--apricot-deep)}
.breadcrumb-sep{margin:0 8px;color:var(--rule-soft)}
/* im dunklen Seitenkopf */
.page-hero .breadcrumb{color:var(--on-dark)}
.page-hero .breadcrumb a{color:var(--paper-deep)}
.page-hero .breadcrumb a:hover{color:var(--white);border-bottom-color:var(--apricot)}
.page-hero .breadcrumb-sep{color:rgba(194,220,226,.45)}

/* ==========================================================================
   Sektionen
   ========================================================================== */
.section-white,.section-pale,.section-dark,.section-blue{padding:88px 0}
.section-white{background:var(--white)}
.section-pale{background:var(--paper)}
.section-dark{background:var(--steel-deep);color:var(--paper-deep)}
.section-blue{background:var(--ink);color:var(--paper-deep)}

.section-tag{
  display:block;
  font-size:12px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ember);margin:0 0 20px;
}
.section-tag::before{
  content:'';display:inline-block;width:34px;height:1px;
  background:var(--apricot-deep);vertical-align:middle;
  margin-right:14px;margin-bottom:3px;
}
.section-tag--gold,.section-tag--white{color:var(--apricot)}
.section-tag--gold::before,.section-tag--white::before{background:var(--apricot)}
.section-dark .section-tag,.section-blue .section-tag{color:var(--apricot)}
.section-dark .section-tag::before,.section-blue .section-tag::before{background:var(--apricot)}

.section-h2{
  font-size:clamp(29px,4vw,46px);font-weight:700;
  letter-spacing:-.024em;line-height:1.05;
  color:var(--steel-deep);margin:0 0 20px;max-width:16em;
}
/* Haarlinie unter jeder Kapitelüberschrift */
.section-h2::after{
  content:'';display:block;height:1px;background:var(--ink);
  opacity:.85;margin-top:20px;
}
/* Überschriften, die auf breiten Schirmen zwingend einzeilig bleiben.
   Unterhalb von 900px greift wieder der normale Umbruch. */
@media (min-width:900px){
  .section-h2--einzeilig{max-width:none;white-space:nowrap}
}
.section-h2--white,
.section-dark .section-h2,
.section-blue .section-h2{color:var(--white)}
.section-h2--white::after,
.section-dark .section-h2::after,
.section-blue .section-h2::after{background:var(--on-dark);opacity:.4}

.section-lead{
  max-width:36em;font-size:17px;font-weight:300;line-height:1.6;
  color:var(--ink-soft);margin:0 0 42px;
}
.section-dark .section-lead,.section-blue .section-lead{color:var(--paper-deep)}

/* ==========================================================================
   Schaltflächen
   ========================================================================== */
.btn{
  display:inline-block;
  font-family:var(--sans);font-size:14.5px;font-weight:600;
  padding:14px 28px;border-radius:var(--r);
  text-decoration:none;cursor:pointer;
  border:1px solid transparent;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.btn-primary{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn-primary:hover{background:var(--steel-deep);border-color:var(--steel-deep)}

.btn-gold{background:var(--ember);color:var(--white);border-color:var(--ember)}
.btn-gold:hover{background:var(--label-ink);border-color:var(--label-ink)}

.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--white)}

.btn-outline-blue{background:transparent;color:var(--steel-deep);border-color:var(--steel)}
.btn-outline-blue:hover{background:var(--steel-deep);color:var(--white);border-color:var(--steel-deep)}

.btn-outline-white{background:transparent;color:var(--white);border-color:rgba(220,238,242,.55)}
.btn-outline-white:hover{background:var(--white);color:var(--ink);border-color:var(--white)}

/* ==========================================================================
   Bauteile
   ========================================================================== */

/* ---------- Zweispalter ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.two-col p{font-size:16.5px;font-weight:300;line-height:1.65;max-width:34em}

/* ---------- Nummerierte Abfolge ---------- */
.numbered-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.num-item{
  background:var(--white);
  border:1px solid var(--rule-soft);border-radius:var(--r);
  padding:26px 26px 28px;
  transition:border-color .18s ease;
}
.num-item:hover{border-color:var(--steel)}
.section-dark .num-item,.section-blue .num-item{
  background:transparent;border-color:rgba(194,220,226,.26);
}
.num-item-n{
  display:block;
  font-family:var(--serif);font-size:42px;font-weight:400;line-height:1;
  color:var(--apricot);margin:0 0 14px;
  font-variant-numeric:tabular-nums;
}
.section-white .num-item-n,.section-pale .num-item-n{color:var(--steel)}
.num-item-title{
  display:block;font-size:16.5px;font-weight:700;
  color:var(--steel-deep);margin:0 0 9px;letter-spacing:-.012em;
}
.section-dark .num-item-title,.section-blue .num-item-title{color:var(--white)}
.num-item-text{
  display:block;font-size:14px;font-weight:300;line-height:1.55;
  color:var(--ink-soft);margin:0;
}
.section-dark .num-item-text,.section-blue .num-item-text{color:var(--on-dark)}

/* ---------- Merkmalsliste ---------- */
.feature-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.feature-list li{
  position:relative;padding-left:26px;
  font-size:15.5px;font-weight:300;line-height:1.55;color:var(--ink-soft);
}
.feature-list li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:12px;height:1px;background:var(--apricot-deep);
}
.feature-list--white li,
.section-dark .feature-list li,
.section-blue .feature-list li{color:var(--paper-deep)}
.feature-list--white li::before,
.section-dark .feature-list li::before,
.section-blue .feature-list li::before{background:var(--apricot)}

/* ---------- Leistungskarten ---------- */
.services-grid-home,.services-full,.geo-card-grid,.ref-grid,.epoche-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px;
}
.service-card{
  background:var(--white);
  border:1px solid var(--rule-soft);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  text-decoration:none;transition:border-color .18s ease;
}
.service-card:hover{border-color:var(--steel)}
.sc-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper-deep)}
.sc-img img{width:100%;height:100%;object-fit:cover}
/* Leistungs-Symbol als Marke auf der Bildkante, statt allein auf leerer Zeile */
.sc-icon{
  position:relative;z-index:2;
  width:54px;height:54px;margin:-27px 24px 10px;
  background:var(--white);border:1px solid var(--rule-soft);
  border-radius:50%;padding:10px;flex:none;
}
.sc-icon img{width:100%;height:100%;object-fit:contain;display:block}
.sc-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.sc-badge{
  position:absolute;top:12px;left:12px;z-index:2;
  background:var(--apricot);color:var(--label-ink);
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 11px;border-radius:var(--r);
}
.sc-title{font-size:19px;font-weight:700;color:var(--steel-deep);margin:0 0 9px;letter-spacing:-.012em}
.sc-text{margin:0 0 18px;font-size:14.5px;font-weight:300;line-height:1.55;color:var(--ink-soft);flex:1}
.sc-tags{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px}
.tag{
  display:inline-block;
  background:var(--paper-deep);color:var(--steel-deep);
  border:1px solid var(--rule-soft);border-radius:var(--r);
  font-size:11px;font-weight:600;letter-spacing:.06em;
  padding:4px 9px;
}
.sc-cta{
  font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ember);text-decoration:none;margin-top:auto;
}

/* ---------- Referenzen ---------- */
.ref-title{
  font-size:17.5px;font-weight:700;color:var(--steel-deep);
  margin:0 0 8px;letter-spacing:-.012em;line-height:1.25;
}
.ref-item{
  background:var(--white);
  border:1px solid var(--rule-soft);border-radius:var(--r);
  padding:26px 28px;transition:border-color .18s ease;
}
.ref-item:hover{border-color:var(--steel)}
/* Verweis auf die passende Leistung — schliesst jede Referenz an ihr Angebot an */
.ref-leistung{
  margin:14px 0 0;padding-top:12px;border-top:1px solid var(--rule-soft);
  font-size:12.5px;font-weight:300;color:var(--ink-faint);
}
.ref-leistung a{
  font-weight:700;color:var(--ember);
  border-bottom:1px solid rgba(196,74,18,.34);
}
.ref-leistung a:hover{color:var(--label-ink);border-bottom-color:var(--label-ink)}

/* ---------- Verwandte Leistungen ----------
   Kurzer Anschluss am Seitenende: fuehrt Leser weiter und verbindet die
   Leistungsseiten untereinander, statt sie nur an der Navigation haengen zu lassen. */
.verwandt{
  border-top:1px solid var(--rule-soft);padding-top:30px;
}
.verwandt-label{
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 18px;
}
.verwandt-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.verwandt-liste a{
  display:block;padding:20px 22px;background:var(--white);
  border:1px solid var(--rule-soft);border-radius:var(--r);
  text-decoration:none;transition:border-color .18s ease;
}
.verwandt-liste a:hover{border-color:var(--steel)}
.verwandt-titel{
  display:block;font-size:16px;font-weight:700;color:var(--steel-deep);
  margin-bottom:6px;letter-spacing:-.01em;
}
.verwandt-text{display:block;font-size:13.5px;font-weight:300;line-height:1.55;color:var(--ink-soft)}

/* ---------- Bildstreifen ---------- */
.photo-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.photo-strip-item{
  border:1px solid var(--rule-soft);border-radius:var(--r);
  overflow:hidden;background:var(--paper-deep);
}
.photo-strip-item img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}

/* ---------- Bildraster Historienbilder ---------- */
.img-grid-2{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start}
.ig-large,.ig-small{
  border:1px solid var(--rule-soft);border-radius:var(--r);
  overflow:hidden;background:var(--paper-deep);
}
.ig-large img,.ig-small img{width:100%;height:auto;object-fit:cover}

/* ---------- Team ----------
   Weisse Karte in dunkler Sektion: ohne eigene Farben erbt der Text das
   helle Paper der Sektion und stuende dann hell auf hell (1,2:1).
   Kontraste auf Weiss: steel-deep 9,1:1 - ink-soft 6,3:1 - ember 4,8:1 */
.team-card{
  background:var(--white);color:var(--ink-soft);
  border:1px solid var(--rule-soft);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
}
/* Beide Portraits im selben Format, unabhaengig von der Vorlage */
.team-card > img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 22%;display:block}
.tc-body{padding:22px 24px 26px}
.tc-body h3{font-size:19px;font-weight:700;color:var(--steel-deep);margin:0 0 7px;letter-spacing:-.012em}
.tc-body p{margin:0 0 14px;font-size:14.5px;font-weight:300;line-height:1.55;color:var(--ink-soft)}
.tc-body a{
  font-size:14px;font-weight:600;color:var(--ember);
  border-bottom:1px solid rgba(196,74,18,.38);
}
.tc-body a:hover{color:var(--label-ink);border-bottom-color:var(--label-ink)}

/* ---------- Geocaching ---------- */
.geo-card{
  background:var(--white);
  border:1px solid var(--rule-soft);border-radius:var(--r);
  padding:26px 26px 28px;transition:border-color .18s ease;
}
.geo-card:hover{border-color:var(--steel)}
.geo-card-icon{width:38px;height:38px;margin-bottom:16px;flex:none}
.geo-card-icon img{width:100%;height:100%;object-fit:contain;display:block}
.geo-cta-box,.anfrage-box{
  background:var(--paper-deep);
  border:1px solid var(--rule-soft);border-left:3px solid var(--apricot-deep);
  border-radius:var(--r);padding:30px 32px;
}
.section-dark .geo-cta-box,.section-blue .anfrage-box{
  background:rgba(220,238,242,.06);border-color:rgba(194,220,226,.26);
  border-left-color:var(--apricot);
}

/* ---------- Schulbucharchiv ---------- */
.epoche-card{
  background:var(--white);
  border:1px solid var(--rule-soft);border-radius:var(--r);
  padding:24px 26px;transition:border-color .18s ease;
}
.epoche-card:hover{border-color:var(--steel)}
.epoche-era{
  display:block;
  font-family:var(--serif);font-size:15px;font-style:italic;
  color:var(--ember);margin:0 0 8px;
  font-variant-numeric:tabular-nums;
}
.bestand-row{
  display:flex;align-items:baseline;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--rule-soft);
  font-size:15px;font-weight:300;color:var(--ink-soft);
}
.bestand-row:last-child{border-bottom:none}
.bestand-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--apricot-deep);flex:none;
}

/* ---------- NAVIGATE-App ---------- */
.nav-imgs{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;align-items:start}
.nav-img-main,.nav-img-sub{
  border:1px solid var(--rule-soft);border-radius:var(--r);
  overflow:hidden;background:var(--paper-deep);
}
.nav-img-main img,.nav-img-sub img{width:100%;height:auto}
.nav-badge{
  display:inline-block;
  background:var(--apricot);color:var(--label-ink);
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 11px;border-radius:var(--r);
}

/* ==========================================================================
   Fußbereich
   ========================================================================== */
footer,.site-footer{background:var(--ink);color:var(--on-dark);padding:66px 0 30px}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px}
.footer-brand .footer-name,
.footer-brand strong{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:22px;color:var(--white);display:block;margin:0 0 8px;
}
.footer-brand p{margin:0 0 6px;font-size:14px;font-weight:300;line-height:1.6;color:var(--on-dark)}
.footer-col h2,.footer-col h3,.footer-col h4,.footer-col h5{
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--apricot);margin:0 0 16px;
}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.footer-col a{
  font-size:14px;font-weight:300;color:var(--on-dark);
  text-decoration:none;transition:color .18s ease;
}
.footer-col a:hover{color:var(--white)}
.footer-bottom{
  margin-top:50px;padding-top:22px;
  border-top:1px solid rgba(194,220,226,.16);
  display:flex;flex-wrap:wrap;gap:8px 26px;
  align-items:center;justify-content:space-between;
}
.footer-copy{margin:0;font-size:12.5px;font-weight:300;color:var(--ink-faint)}
.footer-bottom-links{display:flex;gap:22px;flex-wrap:wrap}
.footer-bottom-links a{
  font-size:12.5px;font-weight:300;color:var(--on-dark);text-decoration:none;
}
.footer-bottom-links a:hover{color:var(--white)}

/* ==========================================================================
   Einblenden beim Scrollen
   Ohne JS bleibt .reveal sichtbar — .js-start setzt das Skript nur,
   wenn keine reduzierte Bewegung gewünscht ist.
   ========================================================================== */
.reveal{opacity:1;transform:none}
.reveal.js-start{
  opacity:0;transform:translateY(14px);
}
.reveal.js-visible{
  opacity:1;transform:none;
  transition:opacity .55s ease,transform .55s ease;
}

/* ==========================================================================
   Formular
   ========================================================================== */
.form-submit{
  background:var(--ink);color:var(--white);border:1px solid var(--ink);
  border-radius:var(--r);font-family:var(--sans);
  font-size:14.5px;font-weight:600;padding:14px 28px;cursor:pointer;
}
.form-submit:hover{background:var(--steel-deep);border-color:var(--steel-deep)}
.form-submit:disabled{cursor:default}

/* ==========================================================================
   Schmale Ansichten
   ========================================================================== */
@media (max-width:980px){
  .page-hero-grid,.two-col,.nav-imgs,.img-grid-2{grid-template-columns:1fr;gap:38px}
  .footer-top{grid-template-columns:1fr 1fr;gap:36px}
}

@media (max-width:820px){
  .nav-links,.nav-cta{display:none}
  .hamburger{display:flex}
  .wrap,.page-hero-inner{padding-left:22px;padding-right:22px}
  .section-white,.section-pale,.section-dark,.section-blue{padding:62px 0}
  .page-hero-inner{padding-top:54px;padding-bottom:50px}
  .mobile-menu a{padding-left:22px;padding-right:22px}
}

@media (max-width:560px){
  .footer-top{grid-template-columns:1fr;gap:30px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}

/* ==========================================================================
   Bewegung reduzieren
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .reveal,.reveal.js-start{opacity:1!important;transform:none!important}
}

/* ==========================================================================
   Druck
   ========================================================================== */
@media print{
  header,.site-header,.mobile-menu,.hamburger,.hero-deco,.nav-cta{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .section-white,.section-pale,.section-dark,.section-blue{background:#fff;color:#000;padding:18pt 0}
  .section-h2,.page-hero h1,h1,h2,h3{color:#000}
  a{text-decoration:underline}
  .service-card,.num-item,.ref-item,.geo-card,.epoche-card{border:1pt solid #999;break-inside:avoid}
}

/* ==========================================================================
   Startseite
   ========================================================================== */
/* ============ Kopfleiste ============ */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(242,248,249,.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--rule-soft);
}
.topbar__in{
  max-width:var(--wrap-w);margin:0 auto;padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;
  min-height:70px;gap:24px;
}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex:none}
.brand img{width:40px;height:40px;object-fit:cover;border-radius:50%;border:1px solid var(--rule-soft);flex:none}
.brand__txt{display:flex;flex-direction:column;line-height:1.15}
.brand__name{
  font-family:var(--serif);font-style:italic;font-size:17px;
  color:var(--steel-deep);letter-spacing:.005em;
}
.brand__sub{
  font-size:9.5px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ember);margin-top:2px;
}
.mainnav{display:flex;gap:26px;align-items:center}
.mainnav a{
  font-size:11.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  padding:6px 0;border-bottom:2px solid transparent;
  transition:border-color .18s ease,color .18s ease;
}
.mainnav a:hover{color:var(--steel-deep);border-bottom-color:var(--apricot-deep)}
.mainnav a:focus-visible,.brand:focus-visible,.btn:focus-visible,.tlink:focus-visible,
.card:focus-visible,.burger:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

/* Sprunglink: nur sichtbar, wenn er den Tastaturfokus hat.
   Erspart Tastatur- und Screenreader-Nutzern die Navigation auf jeder Seite. */
.sprunglink{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--steel-deep);color:var(--paper);
  padding:12px 20px;border-radius:0 0 var(--r) 0;
  font-size:14px;font-weight:700;text-decoration:none;
}
.sprunglink:focus{left:0}

.burger{
  display:none;background:none;border:1px solid var(--rule-soft);border-radius:var(--r);
  width:42px;height:38px;cursor:pointer;padding:0;align-items:center;justify-content:center;
}
.burger span{display:block;width:19px;height:1.5px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{
  content:'';position:absolute;left:0;width:19px;height:1.5px;background:var(--ink);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}

.mobnav{display:none;border-top:1px solid var(--rule-soft);background:var(--paper)}
.mobnav.open{display:block}
.mobnav a{
  display:block;padding:13px 32px;text-decoration:none;
  font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid var(--rule-soft);
}
.mobnav a:last-child{border-bottom:none}

/* ============ Hero ============ */
/* Hero: kräftiges Bild, darüber ein Petrol-Schleier.
   Text steht hell — Weiß auf steel-deep liegt bei 9,1:1, Apricot bei 4,9:1. */
/* Hero: füllt den Bildschirm bis unten, abzüglich der Kopfleiste.
   svh statt vh, damit auf Mobilgeräten die Adressleiste nicht hineinragt. */
.hero{
  position:relative;overflow:hidden;background:var(--steel-deep);
  min-height:calc(100vh - var(--head-h));
  min-height:calc(100svh - var(--head-h));
  display:flex;align-items:center;
}
.hero__bg{
  position:absolute;top:0;right:0;bottom:0;left:0;
  background-image:url('assets/hero-halbkugeln-eisblau-1280.jpg');
  background-size:cover;background-position:center 46%;
  filter:contrast(1.04);
}
@media (min-width:1300px){
  .hero__bg{background-image:url('assets/hero-halbkugeln-eisblau-1920.jpg')}
}
@media (min-width:1950px){
  .hero__bg{background-image:url('assets/hero-halbkugeln-eisblau-2560.jpg')}
}
.hero__veil{
  position:absolute;top:0;right:0;bottom:0;left:0;
  background:
    /* links dicht für den Text, Mitte offen für das Motiv,
       rechter Rand läuft ins helle Eisblau aus */
    linear-gradient(96deg,
      rgba(22,48,60,.96)    0%,
      rgba(22,48,60,.93)   28%,
      rgba(22,48,60,.78)   46%,
      rgba(29,78,95,.42)   60%,
      rgba(74,124,140,.34) 72%,
      rgba(194,220,226,.52) 84%,
      rgba(242,248,249,.88) 100%),
    linear-gradient(to top,
      rgba(22,48,60,.48) 0%,
      rgba(22,48,60,.04) 42%);
}
/* Startseite: der rechte Rand laeuft ins helle Eisblau aus. Eine reine
   Weisslinie verschwindet dort, ein heller Steelton traegt auf beiden Gruenden. */
.hero::after{border-color:rgba(140,180,192,.50)}
.hero__in{position:relative;width:100%;padding:96px 0}
.hero .kicker{margin-bottom:22px;color:var(--apricot)}
.hero .kicker::before{background:var(--apricot)}
.hero h1{
  font-family:var(--sans);
  font-size:clamp(40px,6.4vw,80px);
  font-weight:700;letter-spacing:-.028em;line-height:1.02;
  color:var(--paper);
  margin:0 0 26px;max-width:15em;
}
.hero h1 em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  color:var(--apricot);letter-spacing:-.01em;
}
.hero__lede{
  max-width:33em;font-size:18px;font-weight:300;line-height:1.6;
  color:var(--paper-deep);margin:0 0 38px;
}
.hero .btn{background:var(--apricot);border-color:var(--apricot);color:var(--ink)}
.hero .btn:hover{background:var(--white);border-color:var(--white);color:var(--ink)}
.hero .tlink{color:var(--white);border-bottom-color:var(--apricot)}
.hero .tlink:hover{border-bottom-color:var(--white)}


.kicker{
  font-size:12px;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ember);margin:0 0 20px;
}
.kicker::before{
  content:'';display:inline-block;width:34px;height:1px;
  background:var(--apricot-deep);vertical-align:middle;
  margin-right:14px;margin-bottom:3px;
}

.buttons{display:flex;flex-wrap:wrap;align-items:center;gap:26px}

.tlink{
  font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none;
  border-bottom:2px solid var(--apricot-deep);padding-bottom:2px;
}
.tlink:hover{border-bottom-color:var(--ink)}

/* ============ Sektionsrhythmus ============ */
.band{padding:88px 0}
.band--paper{background:var(--paper)}
.band--white{background:var(--white)}
.band--dark{background:var(--steel-deep);color:var(--paper-deep)}
.band--ink{background:var(--ink);color:var(--paper-deep)}
.band--dark .kicker,.band--ink .kicker{color:var(--apricot)}
.band--dark .kicker::before,.band--ink .kicker::before{background:var(--apricot)}

h2.chapter{
  font-size:clamp(29px,4vw,46px);font-weight:700;letter-spacing:-.024em;
  line-height:1.05;color:var(--steel-deep);margin:0 0 20px;
  text-wrap:balance;max-width:16em;
}
h2.chapter em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  color:var(--steel);letter-spacing:-.008em;
}
.band--dark h2.chapter,.band--ink h2.chapter{color:var(--white)}
.band--dark h2.chapter em,.band--ink h2.chapter em{color:var(--apricot)}

.rule{height:1px;background:var(--ink);opacity:.85;margin:0 0 30px}
.band--dark .rule,.band--ink .rule{background:var(--on-dark);opacity:.4}

.lede{
  max-width:36em;font-size:17px;font-weight:300;line-height:1.6;
  color:var(--ink-soft);margin:0 0 42px;
}
.band--dark .lede,.band--ink .lede{color:var(--paper-deep)}

/* ============ Wer wir sind ============ */
.about{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.about p{max-width:34em;font-size:16.5px;font-weight:300;line-height:1.65;margin:0 0 18px;color:var(--ink-soft)}
.about p:last-of-type{margin-bottom:30px}
/* Das Bild wird ganz gezeigt, nicht beschnitten */
.about__fig{border:1px solid var(--rule-soft);border-radius:var(--r);overflow:hidden;background:var(--white)}
.about__fig img{width:100%;height:auto;display:block}

/* ============ Leistungskarten ============ */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px}
.card{
  background:var(--white);border:1px solid var(--rule-soft);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;text-decoration:none;
  transition:border-color .18s ease;
}
.card:hover{border-color:var(--steel)}
.card__img{aspect-ratio:16/10;overflow:hidden;background:var(--paper-deep)}
.card__img img{width:100%;height:100%;object-fit:cover}
.card__body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:19px;font-weight:700;color:var(--steel-deep);margin:0 0 9px;letter-spacing:-.012em}
.card p{margin:0 0 18px;font-size:14.5px;font-weight:300;line-height:1.55;color:var(--ink-soft);flex:1}
.card__more{
  font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ember);
}
/* Breite Karte über das ganze Raster — für ein Angebot, das neben
   den sechs Leistungen steht, aber dazugehört. */
.card--breit{grid-column:1/-1;flex-direction:row;align-items:stretch}
.card--breit .card__img{aspect-ratio:auto;flex:0 0 38%;min-height:240px}
.card--breit .card__body{justify-content:center;padding:30px 34px}
.card--breit h3{font-size:23px;margin-bottom:11px}
.card--breit p{font-size:15.5px;max-width:46em;flex:none;margin-bottom:20px}
@media (max-width:820px){
  .card--breit{flex-direction:column}
  .card--breit .card__img{flex:none;aspect-ratio:16/10;min-height:0}
  .card--breit .card__body{padding:22px 22px 24px}
}

.after-cards{margin-top:36px}

/* ============ Merkmale auf dunkel ============ */
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.feat{border:1px solid rgba(194,220,226,.26);border-radius:var(--r);padding:26px 26px 28px}
.feat h3{font-size:16.5px;font-weight:600;color:var(--white);margin:0 0 10px;letter-spacing:-.01em}
.feat p{margin:0;font-size:14px;font-weight:300;line-height:1.55;color:var(--on-dark)}
.feat__mark{width:26px;height:1px;background:var(--apricot);margin:0 0 18px}

/* ============ Stimmen ============ */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.quote{
  background:var(--white);border:1px solid var(--rule-soft);border-radius:var(--r);
  padding:28px 28px 24px;display:flex;flex-direction:column;
}
.quote blockquote{
  margin:0 0 22px;font-family:var(--serif);font-size:17px;font-style:italic;
  font-weight:400;line-height:1.5;color:var(--steel-deep);flex:1;
}
.quote figcaption{border-top:1px solid var(--rule-soft);padding-top:16px}
.quote__who{font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:2px}
.quote__what{font-size:13px;font-weight:300;color:var(--ink-faint)}

/* ============ Schluss-Aufruf ============ */
.cta{text-align:left}
.cta h2.chapter{max-width:12em}

.cta .tlink{color:var(--white);border-bottom-color:var(--apricot)}
.cta .tlink:hover{border-bottom-color:var(--white)}

/* ============ Fuß ============ */
.foot{background:var(--ink);color:var(--on-dark);padding:66px 0 30px}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px}
.foot__brand .n{
  font-family:var(--serif);font-style:italic;font-size:22px;color:var(--white);
  margin:0 0 8px;display:block;
}
.foot__brand p{margin:0 0 6px;font-size:14px;font-weight:300;line-height:1.6;color:var(--on-dark)}

/* Telefon und E-Mail im Seitenfuss: auf dem Telefon der kuerzeste Weg zum Anruf.
   Papierton auf steel-deep liegt bei 8,5:1. */
.foot__kontakt{margin:12px 0 0!important;font-size:14px;font-weight:300;line-height:1.75}
.foot__kontakt a{
  color:var(--paper-deep);text-decoration:none;
  border-bottom:1px solid rgba(242,177,131,.42);
}
.foot__kontakt a:hover{color:var(--white);border-bottom-color:var(--apricot)}
.foot h2,.foot h3,.foot h4{
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--apricot);margin:0 0 16px;
}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot ul a{
  font-size:14px;font-weight:300;color:var(--on-dark);text-decoration:none;
  transition:color .18s ease;
}
.foot ul a:hover{color:var(--white)}
.foot ul a:focus-visible{outline:2px solid var(--apricot);outline-offset:2px}
.foot__base{
  margin-top:50px;padding-top:22px;border-top:1px solid rgba(194,220,226,.16);
  display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;justify-content:space-between;
}
.foot__base p{margin:0;font-size:12.5px;font-weight:300;color:var(--ink-faint)}
.foot__base nav{display:flex;gap:22px;flex-wrap:wrap}
.foot__base a{font-size:12.5px;font-weight:300;color:var(--on-dark);text-decoration:none}
.foot__base a:hover{color:var(--white)}

/* ============ Schmale Ansichten ============ */
@media (max-width:980px){
  .about{grid-template-columns:1fr;gap:38px}
  .foot__grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:820px){
  .mainnav{display:none}
  .burger{display:flex}
  .band{padding:62px 0}
  .hero__in{padding:74px 0 66px}
  .mobnav a{padding-left:22px;padding-right:22px}
}
@media (max-width:560px){
  .foot__grid{grid-template-columns:1fr;gap:30px}
}

/* ==========================================================================
   Kontaktseite
   Diese Klassen fehlten, weil mein Klassen-Inventar nur *.html erfasst hatte
   und kontakt.php dabei durchgerutscht ist.
   ========================================================================== */
.kontakt-grid{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start;
}
.kontakt-info h2{
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ember);margin:0 0 16px;
}
.kontakt-info h2:not(:first-child){margin-top:34px}
.kontakt-info p{font-size:14.5px;font-weight:300;line-height:1.6;color:var(--ink-soft);margin:0}

/* Zeile aus Symbol und Angabe */
.krow{
  display:flex;align-items:flex-start;gap:13px;
  padding:11px 0;border-bottom:1px solid var(--rule-soft);
  font-size:15px;line-height:1.5;
}
.krow:last-of-type{border-bottom:none}
.krow svg{
  width:20px;height:20px;flex:none;margin-top:2px;
  color:var(--steel);stroke:currentColor;
}
.krow a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-soft)}
.krow a:hover{color:var(--steel-deep);border-bottom-color:var(--apricot-deep)}

/* Formular */
.form-card{
  background:var(--white);border:1px solid var(--rule-soft);
  border-radius:var(--r);padding:30px 32px 34px;
}
.fg{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.fg label{
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);
}
.fg input,.fg select,.fg textarea{
  font-family:var(--sans);font-size:15px;color:var(--ink);
  background:var(--paper);
  border:1px solid var(--rule-soft);border-radius:var(--r);
  padding:11px 13px;width:100%;
  transition:border-color .18s ease,background .18s ease;
}
.fg textarea{min-height:150px;resize:vertical;line-height:1.55}
.fg input:focus,.fg select:focus,.fg textarea:focus{
  outline:none;border-color:var(--steel);background:var(--white);
}
.fg input::placeholder,.fg textarea::placeholder{color:var(--ink-faint)}

.cap-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cap-inp{max-width:110px}
.cb-row{display:flex;align-items:flex-start;gap:10px;margin:6px 0 20px;
  font-size:13.5px;font-weight:300;line-height:1.5;color:var(--ink-soft)}
.cb-row input[type=checkbox]{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--steel-deep)}
.cb-row a{color:var(--ink);text-decoration:underline}

.btn-send,.btn-green{
  display:inline-block;font-family:var(--sans);
  background:var(--ink);color:var(--white);border:1px solid var(--ink);
  border-radius:var(--r);font-size:14.5px;font-weight:600;
  padding:14px 30px;cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}
.btn-send:hover,.btn-green:hover{background:var(--steel-deep);border-color:var(--steel-deep)}
.btn-send:disabled,.btn-green:disabled{cursor:default;opacity:.7}

.note{font-size:12.5px;font-weight:300;color:var(--ink-faint);margin:14px 0 0;line-height:1.5}

@media (max-width:900px){
  .kontakt-grid{grid-template-columns:1fr;gap:38px}
  .form-card{padding:24px 22px 28px}
}


/* ==========================================================================
   Zentrierte Abschnitte
   .section-h2 und .section-lead haben eine Maximalbreite. Ohne automatische
   Seitenränder bleibt der Block linksbündig — nur der Text darin wirkt
   zentriert. Das korrigiert es.
   ========================================================================== */
.zentriert{text-align:center}
.zentriert .section-h2,
.zentriert .section-lead,
.zentriert .lede{margin-left:auto;margin-right:auto}
.zentriert .section-tag{text-align:center}
.zentriert .buttons{justify-content:center}

/* Bearbeitungsportal: eigener Block in voller Breite unter dem Bildstreifen */
.portal-figur{
  margin:26px 0 0;background:var(--white);
  border:1px solid var(--rule-soft);border-radius:var(--r);overflow:hidden;
}
.portal-figur img{width:100%;height:auto;display:block}
.portal-figur figcaption{
  padding:14px 18px;border-top:1px solid var(--rule-soft);
  font-size:13.5px;font-weight:300;line-height:1.6;color:var(--ink-soft);
}

/* Screenshots im Bildstreifen behalten ihr eigenes Format */
.photo-strip-item img[style*="aspect-ratio:auto"]{height:auto;aspect-ratio:auto;object-fit:contain}