/* ============================================================
   NEXT FISH — Fachgeschäft für Angelbedarf & Outdoor, Krems/Donau
   Design system: "Tiefwasser-Expedition"
   Ink + Azure + Signal-Orange · Archivo (Display) / Hanken Grotesk (Text & Labels)
   ============================================================ */

/* ---------- Schriften (lokal gehostet, keine Verbindung zu Google) ---------- */
/* Archivo italic – latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 500 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo italic – latin */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 500 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-italic-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Nur für den Schriftzug im Logo: dieselbe Datei, aber 'block' statt 'swap'. Der Schriftzug erscheint
   gleich in der richtigen Schrift statt kurz in einer Ersatzschrift (die Datei wird im <head> vorab geladen). */
@font-face {
  font-family: 'Archivo Logo';
  font-style: italic;
  font-weight: 500 900;
  font-stretch: 100%;
  font-display: block;
  src: url(../fonts/archivo-italic-latin.woff2) format('woff2');
}
/* Archivo normal – latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo normal – latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-normal-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Hanken Grotesk normal – latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Hanken Grotesk normal – latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-normal-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  /* Brand colours (from the NEXT FISH logo) */
  --ink:        #0a0f15;
  --ink-900:    #0b121b;
  --ink-800:    #0f1925;
  --ink-700:    #14283b;
  --ink-600:    #16314a;
  --azure:      #0888c8;   /* exakte Logo-Farbe */
  --azure-400:  #34a6e0;
  --azure-300:  #5cbef0;
  --azure-700:  #066a9c;
  --azure-900:  #06405f;
  --orange:     #f2871f;
  --orange-600: #db7110;
  --orange-300: #ffb066;

  /* Neutrals */
  --paper:      #f6f3ec;
  --paper-2:    #efe9dd;
  --sand:       #e6ddcc;
  --foam:       #ffffff;

  --text:        #101820;
  --text-soft:   #4c5a66;
  --text-faint:  #5e6a73;
  --text-inv:    #eef6fb;
  --text-inv-soft:#a7bccb;

  --line:        rgba(16,24,32,.13);
  --line-strong: rgba(16,24,32,.24);
  --line-inv:    rgba(255,255,255,.14);
  --line-inv-s:  rgba(255,255,255,.30);

  /* Type */
  --font-display: "Archivo", "Arial Narrow", sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;
  --font-mono:    "Hanken Grotesk", system-ui, sans-serif;

  /* Layout */
  --container: 1280px;
  --wide: 1480px;
  --narrow: 760px;
  --gutter: clamp(1.15rem, 4vw, 3rem);

  /* Radius / shadow */
  --r-sm: 6px;
  --r:    12px;
  --r-lg: 20px;
  --shadow-1: 0 2px 14px rgba(10,15,21,.07);
  --shadow-2: 0 18px 48px -18px rgba(10,15,21,.30);
  --shadow-3: 0 40px 90px -30px rgba(10,15,21,.45);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --header-h: 90px;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; -webkit-tap-highlight-color: rgba(27,143,208,.18); overflow-x: hidden; }
/* Weiches Scrollen erst nach dem Laden (Klasse setzt main.js): beim Neuladen springt der Browser sonst nicht direkt
   an die alte Stelle, sondern scrollt in Chrome sichtbar durch die Seite dorthin. */
@media (prefers-reduced-motion: no-preference){ html.weich-scrollen{ scroll-behavior:smooth; } }
body {
  font-family: var(--font-body);
  font-size: clamp(1.16rem, 1.06rem + .38vw, 1.26rem);
  line-height: 1.68;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
  width: 100%;
}
img,svg,video { display:block; max-width:100%; }
img { height:auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
input,textarea,select { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }
::selection { background: var(--azure); color: #fff; }

/* ---------- Typo helpers ---------- */
.display, h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}
.display {
  font-size: clamp(2.7rem, 1.4rem + 6vw, 6.2rem);
  line-height: .92;
  font-weight: 800;
  letter-spacing: -.035em;
  text-transform: none;
}
.h-xl { font-size: clamp(2.1rem, 1.2rem + 4vw, 4rem); }
.h-lg { font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3rem); }
.h-md { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); }
em, .it { font-style: italic; }
.accent { color: var(--azure); }
.accent-o { color: var(--orange); }

