/* Cargo Damage Experts - Karl A. Selig, Havariekommissar

   Haltung: ein Büro, keine Werbeseite. Serifenschrift in den Überschriften,
   gewöhnliche Systemschrift im Text, dünne Linien, Fotos. Keine Versalien
   über ganze Zeilen, keine Symbole in Knöpfen, keine Zahlenkacheln,
   keine kleinen Schlagzeilen über den Überschriften. Orange nur dort, wo
   es etwas bedeutet: Rufnummer, aktive Seite, Hervorhebung.

   Die Schrift liegt unter assets/schriften/ und kommt nicht von Google. */

@font-face{
  font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;
  src:url(schriften/source-serif-4-400-cyrillic-ext.woff2) format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;
  src:url(schriften/source-serif-4-400-cyrillic.woff2) format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;
  src:url(schriften/source-serif-4-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;
  src:url(schriften/source-serif-4-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;
  src:url(schriften/source-serif-4-600-cyrillic-ext.woff2) format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;
  src:url(schriften/source-serif-4-600-cyrillic.woff2) format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;
  src:url(schriften/source-serif-4-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;
  src:url(schriften/source-serif-4-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --ink-0:#0a141d;
  --navy:#102030;
  --navy-2:#16293b;
  --steel:#1d3447;
  --paper:#fbfaf7;
  --paper-2:#f2efe9;
  --line:#dcd7cd;
  --line-2:#c3bbae;
  --ink:#1b232c;
  --ink-2:#4e5a66;
  --accent:#b06f14;
  --accent-2:#8f590c;
  --accent-lt:#e0a24f;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --max:1180px;
  --pad:clamp(1.25rem,4vw,2.5rem);
}

*{box-sizing:border-box}
html{scroll-padding-top:5rem}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
}
img{max-width:100%;display:block}
a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--ink-0)}

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

h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.18;margin:0 0 .5em}
h1{font-size:clamp(2rem,4vw,2.9rem)}
h2{font-size:clamp(1.6rem,2.8vw,2.2rem)}
h3{font-size:1.18rem;line-height:1.3}

