/* ==========================================================================
   LOGICOST – logicost.de
   Statischer Nachbau der Squarespace-Seite (Stand 2025) für IONOS-Hosting.
   Farben, Schriften und Größen entsprechen dem Original-Theme.
   ========================================================================== */

@import url("../fonts/fonts.css");

/* --------------------------------------------------------------- Tokens -- */
:root {
  /* Farbpalette (aus dem Squarespace-Theme übernommen) */
  --c-white:  #ffffff;
  --c-green:  #0c6407;   /* "black"       – Fließtext, Auszeichnungen        */
  --c-accent: #ade470;   /* "accent"      – Signalgrün, Sektion "bright"     */
  --c-light:  #e1dfd9;   /* "lightAccent" – Seitenhintergrund               */
  --c-dark:   #40443f;   /* "darkAccent"  – Überschriften, Buttons          */
  --c-red:    #c91313;   /* Akzentfarbe "Quick-Check"                        */
  --c-rust:   #a22a17;   /* Akzentfarbe "Honorarmodell"                      */

  /* Fluide Typo-Einheit: 1.2vw zwischen 800px und 2040px Viewport            */
  --u: clamp(9.6px, 1.2vw, 24.48px);

  --fs-h1:     calc(16px + 3    * var(--u));
  --fs-h2:     calc(16px + 1.8  * var(--u));
  --fs-h3:     calc(16px + 1.2  * var(--u));
  --fs-h4:     calc(16px + 0.6  * var(--u));
  --fs-large:  calc(16px + 0.4  * var(--u));
  --fs-body:   16px;
  --fs-small:  calc(16px - 0.1  * var(--u));
  --fs-marquee:calc(16px + 0.5  * var(--u));

  --maxw: 2040px;
  --gutter: 1vw;
  --gap: clamp(8px, 0.86vw, 18px);

  --header-h: 171px;
  --divider-h: 3vw;
}

/* ---------------------------------------------------------------- Reset -- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-light);
  color: var(--c-green);
  font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1.5;
  overflow-x: hidden;
}

/* height:auto neutralisiert die width/height-Attribute im HTML (die nur zur
   Layout-Reservierung dienen) – die tatsächliche Größe kommt aus dem CSS. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Archivo Black", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--c-dark);
  margin: 0;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

figure, figcaption, blockquote { margin: 0; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul { margin: 0 0 1em; padding-left: 1.4em; }

.u  { text-decoration: underline; }
.c-green { color: var(--c-green); }
.c-dark  { color: var(--c-dark); }
.c-red   { color: var(--c-red); }
.c-rust  { color: var(--c-rust); }
.c-black { color: #0f0f0f; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--c-dark); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------ Container -- */
.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------- Buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: "Archivo Black", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 16px 21px;
  min-height: 50px;
  border: 0;
  border-radius: 300px;
  background: var(--c-dark);
  color: var(--c-white);
  cursor: pointer;
  transition: opacity .18s ease, transform .18s ease;
}
.btn:hover  { opacity: .82; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--c-green); outline-offset: 3px; }

/* Buttons auf der grünen Kontakt-Sektion tragen im Original Akzent-Grün */
.section--bright .btn { color: var(--c-accent); }

.btn--block { display: flex; width: 100%; }

/* Zurückhaltendere Variante für Links zu externen Werkzeugen (BOX-PAL-CALC):
   Kontur statt Vollfarbe, damit "Kontakt Aufnehmen" die klare Haupt-Aktion
   bleibt. */
.btn--ghost {
  background: transparent;
  color: var(--c-dark);
  border: 2px solid var(--c-dark);
  padding: 14px 19px;
}
.btn--ghost:hover { background: var(--c-dark); color: var(--c-white); opacity: 1; }
.section--bright .btn--ghost { color: var(--c-green); border-color: var(--c-green); }
.section--bright .btn--ghost:hover { background: var(--c-green); color: var(--c-white); }

/* -------------------------------------------------------------- Header --- */
.site-header {
  position: relative;
  z-index: 20;
  background: transparent;
}
/* Logo und Menü behalten ihre natürliche Breite (auto); die mittlere Spalte
   (1fr) nimmt den übrigen Platz und zentriert den BOX-PAL-CALC-Button darin.
   Damit kann der Button nie mit dem breiten Logo oder der Navigation
   kollidieren, egal wie schmal das Fenster gerade ist. */
