/* =========================================================
   Aussehen der Webseite
   Farben und Schrift aus dem Markenauftritt:
   Jet Blau, Petrol, Pazifik Blau, Pfirsich, Porzellan; Schrift Inter.
   Farben in 20er-Transparenzstufen sind als --…-20 usw. angelegt.
   ========================================================= */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/fonts/inter-latin-300.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/inter-latin-400.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/inter-latin-700.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/fonts/inter-latin-ext-300.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/inter-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/inter-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --jet: #1B2E3C;
  --petrol: #2A7F8A;
  --pazifik: #4FB8C4;
  --pfirsich: #E8734A;
  --porzellan: #F5F5F0;
  --weiss: #FFFFFF;
  --jet-40: rgba(27, 46, 60, 0.4);
  --jet-20: rgba(27, 46, 60, 0.2);
  --petrol-20: rgba(42, 127, 138, 0.2);
  --pazifik-20: rgba(79, 184, 196, 0.2);
  --porzellan-60: rgba(245, 245, 240, 0.6);
  --porzellan-20: rgba(245, 245, 240, 0.2);
  --schrift: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --breite: 1200px;
  --rand: max(24px, env(safe-area-inset-left, 0px));
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--porzellan);
  color: var(--jet);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: var(--jet); text-underline-offset: 3px; }
a:hover { color: var(--petrol); }
:focus-visible { outline: 3px solid var(--pfirsich); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.15; text-wrap: balance; }
h1 { font-size: clamp(34px, 5vw, 56px); }
h2 { font-size: clamp(26px, 3.4vw, 40px); }
h3 { font-size: 22px; }
p { margin: 0; }
.text p + p, .lead p + p { margin-top: 1em; }

.sprung { position: absolute; left: -9999px; top: 8px; background: var(--weiss); padding: 10px 16px; z-index: 30; }
.sprung:focus { left: 16px; }

/* ---------- Grundraster ---------- */
.wrap {
  max-width: var(--breite);
  margin: 0 auto;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}
.band { padding-block: 80px; }
.band-klein { padding-block: 64px; }
.band-oben { padding-block: 40px 72px; }
.band-unten { padding-block: 0 80px; }
.schmal { max-width: 820px; }
.stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.stack.eng { gap: 12px; max-width: 640px; }
.stack.gross { gap: 40px; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 56px; align-items: center; }
.split.oben { align-items: start; }
.raster { display: grid; gap: 24px; }
.raster-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.raster-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 16px; }
.raster-partner { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 28px; }
.titelzeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }

.oberzeile { font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--petrol); }
.oberzeile.klein { font-size: 13px; }
.lead { font-size: 20px; font-weight: 300; max-width: 640px; }
.leise { font-size: 15px; font-weight: 300; }
.leer { font-size: 18px; font-weight: 300; }

.weiss { background: var(--weiss); }
.petrol { background: var(--petrol); color: var(--porzellan); }
.petrol a { color: var(--porzellan); }
.petrol a:hover { color: var(--weiss); }
.petrol .oberzeile { color: var(--porzellan); }

/* ---------- Knöpfe und Links ---------- */
.knoepfe { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 26px; border-radius: 4px;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; border: 0;
}
/* Auf Pfirsich steht dunkle Schrift: weiss wäre zu schwach lesbar */
.knopf-pfirsich { background: var(--pfirsich); color: var(--jet); }
.knopf-pfirsich:hover { background: #d9653d; color: var(--jet); }
.knopf-rand { background: transparent; color: var(--jet); border: 1.5px solid var(--jet); }
.knopf-rand:hover { background: var(--jet); color: var(--porzellan); }
.textlink { font-weight: 700; padding-block: 10px; align-self: flex-start; color: var(--pfirsich); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; }
.textlink:hover { color: var(--pfirsich); text-decoration: underline; }
.textlink .pfeil { flex-shrink: 0; transition: transform .15s; }
.textlink:hover .pfeil { transform: translateX(3px); }
/* Auf dunklem Grund: Text und Pfeil hell (Orange auf Petrol wäre schlecht lesbar) */
.textlink.hell, .petrol a.textlink.hell { color: var(--porzellan); }
.textlink.hell .pfeil { color: var(--porzellan); }

/* ---------- Bilder und Platzhalter ---------- */
.platz {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--petrol-20); border: 1.5px dashed var(--jet-40);
  font-size: 14px; padding: 12px;
}
.platz.hell { background: var(--pazifik-20); }
.bild-gross { width: 100%; height: clamp(260px, 38vw, 460px); object-fit: cover; }
.bild-mittel { width: 100%; height: clamp(240px, 32vw, 400px); object-fit: cover; }
mark.platzhalter { background: rgba(232, 115, 74, 0.35); color: inherit; padding: 0 3px; border-radius: 2px; }