.kicker {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--azure);
  display: inline-flex;
  align-items: center;
  gap: .7em;
}
.kicker::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--orange);
  display: inline-block;
}
.section--dark .kicker { color: var(--azure); }
.lead {
  font-size: clamp(1.2rem, 1.06rem + .6vw, 1.55rem);
  line-height: 1.5;
  color: var(--text-soft);
  font-weight: 400;
  text-wrap: pretty;
}
.section--dark .lead { color: var(--text-inv-soft); }
.muted { color: var(--text-faint); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container.wide { max-width: var(--wide); }
.container.narrow { max-width: var(--narrow); }
.section { padding-block: clamp(4.5rem, 3rem + 8vw, 9rem); position: relative; }
.section.tight { padding-block: clamp(3rem, 2rem + 5vw, 5.5rem); }
.section--paper { background: var(--paper); }
.section--paper2 { background: var(--paper-2); }
.section--foam { background: var(--foam); }

.section--dark {
  background: var(--ink);
  color: var(--text-inv);
  --line: var(--line-inv);
  --line-strong: var(--line-inv-s);
  position: relative;
  isolation: isolate;
}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4 { color:#fff; }
/* atmospheric glow + grain for dark sections */
.section--dark::before {
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(27,143,208,.22), transparent 55%),
    radial-gradient(80% 70% at 0% 110%, rgba(15,100,153,.18), transparent 60%);
  pointer-events:none;
}
.grain::after, .section--dark::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

.grid { display: grid; gap: clamp(1.2rem, 2vw, 2rem); }
.flow > * + * { margin-top: 1.1em; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--ink); --fg:#fff; --bd: var(--ink);
  display: inline-flex; align-items: center; gap: .7em;
  padding: .92em 1.5em;
  background: var(--bg); color: var(--fg);
  border: 1.5px solid var(--bd);
  font-family: var(--font-mono);
  font-size: 0.88rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  border-radius: 100px;
  transition: transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s, box-shadow .35s var(--ease);
  white-space: nowrap;
}
.btn .ar { transition: transform .35s var(--ease); display:inline-block; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn:hover .ar { transform: translateX(4px); }
.btn:active { transform: translateY(0) scale(.975); box-shadow: var(--shadow-1); transition-duration: .06s; }
.cat-card:active, .pillar:active, .tour-card:active, .partner-tile:active { transform: scale(.99); }
.btn--primary { --bg: var(--orange); --fg:#1a1206; --bd: var(--orange); }
.btn--primary:hover { --bg: var(--orange-600); --bd: var(--orange-600); }
.btn--azure { --bg: var(--azure); --fg:#04161f; --bd: var(--azure); }
.btn--azure:hover{ --bg: var(--azure-400); --bd: var(--azure-400); }
.btn--ghost { --bg: transparent; --fg: var(--ink); --bd: var(--line-strong); }
.btn--ghost:hover { --bg: var(--ink); --fg:#fff; --bd: var(--ink); }
.section--dark .btn--ghost, .hero .btn--ghost, .page-hero .btn--ghost { --fg:#fff; --bd: rgba(255,255,255,.5); }
.section--dark .btn--ghost:hover, .hero .btn--ghost:hover, .page-hero .btn--ghost:hover { --bg:#fff; --fg: var(--ink); --bd:#fff; }
.btn--light { --bg:#fff; --fg: var(--ink); --bd:#fff; }
.btn--block { width:100%; justify-content:center; }
.btn--sm { padding:.7em 1.1em; font-size:0.8rem; }

.link-arrow {
  font-family: var(--font-mono); font-size:0.88rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.6em;
  color: var(--azure-700); position:relative; padding-bottom:3px;
}
.section--dark .link-arrow { color: var(--azure-300); }
.link-arrow::after{ content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%; background:currentColor; transform:scaleX(.18); transform-origin:left; transition:transform .4s var(--ease); }
.link-arrow:hover::after{ transform:scaleX(1); }
.link-arrow .ar{ transition: transform .35s var(--ease); }
.link-arrow:hover .ar{ transform: translateX(4px); }

/* ---------- Header / nav (freischwebende Liquid-Glass-Leiste) ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  display: flex; justify-content: center;
  padding: clamp(.55rem, 1.4vw, .95rem) var(--gutter);
  pointer-events: none;
}
.site-header .container {
  pointer-events: auto;
  width: 100%; max-width: var(--wide);
  height: 62px; padding-inline: clamp(1.05rem, 1.8vw, 1.6rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-radius: 100px;
  background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.05));
  -webkit-backdrop-filter: blur(15px) saturate(130%);
  backdrop-filter: blur(15px) saturate(130%);
  border: 0;
  box-shadow: none;
  transition: background .4s var(--ease);
}
.site-header.no-transition, .site-header.no-transition *, .site-header.no-transition *::before, .site-header.no-transition *::after { transition: none !important; } /* beim Laden sofort im richtigen Zustand */
/* Im Scroll-Zustand bleibt die Leiste an derselben Stelle, nur das Glas wird dunkler (nächste Regel). Früher rückte sie dabei
   um 4 px nach oben – beim Wechsel zwischen Seiten oben und Sprungzielen (#online-shop, #besuch) sprang sie so rauf und runter. */
.site-header.scrolled .container, .site-header.solid .container {
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)), rgba(11,17,25,.42);
}
/* Lesbarkeit auf dem hellen/luftigen Glas (ohne Schatten) */
.site-header .nav__link{ color: rgba(255,255,255,.9); }
.site-header .nav__link:hover, .site-header .nav__link[aria-current="page"]{ color:#fff; }
.brand { display:flex; align-items:center; gap:.75rem; z-index:2; }
.brand img { height: 46px; width:auto; }
.brand__wordmark { font-family: 'Archivo Logo', var(--font-display); font-weight:800; font-style: italic; font-size:1.6rem; letter-spacing:-.01em; color:var(--azure); line-height:1; display:inline-block; min-width:5.25em; white-space:nowrap; } /* Breite = fertiger Schriftzug: die Leiste springt nicht, solange die Schrift lädt */
.brand__wordmark span { color: var(--azure); }

.nav__menu { display:flex; align-items:center; gap: clamp(.85rem, 1.7vw, 1.9rem); }
.nav__link {
  font-family: var(--font-mono); font-size:0.84rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color: var(--text-inv-soft);
  position: relative; padding: .4em 0; transition: color .3s; white-space: nowrap;
}
.nav__link:hover, .nav__link[aria-current="page"] { color:#fff; }
.nav__link::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform:scaleX(1); }
.nav__right { display:flex; align-items:center; gap:1.1rem; }
.nav__phone { font-family:var(--font-mono); font-size:0.86rem; color:#fff; letter-spacing:.04em; display:inline-flex; align-items:center; gap:.5em; white-space:nowrap; transition: color .3s; }
.nav__phone:hover{ color: var(--azure-300); }
.nav__phone svg{ flex:none; }
.nav__shop { display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-mono); font-size:0.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; color:#1a1206; background: var(--orange); padding:.62em 1.1em; border-radius:100px; transition: background .3s var(--ease), translate .35s var(--ease); }
.nav__shop:hover{ background: var(--orange-300); translate: 0 -1px; }
.nav__shop svg{ flex:none; }

.nav__toggle { display:none; width:46px; height:46px; border:1px solid var(--line-inv-s); border-radius:50%; place-items:center; z-index:120; }
.nav__toggle span { display:block; width:18px; height:2px; background:#fff; position:relative; transition:transform .3s var(--ease), opacity .2s; }
.nav__toggle span::before,.nav__toggle span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:#fff; transition:transform .3s var(--ease); }
.nav__toggle span::before{ top:-6px; } .nav__toggle span::after{ top:6px; }
body.menu-open .nav__toggle span{ background:transparent; }
body.menu-open .nav__toggle span::before{ transform:translateY(6px) rotate(45deg); }
body.menu-open .nav__toggle span::after{ transform:translateY(-6px) rotate(-45deg); }

/* mobile menu */
.mobile-menu {
  position: fixed; inset:0; z-index:110;
  background: var(--ink); color:#fff;
  display:flex; flex-direction:column; justify-content:center;
  padding: var(--gutter);
  clip-path: circle(0% at calc(100% - 46px) 40px);
  transition: clip-path .6s var(--ease-out), visibility 0s linear .6s;
  pointer-events:none;
  visibility:hidden; /* geschlossen: keine unsichtbaren Tab-Stopps (Prüfung 05.11.2026) */
  overflow:hidden;
}
body.menu-open .mobile-menu { clip-path: circle(150% at calc(100% - 46px) 40px); pointer-events:auto; visibility:visible; transition: clip-path .6s var(--ease-out), visibility 0s; }
.mobile-menu::before{ content:""; position:absolute; inset:0; background:radial-gradient(90% 60% at 80% 10%, rgba(27,143,208,.25), transparent 60%); }
.mobile-menu__list { display:flex; flex-direction:column; gap:.2rem; position:relative; }
.mobile-menu__list a {
  font-family: var(--font-display); font-weight:800; font-size: clamp(2rem, 9vw, 3.2rem);
  letter-spacing:-.02em; line-height:1.05; color:#fff;
  opacity:0; transform: translateY(20px);
  display:flex; align-items:baseline; gap:1rem;
}
.mobile-menu__list a .n { font-family:var(--font-mono); font-size:0.86rem; color:var(--azure-400); font-weight:500; }
body.menu-open .mobile-menu__list a { animation: mm-in .6s var(--ease-out) forwards; }
body.menu-open .mobile-menu__list a:nth-child(1){animation-delay:.12s}
body.menu-open .mobile-menu__list a:nth-child(2){animation-delay:.18s}
body.menu-open .mobile-menu__list a:nth-child(3){animation-delay:.24s}
body.menu-open .mobile-menu__list a:nth-child(4){animation-delay:.30s}
body.menu-open .mobile-menu__list a:nth-child(5){animation-delay:.36s}
body.menu-open .mobile-menu__list a:nth-child(6){animation-delay:.42s}
body.menu-open .mobile-menu__list a:nth-child(7){animation-delay:.48s}
@keyframes mm-in { to { opacity:1; transform:none; } }
.mobile-menu__foot { position:relative; margin-top:2.4rem; font-family:var(--font-mono); font-size:0.86rem; color:var(--text-inv-soft); display:flex; flex-wrap:wrap; gap:1.4rem; }
.mobile-menu__foot a:hover{ color: var(--azure-300); }

/* ---------- Coordinate strip ---------- */
.coords {
  font-family: var(--font-mono); font-size:0.78rem; letter-spacing:.18em; text-transform:uppercase;
  color: #fff; display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
}
.coords .dot{ width:6px;height:6px;border-radius:50%;background:var(--orange); flex:none; }
.coords .rule{ flex:1; min-width:40px; height:1px; background:var(--line-inv); position:relative; }
.coords .rule::after{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(90deg,var(--line-inv-s) 0 1px, transparent 1px 14px); }
.coords__a{ display:inline-flex; align-items:center; gap:1rem; }

/* ---------- HERO ---------- */
.hero { position:relative; min-height: 100svh; display:flex; align-items:center; color:#fff; isolation:isolate; padding-top: var(--header-h); overflow:hidden; }
.hero__bg { position:absolute; inset:0; z-index:-2; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); animation: heroZoom 14s var(--ease-out) forwards; }
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; }
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero__bg::after{ content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,15,21,.55) 0%, rgba(10,15,21,.25) 35%, rgba(10,15,21,.78) 100%),
              radial-gradient(80% 60% at 80% 0%, rgba(27,143,208,.28), transparent 60%);
}
.hero__inner { width:100%; padding-block: clamp(2.5rem, 6vh, 5rem); }
.hero__badge {
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--font-mono); font-size:0.8rem; letter-spacing:.18em; text-transform:uppercase;
  background: var(--orange); color:#1a1206; padding:.55em 1em; border-radius:100px; font-weight:600;
  margin-bottom:1.6rem; box-shadow: 0 8px 30px -8px rgba(242,135,31,.6);
}
.hero__badge .pulse{ width:8px;height:8px;border-radius:50%;background:#1a1206; position:relative; }
.hero__badge .pulse::after{ content:""; position:absolute; inset:0; border-radius:50%; background:#1a1206; animation:pulse 2s var(--ease) infinite; }
@keyframes pulse{ 0%{transform:scale(1);opacity:.7} 100%{transform:scale(3);opacity:0} }
.hero__title { font-size: clamp(2.9rem, 1.2rem + 7.2vw, 7rem); line-height:.9; letter-spacing:-.04em; color:#fff; max-width:16ch; }
.hero__title .ln{ display:block; overflow:hidden; }
.hero__title .ln > span{ display:block; }
.hero__sub { max-width: 52ch; margin-top:1.6rem;  color:#fff; }
.hero__lead { max-width: 30ch; margin-top:1.5rem; font-family:var(--font-display); font-weight:700;  line-height:1.12; letter-spacing:-.015em; color:#fff; }
.hero__lead + .hero__sub { margin-top:1rem; }
.hero__sub + .hero__sub { margin-top:.75rem; }
.hero__slogan { margin-top:1.3rem; font-family:var(--font-mono); font-size:.82rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--orange); }
.hero__cta { display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem; }
.hero__coords { margin-top: clamp(2rem,5vh,3.5rem); padding-top:1.4rem; } /* Linie darüber entfernt (Vorgabe 05.11.2026) */
/* längerer Kopftext: Startbild auf niedrigen Bildschirmen und schmalen Handys kompakter, damit die Knöpfe im ersten Bild bleiben.
   Steht bewusst NACH den Grundregeln (.hero__cta, .hero__coords) und mit .hero davor, damit diese Werte gewinnen. */
@media (min-width:981px) and (max-height:960px){
  .hero .hero__inner{ padding-block: clamp(1.6rem,4vh,3rem); }
  .hero .hero__badge{ margin-bottom:1.1rem; }
  .hero .hero__title{ font-size: clamp(2.9rem, 1.2rem + 5.8vw, 6rem); }
  .hero .hero__lead{ margin-top:1.1rem; }
  .hero .hero__cta{ margin-top:1.5rem; }
  .hero .hero__coords{ margin-top:1.4rem; padding-top:1rem; }
}
@media (min-width:981px) and (max-height:780px){
  .hero .hero__inner{ padding-block: 1.2rem 1.6rem; }
  .hero .hero__badge{ margin-bottom:.8rem; }
  .hero .hero__title{ font-size: clamp(2.9rem, 1rem + 4.2vw, 4.6rem); }
  .hero .hero__lead{ margin-top:.8rem; font-size:1.35rem; }
  .hero .hero__sub{ font-size:1.05rem; }
  .hero .hero__lead + .hero__sub{ margin-top:.6rem; }
  .hero .hero__sub + .hero__sub{ margin-top:.45rem; }
  .hero .hero__slogan{ margin-top:.8rem; }
  .hero .hero__cta{ margin-top:1.1rem; }
  .hero .hero__coords{ margin-top:1rem; padding-top:.8rem; }
}
@media (max-width:420px){
  .hero .hero__badge{ margin-bottom:1rem; }
  .hero .hero__lead{ margin-top:1rem; font-size:1.2rem; }
  .hero .hero__sub{ font-size:1rem; line-height:1.5; }
  .hero .hero__lead + .hero__sub{ margin-top:.7rem; }
  .hero .hero__sub + .hero__sub{ margin-top:.5rem; }
  .hero .hero__slogan{ margin-top:.9rem; font-size:.74rem; }
  .hero .hero__cta{ margin-top:1.15rem; gap:.7rem; }
}
@media (max-width:420px) and (max-height:700px){
  .hero .hero__inner{ padding-block: 1rem 1.4rem; }
  .hero .hero__title{ font-size:2.45rem; }
  .hero .hero__badge{ font-size:.7rem; margin-bottom:.8rem; }
  .hero .hero__sub{ font-size:.95rem; line-height:1.45; }
  .hero .hero__lead{ font-size:1.1rem; margin-top:.8rem; }
  .hero .hero__cta{ margin-top:1rem; }
}

/* hero load orchestration (no-JS safe: only armed once .anim is set by JS) */
.hero.anim .hero__title .ln > span{ transform:translateY(105%); }
.hero.anim [data-hero]{ opacity:0; }
.hero.loaded .hero__title .ln > span{ transform:translateY(0); transition: transform 1s var(--ease-out); }
.hero.loaded .hero__title .ln:nth-child(2) > span{ transition-delay:.09s; }
.hero.loaded .hero__title .ln:nth-child(3) > span{ transition-delay:.18s; }
.hero.loaded [data-hero]{ animation: heroFade .9s var(--ease-out) forwards; }
.hero.loaded [data-hero="badge"]{ animation-delay:.05s; }
.hero.loaded [data-hero="sub"]{ animation-delay:.5s; }
.hero.loaded [data-hero="cta"]{ animation-delay:.62s; }
.hero.loaded [data-hero="coords"]{ animation-delay:.74s; }
@keyframes heroFade{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position:relative; color:#fff; isolation:isolate; padding-top: calc(var(--header-h) + clamp(3rem,8vh,6rem)); padding-bottom: clamp(3rem,7vh,5.5rem); overflow:hidden; background: var(--ink); }
.page-hero__bg{ position:absolute; inset:0; z-index:-2; }
.page-hero__bg img{ width:100%; height:100%; object-fit:cover; opacity:.5; }
.page-hero__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,15,21,.45), rgba(10,15,21,.82)), radial-gradient(70% 80% at 88% 0%, rgba(27,143,208,.3), transparent 55%); }
.page-hero__title{ font-size: clamp(2.6rem, 1.4rem + 5.5vw, 5.4rem); color:#fff; line-height:.92; letter-spacing:-.035em; }
.page-hero__sub{ max-width:56ch; margin-top:1.3rem; color:#fff;  }
.page-hero__lead{ max-width:40ch; margin-top:1.3rem; font-family:var(--font-display); font-weight:700;  line-height:1.15; color:#fff; }
.page-hero__lead + .page-hero__sub{ margin-top:.9rem; }
.page-hero__sub + .page-hero__sub{ margin-top:.7rem; }
.page-hero__coords{ margin-top: clamp(1.8rem,4vh,3rem); }

/* ---------- Section head ---------- */
.section-head{ max-width: 64ch; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head .kicker{ margin-bottom:1.1rem; }
.section-head .lead{ margin-top:1.45rem; }
.head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; }

/* ---------- Pillars ---------- */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(1rem,2vw,1.6rem); margin-top:3rem; }
.pillars--4{ grid-template-columns:repeat(4,1fr); }
.pillars--leistungen{ grid-template-columns:repeat(4,1fr); }
.pillars--leistungen .pillar{ padding: clamp(1.2rem,1.6vw,1.6rem); }
.pillars--leistungen .pillar__ico{ margin:.2rem 0 1rem; }
.pillars--leistungen .pillar h3{ font-size:1.12rem; }
.pillars--leistungen .pillar p{ font-size:.98rem; }
@media (max-width:1200px){ .pillars--leistungen{ grid-template-columns:repeat(2,1fr); } }
/* Kategorie-Icons im Original-Stil: orange, ohne Chip */
.pillars--4 .pillar__ico{ background:none; box-shadow:none; width:100%; height:58px; place-items:center start; color:var(--orange); margin:.1rem 0 1.2rem; }
.pillars--4 .pillar__ico svg{ width:56px; height:56px; }
.pillar{ padding: clamp(1.5rem,2.5vw,2.2rem); border:1px solid var(--line); border-radius: var(--r-lg); background: var(--foam); position:relative; overflow:hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s; }
.section--dark .pillar{ background: rgba(255,255,255,.03); }
.pillar:hover{ transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: var(--azure); }
.pillar__n{ font-family:var(--font-mono); font-size:0.84rem; letter-spacing:.2em; color:var(--azure-700); }
.section--dark .pillar__n{ color: var(--azure-300); }
.pillar__ico{ width:54px;height:54px;border-radius:14px; display:grid;place-items:center; background:linear-gradient(135deg, var(--azure), var(--azure-700)); color:#fff; margin:1.2rem 0 1.3rem; box-shadow: var(--shadow-1); }
.pillar__ico svg{ width:26px;height:26px; }
.pillar h3{ font-size:1.3rem; margin-bottom:.6rem; }
.pillar p{ color:var(--text-soft); font-size:1.12rem; } .section--dark .pillar p{ color:var(--text-inv-soft); }

/* ---------- Image frame ---------- */
.frame{ position:relative; overflow:hidden; border-radius: var(--r); background: var(--ink-800); }
.frame img, .frame video{ width:100%; height:100%; object-fit:cover; transition: transform 1.1s var(--ease-out); }
.frame video{ display:block; }
.frame:hover img{ transform: scale(1.05); }
.frame::after{ content:""; position:absolute; inset:0; border:1px solid rgba(255,255,255,.10); border-radius:inherit; pointer-events:none; }
.frame .tick{ position:absolute; width:18px;height:18px; border:2px solid var(--azure-400); z-index:2; pointer-events:none; }
.frame .tick.tl{ top:14px;left:14px; border-right:0;border-bottom:0; }
.frame .tick.br{ bottom:14px;right:14px; border-left:0;border-top:0; }
.frame .cap{ position:absolute; left:0; bottom:0; padding:1rem 1.2rem; font-family:var(--font-mono); font-size:0.78rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; z-index:2; padding-top:2.6rem; background:linear-gradient(0deg, rgba(10,15,21,.88) 0%, rgba(10,15,21,.55) 45%, rgba(10,15,21,0) 100%); width:100%; }
.ratio-4-3{ aspect-ratio:4/3; } .ratio-3-4{ aspect-ratio:3/4; } .ratio-1{ aspect-ratio:1; } .ratio-16-9{ aspect-ratio:16/9; } .ratio-3-2{ aspect-ratio:3/2; } .ratio-9-16{ aspect-ratio:9/16; }
/* Video im Rahmen mit Play-Button (Über uns) */
.frame--video{ width:min(100%, calc(84vh * 9 / 16)); margin-inline:auto; background:#000; }
.frame__play{ position:absolute; inset:0; margin:auto; z-index:3; width:78px; height:78px; padding-left:2px; border:0; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--orange); box-shadow:0 10px 30px rgba(0,0,0,.35); cursor:pointer; transition: transform .35s var(--ease), background .25s, opacity .25s; }
.frame__play:hover{ background:var(--orange-600); transform:scale(1.08); }
.frame__play:focus-visible{ outline:3px solid #fff; outline-offset:4px; }
.frame--video.is-playing .frame__play, .frame--video.is-playing .tick{ opacity:0; pointer-events:none; }

/* ---------- Category grid (home + sortiment) ---------- */
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(1rem,1.6vw,1.4rem); }
.cat-card{ position:relative; overflow:hidden; border-radius: var(--r); min-height: 360px; display:flex; align-items:flex-end; color:#fff; isolation:isolate; }
.cat-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition: transform 1.1s var(--ease-out); }
.cat-card::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(10,15,21,.1) 0%, rgba(10,15,21,.2) 45%, rgba(10,15,21,.88) 100%); transition:background .4s; }
.cat-card:hover img{ transform:scale(1.06); }
.cat-card:hover::after{ background:linear-gradient(180deg, rgba(27,143,208,.18) 0%, rgba(10,15,21,.35) 45%, rgba(10,15,21,.92) 100%); }
.cat-card__body{ padding: clamp(1.3rem,2vw,1.8rem); }
.cat-card__n{ font-family:var(--font-mono); font-size:0.8rem; letter-spacing:.18em; color:var(--azure-300); }
.cat-card h3{ color:#fff;  margin:.5rem 0 .5rem; }
.cat-card p{ color: rgba(255,255,255,.82); font-size:1.01rem; max-width:42ch; max-height:0; opacity:0; overflow:hidden; transition: max-height .5s var(--ease), opacity .4s, margin .4s; }
.cat-card:hover p, .cat-card:focus-within p{ max-height:7rem; opacity:1; margin-top:.2rem; }
.cat-card .more{ margin-top:1rem; display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-mono); font-size:0.82rem; letter-spacing:.1em; text-transform:uppercase; color:#fff; }
.cat-card .more .ar{ color:var(--orange-300); transition:transform .35s var(--ease); }
.cat-card:hover .more .ar{ transform:translateX(4px); }

/* ---------- Feature rows (alternating) ---------- */
.feature{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem,4vw,4.5rem); align-items:center; }
.feature + .feature{ margin-top: clamp(3.5rem,6vw,7rem); }
.feature__media{ position:relative; }
.feature--rev .feature__media{ order:2; }
.feature__tag{ font-family:var(--font-mono); font-size:0.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--azure); display:block; margin-bottom:1rem; }
.section--dark .feature__tag{ color: var(--azure); }
.feature h2, .feature h3{ margin-bottom:1.4rem; }
.feature p{ color:var(--text-soft); margin-bottom:1.4rem; } .section--dark .feature p{ color:var(--text-inv-soft); }
.feature .feature__claim{ color:var(--text); font-weight:600; }
.feature__num{ position:absolute; top:-1.4rem; left:-.6rem; font-family:var(--font-display); font-weight:800; font-size:clamp(4rem,10vw,8rem); color:var(--azure); opacity:.10; z-index:-1; letter-spacing:-.05em; }

/* check list */
.checks{ display:grid; gap:.7rem; margin:1.3rem 0 1.6rem; }
.checks li{ display:flex; gap:.8rem; align-items:flex-start; color:var(--text-soft); }
.section--dark .checks li{ color: var(--text-inv-soft); }
.checks svg{ flex:none; width:22px;height:22px; color:var(--azure); margin-top:.1em; }

/* ---------- Steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(1rem,2vw,1.8rem); counter-reset:s; }
.step{ position:relative; padding-top:1.6rem; border-top:2px solid var(--line); }
.step__n{ font-family:var(--font-mono); font-size:0.86rem; letter-spacing:.15em; color:var(--azure-700); } .section--dark .step__n{ color:var(--azure-300); }
.step h4{ font-size:1.25rem; margin:.7rem 0 .5rem; }
.step p{ color:var(--text-soft); font-size:1.11rem; } .section--dark .step p{ color:var(--text-inv-soft); }

/* ---------- Partner logos + marquee ---------- */
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track{ display:flex; gap: clamp(1.5rem,4vw,4rem); width:max-content; animation: marquee 38s linear infinite; align-items:center; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform: translateX(-50%); } }
.marquee__track img{ height:46px; width:auto; opacity:.85; filter:saturate(1); }
.section--dark .marquee__track img{ filter: brightness(0) invert(1) opacity(.7); }
.section--dark .marquee__track img:hover{ filter:none; }

.partner-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(.8rem,1.5vw,1.2rem); }
.partner-tile{ aspect-ratio: 3/2; display:grid; place-items:center; padding:clamp(1.4rem,3vw,2.4rem); border:1px solid var(--line); border-radius: var(--r); background:var(--foam); transition: transform .4s var(--ease), box-shadow .4s, border-color .3s; overflow:hidden; }
.partner-tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:var(--azure); }
.partner-tile img{ max-height:74px; max-width:78%; width:auto; object-fit:contain; }
.partner-tile.dark{ background: var(--ink); }

/* ---------- Tours ---------- */
.tour-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap: clamp(1.2rem,2vw,1.8rem); }
.tour-card{ background:var(--foam); border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:transform .45s var(--ease), box-shadow .45s; }
.tour-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-2); }
.tour-card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.tour-card__media img{ width:100%;height:100%;object-fit:cover; transition:transform 1s var(--ease-out); }
.tour-card:hover .tour-card__media img{ transform:scale(1.06); }
.tour-card__price{ position:absolute; top:1rem; right:1rem; background:var(--orange); color:#1a1206; font-family:var(--font-mono); font-weight:600; font-size:0.98rem; padding:.45em .85em; border-radius:100px; letter-spacing:.02em; }
.tour-card__body{ padding: clamp(1.3rem,2.4vw,1.9rem); display:flex; flex-direction:column; flex:1; }
.tour-card__meta{ font-family:var(--font-mono); font-size:0.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); display:flex; gap:1rem; margin-bottom:.7rem; }
.tour-card__meta b{ color:var(--azure-700); font-weight:600; }
.tour-card h3{ font-size:1.5rem; margin-bottom:.6rem; }
.tour-card p{ color:var(--text-soft); font-size:1.03rem; margin-bottom:1.4rem; }
.tour-card .foot{ margin-top:auto; }

