/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--gummi); color: var(--kreide);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-ui) var(--roll);
}
.site-header.gescrollt { border-bottom-color: var(--gummi-3); }
.header-inner { display: flex; align-items: center; gap: var(--s-16); height: var(--header-h); transition: height var(--t-ui) var(--roll); }
.logo { flex: 0 0 auto; display: block; }
.logo img { height: 38px; width: auto; max-width: none; transition: height var(--t-ui) var(--roll); }

.nav-haupt { display: none; margin-left: auto; align-items: center; flex-wrap: nowrap; }
.nav-haupt a {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 8px; min-height: 44px; white-space: nowrap; flex-shrink: 0;
  font-size: .8rem; font-weight: 620; font-stretch: 110%; letter-spacing: .025em; text-transform: uppercase;
  color: var(--kreide); text-decoration: none;
}
.nav-haupt a::after {
  content: ""; position: absolute; left: 9px; right: 9px; bottom: 6px; height: 2px;
  background: var(--tarjan); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-ui) var(--roll);
}
.nav-haupt a:hover::after, .nav-haupt a:focus-visible::after { transform: scaleX(1); }
.nav-haupt a[aria-current="page"] { color: var(--tarjan); }
.nav-reifen { width: 15px; height: 15px; flex: 0 0 auto; color: var(--tarjan); }

.sprache { display: none; align-items: center; gap: 2px; font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .06em; }
.sprache a { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 44px; color: var(--stahl); text-decoration: none; }
.sprache a[aria-current] { color: var(--tarjan); }
.sprache a:hover { color: var(--kreide); }