/* ---------- Testphase-Hinweis ---------- */
.testphase { background: var(--pfirsich); color: var(--jet); font-size: 14px; text-align: center; padding-block: 8px; }
.testphase mark.platzhalter { background: var(--porzellan-60); }

/* ---------- Kopf ---------- */
.kopf { background: var(--jet); color: var(--porzellan); }
.kopf-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 16px; }
.marke { display: flex; align-items: center; color: var(--porzellan); text-decoration: none; min-height: 48px; }
.marke:hover { color: var(--porzellan); }
.logo { max-height: 56px; width: auto; }
.logo-platz { display: flex; align-items: center; justify-content: center; width: 150px; height: 50px; border: 1.5px dashed var(--porzellan-60); font-size: 13px; }
.wortmarke { font-size: 22px; font-weight: 700; letter-spacing: 0.01em; }
.menue { display: flex; flex-wrap: wrap; gap: 4px 32px; }
.menue a { color: var(--porzellan); text-decoration: none; padding-block: 10px; border-bottom: 2px solid transparent; }
.menue a:hover { border-bottom-color: var(--pazifik); color: var(--porzellan); }
.menue a[aria-current="page"] { border-bottom-color: var(--pfirsich); }

/* ---------- Startseite ---------- */
/* Startbild über die ganze Breite, Text liegt darauf */
.hero { position: relative; isolation: isolate; min-height: clamp(520px, 86vh, 860px); display: flex; align-items: flex-end;
  background: var(--petrol); color: var(--porzellan); overflow: hidden; }
.hero-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* Dunkler Schleier, damit die Schrift auf jedem Foto lesbar bleibt */
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(27, 46, 60, 0.78) 0%, rgba(27, 46, 60, 0.35) 55%, rgba(27, 46, 60, 0.15) 100%); }
.hero.ohne-bild::after { display: none; }
.hero-platz { position: absolute; top: 24px; right: 24px; font-size: 14px; border: 1.5px dashed var(--porzellan-60); padding: 8px 12px; }
.hero-inhalt { width: 100%; padding-block: 96px 88px; }
.hero .stack { max-width: 720px; }
.hero h1 { color: var(--porzellan); }
.hero .oberzeile { color: var(--porzellan); }
.hero .lead { max-width: 600px; }
.hero mark.platzhalter { background: rgba(232, 115, 74, 0.55); }
.partnerlogo {
  height: 140px; padding: 20px; border-radius: 6px;
  background: var(--porzellan); color: var(--jet) !important; text-decoration: none;
  display: flex; align-items: center; justify-content: center; text-align: center; font-size: 15px; font-weight: 700;
}
.partnerlogo img { max-height: 100%; width: auto; object-fit: contain; }

.fliesstext { font-size: 18px; }
.fliesstext h2 { font-size: 24px; }
.partnerkachel { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; min-width: 0; }
.partnerkachel .partnerlogo { width: 100%; }
.partnerzeile { font-size: 16px; font-weight: 300; }
.knopf-hell { border: 1.5px solid var(--porzellan); color: var(--porzellan) !important; background: transparent; min-height: 44px; padding: 10px 20px; margin-top: auto; }
.knopf-hell:hover { background: var(--porzellan); color: var(--jet) !important; }
span.knopf-hell { cursor: default; }
.knopf-dunkel { background: var(--jet); color: var(--porzellan); }
.knopf-dunkel:hover { background: var(--petrol); color: var(--porzellan); }
span.knopf { cursor: default; }
.telzeile { font-size: 16px; }
.telzeile a { font-weight: 700; }
.hinweis { font-size: 14px; font-weight: 300; border-top: 1px solid var(--jet-20); padding-top: 16px; margin-top: 8px; }
.hellblau { background: var(--pazifik-20); }

