/* Agentur am Salzhaff – Gestaltung.
   Farben aus dem Logo abgeleitet: Marineblau und Gold, dazu Sand und viel Weißraum.
   Keine externen Ressourcen: die Schrift liegt lokal (DSGVO). */

@font-face{font-family:"Roboto";src:url("/schrift/Roboto-Regular.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url("/schrift/Roboto-Bold.ttf") format("truetype");
  font-weight:700;font-style:normal;font-display:swap}

:root{
  --marine:#123a52; --marine-tief:#0c2838;
  /* Gold für Text und Knopfflächen: dunkel genug für 4.5:1 gegen Weiss und Sand.
     Das hellere --gold-deko trägt keinen Text, nur Ränder und Fokus. */
  --gold:#866227; --gold-deko:#b5873c; --gold-hell:#f0c87a;
  --sand:#f7f3ec; --weiss:#fff; --text:#243039; --text-leise:#5b6a75;
  --rand:#e3dcd1; --schatten:0 1px 2px rgba(18,58,82,.06),0 8px 24px rgba(18,58,82,.08);
  --bahn:1140px; --radius:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--text);background:var(--weiss);line-height:1.65;font-size:17px;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:var(--marine)}
h1,h2,h3{line-height:1.18;color:var(--marine-tief);margin:0 0 .5em;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2rem,1.3rem + 3vw,3.3rem)}
h2{font-size:clamp(1.55rem,1.15rem + 1.7vw,2.35rem)}
h3{font-size:1.16rem}
p{margin:0 0 1.1em}
.bahn{width:min(100% - 2.5rem,var(--bahn));margin-inline:auto}
.schmal{width:min(100% - 2.5rem,760px)}
/* Kein max-width auf Text (David 22.09.2026): Überschriften und Absätze brechen erst
   am Rand ihrer Spalte um, nicht vorher. */
.mitte{text-align:center;margin-inline:auto}
.dach{text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:700;
  color:var(--gold);margin:0 0 .6em}
.fuehrung{font-size:1.1rem;color:var(--text-leise)}
.sprung{position:absolute;left:-9999px}
.sprung:focus{left:1rem;top:1rem;z-index:99;background:var(--weiss);padding:.7rem 1rem;border-radius:8px}
:focus-visible{outline:3px solid var(--gold-deko);outline-offset:3px}

/* Kopf */
.kopf{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--rand)}
.kopf-reihe{display:flex;align-items:center;gap:1.5rem;padding:.6rem 0}
.marke img{width:250px;height:auto}
.nav{display:none;margin-left:auto;gap:1.6rem}
.nav a{text-decoration:none;font-weight:700;font-size:.95rem;color:var(--marine);padding:.3rem 0;
  border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--gold-deko)}
.knopf-kopf{margin-left:auto;padding:.55rem 1.1rem;font-size:.92rem}
@media (min-width:900px){.nav{display:flex}.knopf-kopf{margin-left:0}}
@media (max-width:640px){.marke img{width:190px}}

/* Knöpfe */
.knopf{display:inline-block;background:var(--gold);color:#fff;text-decoration:none;font-weight:700;
  padding:.85rem 1.6rem;border-radius:999px;transition:background .15s,transform .15s;border:2px solid var(--gold)}