/* ---------- Gallery ---------- */
.gallery{ display:grid; grid-template-columns:repeat(12,1fr); gap: clamp(.6rem,1vw,1rem); grid-auto-flow:dense; }
.gallery__item{ position:relative; overflow:hidden; border-radius:var(--r-sm); cursor:zoom-in; background:var(--ink-800); }
.gallery__item img{ width:100%;height:100%;object-fit:cover; transition:transform .9s var(--ease-out); }
.gallery__item:hover img{ transform:scale(1.07); }
.gallery__item::after{ content:""; position:absolute; inset:0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.g-col-3{ grid-column:span 3; } .g-col-4{ grid-column:span 4; } .g-col-5{ grid-column:span 5; }
.g-col-6{ grid-column:span 6; } .g-col-7{ grid-column:span 7; } .g-col-8{ grid-column:span 8; }
.g-row-2{ grid-row:span 2; }
.gallery__item.tall{ aspect-ratio:3/4; } .gallery__item.wide{ aspect-ratio:16/10; } .gallery__item.sq{ aspect-ratio:1; }

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:200; background:rgba(7,11,16,.93); backdrop-filter:blur(6px); display:grid; place-items:center; padding:4vw; opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s; }
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:100%; max-height:86vh; border-radius:var(--r-sm); box-shadow:var(--shadow-3); transform:scale(.97); transition:transform .4s var(--ease-out); }
.lightbox.open img{ transform:scale(1); }
.lightbox__close,.lightbox__nav{ position:absolute; color:#fff; font-family:var(--font-mono); border:1px solid var(--line-inv-s); border-radius:50%; width:52px;height:52px; display:grid; place-items:center; transition:background .3s, transform .3s; z-index:2; }
.lightbox__close:hover,.lightbox__nav:hover{ background:rgba(255,255,255,.12); }
.lightbox__close{ top:4vw; right:4vw; } .lightbox__nav{ top:50%; transform:translateY(-50%); font-size:1.4rem; }
.lightbox__nav.prev{ left:3vw; } .lightbox__nav.next{ right:3vw; }
.lightbox__cap{ position:absolute; bottom:3vw; left:0; right:0; text-align:center; color:var(--text-inv-soft); font-family:var(--font-mono); font-size:0.84rem; letter-spacing:.1em; }

/* ---------- Video-Button + Modal ---------- */
.btn--play .play-ic{ flex:none; transition: transform .35s var(--ease); }
.btn--play:hover .play-ic{ transform: scale(1.1); }
.video-modal{ position:fixed; inset:0; z-index:210; background:rgba(7,11,16,.92); backdrop-filter:blur(8px); display:grid; place-items:center; padding:5vw; opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s; }
.video-modal.open{ opacity:1; visibility:visible; }
.video-modal__vid{ max-width:min(440px,90vw); max-height:88vh; border-radius:var(--r-sm); box-shadow:var(--shadow-3); background:#000; transform:scale(.97); transition:transform .4s var(--ease-out); }
.video-modal.open .video-modal__vid{ transform:scale(1); }
.video-modal__close{ position:absolute; top:max(14px,3vw); right:max(14px,3vw); color:#fff; font-family:var(--font-mono); font-size:1.05rem; background:rgba(255,255,255,.08); border:1px solid var(--line-inv-s); border-radius:50%; width:48px; height:48px; display:grid; place-items:center; cursor:pointer; transition:background .3s, transform .3s; }
.video-modal__close:hover{ background:rgba(255,255,255,.18); transform:scale(1.06); }
.video-modal.is-loading::after{ content:"Video wird geladen …"; position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); text-align:center; color:#fff; font-family:var(--font-mono); font-size:.9rem; letter-spacing:.14em; text-transform:uppercase; pointer-events:none; }
@media (prefers-reduced-motion: reduce){ .video-modal, .video-modal__vid{ transition:none; } .video-modal__vid{ transform:none; } }

/* ---------- Testimonial ---------- */
.quote{ max-width: 30ch; }
.quote__mark{ font-family:var(--font-display); font-size:6rem; line-height:.6; color:var(--azure); opacity:.4; }
.quote blockquote{ font-family:var(--font-display); font-weight:700;  line-height:1.08; letter-spacing:-.02em; color:#fff; }
.quote cite{ display:flex; align-items:center; gap:.8rem; margin-top:1.6rem; font-style:normal; font-family:var(--font-mono); font-size:0.88rem; letter-spacing:.1em; text-transform:uppercase; color:var(--azure-300); }
.quote cite::before{ content:""; width:34px;height:1.5px; background:var(--orange); }
/* Bewertungen von Google (Startseite) */
.reviews{ max-width:36rem; }
.reviews .quote{ max-width:none; margin:0; }
.reviews .reviews__score{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .7rem; margin:.9rem 0 2.2rem; font-size:.88rem; color:var(--text-inv-soft); }
.reviews__score b{ font-family:var(--font-display); font-weight:800; font-size:2.6rem; line-height:1; letter-spacing:-.03em; color:#fff; }
.reviews__stars{ color:var(--orange); letter-spacing:.1em; white-space:nowrap; }
.reviews__more{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2.2rem; }
.review-mini{ margin:0; padding:1rem 1.15rem 1.1rem; border:1px solid var(--line-inv); border-radius:var(--r); background:rgba(255,255,255,.03); }
.review-mini blockquote{ margin:.45rem 0 .75rem; font-size:.95rem; line-height:1.55; color:var(--text-inv); }
.review-mini figcaption{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--azure-300); }
.reviews .reviews__note{ margin:1.4rem 0 0; font-size:.8rem; line-height:1.6; color:var(--text-inv-soft); }
.reviews__note a{ color:#fff; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
@media (max-width: 560px){ .reviews__more{ grid-template-columns:1fr; } }

/* ---------- Stat / metric ---------- */
.metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.metric{ text-align:left; }
.metric b{ font-family:var(--font-display); font-weight:800;  display:block; line-height:1; letter-spacing:-.03em; }
.metric__ic{ display:inline-block; width:.89em; height:.72em; vertical-align:baseline; }
.metric span{ display:block; margin-top:.625rem; line-height:1.45; font-family:var(--font-mono); font-size:0.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); }
.section--dark .metric span{ color:var(--text-inv-soft); }

/* ---------- Visit / contact band ---------- */
.visit{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,3vw,3.5rem); align-items:stretch; }
.info-list{ display:grid; gap:1.4rem; list-style:none; margin:0; padding:0; } .info-list dl, .info-list dd{ margin:0; }
.info-list li{ display:flex; gap:1rem; align-items:flex-start; }
.info-list .ic{ width:44px;height:44px;border-radius:12px; flex:none; display:grid;place-items:center; background:rgba(27,143,208,.12); color:var(--azure); border:1px solid rgba(27,143,208,.22); }
.section--dark .info-list .ic{ background:rgba(255,255,255,.06); border-color:var(--line-inv); color:var(--azure-300); }
.info-list .ic svg{ width:20px;height:20px; }
.info-list dt{ font-family:var(--font-mono); font-size:0.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); margin-bottom:.2rem; }
.section--dark .info-list dt{ color:var(--text-inv-soft); }
.info-list dd{ font-size:1.14rem; font-weight:500; }
.info-list a:hover{ color:var(--azure); }
.map{ border-radius:var(--r); overflow:hidden; min-height:320px; border:1px solid var(--line); position:relative; background:var(--ink-800); }
.map iframe{ width:100%; height:100%; border:0; min-height:340px; filter:grayscale(.2) contrast(1.05); }

/* ---------- Cookie-Consent + Karten-Platzhalter ---------- */
.map__consent{ position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.85rem; text-align:center; padding:1.5rem; background:linear-gradient(180deg, rgba(10,15,21,.90), rgba(10,15,21,.95)); color:#fff; }
.map__consent p{ max-width:40ch; margin:0; font-size:.94rem; line-height:1.55; color:rgba(255,255,255,.86); }
.map__consent a{ color:#fff; font-size:.82rem; text-decoration:underline; text-underline-offset:3px; opacity:.85; }
.map--loaded .map__consent{ display:none; }

.cookie-banner{ position:fixed; left:0; right:0; bottom:0; z-index:300; padding: clamp(.7rem,2vw,1.3rem) var(--gutter); transform:translateY(135%); transition:transform .45s var(--ease-out); pointer-events:none; }
.cookie-banner.show{ transform:translateY(0); pointer-events:none; }
.cookie-banner.show .cookie-banner__inner{ pointer-events:auto; }
@media (max-width: 1199px){ body.cookie-open .kontakt-fab, body.cookie-open .nach-oben{ bottom: calc(var(--cookie-h, 0px) + .75rem); } } /* Kontakt-Knöpfe und „nach oben“ über den offenen Hinweis heben, statt darunter */ /* nur die Box fängt Klicks ab, die Knöpfe daneben bleiben bedienbar */
body.menu-open .cookie-banner{ visibility:hidden; } /* offenes Handy-Menü nicht verdecken */
.cookie-banner__inner{ max-width:1000px; margin:0 auto; background:rgba(16,22,30,.97); backdrop-filter:blur(12px); color:#fff; border:1px solid rgba(255,255,255,.12); border-radius:var(--r-sm); box-shadow:var(--shadow-3); padding: clamp(1rem,2.2vw,1.4rem) clamp(1.1rem,2.4vw,1.6rem); display:flex; gap:1.4rem; align-items:center; flex-wrap:wrap; }
.cookie-banner__text{ flex:1; min-width:260px; }
.cookie-banner__text > strong{ display:block; margin-bottom:.25rem; font-size:1rem; }
.cookie-banner__text p{ margin:0; font-size:.9rem; line-height:1.55; color:rgba(255,255,255,.82); }
.cookie-banner__text a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.cookie-banner__text .cookie-banner__links{ margin-top:.45rem; font-size:.82rem; }
/* solange der Hinweis offen ist, bleibt im Footer unten Platz, damit Impressum & Co. nicht verdeckt werden */
body.cookie-open .footer__bottom{ padding-bottom: calc(1.6rem + var(--cookie-h, 0px)); }
.cookie-banner__actions{ display:flex; gap:.7rem; flex-shrink:0; }
.cookie-banner .btn--ghost{ --bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.5); }
.cookie-banner .btn--ghost:hover{ --bg:#fff; --fg:var(--ink); --bd:#fff; }
@media (max-width:560px){ .cookie-banner__actions{ width:100%; } .cookie-banner__actions .btn{ flex:1; justify-content:center; } }
@media (prefers-reduced-motion: reduce){ .cookie-banner{ transition:none; } }

.cookie-settings{ font:inherit; background:none; border:0; padding:0; cursor:pointer; color:var(--azure-400); text-decoration:underline; text-underline-offset:3px; }
.cookie-settings:hover{ color:#fff; }

/* hours table */
.hours{ font-family:var(--font-mono); font-size:0.96rem; }
.hours li{ display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px dashed var(--line); }
.hours li:last-child{ border-bottom:0; }
.hours .d{ color:var(--text-soft); letter-spacing:.04em; } .section--dark .hours .d{ color:var(--text-inv-soft); }
.hours .t{ font-weight:500; }
.hours__automat{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:1rem; padding:.7rem .95rem; border-left:3px solid var(--orange); border-radius:0 10px 10px 0; background:rgba(242,135,31,.10); font-family:var(--font-mono); font-size:0.96rem; color:var(--text); text-decoration:none; transition:background .25s var(--ease); }
.hours__automat .d{ font-weight:600; letter-spacing:.04em; }
.hours__automat .t{ font-weight:600; color:#b35a0c; }
.hours__automat:hover, .hours__automat:focus-visible{ background:rgba(242,135,31,.18); }

/* ---------- Forms ---------- */
.form{ display:grid; gap:1.1rem; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.field{ display:grid; gap:.4rem; }
.field label{ font-family:var(--font-mono); font-size:0.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); }
.input, .textarea, .select{ width:100%; background:var(--foam); border:1.5px solid var(--line-strong); border-radius:var(--r-sm); padding:.85em 1em; transition:border-color .25s, box-shadow .25s, background .25s; font-size:1.06rem; }
.section--dark .input,.section--dark .textarea,.section--dark .select{ background:rgba(255,255,255,.04); border-color:var(--line-inv-s); color:#fff; }
.input:focus,.textarea:focus,.select:focus{ outline:none; border-color:var(--azure); box-shadow:0 0 0 4px rgba(27,143,208,.16); }
.textarea{ min-height:140px; resize:vertical; }
.checkbox{ display:flex; gap:.7rem; align-items:flex-start; font-size:0.94rem; color:var(--text-soft); }
.section--dark .checkbox{ color:var(--text-inv-soft); }
.checkbox input{ margin-top:.25em; accent-color:var(--azure); width:18px;height:18px; flex:none; }
.form__note{ font-family:var(--font-mono); font-size:0.8rem; color:var(--text-faint); letter-spacing:.03em; }
.form-status{ font-family:var(--font-mono); font-size:0.88rem; padding:.8em 1em; border-radius:var(--r-sm); display:none; }
.form-status.show{ display:block; }
.form-status.ok{ background:rgba(27,143,208,.12); color:var(--azure-700); border:1px solid rgba(27,143,208,.3); }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; isolation:isolate; text-align:center; overflow:hidden; }
.cta-band .display{ color:#fff; max-width:18ch; margin-inline:auto; }
.cta-band__wm{ position:absolute; right:-4%; bottom:-18%; width:min(46vw,520px); opacity:.06; z-index:-1; filter:brightness(0) invert(1); pointer-events:none; }

/* ---------- Announcement ticker / Lauftext-Banner ---------- */
.ticker{ background: var(--ink); overflow:hidden; padding-block: clamp(.7rem,1.5vw,1.05rem); position:relative; isolation:isolate; }
.ticker::before{ content:""; position:absolute; inset:0; z-index:-1; background: radial-gradient(70% 120% at 50% 0%, rgba(8,136,200,.20), transparent 72%); }
.ticker__row{ display:flex; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.ticker__row + .ticker__row{ margin-top:.3rem; }
.ticker__track{ display:flex; align-items:center; gap: clamp(1rem,2.4vw,2.1rem); padding-right: clamp(1rem,2.4vw,2.1rem); width:max-content; flex:none; animation: ticker-l 100s linear infinite; will-change: transform; }
.ticker__row--rev .ticker__track{ animation-name: ticker-r; animation-duration: 145s; }
.ticker:hover .ticker__track{ animation-play-state: paused; }
@keyframes ticker-l{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@keyframes ticker-r{ from{ transform: translateX(-50%); } to{ transform: translateX(0); } }
.ticker__item{ font-family: var(--font-display); font-weight:800; font-style:italic; text-transform:uppercase; white-space:nowrap; color: var(--orange);  letter-spacing:-.01em; }
.ticker__sep{ color: var(--azure); font-style:normal; font-size:.7em; transform: translateY(-.08em); flex:none; }
.ticker__row--sub .ticker__track{ gap: clamp(.9rem,2vw,1.8rem); padding-right: clamp(.9rem,2vw,1.8rem); }
.ticker__row--sub .ticker__item{ font-family: var(--font-mono); font-style:normal; font-weight:500; text-transform:uppercase; color: var(--text-inv-soft);  letter-spacing:.16em; }
.ticker__row--sub .ticker__sep{ color: var(--orange); font-size:1em; }
@media (prefers-reduced-motion: reduce){ .ticker__track{ animation: none; } }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink-900); color:var(--text-inv-soft); position:relative; overflow:hidden; isolation:isolate; padding-top: clamp(4rem,7vw,7rem); }
.site-footer::before{ content:""; position:absolute; inset:0; z-index:-2; background: radial-gradient(70% 60% at 100% 0%, rgba(27,143,208,.16), transparent 55%); }
.footer__wm{ position:absolute; left:50%; bottom:-12%; transform:translateX(-50%); font-family:var(--font-display); font-weight:800; font-style:italic; font-size:clamp(5rem,22vw,18rem); color:#fff; opacity:.035; white-space:nowrap; z-index:-1; letter-spacing:-.04em; pointer-events:none; }
.footer__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:2rem; padding-bottom:3rem; }
.footer__brand img{ height:88px; width:auto; margin-bottom:1.3rem; }
.footer__brand p{ max-width:32ch; font-size:1.02rem; }
.site-footer h4{ color:#fff; font-family:var(--font-mono); font-weight:500; font-size:0.82rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:1.2rem; }
.footer__col a, .footer__col li{ display:block; padding:.32rem 0; font-size:1.02rem; }
.footer__col a:hover{ color:var(--azure-300); }
.social{ display:flex; gap:.7rem; margin-top:1.2rem; }
.social a{ width:44px;height:44px;border-radius:50%; border:1px solid var(--line-inv); display:grid;place-items:center; color:#fff; transition:background .3s, transform .3s, border-color .3s; }
.social a:hover{ background:var(--azure); border-color:var(--azure); transform:translateY(-3px); }
.social svg{ width:20px;height:20px; }
.footer__bottom{ border-top:1px solid var(--line-inv); padding:1.6rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; font-family:var(--font-mono); font-size:0.8rem; letter-spacing:.06em; }
.footer__bottom .legal{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.footer__bottom .legal a{ color:var(--azure-400); } /* genug Kontrast auf dem dunklen Footer */
@media (min-width: 541px){ .footer__bottom{ padding-left: calc(52px + clamp(1rem,3vw,1.9rem) + .75rem); padding-right: calc(58px + clamp(1rem,3vw,1.9rem) + .75rem); } } /* Platz für „nach oben“ links und die Kontakt-Knöpfe rechts */
.footer__bottom .legal a:hover{ color:#fff; }

/* ---------- Reveal on scroll (no-JS safe: only hides once .reveal-ready is set by JS) ---------- */
[data-reveal]{ transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal-ready [data-reveal]{ opacity:0; transform: translateY(28px); }
.reveal-ready [data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.08s; }
[data-reveal][data-delay="2"]{ transition-delay:.16s; }
[data-reveal][data-delay="3"]{ transition-delay:.24s; }
[data-reveal][data-delay="4"]{ transition-delay:.32s; }
[data-reveal][data-delay="5"]{ transition-delay:.40s; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .hero__bg img{ animation:none; transform:none; }
  .marquee__track{ animation:none; }
}

/* ---------- Misc ---------- */
.eyebrow-row{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.divider{ height:1px; background:var(--line); border:0; }
.tagrow{ display:flex; flex-wrap:wrap; gap:.6rem; }
.tag{ font-family:var(--font-mono); font-size:0.78rem; letter-spacing:.1em; text-transform:uppercase; padding:.45em .9em; border:1px solid var(--line-strong); border-radius:100px; color:var(--text-soft); }
.section--dark .tag{ color:var(--text-inv-soft); border-color:var(--line-inv-s); }
.skip-link{ position:absolute; left:-999px; top:0; background:#fff; color:#000; padding:.6em 1em; z-index:300; }
.skip-link:focus{ left:8px; top:8px; }

/* legal prose */
.legal{ max-width: 78ch; }
.legal h2{ font-size:1.5rem; margin:2.4rem 0 .8rem; }
.legal h3{ font-size:1.3rem; margin:1.8rem 0 .6rem; }
.legal p, .legal li{ color:var(--text-soft); margin-bottom:.8rem; }
.legal ul{ list-style:disc; padding-left:1.3rem; margin-bottom:1rem; }
.legal a{ color:var(--azure-700); text-decoration:underline; text-underline-offset:3px; }
.legal .note{ background:var(--paper-2); border-left:3px solid var(--orange); padding:1rem 1.2rem; border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:0.98rem; }
.legal .note b{ color:var(--text); }

/* ---------- Kontakt-Knöpfe rechts unten (WhatsApp / E-Mail) ---------- */
/* Kontakt-Knöpfe rechts unten: WhatsApp grün + E-Mail (Punkt 14, 05.11.2026) */
.kontakt-fab{ position:fixed; right:clamp(1rem,3vw,1.9rem); bottom:clamp(1rem,3vw,1.9rem); z-index:100; display:flex; flex-direction:column; align-items:flex-end; gap:.7rem; }
.kontakt-fab__knopf{ position:relative; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; text-decoration:none; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.kontakt-fab__knopf svg{ width:28px; height:28px; }
.kontakt-fab__knopf--wa{ background:#25d366; color:#fff; box-shadow:0 12px 30px -8px rgba(37,211,102,.65); }
.kontakt-fab__knopf--mail{ background:#fff; color:var(--azure-700); border:1px solid var(--line); box-shadow:0 12px 30px -10px rgba(10,15,21,.45); }
.kontakt-fab__knopf:hover, .kontakt-fab__knopf:focus-visible{ transform:scale(1.06); }
.kontakt-fab__knopf:focus-visible{ outline:2px solid var(--azure-700); outline-offset:3px; }
.kontakt-fab__text{ position:absolute; right:calc(100% + .7rem); top:50%; transform:translate(6px,-50%); white-space:nowrap; padding:.42rem .8rem; border-radius:999px; background:rgba(10,15,21,.9); color:#fff; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; opacity:0; pointer-events:none; transition:opacity .2s var(--ease), transform .2s var(--ease); }
.kontakt-fab__knopf:hover .kontakt-fab__text, .kontakt-fab__knopf:focus-visible .kontakt-fab__text{ opacity:1; transform:translate(0,-50%); }
@media (max-width:540px){ .kontakt-fab{ gap:.55rem; } .kontakt-fab__knopf{ width:52px; height:52px; } .kontakt-fab__knopf svg{ width:25px; height:25px; } }
@media (hover:none){ .kontakt-fab__text{ display:none; } }
@media (prefers-reduced-motion: reduce){ .kontakt-fab__knopf, .kontakt-fab__text{ transition:none; } }
@media print{ .kontakt-fab{ display:none !important; } }

/* ---------- A11y / Interaktion (Web Interface Guidelines) ---------- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--azure); outline-offset: 3px; border-radius: 4px;
}
.section--dark a:focus-visible, .section--dark button:focus-visible,
.hero a:focus-visible, .page-hero a:focus-visible,
.site-header a:focus-visible, .site-header button:focus-visible,
.cta-band a:focus-visible { outline-color: var(--azure-300); }
/* Anker nicht unter der fixen Glas-Leiste verstecken */
[id]{ scroll-margin-top: calc(var(--header-h) + 1.4rem); }
/* Touch-Optimierung */
a, button, input, select, textarea, label, summary { touch-action: manipulation; }
/* Overlays: Scroll nicht durchreichen */
.lightbox, .mobile-menu { overscroll-behavior: contain; }
/* Zahlenspalten gleichmäßig (Öffnungszeiten) */
.hours{ font-variant-numeric: tabular-nums; }

/* ---------- Responsive ---------- */
/* Telefon ausblenden, wenn es in der Glas-Leiste eng wird */
/* Inline-Navigation früher auf Hamburger umstellen (verhindert Umbruch von „Service & Verleih") */
@media (max-width: 1210px){ .nav__menu{ display:none; } .nav__toggle{ display:grid; } .site-header .container{ padding-right:.5rem; } } /* seit dem 6. Menüpunkt „Fischerkarten“ (05.11.2026) schon ab 1180 px statt 980 px */
@media (max-width: 1024px){
  .footer__top{ grid-template-columns:1fr 1fr; gap:2.4rem 1.5rem; }
  .footer__brand{ grid-column:1 / -1; }
}
@media (max-width: 860px){
  :root{ --header-h:80px; }
  .hero__img{ display:none; }
  .hero__video{ display:block; }
  .hero__coords{ border-top:0; padding-top:0; }
  .coords .rule{ display:none; }
  /* Hero-Koordinaten ⇄ Adresse: eine Zeile, abwechselnd (JS aktiviert .coords--cycle) */
  .coords--cycle{ transition:opacity .35s var(--ease); }
  .coords--cycle.is-fading{ opacity:0; }
  .coords--cycle .coords__b{ display:none; }
  .coords--cycle.show-addr .coords__a{ display:none; }
  .coords--cycle.show-addr .coords__b{ display:inline-flex; align-items:center; }
  .site-header .container{ height:56px; padding-right:.35rem; }
  .brand img{ height:40px; }
  .brand__wordmark{ font-size:1.3rem; }
  .nav__menu{ display:none; }
  .nav__toggle{ display:grid; }
  .pillars, .cat-grid, .steps, .partner-grid, .metrics{ grid-template-columns:1fr 1fr; }
  .feature{ grid-template-columns:1fr; }
  .feature--rev .feature__media{ order:0; }
  .feature__media{ margin-bottom:.5rem; }
  .visit{ grid-template-columns:1fr; }
  .tour-grid{ grid-template-columns:1fr; }
  .form .row{ grid-template-columns:1fr; }
  .gallery [class*="g-col"]{ grid-column:span 6; }
}
@media (max-width: 540px){
  .pillars, .cat-grid, .steps, .partner-grid, .metrics{ grid-template-columns:1fr; }
  .gallery [class*="g-col"]{ grid-column:span 12; }
  .gallery__item.tall{ aspect-ratio:4/3; }
  .footer__top{ grid-template-columns:1fr; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; padding-bottom:9rem; } /* Platz für die zwei Kontakt-Knöpfe und „nach oben“ */
  .hero{ min-height: 92svh; }
}

/* ---------- Online-Shop Teaser (Coming soon) ---------- */
/* `translate` statt `transform`: heroFade hält transform per fill-mode fest */
a.hero__badge{ transition: background .3s var(--ease), translate .35s var(--ease); }
a.hero__badge:hover{ background: var(--orange-300); translate: 0 -2px; }
.shop-teaser{ overflow:hidden; }
.shop-teaser .section-head{ margin-bottom: clamp(2rem,4vw,3rem); }
/* Kategorie-Kacheln (4×2, mobil 2 Spalten) – später direkt auf die Shopify-Kollektionen verlinken */
.kat-grid{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); /* 10 Kategorien = 2 Reihen à 5 (Christian, 06.11.2026) */ gap: clamp(.8rem, .5rem + 1vw, 1.4rem); list-style:none; padding:0; margin:0; }
.kat-tile{ position:relative; display:grid; place-items:center; aspect-ratio: 4/3; padding:1rem; border-radius: var(--r); overflow:hidden; isolation:isolate; text-align:center; background: var(--ink-800); }
.kat-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition: transform 1.1s var(--ease-out); }
.kat-tile::after{ content:""; position:absolute; inset:0; z-index:-1; background: radial-gradient(120% 90% at 50% 50%, rgba(10,15,21,.62), rgba(10,15,21,.32)); transition: background .4s var(--ease); }
.kat-tile:hover img, .kat-tile:focus-visible img{ transform: scale(1.06); }
.kat-tile:hover::after, .kat-tile:focus-visible::after{ background: radial-gradient(120% 90% at 50% 50%, rgba(10,15,21,.5), rgba(8,136,200,.22)); }
.kat-tile:focus-visible{ outline:2px solid var(--azure-700); outline-offset:3px; border-radius: var(--r); }
.kat-tile__title{ font-family: var(--font-display); font-weight:800; text-transform:uppercase; color:#fff; font-size: clamp(1.05rem, .8rem + 1vw, 1.75rem); line-height:1.08; letter-spacing:.01em; text-shadow: 0 2px 14px rgba(0,0,0,.5); text-wrap: balance; -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; max-width:100%; }
@media (min-width: 1101px){ .kat-tile{ padding:.75rem; } .kat-tile__title{ font-size: clamp(.95rem, .3rem + .95vw, 1.45rem); hyphens:manual; } } /* 5 Spalten: kleinere Titel, ohne Silbentrennung */
@media (max-width: 1100px){ .kat-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 359px){ .kat-tile .kat-tile__title{ font-size:.8rem; } } /* sehr schmale Handys: lange Titel passen */
@media (max-width: 480px){ .kat-tile{ padding:.6rem; } .kat-tile__title{ font-size: clamp(.86rem, .7rem + 1.1vw, 1rem); letter-spacing:0; } }
@media (prefers-reduced-motion: reduce){ .kat-tile img{ transition:none; } .kat-tile:hover img, .kat-tile:focus-visible img{ transform:none; } }

/* ---------- Marken-Raster (Partner-Seite) ---------- */
.brand-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap: clamp(.6rem,1.2vw,1.1rem); list-style:none; padding:0; }
.brand-tile{ position:relative; aspect-ratio: 2/1; background:#fff; border:1px solid var(--line); border-radius: var(--r-sm); transition: border-color .3s, transform .4s var(--ease), box-shadow .4s var(--ease); }
.brand-tile:hover{ border-color: var(--azure); transform: translateY(-3px); box-shadow: var(--shadow-1); }
.brand-tile img{ position:absolute; inset:12% 10%; width:80%; height:76%; object-fit:contain; }
@media (max-width: 1100px){ .brand-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width: 760px){ .brand-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width: 480px){ .brand-grid{ grid-template-columns:repeat(2,1fr); } }
@media (prefers-reduced-motion: reduce){ .brand-tile{ transition:none; } .brand-tile:hover{ transform:none; } }

/* ---------- Marken-Laufband (Start + Sortiment) ---------- */
/* padding-right = gap: -50% landet exakt auf der Kopie, kein Sprung am Loop-Ende */
.marquee__track--marken{ gap: clamp(.6rem,1.2vw,1.1rem); padding-right: clamp(.6rem,1.2vw,1.1rem); animation-duration: 150s; }
/* jedes Logo in einer weißen Kachel wie im Marken-Raster – weiße Logo-Hintergründe fallen so nicht auf */
.marquee__track--marken img{ box-sizing:border-box; width:172px; height:78px; padding:12px 18px; object-fit:contain; background:#fff; border:1px solid var(--line); border-radius: var(--r-sm); opacity:1; }
@media (max-width: 760px){ .marquee__track--marken img{ width:136px; height:62px; padding:9px 14px; } }
@media (prefers-reduced-motion: reduce){
  .marquee:has(.marquee__track--marken){ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .marquee__track--marken{ padding-inline: var(--gutter); }
  .marquee__track--marken img[aria-hidden="true"]{ display:none; }
}
.marquee__controls{ display:flex; justify-content:center; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.marquee:focus-within .marquee__track{ animation-play-state:paused; }
.marquee:focus-visible{ outline:2px solid var(--azure); outline-offset:4px; }

/* schmale Header (nach den Mobile-Regeln, damit Logo-Größe greift): erst „Shop“, ganz schmal nur das Taschen-Icon */
@media (max-width: 480px){ .nav__shop-pre{ display:none; } .nav__shop{ font-size:0.76rem; padding:.58em .95em; letter-spacing:.1em; } .nav__right{ gap:.6rem; } .brand{ gap:.5rem; flex-shrink:0; } .brand img{ height:34px; } .brand__wordmark{ font-size:1.12rem; } }
@media (max-width: 359px){ .nav__shop-txt{ display:none; } .nav__shop{ padding:.62em; } }
/* Handy/Tablet mit Burger-Menü: keine Shop-Pill im Header – seit 09.11.2026 steht im Menü „01 Start“ statt „01 Shop“; zum Shop-Start dort wieder einen Shop-Eintrag ergänzen */
@media (max-width: 980px){ .nav__shop{ display:none; } }
/* Telefonnummer im Header nur, solange neben dem Menü Platz ist – am Handy steht sie im Menü */
@media (max-width: 1380px){ .nav__phone{ display:none; } } /* seit „Fischerkarten & Gutscheine“ (09.11.2026): Telefonnummer erst ab 1381 px, Menü ab 1211 px */ /* seit dem 6. Menüpunkt: Telefonnummer erst ab 1261 px in der Leiste */

/* ---------- Abschnitts-Navigation links + „nach oben“ (Punkt 12, 05.11.2026) ---------- */
.seitennav{ position:fixed; left:clamp(.35rem,.6vw,1.4rem); top:min(44vh, 26rem); transform:translateY(-50%); /* links; etwas über der Mitte, auf großen Bildschirmen gedeckelt: liegt beim Laden in der ersten Sektion (05.11.2026) */ z-index:95; display:none; color:var(--ink); }
@media (min-width:1200px){ .seitennav{ display:block; } }
.seitennav ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.seitennav__link{ position:relative; display:flex; align-items:center; width:26px; height:24px; color:var(--ink); text-decoration:none; }
.seitennav__link.auf-dunkel{ color:#fff; }
.seitennav__link:focus-visible{ outline:2px solid var(--azure); outline-offset:2px; border-radius:3px; }
.seitennav__strich{ display:block; width:12px; height:2px; border-radius:2px; background:currentColor; opacity:.5; } /* ohne Übergänge: Farbe und aktiver Strich wechseln sofort – sonst blitzte der vorherige Strich beim Scrollen noch orange bzw. weiß auf hellem Grund nach (06.11.2026) */
.seitennav__link.ist-vorbei .seitennav__strich{ opacity:.75; }
.seitennav__link.ist-aktiv:not(.auf-dunkel) .seitennav__strich{ background:#c4620c; } /* Orange auf hellem Grund dunkler: ≥ 3:1 */
.seitennav__link:hover .seitennav__strich, .seitennav__link:focus-visible .seitennav__strich{ width:20px; opacity:.9; }
.seitennav__link.ist-aktiv .seitennav__strich{ width:clamp(18px,1.6vw,28px); height:3px; opacity:1; background:var(--orange); }
.seitennav__text{ position:absolute; left:calc(100% + .4rem); top:50%; transform:translate(-4px,-50%); white-space:nowrap; padding:.14rem .55rem; line-height:1.3; border-radius:999px; background:var(--paper); color:var(--ink); box-shadow:0 4px 14px -8px rgba(10,15,21,.4); font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; opacity:0; pointer-events:none; transition:opacity .2s var(--ease), transform .2s var(--ease); }
.seitennav__link.auf-dunkel .seitennav__text{ background:rgba(10,15,21,.92); color:#fff; box-shadow:none; }
.seitennav:hover .seitennav__text, .seitennav:focus-within .seitennav__text{ opacity:1; transform:translate(0,-50%); pointer-events:auto; }
.seitennav__text::before{ content:""; position:absolute; top:-3px; bottom:-3px; left:-.6rem; right:0; } /* Brücke zwischen Strich und Beschriftung */
[data-abschnitt]:focus, main:focus{ outline:none; } /* nur Sprungziele per Skript, kein Rahmen um ganze Bereiche */
.seitennav__link.ist-aktiv .seitennav__text{ background:var(--orange); color:#1a1206; }
.nach-oben{ position:fixed; left:clamp(1rem,3vw,1.9rem); bottom:clamp(1rem,3vw,1.9rem); z-index:96; width:52px; height:52px; padding:0; border:0; border-radius:50%; display:grid; place-items:center; background:rgba(10,15,21,.82); color:#fff; cursor:pointer; box-shadow:0 10px 30px -10px rgba(0,0,0,.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; visibility:hidden; transform:translateY(12px); pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease), background .25s var(--ease), visibility 0s linear .3s; }
.nach-oben.ist-sichtbar{ opacity:1; visibility:visible; transform:none; pointer-events:auto; transition-delay:0s; }
.nach-oben:hover, .nach-oben:focus-visible{ background:var(--azure-700); }
.nach-oben:focus-visible{ outline:2px solid var(--azure-300); outline-offset:3px; }
.nach-oben svg{ grid-area:1 / 1; }
.nach-oben__ring{ width:52px; height:52px; transform:rotate(-90deg); }
.nach-oben__ring circle{ fill:none; stroke-width:3; }
.nach-oben__ring .spur{ stroke:rgba(255,255,255,.16); }
.nach-oben__ring .fortschritt{ stroke:var(--orange); stroke-linecap:round; stroke-dasharray:138.23; stroke-dashoffset:calc(138.23 * (1 - var(--scroll-anteil,0))); }
.nach-oben__pfeil{ width:20px; height:20px; }
@media (prefers-reduced-motion: reduce){ .nach-oben, .seitennav__text{ transition:none; } }
@media print{ .seitennav, .nach-oben{ display:none !important; } }

/* ---------- Untermenüs Sortiment / Service (05.11.2026) ---------- */
.nav__item{ position:relative; display:flex; align-items:center; gap:.25rem; }
.nav__sub-auf{ display:grid; place-items:center; width:22px; height:22px; padding:0; border:0; border-radius:50%; background:none; color:rgba(255,255,255,.8); cursor:pointer; transition:transform .3s var(--ease), color .2s var(--ease); }
.nav__sub-auf svg{ width:11px; height:11px; }
.nav__sub-auf:hover, .nav__sub-auf:focus-visible{ color:#fff; }
.nav__sub-auf:focus-visible{ outline:2px solid var(--azure-300); outline-offset:2px; }
.nav__sub{ position:absolute; top:calc(100% + 1.15rem); left:50%; min-width:250px; padding:.5rem; border-radius:18px; background:#fff; box-shadow:0 26px 60px -24px rgba(10,15,21,.5), 0 0 0 1px rgba(10,15,21,.06); opacity:0; visibility:hidden; transform:translate(-50%,-6px); transition:opacity .2s var(--ease), transform .25s var(--ease), visibility 0s linear .25s; z-index:5; }
.nav__sub::before{ content:""; position:absolute; left:0; right:0; top:-1.25rem; height:1.25rem; } /* Brücke: der Mauszeiger kann vom Menüpunkt ins Untermenü wandern, ohne dass es zuklappt */
.nav__item--sub.ist-offen .nav__sub{ opacity:1; visibility:visible; transform:translate(-50%,0); transition-delay:0s; }
.nav__item--sub.ist-offen .nav__sub-auf{ transform:rotate(180deg); }
@media (hover:hover){
  .nav__item--sub:hover .nav__sub{ opacity:1; visibility:visible; transform:translate(-50%,0); transition-delay:0s; }
  .nav__item--sub:hover .nav__sub-auf{ transform:rotate(180deg); color:#fff; }
  .nav__item--sub.ist-zu:hover .nav__sub{ opacity:0; visibility:hidden; transform:translate(-50%,-6px); transition-delay:0s; } /* nach Klick auf einen Eintrag (gleiche Seite) */
  .nav__item--sub.ist-zu:hover .nav__sub-auf{ transform:none; }
}
.nav__sub ul{ list-style:none; margin:0; padding:0; }
.nav__sub li a{ display:flex; align-items:center; gap:.65rem; padding:.55rem .8rem; border-radius:11px; font-family:var(--font-body); font-size:.95rem; font-weight:500; letter-spacing:0; text-transform:none; color:var(--ink); text-decoration:none; white-space:nowrap; transition:background .2s var(--ease), color .2s var(--ease); }
.nav__sub li a::before{ content:""; flex:none; width:10px; height:2px; border-radius:2px; background:rgba(10,15,21,.22); transition:width .25s var(--ease), background .25s var(--ease); }
.nav__sub li a:hover, .nav__sub li a:focus-visible{ background:var(--foam); color:var(--azure-700); }
.nav__sub li a:hover::before, .nav__sub li a:focus-visible::before{ width:16px; background:var(--orange); }
.nav__sub a:focus-visible{ outline:2px solid var(--azure-700); outline-offset:-2px; }
@media (prefers-reduced-motion: reduce){ .nav__sub, .nav__sub-auf, .nav__sub li a, .nav__sub li a::before{ transition:none; } }
/* Handy-Menü: Unterpunkte mit „+“ */
.mobile-menu{ justify-content:flex-start; overflow-y:auto; padding-top:calc(var(--header-h) + 1rem); padding-bottom:calc(var(--gutter) + env(safe-area-inset-bottom, 0px)); }
.mobile-menu__list{ margin-top:auto; }
.mobile-menu__foot{ margin-bottom:auto; }
.mm-zeile{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.mobile-menu__list > .mm-gruppe{ opacity:0; transform:translateY(20px); }
.mobile-menu__list .mm-gruppe a{ opacity:1; transform:none; animation:none !important; }
body.menu-open .mobile-menu__list > .mm-gruppe{ animation: mm-in .6s var(--ease-out) forwards; }
body.menu-open .mobile-menu__list > .mm-gruppe:nth-child(2){ animation-delay:.18s; }
body.menu-open .mobile-menu__list > .mm-gruppe:nth-child(3){ animation-delay:.24s; }
.mm-auf{ flex:none; width:46px; height:46px; border-radius:50%; border:1px solid var(--line-inv-s); background:none; color:#fff; display:grid; place-items:center; cursor:pointer; transition:background .2s var(--ease), border-color .2s var(--ease); }
.mm-auf:hover, .mm-auf:focus-visible, .mm-auf[aria-expanded="true"]{ background:rgba(255,255,255,.08); border-color:var(--azure-300); }
.mm-auf:focus-visible{ outline:2px solid var(--azure-300); outline-offset:2px; }
.mm-auf span{ position:relative; display:block; width:16px; height:16px; }
.mm-auf span::before, .mm-auf span::after{ content:""; position:absolute; left:0; top:7px; width:16px; height:2px; border-radius:2px; background:currentColor; transition:transform .3s var(--ease); }
.mm-auf span::after{ transform:rotate(90deg); }
.mm-auf[aria-expanded="true"] span::after{ transform:rotate(0deg); }
.mm-sub{ display:flex; flex-direction:column; padding:.35rem 0 .9rem 2.4rem; }
.mm-sub[hidden]{ display:none; }
.mobile-menu__list .mm-sub a{ display:flex; align-items:center; gap:.7rem; padding:.42rem 0; font-family:var(--font-body); font-weight:500; font-size:1.12rem; letter-spacing:0; line-height:1.3; color:var(--text-inv-soft); }
.mobile-menu__list .mm-sub a::before{ content:""; flex:none; width:12px; height:2px; border-radius:2px; background:var(--orange); }
.mobile-menu__list .mm-sub a:hover{ color:#fff; }
@media (prefers-reduced-motion: reduce){ .mm-auf span::before, .mm-auf span::after{ transition:none; } }

/* ---------- Bildwechsel in den Sortiment-Kategorien (05.11.2026) ----------
   mehrere Fotos je Kategorie übereinander, das aktive wird eingeblendet; Steuerung unten links */
.bildwechsel{ touch-action:pan-y; }
.frame .bildwechsel__bild{ position:absolute; inset:0; opacity:0; transition: opacity .9s var(--ease), transform 1.1s var(--ease-out); }
.frame .bildwechsel__bild.ist-aktiv{ opacity:1; }
.bildwechsel__steuerung{ position:absolute; left:10px; bottom:6px; z-index:3; display:flex; align-items:center; gap:0; } /* dezent: keine Fläche, weicher Schatten statt Hintergrund (05.11.2026) */
.bildwechsel__punkt{ width:34px; height:24px; padding:0; margin:0; border:0; background:none; color:#fff; cursor:pointer; display:grid; place-items:center; border-radius:6px; }
.bildwechsel__punkt::before{ content:""; display:block; width:18px; height:3px; border-radius:2px; background:rgba(255,255,255,.8); box-shadow:0 1px 3px rgba(10,15,21,.55), 0 0 6px rgba(10,15,21,.35); /* ohne schwarzen Rand (Vorgabe 05.11.2026), nur weicher Schatten */ transition: width .3s var(--ease), background-color .3s var(--ease); }
.bildwechsel__punkt:hover::before{ background:#fff; }
.bildwechsel__punkt[aria-current="true"]::before{ width:28px; background:var(--orange); }
.bildwechsel__punkt:focus-visible{ outline:2px solid #0a0f15; outline-offset:-4px; box-shadow:inset 0 0 0 2px #fff; }
@media (prefers-reduced-motion: reduce){ .frame .bildwechsel__bild, .bildwechsel__punkt::before{ transition:none; } }
@media print{ .bildwechsel__steuerung{ display:none; } }

/* Startbild: Karpfen-Satz nur ab Tablet-Breite, am Handy sonst zu viel Text (Vorgabe 05.11.2026) */
@media (max-width: 860px){ .hero .hero__sub--breit{ display:none; } }


/* Große Kategorienummer (01, 02 …) neben den Überschriften: blitzte nur beim Einblenden kurz auf und verschwand dann
   hinter dem Sektionshintergrund – ausgeblendet, das Endbild bleibt gleich (Prüfung 05.11.2026) */
.feature__num{ display:none; }

/* „Besuche uns“: Beratung per Telefon und WhatsApp (Christian Punkt 17, 05.11.2026) */
.btn--whatsapp{ --bg:#0f7d43; --fg:#fff; --bd:#0f7d43; } /* dunkleres WhatsApp-Grün: weiße Schrift ≥ 4,5:1 */
.btn--whatsapp:hover{ --bg:#0b6535; --bd:#0b6535; }
.beratung__knoepfe{ margin-top:1.6rem; }
.beratung__knoepfe .btn svg{ flex:none; }

/* Kopfbereich der Menü-Unterseiten (Sortiment, Service & Verleih, Fischerkarten, Partner, Über uns) überall gleich hoch,
   damit beim Umschalten nichts springt (06.11.2026). Höhe richtet sich nach der längsten (Sortiment); die Zeile unten
   sitzt immer am unteren Rand. Das Bild füllt die Box (object-fit: cover), Bildformate spielen keine Rolle. */
.page-hero--gleich{ display:flex; flex-direction:column; min-height: clamp(600px, 40vh + 290px, 690px); } /* ohne Brotkrümel-Zeile, 06.11.2026 */
.page-hero--gleich > .container{ flex:1; display:flex; flex-direction:column; width:100%; }
.page-hero--gleich .page-hero__coords{ margin-top:auto; padding-top: clamp(1.8rem,4vh,3rem); }
@media (max-width: 860px){ .page-hero--gleich{ min-height: 700px; } }
@media (max-width: 359px){ .page-hero--gleich{ min-height: 760px; } } /* sehr schmale Handys: Sortiment-Text braucht mehr Platz */

/* Sortiment: 10 Hauptkategorien (Christian, 06.11.2026) – Service-Links unter dem Text, Schlagwörter vorerst ausgeblendet */
.feature__links{ display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; margin-top:.4rem; margin-bottom:1.4rem; }
.feature__links .link-arrow{ display:inline-block; } .feature__links .link-arrow .nw{ white-space:nowrap; } .feature__links .link-arrow .ar{ display:inline-block; vertical-align:-2px; margin-left:.45em; } /* am Handy: Pfeil bleibt direkt am letzten Wort */
.sortiment-kategorien .tagrow{ display:none; }