/* ---------- Partner ---------- */
.karte { background: var(--weiss); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; color: var(--jet); text-decoration: none; min-width: 0; }
.karte:hover { color: var(--jet); }
.karte:hover .karte-name { text-decoration: underline; }
.karte-bild { width: 100%; height: 220px; object-fit: cover; border: 0; }
.karte-bild.nur-logo { object-fit: contain; padding: 32px; background: var(--weiss); }
.karte-inhalt { padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.karte-name { font-size: 22px; font-weight: 700; line-height: 1.25; }
.mehr { font-weight: 700; display: flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--pfirsich); }
.karte:hover .mehr .pfeil { transform: translateX(3px); }
.mehr .pfeil { transition: transform .15s; }

.pfad { font-size: 14px; padding-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.partner-kopf { display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: center; }
.partner-kopf .stack { flex: 1 1 360px; }
.partner-logo-box { flex: 0 0 auto; width: clamp(140px, 20vw, 220px); aspect-ratio: 1; background: var(--weiss); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.partner-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.zurueck { padding-block: 56px 80px; }
.galerie img { width: 100%; height: 280px; object-fit: cover; }
.text h2 { font-size: 22px; margin-top: 1.4em; margin-bottom: 0.4em; }
.text ul { padding-left: 1.2em; margin: 0.6em 0; }

/* ---------- Rechtliches ---------- */
.rechtliches h1 { margin-bottom: 32px; }
.rechtliches h2 { font-size: 22px; margin-top: 32px; margin-bottom: 8px; }
.rechtliches p, .rechtliches ul { max-width: 68ch; }
.rechtliches ul { padding-left: 1.2em; margin: 0.5em 0; }

/* ---------- Fuss ---------- */
.fuss { background: var(--jet); color: var(--porzellan); font-size: 15px; }
.fuss .wrap { padding-block: 64px 32px; display: flex; flex-direction: column; gap: 40px; }
.fuss-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; }
.fuss-spalten > * { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.fuss-firma { font-size: 17px; }
.fuss-titel { color: var(--pfirsich); }
.fuss a { color: var(--porzellan); padding-block: 2px; }
.fuss a:hover { color: var(--pazifik); }
.copy { border-top: 1px solid var(--porzellan-20); padding-top: 24px; font-size: 13px; font-weight: 300; }

@media (max-width: 600px) {
  body { font-size: 16px; }
  .band { padding-block: 56px; }
  .band-klein { padding-block: 44px; }
  .split { gap: 32px; }
  .lead { font-size: 18px; }
  .hero { min-height: 78vh; }
  .hero-inhalt { padding-block: 72px 56px; }
  .menue { gap: 4px 24px; }
  .partnerlogo { height: 110px; padding: 16px; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.knoepfe mark.platzhalter { align-self: center; }
.hero .knopf-hell { padding: 12px 26px; min-height: 48px; margin-top: 0; }
.lead ul { padding-left: 1.2em; margin: 0.6em 0; }
.lead h2 { font-size: 24px; margin-top: 1em; }
strong { font-weight: 700; }
.band + .zurueck { padding-top: 0; }
/* Ganzer Block rechts, Text rechtsbündig (Einzelhandel) */
.stack.rechts { margin-left: auto; text-align: right; align-items: flex-end; }
.stack.rechts .knoepfe { justify-content: flex-end; }
/* Partner-Detail: Text links, Logo rechts; auf dem Handy Logo oben */
@media (max-width: 700px) { .partner-kopf .partner-logo-box { order: -1; } }

/* YouTube-Video auf der Partner-Seite (lädt erst nach Klick) */
.video { position: relative; aspect-ratio: 16 / 9; max-width: 960px; background: var(--jet, #1B2E3C); border-radius: 6px; overflow: hidden; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-start { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; color: #F5F5F0; text-decoration: none; background: linear-gradient(135deg, #1B2E3C 0%, #2A7F8A 100%); }
.video-knopf { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: #E8734A; color: #1B2E3C; transition: transform .15s; }
.video-knopf svg { margin-left: 4px; }
.video-start:hover .video-knopf, .video-start:focus-visible .video-knopf { transform: scale(1.08); }
.video-start:focus-visible { outline: 3px solid #E8734A; outline-offset: -3px; }
.video-text { font-weight: 600; font-size: 1.15rem; }
.video-start small { max-width: 44ch; opacity: .8; font-size: .85rem; line-height: 1.4; }
@media (max-width: 600px) { .video-knopf { width: 60px; height: 60px; } .video-start small { display: none; } }
.video-band + .band { padding-top: 0; }