.site-header__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 2vw var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2vw;
}
/* Logo (618px) und Menü belegen die Kopfzeile bereits bis ca. 1450px fast
   vollständig - für den Button bleibt erst darüber sauberer, überlappungs-
   freier Platz (an mehreren Breiten gemessen). Unterhalb bleibt er
   ausgeblendet; der gleiche Link steht dort unter "Verpackungs-Optimierung"
   ohnehin für alle sichtbar zur Verfügung. */
.site-header__boxpal-wrap {
  display: none;
  justify-self: center;
  min-width: 0;
  max-width: 100%;
}
.site-header__boxpal-wrap .btn {
  white-space: normal;
  text-align: center;
  font-size: 13px;
  line-height: 1.2;
  padding: 10px 16px;
  max-width: 230px;
}
@media (min-width: 1500px) {
  .site-header__boxpal-wrap { display: block; }
}
.site-header__side {
  display: flex;
  align-items: center;
  min-width: 0;
}
.site-header__side--end { gap: 2vw; }
/* max-height statt einer festen height: das Logo bleibt so immer
   seitenrichtig proportional, auch wenn ihm auf schmaleren Bildschirmen
   weniger Breite zur Verfügung steht (statt seitlich verzerrt zu werden). */
.site-header__logo img {
  height: auto;
  max-height: 120px;
  width: auto;
  max-width: 100%;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 40px);
}
.site-nav a:not(.btn) {
  font-family: "Poppins", Arial, sans-serif;
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--c-dark);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a.btn { white-space: nowrap; }
.site-nav a:not(.btn):hover { text-decoration: underline; }
.site-nav a[aria-current="page"]:not(.btn) { text-decoration: underline; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--c-dark);
}
.nav-toggle .bar {
  display: block;
  height: 3px;
  background: currentColor;
  margin: 6px auto;
  width: 28px;
  transition: transform .25s ease, opacity .25s ease;
}
.nav-open .nav-toggle .bar:nth-child(2) { transform: translateY(9px) rotate(45deg); }
.nav-open .nav-toggle .bar:nth-child(3) { opacity: 0; }
.nav-open .nav-toggle .bar:nth-child(4) { transform: translateY(-9px) rotate(-45deg); }

/* -------------------------------------------------------------- Sections -- */
.section {
  position: relative;
  padding-bottom: 25.6px;
}
.section--light  { background: var(--c-light); }
.section--white  { background: var(--c-white); }
.section--bright { background: var(--c-accent); }
.section--bright { color: var(--c-green); }

.section__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section-pad-top { padding-top: 3vw; }

/* Wellen-Trenner zwischen den Sektionen.
   Die Farbkante folgt der Welle: --wave-from füllt die Fläche darüber,
   --wave-to liegt darunter. Strich wie im Original 6px in --c-dark. */
.wave {
  --wave-from: var(--c-light);
  --wave-to: var(--c-light);
  display: block;
  width: 100%;
  height: var(--divider-h);
  min-height: 22px;
  position: relative;
  z-index: 6;
  pointer-events: none;
  background: var(--wave-to);
}
.wave svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;   /* damit der 6px-Strich an Hoch-/Tiefpunkt nicht abschneidet */
}
.wave__fill { fill: var(--wave-from); stroke: none; }
.wave__line {
  fill: none;
  stroke: var(--c-dark);
  stroke-width: 6px;
  /* butt statt square: sonst ragt die Linienkappe seitlich über die Seite
     hinaus und erzeugt 1px waagerechten Überlauf. */
  stroke-linecap: butt;
}

.wave--from-light  { --wave-from: var(--c-light); }
.wave--from-white  { --wave-from: var(--c-white); }
.wave--from-bright { --wave-from: var(--c-accent); }
.wave--to-light    { --wave-to: var(--c-light); }
.wave--to-white    { --wave-to: var(--c-white); }
.wave--to-bright   { --wave-to: var(--c-accent); }

/* -------------------------------------------------------------- Marquee --- */
.marquee {
  --marquee-duration: 38s;
  overflow: hidden;
  padding: 1.4vw 0;
  background: var(--c-light);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-duration) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: "Archivo Black", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-size: var(--fs-marquee);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--c-green);
  white-space: nowrap;
  padding-right: 2.5rem;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ----------------------------------------------------------------- Hero --- */