/* Kleine Zwischenzeile. Bewusst unauffällig, keine gesperrten Versalien. */
.eyebrow{font-size:.95rem;color:var(--ink-2);margin:0 0 .35rem}
section.dark .eyebrow,.page-hero .eyebrow{color:#9db1c4}

/* ================= Einsatzruf-Leiste ================= */
.callbar{position:sticky;top:0;z-index:60;background:var(--ink-0);border-bottom:1px solid rgba(255,255,255,.14)}
.callbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:3.1rem}
.callbar-mail{color:#90a2b3;font-size:.88rem;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.callbar-mail:hover{color:#fff;text-decoration:underline}
.callbar-main{display:flex;align-items:baseline;gap:.9rem;margin-left:auto;white-space:nowrap}
.callbar-label{font-size:.86rem;color:#90a2b3}
.callbar-tel{font-family:var(--serif);font-size:1.3rem;font-weight:600;color:#fff;text-decoration:none}
.callbar-tel:hover{color:var(--accent-lt);text-decoration:underline}
.call-btn{
  display:inline-block;background:var(--accent);color:#fff;
  padding:.35rem 1rem;font-size:.95rem;white-space:nowrap;text-decoration:none;
  align-self:center;
}
.call-btn:hover{background:var(--accent-2);color:#fff;text-decoration:none}

/* ================= Menueknopf ================= */
.nav-toggle{
  display:none;align-items:center;gap:.6rem;
  background:none;border:0;color:var(--ink);
  padding:.5rem .15rem;cursor:pointer;font-family:var(--sans);font-size:1rem;
}
.nav-toggle .bars{position:relative;display:block;width:20px;height:2px;background:currentColor}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor}
.nav-toggle .bars::before{top:-6px}
.nav-toggle .bars::after{top:6px}
.site-head.offen .nav-toggle .bars{background:transparent}
.site-head.offen .nav-toggle .bars::before{top:0;transform:rotate(45deg)}
.site-head.offen .nav-toggle .bars::after{top:0;transform:rotate(-45deg)}

/* ================= Kopfzeile ================= */
.site-head{background:var(--paper);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem 2.5rem;flex-wrap:wrap;padding-top:1.1rem;padding-bottom:1.1rem}
.brand{display:block;color:var(--ink);text-decoration:none}
.brand:hover{text-decoration:none}
.brand .name{display:block;font-family:var(--serif);font-size:1.75rem;font-weight:600;line-height:1.1;white-space:nowrap}
.brand .role{display:block;font-size:.8rem;color:var(--ink-2);margin-top:.15rem}
.head-right{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.nav{display:flex;flex-wrap:wrap;gap:1rem;font-size:1rem}
.nav a{color:var(--ink);text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent}
.nav a:hover{color:var(--accent-2);border-bottom-color:var(--line-2)}
.nav a[aria-current="page"]{color:var(--accent-2);border-bottom-color:var(--accent)}

.langs{display:flex;align-items:center;gap:.15rem;font-size:.88rem}
.langs .lang{display:inline-block;padding:.15rem .35rem;color:var(--ink-2);text-decoration:none}
.langs a.lang:hover{color:var(--accent-2);text-decoration:underline}
.langs .is-current{color:#fff;background:var(--navy)}

/* Ab Tabletbreite steht die Navigation in einer eigenen Zeile unter dem Namen.
   Einzeilig ginge auf Deutsch, auf Russisch nicht: die Beschriftungen sind dort
   deutlich laenger. Zwei Zeilen halten in jeder Sprache. */
@media(min-width:901px){
  .site-head .wrap{display:block;padding-bottom:0}
  .brand{padding-bottom:1rem}
  .head-right{justify-content:space-between;gap:1.5rem;
    border-top:1px solid var(--line);padding:.6rem 0 .7rem}
}

/* ================= Schaltflaechen ================= */
.btn{
  display:inline-block;font-family:var(--sans);font-size:1.02rem;
  padding:.7rem 1.5rem;border:1px solid var(--accent);
  background:var(--accent);color:#fff;text-decoration:none;
}
.btn:hover{background:var(--accent-2);border-color:var(--accent-2);color:#fff;text-decoration:none}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn.ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn.dark{background:var(--navy);border-color:var(--navy)}
.btn.dark:hover{background:var(--ink-0);border-color:var(--ink-0)}

/* ================= Startseite ================= */
.hero{position:relative;background:var(--navy);color:#eef3f8;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.hero-media::after{content:"";position:absolute;inset:0;background:rgba(13,26,40,.72)}
.hero .wrap{position:relative;z-index:1;padding-top:clamp(3rem,6.5vw,5rem);padding-bottom:clamp(2.8rem,5.5vw,4rem)}
.hero .eyebrow{font-family:var(--serif);font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.2;color:var(--accent-lt);margin-bottom:.3rem}
.hero h1{font-size:clamp(2.3rem,5.6vw,4.1rem);color:#fff;margin-bottom:.4em}
/* Jahreszahl hochgestellt hinter dem Namen */
.hero h1 sup{
  display:inline-block;vertical-align:super;
  font-family:var(--sans);font-size:max(13px,.21em);font-weight:400;line-height:1;
  color:var(--accent-lt);margin-left:.5rem;white-space:nowrap;
}
.hero .sub{font-size:1.1rem;color:#ccd7e2;max-width:38em}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem;align-items:center}
/* Der Einsatzruf reicht bis zum Ende der Zeile darueber */
.hero .btn-call{flex:0 1 36rem;min-width:0;text-align:center;font-size:1.5rem;padding:.8rem 1.4rem}

/* ================= Kopfband Unterseiten ================= */
.page-hero{position:relative;overflow:hidden;background:var(--navy);color:#eef3f8;border-bottom:1px solid var(--line)}
.hero-side{position:absolute;right:0;top:0;bottom:0;width:46%;overflow:hidden}
.hero-side img{width:100%;height:100%;object-fit:cover}
.hero-side::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--navy) 1%,rgba(16,32,48,.9) 38%,rgba(16,32,48,.62) 100%)}
.page-hero .wrap{position:relative;z-index:2;padding-top:clamp(1.8rem,3vw,2.6rem);padding-bottom:clamp(2rem,3.2vw,2.8rem)}
.page-hero h1{font-size:clamp(1.9rem,3.6vw,2.7rem);color:#fff;margin-bottom:.3em;max-width:20ch}
.page-hero h1.long{font-size:clamp(1.6rem,2.7vw,2.1rem);max-width:28ch}
.page-hero h1 + p{color:#c4d1de;max-width:56ch;margin:0;font-size:1.04rem}
.crumbs{font-size:.86rem;color:#8396a8;margin:0 0 1.1rem}
.crumbs a{color:#aec0d1}

/* ================= Bilder ================= */
/* Keine Flaechenfarbe: sonst steht die Bildunterschrift auf einem hellen
   Kasten, auch im dunklen Abschnitt. Den Platzhalter faerbt .is-empty selbst. */
.figure{position:relative;margin:0}
.figure img{width:100%;height:100%;object-fit:cover}
.figure figcaption{font-size:.86rem;color:var(--ink-2);padding:.6rem .1rem 0;line-height:1.5}
section.dark .figure figcaption{color:#95a8bb}
.figure.is-empty img{display:none}
.figure.is-empty::before{
  content:attr(data-placeholder);
  display:flex;align-items:center;justify-content:center;text-align:center;
  aspect-ratio:4/3;padding:1.5rem;background:var(--paper-2);border:1px solid var(--line);
  color:#8a8275;font-size:.95rem;
}
.figure.small{max-width:340px}

/* ================= Abschnitte ================= */
section{padding:clamp(3rem,6vw,4.8rem) 0}
section.alt{background:var(--paper-2)}
section.dark{background:var(--navy);color:#dfe8f1}
section.dark h2,section.dark h3{color:#fff}
section.dark .lead{color:#b7c6d5}
section.tight{padding-top:clamp(2.4rem,4.5vw,3.2rem)}
.lead{font-size:1.1rem;color:var(--ink-2);max-width:62ch}
.section-head{max-width:62ch;margin-bottom:2.4rem}

/* ================= Karten ================= */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1.4rem}
.card{background:#fff;padding:1.6rem 1.5rem;border:1px solid var(--line)}
section.alt .card{background:var(--paper)}
.card .num{font-family:var(--serif);font-size:1.6rem;color:var(--accent-2);line-height:1;margin-bottom:.4rem}
.card p{margin:0;color:var(--ink-2)}
section.dark .card{background:transparent;border-color:rgba(255,255,255,.18)}
section.dark .card p{color:#b6c5d5}

/* ================= Teaser ================= */
.teasers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem}
.teaser{display:block;background:#fff;border:1px solid var(--line);padding:1.6rem 1.5rem;color:var(--ink);text-decoration:none}
.teaser:hover{border-color:var(--line-2);text-decoration:none}
.teaser h3{margin-bottom:.4rem}
.teaser p{margin:0;color:var(--ink-2);font-size:.98rem}
.teaser .more{display:inline-block;margin-top:.9rem;color:var(--accent-2);text-decoration:underline}
section.alt .teaser{background:var(--paper)}

/* ================= Listen ================= */
.cols{columns:2;column-gap:3rem}
@media(max-width:640px){.cols{columns:1}}
.ticks{list-style:none;padding:0;margin:0}
.ticks li{position:relative;padding-left:1.4rem;margin-bottom:.6rem;break-inside:avoid}
.ticks li::before{content:"";position:absolute;left:0;top:.68em;width:.42rem;height:.42rem;background:var(--accent)}
section.dark .ticks li::before{background:var(--accent-lt)}

/* ================= Zweispalter ================= */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4.5vw,3.5rem);align-items:center}
.split.narrow-img{grid-template-columns:.8fr 1.2fr}
.split.top{align-items:start}

/* ================= Zeitleiste ================= */
.timeline{list-style:none;margin:1.8rem 0 0;padding:0;border-left:1px solid var(--line-2)}
.timeline li{position:relative;padding:0 0 1.4rem 1.6rem}
.timeline li::before{content:"";position:absolute;left:-3.5px;top:.72em;width:6px;height:6px;background:var(--accent)}
.timeline .year{font-family:var(--serif);font-weight:600;font-size:1.08rem;display:block;color:var(--ink)}
section.dark .timeline{border-color:#2a4055}
section.dark .timeline .year{color:#fff}

/* ================= Ablauf in Schritten ================= */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.step{border-top:2px solid var(--line-2);padding-top:.9rem}
.step-num{display:block;font-family:var(--serif);font-weight:600;font-size:1.05rem;color:var(--accent-2);margin-bottom:.3rem}
.step h3{font-size:1.1rem;margin-bottom:.35rem}
.step p{margin:0;color:var(--ink-2);font-size:.98rem}

/* ================= Seite in Bearbeitung ================= */
.baustelle{display:flex;gap:clamp(1.5rem,4vw,3rem);align-items:flex-start}
.baustelle .schild{flex:none;width:clamp(110px,13vw,170px);height:auto}
.baustelle h2{margin-top:0}
.status{display:inline-block;margin-top:1.5rem;border:1px solid var(--line-2);
  padding:.5rem .95rem;color:var(--ink-2);font-size:.95rem}
@media(max-width:620px){.baustelle{flex-direction:column;gap:1.3rem}}

/* ================= Bildreihe ================= */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.4rem;align-items:start}
/* height:auto ist wichtig: mit height:100% aus .figure img laeuft die
   Bildunterschrift aus dem Kasten heraus und das Folgende schiebt sich darueber. */
.gallery .figure img{aspect-ratio:4/3;height:auto;object-fit:cover}

/* ================= Tabellen ================= */
.table-scroll{overflow-x:auto;border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;background:#fff;font-size:.99rem}
th,td{text-align:left;padding:.85rem 1.1rem;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
thead th{background:var(--navy);color:#fff;font-weight:600;font-size:.98rem}
td.val{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600}
tbody tr:nth-child(even){background:var(--paper)}
.note{font-size:.92rem;color:var(--ink-2);margin-top:1.2rem;max-width:75ch}
.note.fett{font-weight:600;color:var(--ink)}
.callout{border:1px solid var(--line);border-left:3px solid var(--accent);background:#fff;padding:1.3rem 1.5rem;margin-top:1.7rem}
section.alt .callout{background:var(--paper)}
.callout strong{display:block;font-family:var(--serif);font-size:1.12rem;margin-bottom:.35rem}
section.dark .callout{background:transparent;color:#d4dfe9;border-color:rgba(255,255,255,.18);border-left-color:var(--accent)}

/* ================= Kontakt ================= */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4.5vw,3.5rem)}
section.dark .contact-grid a{color:#fff}
.big-phone{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4.4vw,2.8rem);color:#fff;display:inline-block;margin:.1rem 0 .7rem;text-decoration:none}
.big-phone:hover{color:var(--accent-lt);text-decoration:underline}
.dl{margin:0}
.dl dt{font-weight:600;font-size:.92rem;color:#90a4b7;margin-top:1.2rem}
.dl dd{margin:.15rem 0 0}

/* ================= Presse ================= */
.press{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:1.1rem}
.press article{background:#fff;border:1px solid var(--line);padding:1.3rem 1.4rem}
.press .src{font-size:.86rem;color:var(--ink-2);margin:.4rem 0 0}
.press h3{font-size:1.08rem;margin-bottom:0}
section.alt .press article{background:var(--paper)}

/* ================= Regionen ================= */
.regions{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.8rem}
.regions > div{padding-top:1.1rem;border-top:1px solid var(--line-2)}
.regions h3{color:var(--ink);font-size:1.1rem;margin-bottom:.45rem}
.regions p{margin:0;color:var(--ink-2);font-size:.98rem}

/* ================= Abschlussband ================= */
.cta-band{background:var(--steel);color:#fff;border-top:1px solid rgba(255,255,255,.14)}
.cta-band .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.3rem 2.5rem;padding-top:2.1rem;padding-bottom:2.2rem}
.cta-band .cta-text{max-width:58ch}
.cta-band h2{margin:0;color:#fff;font-size:clamp(1.2rem,1.8vw,1.45rem);line-height:1.35;font-weight:400}
.cta-band p{margin:.45rem 0 0;color:#b8c8d7;font-size:1rem}
.cta-band .btn{background:var(--accent);border-color:var(--accent);color:#fff}
/* Namenszeile unter den historischen Bildern, schwarz hinterlegt */
.signatur{background:#000;color:#fff;padding:1.5rem 1.7rem;margin-top:2.2rem}
.signatur .sig-name{font-family:var(--serif);font-weight:600;font-size:1.45rem;color:#fff;margin:0 0 .35rem}
.signatur .sig{margin:0;color:#c9d5e1;line-height:1.6}
@media(max-width:620px){.signatur{padding:1.2rem 1.2rem}}
.cta-band .btn:hover{background:#fff;border-color:#fff;color:var(--navy)}

/* ================= Fuss ================= */
.site-foot{background:var(--ink-0);color:#90a3b5;font-size:.92rem;padding:3rem 0 2.2rem}
.site-foot a{color:#c8d5e1}
.site-foot a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.8fr 1fr 1.7fr 1fr;gap:2.2rem}
.site-foot .name{font-family:var(--serif);font-weight:600;color:#fff;font-size:1.3rem;margin:0 0 .5rem}
.site-foot .head{color:#fff;font-weight:600;font-size:.95rem;margin:0 0 .5rem}
.foot-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:2.4rem;padding-top:1.3rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;font-size:.88rem}

/* ================= Rechtstexte ================= */
.legal{max-width:80ch}
.legal h2{font-size:1.5rem;margin-top:2.4rem}
.legal h3{font-size:1.12rem;margin-top:1.7rem}
.legal p{color:var(--ink-2)}

/* ================= Anruf-Lasche rechts ================= */
.side-call{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:65;
  display:flex;align-items:center;gap:.7rem;writing-mode:vertical-rl;
  background:var(--accent);color:#fff;padding:1.1rem .55rem;
  font-size:.98rem;line-height:1;white-space:nowrap;text-decoration:none;
}
.side-call:hover{background:var(--accent-2);color:#fff;text-decoration:none}
.side-call-tel{opacity:.88}

/* ================= Anpassung an die Breite ================= */
@media(max-width:1199px){
  body{padding-bottom:3.2rem}
  /* Unten laeuft die Anrufleiste, oben braucht die Nummer dann nicht mehr zu stehen */
  .callbar{display:none}
  .side-call{
    top:auto;bottom:0;left:0;right:0;transform:none;writing-mode:horizontal-tb;
    justify-content:center;gap:.5rem;padding:.85rem 1rem;font-size:1.1rem;
  }
  .side-call-tel{opacity:1;font-size:1.1rem;font-weight:600}
}
@media(max-width:1080px){
  .nav{gap:.8rem;font-size:.95rem}
  .head-right{gap:.9rem}
}
@media(max-width:900px){
  .nav-toggle{display:inline-flex}
  .site-head .wrap{padding-top:.85rem;padding-bottom:.85rem;flex-wrap:nowrap}
  .brand .name{font-size:1.4rem}
  .brand .role{font-size:.72rem;white-space:nowrap}
  .head-right{display:none}
  .site-head.offen .wrap{flex-wrap:wrap}
  .site-head.offen .head-right{display:flex;flex-direction:column;align-items:stretch;gap:.4rem;width:100%;padding:1rem 0 .3rem;border-top:1px solid var(--line);margin-top:1rem}
  .site-head.offen .nav{flex-direction:column;width:100%;gap:0;font-size:1.1rem}
  .site-head.offen .nav a{display:block;padding:.7rem 0;border-bottom:1px solid var(--line)}
  .site-head.offen .langs{padding:.9rem 0 .2rem;gap:.25rem}
  .site-head.offen .langs .lang{padding:.3rem .7rem;border:1px solid var(--line)}

  .hero-side{display:none}
  .hero .wrap,.split,.split.narrow-img,.contact-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(2,1fr);gap:1.6rem}
}
@media(max-width:620px){
  .foot-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:1.2rem}

  .hero .wrap{padding-top:2.4rem;padding-bottom:2.2rem}
  .hero .eyebrow{font-size:1.3rem}
  .hero h1{font-size:2.2rem;margin-bottom:.45em}
  .hero .sub{font-size:1.02rem}
  .hero-actions{gap:.7rem;margin-top:1.7rem}
  .hero-actions .btn{width:100%;text-align:center}
  .hero .btn-call{min-width:0;font-size:1.2rem;padding:.85rem 1rem}
  .page-hero .wrap{padding-top:1.5rem;padding-bottom:1.7rem}
  .page-hero h1{font-size:1.75rem}
  .page-hero h1.long{font-size:1.5rem}
  .page-hero h1 + p{font-size:1.01rem}
  section{padding:2.6rem 0}
  .section-head{margin-bottom:1.8rem}
  h2{font-size:1.6rem}
  .cards,.teasers,.gallery,.press{gap:1rem}
  .card{padding:1.4rem 1.3rem}
  .cta-band .wrap{padding-top:1.9rem;padding-bottom:2rem}
  .cta-band .btn{width:100%;text-align:center}

  /* Tabellen gestapelt statt seitlich schiebbar */
  .table-scroll{overflow:visible}
  table,tbody,tr,td{display:block;width:100%}
  thead{display:none}
  tbody tr{padding:.85rem 1.1rem;border-bottom:1px solid var(--line)}
  tbody tr:last-child{border-bottom:0}
  td{border:0;padding:0}
  td.val{margin-top:.15rem;color:var(--accent-2);font-size:1.04rem;white-space:normal}
}
@media(max-width:430px){
  /* Ohne Symbol braucht die Leiste ihre Beschriftung, sie wird nur kleiner */
  .side-call{font-size:.92rem;gap:.4rem}
  .side-call-tel{font-size:.98rem}
}

@media print{
  .callbar,.side-call,.nav-toggle{display:none}
  body{background:#fff;padding-bottom:0}
}