/* ==========================================================================
   GEMEC – Layout: Container, Header, Navigation, Footer, Sektionen
   ========================================================================== */

/* Die Innenbreite steht als eigene Groesse, weil ausser der Huelle selbst auch
   die ausgeklappte Navigation danach ausgerichtet wird. Die haengt absolut
   unter dem Kopf und kann die Huelle deshalb nicht einfach erben. Eine zweite
   abgeschriebene Formel wuerde frueher oder spaeter auseinanderlaufen. */
:root {
  --huelle-breite: min(100% - 2.5rem, var(--width-max));
}

@media (max-width: 30rem) {
  :root {
    --huelle-breite: min(100% - 2rem, var(--width-max));
  }
}

.huelle {
  width: var(--huelle-breite);
  margin-inline: auto;
  /* Auf Geraeten mit Aussparung (Notch) im Querformat sonst angeschnitten */
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}

.abschnitt {
  padding-block: var(--space-2xl);
}

.abschnitt--eng {
  padding-block: var(--space-xl);
}

.abschnitt--grau {
  background: var(--paper);
  border-block: 1px solid var(--steel-200);
}

.abschnitt--navy {
  background: var(--navy-800);
  color: var(--steel-200);
}

.abschnitt--navy h2,
.abschnitt--navy h3 {
  color: var(--white);
}

.abschnitt--navy a {
  color: var(--blue-300);
}

.textspalte {
  max-width: var(--width-text);
}

/* ---------- Kopfbereich ---------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--steel-200);
}

.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: 4.5rem;
}

.marke {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--navy-800);
  padding-block: 0.4rem;
}

.marke img {
  width: 44px;
  height: 44px;
  flex: none;
}

.marke__name {
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  display: block;
}

.marke__zusatz {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--steel-500);
  margin-top: 0.1rem;
}

/* ---------- Navigation ---------- */

.nav-schalter {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  background: none;
  border: 1px solid var(--steel-300);
  border-radius: var(--radius-s);
  color: var(--navy-800);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

.nav-schalter__balken {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
}

.nav-schalter__balken::before,
.nav-schalter__balken::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
}

.nav-schalter__balken::before {
  top: -6px;
}
.nav-schalter__balken::after {
  top: 6px;
}

/* Zwischen 48rem und 67rem greifen zwei Grenzen ineinander: die feste Leiste
   am unteren Rand ist ab 48rem weg, die Hauptnavigation klappt aber erst ab
   67rem auf. In diesem Streifen bliebe sonst kein sichtbarer Weg zur Anfrage –
   deshalb steht sie hier als eigener Knopf im Kopfbereich.

   Über .kopf__innen mitadressiert, damit die Regel das display: inline-flex
   aus .knopf schlägt – components.css wird nach dieser Datei geladen. */
.kopf__innen .kopf__anfrage {
  display: none;
  margin-left: auto;
}

@media (min-width: 48rem) and (max-width: 67rem) {
  .kopf__innen .kopf__anfrage {
    display: inline-flex;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.nav__liste {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  display: block;
  padding: 0.6rem 0.7rem;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 550;
  text-decoration: none;
  border-radius: var(--radius-s);
  transition: background var(--transition), color var(--transition);
}

.nav__link:hover {
  background: var(--steel-100);
  color: var(--navy-800);
}

.nav__link[aria-current="page"] {
  color: var(--navy-800);
  font-weight: 650;
  box-shadow: inset 0 -2px 0 var(--blue-500);
}

/* Die Navigation klappt bis 67rem ein, nicht bis 62rem. Mit sechs Punkten
   passt die Leiste erst ab rund 1064px in eine Zeile; darunter brachen
   „Über uns“ und der Anfrageknopf um. Die 62rem an anderer Stelle in dieser
   Datei betreffen die Tippflächen und bleiben, wo sie sind. */
@media (max-width: 67rem) {
  .nav-schalter {
    display: inline-flex;
  }

  .nav {
    position: absolute;
    inset: 100% 0 auto;
    display: block;
    padding: var(--space-s) 0 var(--space-m);
    background: var(--white);
    border-bottom: 1px solid var(--steel-200);
    box-shadow: var(--shadow-l);
  }

  .nav[hidden] {
    display: none;
  }

  .nav__liste {
    display: block;
    width: var(--huelle-breite);
    margin-inline: auto;
  }

  .nav__liste li + li {
    border-top: 1px solid var(--steel-200);
  }

  .nav__link {
    padding: 0.85rem 0.25rem;
    font-size: 1.02rem;
    border-radius: 0;
  }

  .nav__link[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--blue-500);
    padding-left: 0.75rem;
  }

  /* display: flex statt des geerbten inline-flex aus .knopf – auf einem
     Inline-Element bleiben auto-Raender wirkungslos, der Knopf klebte dadurch
     am linken Rand und der ganze Zwischenraum sammelte sich rechts. */
  .nav .knopf {
    display: flex;
    width: var(--huelle-breite);
    margin: var(--space-s) auto 0;
    justify-content: center;
  }
}

/* ---------- Fussbereich ---------- */

.fuss {
  padding-block: var(--space-2xl) var(--space-m);
  background: var(--navy-900);
  color: var(--steel-300);
  font-size: 0.94rem;
}

.fuss a {
  color: var(--steel-200);
  text-decoration: none;
}

.fuss a:hover {
  color: var(--white);
  text-decoration: underline;
}

.fuss__raster {
  display: grid;
  gap: var(--space-l);
  /* min() wie bei allen anderen Rastern: ohne das laeuft der Fuss unter
     rund 240px Fensterbreite ueber den Rand hinaus. */
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}

.fuss__titel {
  margin-bottom: var(--space-xs);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.fuss__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fuss__liste li + li {
  margin-top: 0.42rem;
}

/* Wo bis vor Kurzem eine getippte Wortmarke stand, steht jetzt das Logo
   selbst – als .markenschild in components.css. */

/* Bueroezeiten unter der Anschrift: kleiner und zurueckgenommen. */
.fuss__zeiten {
  margin-top: 0.8rem;
  font-size: 0.87rem;
  color: var(--steel-400);
}

.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid rgb(255 255 255 / 0.13);
  font-size: 0.86rem;
  color: var(--steel-400);
}

.fuss__unten p {
  margin: 0;
}

.fuss__unten ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Auf dem Handy wird mit dem Daumen getroffen, nicht mit dem Mauszeiger.
   Die Links im Fußbereich – vor allem Telefonnummern und E-Mail – bekommen
   deshalb die empfohlene Mindesthöhe von 44 Pixeln. */
@media (max-width: 62rem) {
  .fuss__liste a,
  .fuss address a,
  .fuss__unten a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .fuss__liste li + li {
    margin-top: 0;
  }

  .fuss address {
    line-height: 1.9;
  }

  .krumen a,
  .krumen li {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}