.hero__media {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: calc(var(--gutter) + 10px);
}
.hero__frame {
  position: relative;   /* Bezug für die Überschrift auf dem Bild */
}
.hero__frame img {
  width: 100%;
  height: clamp(240px, 52vw, 1060px);
  object-fit: cover;
  object-position: 50% 50%;
}
/* Überschrift liegt oben auf dem Bild – ringsum der gleiche Abstand zum Rand.
   Das halbtransparente weiße Band stammt aus dem Original und hält den Text
   auch über hellen Wolken lesbar. */
.hero__title {
  --hero-inset: clamp(10px, 1.6vw, 34px);
  position: absolute;
  top: var(--hero-inset);
  left: var(--hero-inset);
  right: var(--hero-inset);
  margin: 0;
  padding: .45em .8em;
  text-align: center;
  color: var(--c-dark);
  background: rgba(255, 255, 255, .49);
  font-size: min(2.15vw, 44px);
  white-space: nowrap;
  overflow: hidden;
}

/* Unterhalb ~1200px würde die einzeilige Zeile zu klein werden – dort lieber
   umbrechen und die Schrift lesbar halten. Bei 1200px sind beide Größen
   gleich, der Übergang fällt daher nicht auf. */
@media (max-width: 1200px) {
  .hero__title {
    white-space: normal;
    font-size: clamp(17px, 2.6vw, 26px);
  }
}

/* ---------------------------------------------------------------- Cards --- */
.section-title { margin-bottom: .35em; }
/* Im Original steht die Überschrift in einem schmaleren Raster-Block und
   bricht dadurch zweizeilig um. */
.section-title--narrow { max-width: 66%; }

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  align-items: start;
}
.card { display: flex; flex-direction: column; }

.card__media {
  width: 100%;
  height: auto;
  aspect-ratio: 305 / 255;
  object-fit: cover;
  margin-bottom: var(--gap);
}
.card__media--tall { aspect-ratio: 305 / 361; }
.card__title {
  text-align: center;
  color: var(--c-green);
  margin-bottom: .6em;
}
.card__body { background: rgba(225, 223, 217, .65); }
.card__body p { margin-bottom: 1em; }
.card__cta { margin-top: .4em; }
.card__cta .btn { padding: 12px 18px; }

/* Ab 4 Spalten liegen Bild-, Titel- und Textzeile aller Karten wie im
   Original exakt auf einer Höhe (Karte selbst wird zum reinen Container). */
@media (min-width: 1101px) {
  .cards { grid-template-rows: auto auto auto; }
  .card { display: contents; }
  .card__media { grid-row: 1; margin-bottom: 0; }
  .card__title { grid-row: 2; align-self: center; margin-bottom: 0; }
  .card__body  { grid-row: 3; }
}

/* ----------------------------------------------------------------- Team --- */
.team-intro p { font-size: var(--fs-large); line-height: 1.5; }
.team-intro { margin: 1.2em 0 2em; }

.hr {
  border: 0;
  border-top: 2px solid rgba(64, 68, 63, .35);
  margin: 2.2em 0;
}

.person {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(16px, 2vw, 44px);
  align-items: start;
}
.person__photo {
  width: 100%;
  aspect-ratio: 200 / 306;
  object-fit: cover;
  object-position: 50% 20%;
}
.person__name {
  font-family: "Poppins", Arial, sans-serif;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1;
  color: var(--c-dark);
  font-size: min(2.66vw, 54.3px);
  text-align: center;
  margin-bottom: .8em;
  white-space: nowrap;
}
.person__text { text-align: center; }
.person__text em { color: var(--c-dark); font-style: italic; }

.team-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 70px);
}

/* about.html: Person + Branchenerfahrung nebeneinander */
.person-wide {
  display: grid;
  grid-template-columns: 147px minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 60px);
  align-items: start;
}
.person-wide .person__photo { aspect-ratio: 147 / 268; }
.branchen { text-align: center; }
.branchen ul { list-style: none; padding: 0; margin: .4em 0 1em; }
.branchen li { margin: .1em 0; }