.header-tel { display: none; }
.header-aktionen { margin-left: auto; display: flex; align-items: center; gap: var(--s-8); }
.tel-rund {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--tarjan); color: var(--gummi);
}
.tel-rund svg { width: 20px; height: 20px; }
.burger { width: 44px; height: 44px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border-radius: 50%; border: 1.5px solid var(--gummi-3); }
.burger span { display: block; width: 18px; height: 2px; background: var(--kreide); transition: transform var(--t-ui) var(--roll); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

@media (min-width: 960px) {
  .logo img { height: 46px; }
  .site-header.gescrollt .logo img { height: 38px; }
  .tel-rund { display: none; }
  .header-tel { display: inline-flex; }
}
@media (min-width: 1200px) {
  .nav-haupt { display: flex; }
  .sprache { display: flex; }
  .header-aktionen { margin-left: var(--s-8); }
  .burger { display: none; }
}

/* ===== Mobiles Menü: vollflächig ===== */
.menue {
  position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: 99;
  background: var(--gummi); color: var(--kreide); overflow-y: auto;
  display: none;
}
.menue.offen { display: block; }
.menue__inner { display: grid; gap: var(--s-32); padding-block: var(--s-24) calc(var(--s-96) + env(safe-area-inset-bottom)); }
.menue__liste { list-style: none; padding: 0; display: grid; }
.menue__liste a {
  display: flex; align-items: baseline; gap: var(--s-16); padding: 14px 0; min-height: 44px;
  border-bottom: 1px solid var(--gummi-3); color: var(--kreide); text-decoration: none;
  font-size: clamp(1.5rem, 6vw, 2.2rem); font-weight: 780; font-stretch: 118%; text-transform: uppercase; line-height: 1.05;
}
.menue__liste a .code { color: var(--stahl); min-width: 2.2em; }
.menue__liste a[aria-current="page"] { color: var(--tarjan); }
.menue__liste a[aria-current="page"] .code { color: var(--tarjan); }
.menue__fuss { display: grid; gap: var(--s-16); }
.menue__sprache { display: flex; gap: var(--s-24); }
.menue__sprache a { color: var(--stahl); min-height: 44px; display: inline-flex; align-items: center; }
.menue__sprache a[aria-current] { color: var(--tarjan); }
html.menue-offen { overflow: hidden; }

/* ===== Profilspur (Übergang) ===== */
.spur { height: 28px; background-color: var(--gummi); background-image: var(--spur-gruen); background-repeat: repeat-x; background-position: left center; }
.spur--hell { background-color: var(--beton); background-image: var(--spur-gummi); }
.spur--kreide { background-color: var(--kreide); background-image: var(--spur-gummi); }
.spur--praegung { background-color: var(--gummi); background-image: var(--spur-praegung); }

/* ===== Hero (Startseite) ===== */
.hero { position: relative; overflow: hidden; background: var(--gummi); color: var(--kreide); }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-24); padding-top: clamp(32px, 6vw, 88px); }
.hero__text { display: grid; gap: var(--s-24); align-content: center; position: relative; z-index: 2; }
.hero__titel { display: grid; gap: var(--s-16); }
.hero__titel-klein {
  display: block; font-family: var(--mono); font-size: .8125rem; font-weight: 500; font-stretch: 100%;
  letter-spacing: .08em; line-height: 1.4; color: var(--tarjan); text-transform: uppercase;
}
.hero__titel-gross { display: block; font-size: var(--fs-flanke); line-height: .97; }
.hero__lead { color: #D9DAD6; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-12); align-items: center; }
.hero__rad { position: relative; z-index: 1; width: min(118vw, 560px); justify-self: center; margin-bottom: -42%; }
@media (min-width: 960px) {
  .hero__inner { grid-template-columns: 8fr 4fr; gap: var(--s-32); padding-block: clamp(56px, 7vw, 112px); min-height: min(calc(100vh - var(--header-h) - 28px), 820px); }
  .hero__rad { width: min(52vw, 720px); justify-self: start; align-self: center; margin: 0 calc(-1 * var(--rand) - 12vw) 0 0; }
}

/* ===== Seiten-Hero (Unterseiten) ===== */
.seiten-hero { position: relative; overflow: hidden; background: var(--gummi); color: var(--kreide); }
.seiten-hero__inner { position: relative; z-index: 1; display: grid; gap: var(--s-24); padding-block: clamp(48px, 8vw, 128px) clamp(48px, 7vw, 104px); }
.seiten-hero .code.kicker { color: var(--tarjan); }
.seiten-hero h1 { max-width: 15em; overflow-wrap: normal; }
@media (max-width: 639px) { .seiten-hero h1 { overflow-wrap: break-word; } }
.seiten-hero .lead { color: #D9DAD6; }
.seiten-hero__code {
  position: absolute; right: -.04em; bottom: -.18em; z-index: 0;
  font-size: clamp(7rem, 24vw, 22rem); font-weight: 800; font-stretch: 125%; line-height: .8; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1.5px var(--gummi-3); pointer-events: none; user-select: none;
}

/* ===== Splits & Raster ===== */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-48); }
.raster { display: grid; gap: var(--s-24); }
@media (min-width: 640px) {
  .raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .split--75 { grid-template-columns: 7fr 5fr; align-items: center; gap: var(--s-64); }
  .split--57 { grid-template-columns: 5fr 7fr; align-items: center; gap: var(--s-64); }
  .split--oben { align-items: start; }
  .raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 959px) {
  .raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== Footer ===== */
.site-footer { background: var(--gummi); color: var(--stahl); font-size: var(--fs-klein); }
.footer-grid { display: grid; gap: var(--s-32); padding-block: var(--s-64) calc(var(--s-64) + 72px); }
.footer-logo img { height: 52px; width: auto; }
.footer-titel {
  font-family: var(--mono); font-size: var(--fs-code); font-weight: 500; font-stretch: 100%;
  letter-spacing: .06em; line-height: 1.4; text-transform: uppercase; color: var(--tarjan); margin-bottom: var(--s-12);
}
.site-footer ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.site-footer a { color: var(--kreide); text-decoration: none; }
.site-footer a:hover { color: var(--tarjan); text-decoration: underline; }
.footer-adresse { font-style: normal; display: grid; gap: 6px; }
.footer-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-24); justify-content: space-between; border-top: 1px solid var(--gummi-3); padding-top: var(--s-24); font-size: .8125rem; }
@media (min-width: 960px) {
  .footer-grid { grid-template-columns: 4fr 3fr 3fr 2fr; padding-bottom: var(--s-48); }
}

/* ===== Mobile Action-Bar ===== */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  transition: transform var(--t-ui) var(--roll);
}
.action-bar a {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; font-stretch: 112%; text-transform: uppercase; letter-spacing: .04em; font-size: .9375rem;
  text-decoration: none;
}
.action-bar a svg { width: 20px; height: 20px; }
.action-bar .ab-anruf { background: var(--tarjan); color: var(--gummi); }
.action-bar .ab-anruf:active { background: var(--tarjan-hell); }
.action-bar .ab-termin { background: var(--gummi-3); color: var(--kreide); }
.action-bar.weg { transform: translateY(110%); }
body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
@media (min-width: 960px) {
  .action-bar { display: none; }
  body { padding-bottom: 0; }
}