.knopf:hover{background:#6b4d1d;border-color:#6b4d1d;transform:translateY(-1px)}
.knopf-leer{background:transparent;color:var(--marine);border-color:currentColor}
.knopf-leer:hover{background:var(--marine);color:#fff;border-color:var(--marine)}
.knopf-gross{padding:1rem 1.9rem;font-size:1.05rem}

/* Held */
.held{position:relative;isolation:isolate;min-height:clamp(440px,62vh,640px);display:grid;align-items:end}
.held-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.held::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,30,42,.35) 0%,rgba(8,30,42,.55) 45%,rgba(8,30,42,.88) 100%)}
.held-text{padding:3.5rem 0 3rem;color:#fff}
/* Der Titel (44 Zeichen) braucht gemessen 1070 px fuer EINE Zeile, die Bahn
   bietet 1140 px. Jede ch-Begrenzung darunter erzwingt einen Umbruch, den es
   nicht braucht: 20ch ergab drei Zeilen, 30ch (909 px) zwei. Ohne Begrenzung
   bricht er nur dort um, wo die Bahn wirklich zu schmal wird. */
.held-text h1{color:#fff;max-width:none;text-shadow:0 2px 20px rgba(0,0,0,.3)}
.held-text .fuehrung{color:rgba(255,255,255,.93)}
.held-text .dach{color:var(--gold-hell)}
.held-knoepfe{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.held-knoepfe .knopf-leer{color:#fff}
.held-knoepfe .knopf-leer:hover{background:#fff;color:var(--marine-tief);border-color:#fff}

/* Abschnitte */
.abschnitt{padding:clamp(3.2rem,7vw,5.5rem) 0}
.abschnitt-hell{background:var(--sand)}
.abschnitt-dunkel{background:var(--marine);color:#eaf1f5}
.abschnitt-dunkel h2{color:#fff}
.abschnitt-dunkel .fuehrung{color:rgba(255,255,255,.88)}
.abschnitt-dunkel .dach{color:var(--gold-hell)}

/* Leistungen */
.karten{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:2.2rem}
.karte{background:var(--weiss);border:1px solid var(--rand);border-radius:var(--radius);
  padding:1.7rem 1.5rem;box-shadow:var(--schatten)}
.karte h3{margin-bottom:.45em;color:var(--marine)}
.karte p{margin:0;color:var(--text-leise);font-size:.98rem}
.karte-nr{display:block;font-weight:700;color:var(--gold);font-size:.8rem;letter-spacing:.1em;margin-bottom:.7rem}

/* Zwei Spalten */
.zwei-spalten{display:grid;gap:2.5rem;align-items:center}
@media (min-width:900px){.zwei-spalten{grid-template-columns:1fr 1fr;gap:3.5rem}}
.bild-rahmen{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten)}

/* Team */
.team{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  margin-top:2.4rem;max-width:660px;margin-inline:auto}
.person{text-align:center}
.person img{border-radius:50%;aspect-ratio:1;object-fit:cover;width:180px;margin:0 auto .9rem;
  box-shadow:var(--schatten)}
.person-name{font-weight:700;color:var(--marine-tief);margin:0}
.person-rolle{color:var(--gold);font-size:.9rem;margin:0;font-weight:700}

/* Galerie */
.galerie{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:2.2rem}
.galerie a{display:block;border-radius:10px;overflow:hidden;box-shadow:var(--schatten);line-height:0}
.galerie img{aspect-ratio:3/2;object-fit:cover;width:100%;transition:transform .35s}
.galerie a:hover img{transform:scale(1.04)}

/* Kontakt */
/* .kontakt-innen war auf 760 px begrenzt und wirkte dadurch gegenüber
   allen anderen Abschnitten eingerückt. Jetzt volle Bahn, der Text
   bleibt über .fuehrung auf Lesebreite. */
.kontakt-innen{max-width:none}
.kontakt-wege{display:flex;flex-wrap:wrap;gap:.9rem;margin:1.8rem 0 1.4rem}
.abschnitt-dunkel .knopf-leer{color:#fff}
.abschnitt-dunkel .knopf-leer:hover{background:#fff;color:var(--marine-tief);border-color:#fff}
.anschrift{font-style:normal;color:rgba(255,255,255,.8);font-size:.95rem}

/* Rechtstexte */
.schmal h2{margin-top:2em}
.schmal ul{padding-left:1.2em}
.schmal li{margin-bottom:.4em}

/* Fuß */
.fuss{background:var(--marine-tief);color:#c9d6de;padding:3rem 0 1.5rem;font-size:.95rem}
.fuss-gitter{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.fuss a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.fuss a:hover{border-bottom-color:var(--gold-deko)}
.fuss-marke{font-weight:700;color:#fff;font-size:1.05rem;margin:0 0 .4em}
.fuss-titel{font-weight:700;color:#fff;margin:0 0 .4em}
.fuss-klein{color:#c9d6de;margin:0;line-height:1.8}
.fuss-zeile{border-top:1px solid rgba(255,255,255,.14);margin-top:2.5rem;padding-top:1.2rem}
.fuss-zeile p{margin:0;font-size:.88rem;color:#9fb2bd}

/* --- Feinschliff ---------------------------------------------------- */

/* Der Kopf bleibt oben stehen. Ohne diesen Abstand rutschen die
   Überschriften beim Sprung auf einen Anker unter den Kopf. */
:target,
section[id]{scroll-margin-top:clamp(84px,12vh,120px)}

/* Vier Leistungen: auf mittleren Breiten sauber 2x2 statt 3+1 */
@media (min-width:620px) and (max-width:1040px){
  .karten{grid-template-columns:repeat(2,1fr)}
}

/* Kopf kompakter halten, damit er wenig Platz frisst */
.marke img{width:clamp(170px,20vw,215px)}