/* --------------------------------------------------------- Testimonials --- */
.testimonials { background: var(--c-white); }
.testimonials__title {
  text-align: center;
  color: var(--c-green);
  margin-bottom: 1em;
}
.carousel { position: relative; }
.carousel__viewport { overflow: hidden; }
.carousel__track {
  display: flex;
  gap: var(--gap);
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  align-items: stretch;
}
.carousel__slide {
  flex: 0 0 calc((100% - var(--gap)) / 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 4%;
}
.carousel__slide img {
  width: 30%;
  max-width: 190px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 40px;
}
.carousel__slide h3 {
  font-size: calc(16px + 0.2 * var(--u));
  color: var(--c-green);
  margin-bottom: 10px;
}
.carousel__slide .quote {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-green);
}
.carousel__btn {
  position: absolute;
  top: 40%;
  width: 46px; height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--c-dark);
  color: var(--c-white);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .2s ease;
}
.carousel__btn:hover { opacity: .8; }
.carousel__btn[disabled] { opacity: .25; cursor: default; }
.carousel__btn--prev { left: -8px; }
.carousel__btn--next { right: -8px; }
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.carousel__dots button {
  width: 10px; height: 10px;
  padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(64, 68, 63, .3);
  cursor: pointer;
}
.carousel__dots button[aria-current="true"] { background: var(--c-dark); }

/* -------------------------------------------------------------- Kontakt --- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 80px);
  align-items: start;
}
.contact-heading { color: var(--c-dark); margin-bottom: .5em; }
.contact-heading--black { color: #0f0f0f; }

.contact-person + .contact-person { margin-top: clamp(24px, 3vw, 60px); }

.contact-person__row {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
}
.contact-person__photo {
  width: 94px; height: 141px;
  object-fit: cover;
  object-position: 50% 20%;
}
.contact-person__data p { margin: 0; }
.contact-person__social {
  display: flex; align-items: center;
  height: 65px;
}
.contact-person__social img { height: 65px; width: auto; object-fit: contain; }
.contact-person__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 12px;
}

.form-label {
  font-size: min(2.19vw, 44.7px);
  line-height: 1.15;
  margin-bottom: .5em;
}

/* --------------------------------------------------------------- Forms ---- */
.lc-form fieldset { border: 0; margin: 0 0 20px; padding: 0; }
.lc-form legend {
  padding: 0;
  font-size: var(--fs-body);
  color: var(--c-green);
  margin-bottom: 4px;
}
.lc-form .field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.lc-form .field { margin-bottom: 20px; }
.lc-form label {
  display: block;
  font-size: var(--fs-body);
  color: var(--c-green);
  margin-bottom: 4px;
}
.lc-form .req { opacity: .75; }
.lc-form input[type="text"],
.lc-form input[type="email"],
.lc-form textarea {
  width: 100%;
  font-family: inherit;
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--c-green);
  background: transparent;
  border: 1px solid var(--c-green);
  border-radius: 24px;
  padding: 8px 15px;
}
.lc-form textarea {
  min-height: 100px;
  border-radius: 18px;
  resize: vertical;
}
.lc-form input:focus, .lc-form textarea:focus {
  outline: 2px solid var(--c-dark);
  outline-offset: 1px;
}
.lc-form .hp {
  position: absolute; left: -5000px;
  width: 1px; height: 1px; overflow: hidden;
}
.form-status {
  margin-top: 14px;
  font-size: var(--fs-body);
}
.form-status--ok  { color: var(--c-green); }
.form-status--err { color: var(--c-red); }

.newsletter { margin-top: clamp(28px, 3vw, 56px); }
.newsletter h2 {
  font-size: calc(16px + 0.2 * var(--u));
  color: var(--c-green);
  margin-bottom: .6em;
}
.newsletter__desc { margin-bottom: 1.2em; }
.newsletter__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.newsletter__row .field { flex: 1 1 260px; margin-bottom: 0; }
.newsletter__note { margin-top: 1em; font-size: var(--fs-small); }

/* -------------------------------------------------------------- Footer ---- */
.site-footer {
  background: var(--c-light);
  padding: clamp(24px, 3vw, 56px) 0 clamp(28px, 3vw, 56px);
}
.site-footer__top {
  display: grid;
  grid-template-columns: 299px minmax(0, 1fr);
  gap: clamp(16px, 2vw, 40px);
  align-items: center;
}
.site-footer__logo img { width: 100%; max-width: 299px; }
.site-footer__claim {
  text-align: center;
  color: var(--c-dark);
}
.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px 17px;
  margin-top: clamp(14px, 1.5vw, 26px);
}
.site-footer__nav .btn { min-height: 27px; padding: 4px 21px; }
.site-footer__legal {
  margin-top: clamp(18px, 2vw, 34px);
  font-size: var(--fs-small);
  color: var(--c-dark);
  text-align: center;
}

/* ---------------------------------------------------------- Legal pages --- */
.legal { padding-top: 2vw; }
.legal h2 { margin-bottom: .8em; }
.legal-columns {
  display: grid;
  grid-template-columns: 253px 253px minmax(0, 1fr);
  gap: clamp(16px, 2vw, 40px);
  align-items: start;
}
.legal-columns .legal-wide { grid-column: 3; grid-row: 1 / span 2; }
.legal-columns .legal-resp { grid-column: 1 / span 2; }
.legal-body p { margin-bottom: 1em; }
.legal-body a:not(.btn) { color: var(--c-green); }


/* --------------------------------------------- Scroll-Animationen -------- */
/* Werte wie im Squarespace-Original: slide + fade, 0.8s, ease.
   Der Ausgangszustand gilt nur, wenn JavaScript läuft (Klasse js-anim wird
   im <head> gesetzt). Ohne JS ist sofort alles sichtbar – anders als im
   Original, das Inhalte bis zum Start des Skripts verborgen hielt. */
.js-anim [data-anim] {
  opacity: 0;
  transform: translateY(30%);
  transition-property: opacity, transform;
  transition-duration: .8s;
  transition-timing-function: ease;
}
.js-anim [data-anim].is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Notfall: Übergang aus, Endzustand sofort (siehe revealAll() in site.js) */
.js-anim.anim-off [data-anim] { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .js-anim [data-anim] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------------------------------------------------------------ Responsive -- */

/* Logo und Hauptmenü passen nebeneinander erst ab ca. 1268px (Logo 618px +
   Menü ca. 574px + Abstände) – darunter (Tablets, kleine Laptop-Displays)
   greift wie auf dem Handy das Hamburger-Menü, statt das Menü abzuschneiden
   oder das Logo unsichtbar zu verzerren. Bewusst getrennt vom generellen
   767px-Umbruch: Karten, Footer & Co. bleiben bis 1100px/900px zweispaltig
   bzw. unverändert, nur die Navigation wechselt schon früher. */
@media (max-width: 1279px) {
  .nav-toggle { display: block; position: relative; z-index: 40; }
  .site-nav {
    position: fixed;
    inset: 0;
    background: var(--c-light);
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 30;
  }
  .nav-open .site-nav { transform: translateX(0); }
  .site-nav a { font-size: 20px; }
  .nav-open { overflow: hidden; }
}

@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .person-wide {
    grid-template-columns: 147px minmax(0, 1fr);
  }
  .person-wide .branchen { grid-column: 1 / -1; }
  .legal-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legal-columns .legal-wide { grid-column: 1 / -1; grid-row: auto; }
  .legal-columns .legal-resp { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .team-duo { grid-template-columns: minmax(0, 1fr); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .carousel__slide { flex: 0 0 100%; }
  .site-footer__top { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .site-footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  :root {
    --gutter: 6vw;
    --header-h: 82px;
    --divider-h: 5vw;
  }
  .site-header__inner { padding: 6vw var(--gutter); }
  .site-header__logo img { max-height: 30px; }

  /* Hamburger-Menü selbst greift bereits ab 1279px (siehe oben) – hier nur
     noch die auf echten Handy-Breiten zusätzlich verkleinerten Werte. */

  .cards { grid-template-columns: minmax(0, 1fr); }
  .card__title { min-height: 0; }
  .person { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .person__photo { max-width: 240px; }
  .person-wide { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .person-wide .person__photo { max-width: 200px; }

  .contact-person__row {
    grid-template-columns: 94px minmax(0, 1fr);
    row-gap: 16px;
  }
  .contact-person__social { grid-column: auto; height: auto; }
  .contact-person__social img { height: 52px; }

  .lc-form .field-row { grid-template-columns: minmax(0, 1fr); }

  .site-footer__nav { grid-template-columns: minmax(0, 1fr); }

  .hero__title {
    font-size: clamp(15px, 4.4vw, 26px);
    padding: .5em .7em;
  }
  .hero__media { padding-inline: var(--gutter); }

  /* Pfeile neben das runde Foto legen, damit sie den Text nicht überdecken */
  .carousel__btn { top: 60px; }
  .carousel__btn--prev { left: 0; }
  .carousel__btn--next { right: 0; }
}

@media print {
  .site-header, .site-footer__nav, .carousel__btn, .marquee { display: none; }
  body { background: #fff; }
}