/* =============================================================
   AP Production – Onepager
   Hell & warm, Schwarz/Dunkelgrau als Markenfarbe, warmes Orange als Akzent.
   ============================================================= */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

/* ---------- Farbpalette & Tokens ---------- */
:root {
  --bg: #FAF7F2;          /* warmes Off-White, Grundfläche */
  --bg-alt: #F2ECE3;      /* Sand, für abgesetzte Bereiche */
  --surface: #FFFFFF;     /* Karten */
  --ink: #171717;         /* Markenschwarz: Text, Buttons */
  --ink-soft: #3A3835;    /* Fließtext */
  --muted: #736D65;       /* Nebeninfos */
  --line: #E5DED3;        /* Linien, Ränder */
  --accent: #008080;      /* Markentürkis (Visitenkarte) – Akzent */
  --accent-hover: #006D6D; /* Türkis dunkler, für Hover */
  --accent-strong: #006666; /* Türkis für kleine Schrift auf hellem Grund */
  --accent-soft: #DCEFEC; /* zarte Türkis-Fläche */
  --accent-light: #A9DCD7; /* helles Türkis für Akzente auf dunklem/türkisem Grund */

  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Italiana", "Didot", "Bodoni 72", Georgia, serif; /* nur für Abschnitts-Labels, Leistungsnummern und Preise */

  --radius-sm: 12px;
  --radius: 22px;
  --radius-lg: 34px;
  --shadow-sm: 0 1px 2px rgba(23, 23, 23, .05), 0 4px 14px rgba(23, 23, 23, .05);
  --shadow: 0 2px 6px rgba(23, 23, 23, .05), 0 18px 48px rgba(60, 40, 20, .10);
  --ease: cubic-bezier(.22, .8, .24, 1);

  --header-h: 72px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(80px, 11vw, 150px);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { color: var(--ink); margin: 0; line-height: 1.12; letter-spacing: -.035em; font-weight: 800; }
h2 { font-size: clamp(2.1rem, 5vw, 3.9rem); }
h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent); color: #fff; }

.container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none; transition: top .2s; }
.skip-link:focus { top: 12px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 1.1rem;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent); border-radius: 2px; }
.eyebrow .dot { display: none; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.7; color: var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--ink); --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 0 1.6em;
  border-radius: 999px; border: 1.5px solid transparent;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 700; font-size: .95rem; letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  transition: transform .35s var(--ease), background-color .25s, color .25s, box-shadow .35s var(--ease), border-color .25s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(23, 23, 23, .16); }
.btn:active { transform: translateY(0); }
.btn .arrow { display: inline-block; transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-dark { --btn-bg: var(--ink); --btn-fg: #fff; }
.btn-dark:hover { --btn-bg: #0e0e0e; }
.btn-accent { --btn-bg: var(--accent); --btn-fg: #fff; }
.btn-accent:hover { --btn-bg: var(--accent-hover); box-shadow: 0 10px 26px rgba(0, 128, 128, .3); }
.btn-cta { --btn-bg: var(--accent); --btn-fg: #fff; }
.btn-cta:hover { --btn-bg: var(--ink); box-shadow: 0 10px 26px rgba(23, 23, 23, .2); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: rgba(23, 23, 23, .22); }
.btn-ghost:hover { --btn-bg: var(--ink); --btn-fg: #fff; border-color: var(--ink); }
.btn-sm { min-height: 42px; padding: 0 1.15em; font-size: .86rem; }
.btn-lg { min-height: 58px; font-size: 1rem; }
.btn-block { width: 100%; }

.link-arrow { display: inline-flex; align-items: center; gap: .5em; font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.link-arrow span { transition: transform .35s var(--ease); }
.link-arrow:hover span { transform: translateX(4px); }
.text-link { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; color: inherit; font-size: inherit; }
.text-link:hover { color: var(--accent-strong); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: rgba(255, 255, 255, .78); /* weiß, leicht transparent */
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid rgba(229, 222, 211, .6);
  transition: border-color .3s, background-color .3s, box-shadow .3s;
}
.site-header.is-scrolled { background: rgba(255, 255, 255, .86); border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(23, 23, 23, .05); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.logo-mark { width: 44px; height: 26px; fill: currentColor; display: none; }
/* Ausgeschriebenes Logo "AProduction" – per CSS-Maske, damit es die Textfarbe (und beim Hover Türkis) annimmt */
.logo-full {
  display: block; width: clamp(140px, 13vw, 170px); aspect-ratio: 898 / 130; background-color: currentColor;
  -webkit-mask: url("../img/logo-wordmark.png") center / contain no-repeat;
          mask: url("../img/logo-wordmark.png") center / contain no-repeat;
  transition: background-color .25s;
}
.site-footer .logo-full { width: 190px; }

/* Navigation: Kapitel immer offen sichtbar (kein Burger-Menü), aktives Kapitel in Türkis */
.main-nav { margin-left: auto; }
.main-nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.main-nav a[data-nav] {
  position: relative; display: block; padding: 8px 14px; border-radius: 999px;
  font-size: .9rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  transition: color .3s, background-color .3s;
}
.main-nav a[data-nav]::after {
  content: ""; position: absolute; left: 50%; bottom: 1px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); transform: translateX(-50%) scale(0); transition: transform .35s var(--ease);
}
.main-nav a[data-nav].is-active { color: var(--accent); font-weight: 700; }
.main-nav a[data-nav].is-active::after { transform: translateX(-50%) scale(1); }

/* Schmalere Fenster: Kapitel als zweite Zeile, seitlich wischbar; das aktive Kapitel läuft automatisch mit */
@media (max-width: 999px) {
  :root { --header-h: 108px; }
  .header-inner { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 58px 50px; gap: 0 16px; align-items: center; }
  .logo { grid-column: 1; grid-row: 1; }
  .header-cta { grid-column: 2; grid-row: 1; justify-self: end; }
  .main-nav {
    grid-column: 1 / -1; grid-row: 2; margin: 0 calc(var(--gutter) * -1); align-self: stretch;
    display: flex; align-items: center; border-top: 1px solid rgba(229, 222, 211, .7);
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
  }
  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav ul { padding: 0 var(--gutter); width: max-content; gap: 2px; }
  .main-nav a[data-nav] { font-size: .88rem; padding: 8px 12px; }
}/* Kleines Fenster: nur noch das "AP"-Zeichen */
@media (max-width: 600px) {
  .hide-sm { display: none; }
  .site-header .logo-full { display: none; }
  .site-header .logo-mark { display: block; }
}

/* ---------- 1. Hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(36px, 6vw, 72px) 0 clamp(40px, 6vw, 72px); isolation: isolate; }
.hero-wash { position: absolute; inset: -10%; z-index: -1; opacity: .22; pointer-events: none; }
.hero-wash img { width: 100%; height: 100%; object-fit: cover; filter: blur(70px) saturate(1.3); transition: opacity .8s; }
.hero::after { /* sanfter Übergang zur Seitenfarbe */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 70% at 50% 0%, rgba(250, 247, 242, .2), var(--bg) 78%);
}
.hero-head { display: grid; gap: 26px; }
.hero-title { font-size: clamp(2.6rem, 6.6vw, 5.4rem); line-height: 1.1; letter-spacing: -.05em; }
.hero-title .soft { color: #8F877D; }
@media (min-width: 900px) {
  .hero-side { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
  .hero-side .hero-sub { margin: 0; max-width: 50ch; }
  .hero-side .hero-ctas { margin: 0; flex-shrink: 0; }
}
.accent-dot { color: var(--accent); }
.hero-sub { font-size: clamp(1.05rem, 1.4vw, 1.18rem); line-height: 1.6; max-width: 40ch; }
.hero-sub strong { color: var(--ink); font-weight: 700; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.hero-ctas .btn { min-height: 48px; padding: 0 1.4em; font-size: .9rem; }
@media (max-width: 480px) { .hero-ctas { gap: 10px; } .hero-ctas .btn { flex: 1 1 auto; padding: 0 1.1em; font-size: .86rem; } }

/* Coverflow */
.coverflow { position: relative; margin-top: clamp(32px, 4vw, 52px); user-select: none; -webkit-user-select: none; }
.cf-track {
  position: relative; list-style: none; margin: 0 auto; padding: 0;
  height: clamp(360px, 40vw, 460px);
  perspective: 1400px; transform-style: preserve-3d; touch-action: pan-y;
  pointer-events: none; /* Klicks gehen direkt an die (teils nach hinten versetzten) Karten */
}
.cf-card {
  --w: clamp(220px, 25vw, 330px);
  position: absolute; top: 0; left: 50%;
  width: var(--w); height: 100%; margin-left: calc(var(--w) / -2);
  border-radius: var(--radius); overflow: hidden; background: var(--bg-alt);
  box-shadow: 0 20px 50px rgba(50, 35, 20, .18);
  transition: transform 1.4s var(--ease), opacity 1.1s var(--ease), filter .6s var(--ease), box-shadow .8s;
  will-change: transform; cursor: pointer;
}
.cf-card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform 1.2s var(--ease); }
.cf-card.is-active { cursor: default; box-shadow: 0 34px 70px rgba(50, 35, 20, .26); }
.cf-card.is-active:hover img { transform: scale(1.04); }
.cf-info {
  position: absolute; inset: auto 0 0 0; padding: 60px 20px 20px; color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  opacity: 0; transform: translateY(10px); transition: opacity .5s .15s, transform .6s .15s var(--ease);
}
.cf-card.is-active .cf-info { opacity: 1; transform: none; }
.cf-tag { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cf-title { margin: 8px 0 0; font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.cf-more { display: block; margin-top: 10px; font-size: .8rem; font-weight: 600; opacity: .9; }
.cf-card.is-active { cursor: pointer; }
.cf-controls { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 32px); margin-top: 30px; }
/* Haarlinien-Pfeile im Stil von Italiana / Logo-Schwung */
.cf-btn {
  width: 76px; height: 44px; padding: 0 6px; border: 0; background: none; color: var(--ink);
  display: grid; place-items: center; transition: color .3s, transform .45s var(--ease);
}
.cf-btn svg { width: 100%; height: 16px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.cf-btn:hover { color: var(--accent); }
#cf-prev:hover { transform: translateX(-5px); }
#cf-next:hover { transform: translateX(5px); }
.cf-nav { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cf-count { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 1.35rem; line-height: 1; color: var(--ink); letter-spacing: .06em; }
.cf-count #cf-total { color: var(--muted); }
.cf-sep { width: 28px; height: 1px; background: currentColor; opacity: .5; }
/* Fortschrittslinien statt Punkte */
.cf-dots { display: flex; gap: 6px; }
.cf-dot { position: relative; width: 18px; height: 13px; padding: 0; border: 0; background: none; transition: width .6s var(--ease); }
.cf-dot::before, .cf-dot::after { content: ""; position: absolute; left: 0; top: 6px; height: 1px; }
.cf-dot::before { right: 0; background: rgba(23, 23, 23, .28); }
.cf-dot::after { width: 0; background: var(--accent); height: 2px; top: 5.5px; }
.cf-dot:hover::before { background: var(--ink); }
.cf-dot[aria-current="true"] { width: 52px; }
.cf-dot[aria-current="true"]::after { animation: cf-progress var(--cf-interval, 7s) linear forwards; }
.coverflow.is-paused .cf-dot[aria-current="true"]::after { animation-play-state: paused; }
.coverflow.is-stopped .cf-dot[aria-current="true"]::after { animation: none; width: 100%; }
@keyframes cf-progress { from { width: 0; } to { width: 100%; } }
.cf-pause { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(23, 23, 23, .22); background: none; color: var(--ink); display: grid; place-items: center; transition: background-color .3s, color .3s; }
.cf-pause:hover { background: var(--ink); color: #fff; }
.cf-pause svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.cf-pause .i-play { display: none; }
.cf-pause[aria-pressed="true"] .i-play { display: block; }
.cf-pause[aria-pressed="true"] .i-pause { display: none; }
@media (max-width: 560px) { .cf-btn { width: 52px; } .cf-dot { width: 10px; } .cf-dot[aria-current="true"] { width: 34px; } }
/* Zielgruppen-Laufband */
.audience { border-block: 1px solid var(--line); background: var(--surface); overflow: hidden; padding: 18px 0; }
.audience-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.audience ul { display: flex; list-style: none; margin: 0; padding: 0; }
.audience li { display: flex; align-items: center; gap: 28px; padding-right: 28px; white-space: nowrap; font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.25rem); color: var(--ink); letter-spacing: -.01em; }
.audience li::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 2. Über mich ---------- */
.about-grid { display: grid; gap: clamp(40px, 6vw, 96px); align-items: center; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1fr 1fr; } }

/* Collage im Stil der Inspiration "Sport": versetzte Bildstreifen + überlappendes Porträt */
.about-collage { position: relative; display: grid; gap: 10px; width: 100%; max-width: 560px; justify-self: center; padding: 18px 0 30px; }
.strip { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 14px 34px rgba(30, 30, 30, .14); background: var(--bg-alt); }
.strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.strip:hover img { transform: scale(1.05); }
.strip-1 { height: clamp(110px, 15vw, 150px); margin-left: 9%; }
.strip-2 { height: clamp(84px, 11vw, 112px); margin-right: 5%; }
.strip-3 { height: clamp(110px, 15vw, 150px); margin-left: 3%; margin-right: 22%; }
.strip-4 { height: clamp(120px, 16vw, 168px); margin-left: 12%; }
.strip-title {
  position: absolute; left: 7%; top: 50%; transform: translateY(-50%); margin: 0;
  display: grid; color: #fff; line-height: .9; text-shadow: 0 4px 24px rgba(0, 0, 0, .25);
}
.strip-title span { font-size: clamp(2.6rem, 6vw, 4.2rem); font-weight: 800; letter-spacing: -.04em; text-transform: uppercase; }
.strip-title small { font-size: .74rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; margin-top: 8px; opacity: .92; }
.collage-portrait {
  position: absolute; right: -2%; top: 31%; width: 40%; margin: 0; z-index: 2;
  border-radius: 22px; overflow: visible; transform: rotate(3deg);
  transition: transform .8s var(--ease);
}
.collage-portrait img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 22px; border: 5px solid var(--bg); box-shadow: 0 24px 50px rgba(30, 30, 30, .25); }
.collage-portrait:hover { transform: rotate(0deg) scale(1.02); }
.collage-mark {
  position: absolute; left: -10px; top: 0; z-index: 3; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 10px 24px rgba(0, 128, 128, .35);
}
.collage-mark svg { width: 38px; height: 24px; fill: currentColor; }
.about-collage .about-badge { left: -18%; bottom: -22px; }
@media (max-width: 560px) {
  .collage-portrait { width: 44%; top: 34%; }
  .about-collage .about-badge { left: -30%; bottom: -26px; padding: 10px 14px; }
  .collage-mark { width: 50px; height: 50px; left: -4px; }
  .collage-mark svg { width: 30px; }
}
/* Streifen fahren abwechselnd von links/rechts ein */
.js .about-collage .strip, .js .about-collage .collage-portrait { opacity: 0; transition: opacity .9s var(--ease), transform 1s var(--ease); }
.js .about-collage .strip:nth-child(odd) { transform: translateX(-36px); }
.js .about-collage .strip:nth-child(even) { transform: translateX(36px); }
.js .about-collage .collage-portrait { transform: rotate(3deg) translateY(30px); }
.about-collage.is-visible .strip, .about-collage.is-visible .collage-portrait { opacity: 1; }
.about-collage.is-visible .strip { transform: none; }
.about-collage.is-visible .collage-portrait { transform: rotate(3deg); }
.about-collage.is-visible .collage-portrait:hover { transform: rotate(0deg) scale(1.02); }
.about-collage .strip-2 { transition-delay: .12s; }
.about-collage .strip-3 { transition-delay: .24s; }
.about-collage .strip-4 { transition-delay: .36s; }
.about-collage .collage-portrait { transition-delay: .5s; }
.about-collage.is-visible .collage-portrait:hover { transition-delay: 0s; }
.about-badge {
  position: absolute; left: -12px; bottom: 28px; display: grid; gap: 2px;
  background: var(--surface); padding: 14px 18px; border-radius: 16px; box-shadow: var(--shadow);
  font-size: .82rem; color: var(--muted);
}
.about-badge strong { color: var(--ink); font-size: 1rem; }
.about-title { font-size: clamp(2rem, 4.4vw, 3.5rem); margin-bottom: 26px; }
.about-title mark {
  background: none; color: inherit;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-size: 0% .14em; background-position: 0 100%; padding-bottom: .04em;
  transition: background-size 1.1s .4s var(--ease);
}
.about-title.is-visible mark { background-size: 100% .14em; }
.about-facts { list-style: none; padding: 0; margin: 30px 0 34px; display: grid; gap: 0; border-top: 1px solid var(--line); }
.about-facts li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.fact-k { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fact-v { font-weight: 600; color: var(--ink); text-align: right; }

/* ---------- Abschnittsköpfe ---------- */
.section-head { display: grid; gap: 18px; margin-bottom: clamp(32px, 4vw, 56px); align-items: end; }
@media (min-width: 900px) { .section-head { grid-template-columns: 1.3fr 1fr; gap: 56px; } }
.section-lead { font-size: 1.1rem; color: var(--muted); margin: 0; max-width: 42ch; }
.section-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 48px; padding: 26px 30px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.section-cta p { margin: 0; font-weight: 700; color: var(--ink); font-size: 1.1rem; }

/* ---------- 3. Portfolio ---------- */
.portfolio { background: var(--bg-alt); }
.pf-tabs { display: inline-flex; padding: 5px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); margin-bottom: 18px; }
.pf-tab {
  border: 0; background: transparent; padding: 12px 22px; border-radius: 999px;
  font-weight: 700; font-size: .95rem; color: var(--muted); transition: background-color .3s, color .3s;
}
.pf-tab .count { font-size: .75rem; font-weight: 600; opacity: .65; margin-left: 4px; }
.pf-tab.is-active { background: var(--ink); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.chips[hidden] { display: none; }
.chip {
  border: 1.5px solid rgba(23, 23, 23, .14); background: transparent; padding: 8px 16px; border-radius: 999px;
  font-size: .87rem; font-weight: 600; color: var(--ink-soft); transition: background-color .25s, border-color .25s, color .25s;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Raster mit festen Reihen (damit "2 Reihen" eindeutig ist). Querformate (.g-wide) belegen 2 Spalten. */
.gallery { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 12px; grid-auto-flow: dense; }
@media (min-width: 720px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1100px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.g-item { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius-sm); overflow: hidden; background: var(--line); animation: g-in .6s var(--ease) backwards; }
.g-item.g-wide { grid-column: span 2; aspect-ratio: auto; align-self: stretch; }
.g-item.g-wide .g-open { position: absolute; inset: 0; }
@media (min-width: 720px) { .g-item { border-radius: 18px; } }
.g-item.is-hidden, .g-item.is-more { display: none; }
.g-open, .g-open img { height: 100%; }
.g-open img { object-fit: cover; }
/* sanftes Ausblenden der letzten Reihe, solange zugeklappt */
.gallery.is-collapsed::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(242, 236, 227, 0), var(--bg-alt));
}
.gallery-more { display: flex; justify-content: center; margin-top: 18px; }
.gallery-more[hidden] { display: none; }
.more-btn {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px; border: 0; background: none; padding: 8px 16px;
  font-weight: 700; font-size: .92rem; color: var(--ink); transition: color .3s;
}
.more-arrow { width: 16px; height: 44px; display: block; transition: transform .5s var(--ease); }
.more-arrow svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.more-btn:hover { color: var(--accent); }
.more-btn:hover .more-arrow { transform: translateY(5px); }
.more-btn[aria-expanded="true"] .more-arrow { transform: rotate(180deg); }
.more-btn[aria-expanded="true"]:hover .more-arrow { transform: rotate(180deg) translateY(5px); }
@keyframes g-in { from { opacity: 0; transform: translateY(14px); } }
.g-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.g-open img { width: 100%; transition: transform .9s var(--ease), filter .6s; }
.g-item .g-open, .g-item .g-open img { height: 100%; }
.g-item figcaption {
  position: absolute; left: 12px; bottom: 12px; pointer-events: none;
  padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ink);
  font-size: .76rem; font-weight: 700; letter-spacing: .02em;
  opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .45s var(--ease);
}
.g-item:hover .g-open img, .g-open:focus-visible img { transform: scale(1.05); filter: saturate(1.08); }
.g-item:hover figcaption, .g-open:focus-visible + figcaption { opacity: 1; transform: none; }
@media (hover: none) { .g-item figcaption { opacity: 1; transform: none; font-size: .7rem; left: 8px; bottom: 8px; padding: 4px 10px; } }

/* ---------- 4. Leistungen ---------- */
.service-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(40px, 6vw, 72px); }
.service-jump a {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 12px 12px; border-radius: 999px;
  background: var(--surface); box-shadow: var(--shadow-sm); text-decoration: none; font-weight: 700; color: var(--ink);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.service-jump a:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.service-jump span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-family: var(--font-display); font-size: 1rem; font-weight: 400; }

.service-block { display: grid; gap: 28px; padding-block: clamp(36px, 5vw, 64px); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 8px); }
@media (min-width: 1000px) { .service-block { grid-template-columns: 1fr 2fr; gap: 56px; align-items: start; } }
.service-intro { display: grid; gap: 14px; }
@media (min-width: 1000px) { .service-intro { position: sticky; top: calc(var(--header-h) + 32px); } }
.service-no { font-family: var(--font-display); font-size: 3rem; line-height: 1; color: var(--accent); }
.service-intro p { color: var(--muted); margin: 0; max-width: 40ch; }
.service-img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; margin-top: 10px; box-shadow: var(--shadow-sm); }
@media (max-width: 999px) { .service-img { display: none; } }

.pack-grid { display: grid; gap: 18px; }
@media (min-width: 680px) { .pack-grid { grid-template-columns: 1fr 1fr; } }
.pack {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--radius); padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.pack:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pack-featured { border-color: transparent; box-shadow: 0 0 0 2px var(--accent), var(--shadow-sm); }
.pack-featured:hover { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.pack-flag { position: absolute; top: -13px; right: 22px; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.pack-title { font-size: clamp(1.3rem, 2vw, 1.55rem); letter-spacing: -.03em; line-height: 1.15; }
.pack-for { margin: 10px 0 20px; font-size: .92rem; color: var(--muted); }
.pack-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.pack-list li { position: relative; padding-left: 30px; font-size: .97rem; line-height: 1.5; color: var(--ink-soft); }
.pack-list li::before {
  content: ""; position: absolute; left: 0; top: .1em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%23006666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.pack-foot { margin-top: auto; display: grid; gap: 16px; }
.price { margin: 0; font-size: .95rem; color: var(--muted); display: flex; align-items: baseline; flex-wrap: wrap; gap: .3em; }
.price-value { font-family: var(--font-display); font-size: 2.5rem; font-weight: 400; line-height: 1; color: var(--ink); letter-spacing: 0; }
.price small { width: 100%; font-size: .8rem; }
/* Platzhalter-Optik, solange noch kein echter Preis eingetragen ist */
.price.is-placeholder .price-value { font-size: 1.4rem; color: var(--muted); padding: 2px 10px; border: 1.5px dashed rgba(23, 23, 23, .25); border-radius: 8px; letter-spacing: 0; }

.service-block--event .pack-wide { grid-column: span 1; }
.pack-wide { padding: 0; overflow: hidden; display: grid; }
@media (min-width: 720px) { .pack-wide { grid-template-columns: .9fr 1.1fr; } }
.pack-wide-img { width: 100%; height: 100%; object-fit: cover; min-height: 260px; max-height: 520px; }
.pack-wide-body { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 40px); }
.pack-wide .pack-foot { grid-template-columns: 1fr; }
@media (min-width: 1000px) { .pack-wide .pack-foot { grid-template-columns: 1fr auto; align-items: end; } }
.services-note { text-align: center; color: var(--muted); margin: 24px auto 0; max-width: 52ch; }

/* ---------- 5. Kundenstimmen ---------- */
.reviews { background: var(--surface); }
.reviews .section-head { grid-template-columns: 1fr; }
@media (min-width: 900px) { .reviews .section-head { grid-template-columns: 1fr auto; } }
.review-list { display: grid; gap: 18px; }
@media (min-width: 720px) { .review-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .review-list { grid-template-columns: repeat(3, 1fr); } }
.review-list:empty { display: none; }
.review-card { display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); }
.review-stars { color: var(--accent); letter-spacing: 3px; font-size: 1.05rem; }
.review-stars .off { color: var(--line); }
.review-text { margin: 0; font-size: 1.04rem; line-height: 1.65; color: var(--ink); }
.review-meta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .88rem; }
.review-author strong { display: block; color: var(--ink); }
.review-author span { color: var(--muted); }
.review-source { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 5px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; }

.review-empty { display: grid; gap: 32px; align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: var(--radius-lg); background: var(--bg); border: 1.5px dashed var(--line); }
@media (min-width: 900px) { .review-empty { grid-template-columns: 1.3fr 1fr; } }
.review-empty[hidden] { display: none; }
.review-ghosts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ghost { display: grid; gap: 10px; padding: 18px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); opacity: .9; }
.ghost:nth-child(2) { transform: translateY(-10px); }
.ghost-stars { color: var(--accent-soft); letter-spacing: 2px; font-size: .9rem; }
.ghost-line { height: 8px; border-radius: 6px; background: linear-gradient(90deg, var(--bg-alt), var(--line), var(--bg-alt)); background-size: 200% 100%; animation: shimmer 2.4s linear infinite; }
.ghost-line.short { width: 60%; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (max-width: 560px) { .ghost:nth-child(3) { display: none; } .review-ghosts { grid-template-columns: 1fr 1fr; } }
.review-empty-title { font-size: 1.35rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; margin-bottom: .4em; }
.review-empty-text p:last-child { margin: 0; color: var(--muted); }

/* ---------- 6. Kontakt / Abschluss-CTA ---------- */
.contact { padding-top: clamp(40px, 6vw, 80px); }
.contact-panel {
  position: relative; overflow: hidden;
  display: grid; gap: clamp(32px, 5vw, 64px);
  padding: clamp(28px, 5vw, 72px);
  border-radius: var(--radius-lg);
  background: var(--accent);
  color: #fff;
}
.contact-panel h2 { color: #fff; }
.contact-panel::before { /* dezente Lichtkreise */
  content: ""; position: absolute; width: 620px; height: 620px; right: -200px; top: -260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 70%); pointer-events: none;
}
@media (min-width: 1000px) { .contact-panel { grid-template-columns: 1.05fr 1fr; align-items: start; } }
.eyebrow--dark { color: rgba(255, 255, 255, .85); }
.eyebrow--dark::before { background: var(--accent-light); }
.contact-title { font-size: clamp(2.3rem, 5.4vw, 4.4rem); line-height: 1.12; letter-spacing: -.045em; margin-bottom: 24px; }
.rotator { display: inline-block; position: relative; }
.rotator-word { display: inline-block; background: var(--ink); color: #fff; padding: 0 .18em .06em; border-radius: .14em; transition: opacity .35s, transform .45s var(--ease); }
.rotator-word.is-out { opacity: 0; transform: translateY(.25em); }
.contact-lead { font-size: 1.12rem; line-height: 1.6; color: rgba(255, 255, 255, .9); max-width: 44ch; }
.contact-points { list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 10px; font-weight: 700; color: #fff; }
.contact-points li { display: flex; align-items: center; gap: 12px; }
.contact-points li::before { content: "✓"; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--accent); font-size: .8rem; flex-shrink: 0; }
.contact-mail { margin: 0; font-size: .95rem; }
.contact-mail { color: rgba(255, 255, 255, .85); }
.contact-mail a { font-weight: 700; color: #fff; }

/* Formulare */
.form { position: relative; background: var(--surface); border-radius: var(--radius); padding: clamp(22px, 3.4vw, 40px); box-shadow: 0 30px 60px rgba(0, 50, 50, .25); display: grid; gap: 18px; }
.form--plain { box-shadow: none; padding: 0; }
.field { display: grid; gap: 7px; margin: 0; border: 0; padding: 0; min-width: 0; }
.field label, .field legend { font-size: .86rem; font-weight: 700; color: var(--ink); padding: 0; }
.optional { font-weight: 500; color: var(--muted); }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--bg); border: 1.5px solid var(--line); border-radius: 14px;
  padding: 14px 16px; transition: border-color .2s, box-shadow .2s, background-color .2s;
  -webkit-appearance: none; appearance: none;
}
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23171717' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px; padding-right: 44px; }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); background: #fff; box-shadow: 0 0 0 4px rgba(0, 128, 128, .18); }
.field-error { display: none; margin: 0; font-size: .82rem; font-weight: 600; color: #B42318; }
.field.has-error .field-error { display: block; }
.field.has-error input, .field.has-error textarea { border-color: #D92D20; }
.field-check { grid-template-columns: auto 1fr; align-items: start; column-gap: 12px; }
.field-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); }
.field-check label { font-weight: 500; font-size: .85rem; line-height: 1.5; color: var(--ink-soft); }
.field-check .field-error { grid-column: 2; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; font-size: .88rem; font-weight: 600; color: var(--muted); }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: #22A06B; box-shadow: 0 0 0 0 rgba(34, 160, 107, .5); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(34, 160, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 160, 107, 0); } }
.form-success { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 32px; background: var(--surface); border-radius: inherit; animation: g-in .5s var(--ease); }
.form-success[hidden] { display: none; }
.form-success-title { font-size: 1.6rem; font-weight: 800; color: var(--ink); letter-spacing: -.03em; margin-bottom: .3em; }
.form.is-sending button[type="submit"] { opacity: .6; pointer-events: none; }

/* Sterne-Auswahl */
.stars-row { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.stars-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars-row label { font-size: 2rem; line-height: 1; color: var(--line); cursor: pointer; transition: color .15s, transform .2s; }
.stars-row label:hover, .stars-row label:hover ~ label, .stars-row input:checked ~ label { color: var(--accent); }
.stars-row input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- 7. Footer ---------- */
.site-footer { padding: clamp(56px, 7vw, 88px) 0 32px; }
.footer-grid { display: grid; gap: 36px; padding-bottom: 40px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-brand p { margin: 16px 0 0; color: var(--muted); max-width: 34ch; }
.footer-nav { display: grid; gap: 10px; align-content: start; }
.footer-nav a { text-decoration: none; font-weight: 600; color: var(--ink-soft); width: fit-content; }
.footer-nav a:hover { color: var(--accent-strong); }
.footer-contact { display: grid; gap: 18px; align-content: start; }
.footer-mail { font-weight: 700; color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 4px; }
.socials { display: flex; gap: 10px; }
.socials a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--ink); transition: background-color .25s, color .25s, transform .3s var(--ease); }
.socials a:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
.socials svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.socials svg .fill { fill: currentColor; stroke: none; }
.footer-bottom { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; font-size: .85rem; color: var(--muted); }
.footer-bottom::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--line); }
.legal-links { display: flex; gap: 18px; }

/* ---------- Dialoge ---------- */
dialog { border: 0; padding: 0; color: var(--ink-soft); }
dialog::backdrop { background: rgba(23, 20, 16, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); background: var(--surface); box-shadow: var(--shadow); }
.modal[open] { animation: modal-in .45s var(--ease); }
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.modal-title { font-size: 1.8rem; margin: 0 40px 10px 0; }
.modal-lead { color: var(--muted); }
.modal-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--bg); font-size: 1rem; }
.modal-close:hover { background: var(--ink); color: #fff; }
.legal-text { font-size: .95rem; }
.legal-todo { padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; font-size: .88rem; }

.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; background: transparent; display: none; place-items: center; }
.lightbox[open] { display: grid; animation: modal-in .35s var(--ease); }
.lightbox::backdrop { background: rgba(250, 247, 242, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lightbox figure { margin: 0; display: grid; gap: 12px; justify-items: center; }
.lightbox img { max-width: min(92vw, 1100px); max-height: 80dvh; width: auto; border-radius: 16px; box-shadow: var(--shadow); }
.lightbox figcaption { font-weight: 700; color: var(--ink); font-size: .9rem; }
.lb-btn { position: fixed; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); font-size: 1.1rem; display: grid; place-items: center; box-shadow: var(--shadow-sm); z-index: 2; }
.lb-btn:hover { background: var(--ink); color: #fff; }
.lb-close { top: 18px; right: 18px; }
.lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) { .lb-prev, .lb-next { top: auto; bottom: 18px; transform: none; } .lb-prev { left: calc(50% - 62px); } .lb-next { right: calc(50% - 62px); } }

/* ---------- Scroll-Animationen ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .audience-track { animation: none; }
}

/* =============================================================
   HOVER-ZUSTÄNDE – einheitlich in Markentürkis
   (Ausnahme: Erstgespräch-Buttons .btn-cta sind türkis und werden beim Hover schwarz)
   ============================================================= */
.btn-dark:hover { --btn-bg: var(--accent); box-shadow: 0 10px 26px rgba(0, 128, 128, .3); }
.btn-ghost:hover { --btn-bg: var(--accent); --btn-fg: #fff; border-color: var(--accent); box-shadow: 0 10px 26px rgba(0, 128, 128, .25); }
.btn-accent:hover { --btn-bg: var(--accent-hover); }
.logo:hover { color: var(--accent); }
.main-nav a[data-nav]:hover { color: var(--accent); background: rgba(0, 128, 128, .08); }
.link-arrow:hover { color: var(--accent); }
.text-link:hover, .footer-nav a:hover, .footer-mail:hover { color: var(--accent); }
.pf-tab:not(.is-active):hover { color: var(--accent); }
.chip:not(.is-active):hover { border-color: var(--accent); color: var(--accent); }
.g-item:hover figcaption { background: var(--accent); color: #fff; }
.cf-dot:hover::before { background: var(--accent); }
.cf-pause:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.service-jump a:hover { color: var(--accent); }
.pack:not(.pack-featured):hover { border-color: var(--accent); }
.socials a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.review-source:hover { color: var(--accent); border-color: var(--accent); }
.lb-btn:hover, .modal-close:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.contact-mail a:hover { color: var(--accent-light); }
.stars-row label:hover, .stars-row label:hover ~ label { color: var(--accent); }

/* =============================================================
   NAVBAR – filigraner: schmaler, feine Versalien, Haarlinie als Markierung
   ============================================================= */
:root { --header-h: 64px; }
.site-header { background: rgba(255, 255, 255, .74); border-bottom: 1px solid rgba(23, 23, 23, .06); }
.site-header.is-scrolled { background: rgba(255, 255, 255, .84); border-bottom-color: rgba(23, 23, 23, .08); box-shadow: 0 4px 18px rgba(23, 23, 23, .04); }
.site-header .logo-full { width: clamp(118px, 10vw, 138px); }
.site-header .logo-mark { width: 38px; height: 22px; }
.main-nav ul { gap: 2px; }
.main-nav a[data-nav] {
  font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  padding: 8px 13px; border-radius: 0; color: var(--ink-soft);
}
.main-nav a[data-nav]:hover { background: none; color: var(--accent); }
.main-nav a[data-nav]::after {
  left: 13px; right: 13px; width: auto; height: 1px; bottom: 3px; border-radius: 0;
  transform: scaleX(0); transform-origin: left center;
}
.main-nav a[data-nav].is-active { color: var(--accent); font-weight: 500; }
.main-nav a[data-nav].is-active::after { transform: scaleX(1); }
.header-cta.btn-sm { min-height: 36px; padding: 0 1.15em; font-size: .76rem; font-weight: 600; letter-spacing: .04em; }
@media (max-width: 999px) {
  :root { --header-h: 96px; }
  .header-inner { grid-template-rows: 52px 44px; }
  .main-nav { border-top-color: rgba(23, 23, 23, .06); }
  .main-nav a[data-nav] { font-size: .68rem; letter-spacing: .14em; padding: 8px 11px; }
  .main-nav a[data-nav]::after { left: 11px; right: 11px; }
}

/* =============================================================
   FOOTER – farblich abgesetzt in Markenschwarz
   ============================================================= */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, .68); border-top: 3px solid var(--accent); margin-top: clamp(40px, 6vw, 80px); }
.site-footer .logo { color: #fff; }
.site-footer .logo:hover { color: var(--accent-light); }
.site-footer .footer-brand p { color: rgba(255, 255, 255, .62); }
.site-footer .footer-nav a { color: rgba(255, 255, 255, .82); }
.site-footer .footer-mail { color: #fff; text-decoration-color: var(--accent-light); }
.site-footer .footer-nav a:hover, .site-footer .footer-mail:hover, .site-footer .text-link:hover { color: var(--accent-light); }
.site-footer .socials a { background: transparent; border-color: rgba(255, 255, 255, .22); color: #fff; }
.site-footer .socials a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.site-footer .footer-bottom { color: rgba(255, 255, 255, .5); }
.site-footer .footer-bottom::before { background: rgba(255, 255, 255, .12); }
.site-footer .text-link { color: rgba(255, 255, 255, .7); }
.site-footer :focus-visible { outline-color: var(--accent-light); }
/* =============================================================
   ZENTRIERTE AUSRICHTUNG – Überschriften, Labels, Texte & Buttons mittig
   (Paketkarten-Listen und Formularfelder bleiben linksbündig, damit sie gut lesbar sind)
   ============================================================= */
/* Hero */
.hero-head { text-align: center; justify-items: center; }
.hero-side { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.hero-side .hero-sub, .hero-sub { margin: 0 auto; max-width: 46ch; }
.hero-ctas { justify-content: center; }
@media (min-width: 900px) {
  .hero-side { flex-direction: column; justify-content: center; gap: 22px; }
}

/* Abschnittsköpfe */
.section-head, .reviews .section-head { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 14px; }
@media (min-width: 900px) { .section-head, .reviews .section-head { grid-template-columns: 1fr; gap: 14px; } }
.section-lead { margin: 0 auto; }
.section-cta { flex-direction: column; justify-content: center; text-align: center; }

/* Über mich */
.about-copy { text-align: center; }
.about-copy .lead { margin-left: auto; margin-right: auto; max-width: 52ch; }
.about-facts li { flex-direction: column; align-items: center; gap: 2px; }
.fact-v { text-align: center; }

/* Portfolio */
.pf-tabs { display: flex; width: fit-content; margin: 0 auto 18px; }
.chips { justify-content: center; }

/* Leistungen: Einleitung über den Karten, mittig */
.service-jump { justify-content: center; }
.service-block { grid-template-columns: 1fr; justify-items: center; }
@media (min-width: 1000px) { .service-block { grid-template-columns: 1fr; gap: 36px; } }
.service-intro { position: static; text-align: center; justify-items: center; max-width: 640px; }
@media (min-width: 1000px) { .service-intro { position: static; } }
.service-intro p { margin: 0 auto; }
.service-img { display: none; }
.pack-grid { width: 100%; max-width: 920px; }
.pack-wide { width: 100%; max-width: 1040px; }

/* Kundenstimmen */
.review-empty { grid-template-columns: 1fr; text-align: center; justify-items: center; }
@media (min-width: 900px) { .review-empty { grid-template-columns: 1fr; } }
.review-ghosts { width: 100%; max-width: 640px; }

/* Kontakt */
.contact-copy { text-align: center; }
.contact-lead { margin-left: auto; margin-right: auto; }
.contact-points { width: fit-content; margin-left: auto; margin-right: auto; text-align: left; }

/* Footer */
.footer-grid { text-align: center; justify-items: center; }
.footer-brand p { margin-left: auto; margin-right: auto; }
.footer-nav, .footer-contact { justify-items: center; }
.socials { justify-content: center; }
.footer-bottom { flex-direction: column; align-items: center; text-align: center; }

/* =============================================================
   DEZENTE TIEFE – nur ein Hauch: weiche Schatten, kein Sockel, kein Glanz
   ============================================================= */
/* Buttons: weicher Schatten, heben sich beim Hovern minimal an */
.btn { box-shadow: 0 1px 2px rgba(23, 23, 23, .08), 0 4px 12px -6px rgba(23, 23, 23, .18); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(23, 23, 23, .08), 0 8px 18px -8px rgba(23, 23, 23, .22); }
.btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(23, 23, 23, .1); }
.btn-ghost { box-shadow: none; }
.btn-ghost:hover { box-shadow: 0 6px 16px -8px rgba(0, 80, 80, .3); }

/* Unterstriche bei "Über mich": dick, flach, mit ganz leichtem Schatten */
.about-title mark { background-image: none; position: relative; display: inline-block; isolation: isolate; padding-bottom: 0; }
.about-title mark::after {
  content: ""; position: absolute; z-index: -1; left: -.02em; right: -.02em; bottom: -.02em; height: .22em; border-radius: .11em;
  background: var(--accent); box-shadow: 0 .08em .16em rgba(0, 90, 90, .18);
  transform: scaleX(0); transform-origin: left center; transition: transform 1.1s .4s var(--ease);
}
.about-title.is-visible mark::after { transform: scaleX(1); }

/* Bilder: ruhige, weiche Schatten; beim Hovern nur ein minimales Kippen (js/main.js) */
.g-item, .strip { box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 24px -14px rgba(0, 0, 0, .22); }
.tilt { transition: transform .7s var(--ease), box-shadow .7s var(--ease) !important; transition-delay: 0s !important; }
.tilt.is-tilting { transition: transform .2s ease-out, box-shadow .5s var(--ease) !important; }
.tilt:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 16px 30px -16px rgba(0, 0, 0, .28); }
.collage-portrait.tilt:hover { box-shadow: none; }

/* Unterstreichung "Bewegung": Linie spart das "g" aus, mit einer kleinen Unterbrechung rundherum.
   Die Aussparung ist eine unsichtbare Kopie des "g" (in Hintergrundfarbe) zwischen Linie und Schrift.
   Sie unterbricht nur die Linie, die Buchstaben selbst bleiben unberührt.
   Jedes "g" unter der Linie steht im HTML in <span class="ug">g</span>. */
.about-title mark::after { z-index: -2; }
.about-title mark .ug { position: relative; }
.about-title mark .ug::before {
  content: "g"; position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none;
  color: var(--bg);
  text-shadow:
     .07em 0 var(--bg), -.07em 0 var(--bg), 0 .07em var(--bg),
     .05em .05em var(--bg), -.05em .05em var(--bg);
}
/* Laufband unter dem Hero: Montserrat Light, kräftige Punkte als Trenner */
.audience-track { animation-duration: 75s; }
.audience li { font-weight: 300; letter-spacing: .01em; gap: 30px; padding-right: 30px; }
.audience li::after { width: 10px; height: 10px; flex-shrink: 0; }
/* Collage-Feinschliff: Kampfsport-Streifen höher, Porträt tiefer, damit beide Kickboxerinnen sichtbar sind */
.strip-2 { height: clamp(110px, 15vw, 150px); }
.collage-portrait { top: 47%; width: 36%; }
@media (max-width: 560px) { .collage-portrait { top: 50%; width: 40%; } }
/* Collage: Titel "by AProduction" mit Logo, Mockup frei neben dem Porträt, Porträt größer */
.strip-title { display: flex; align-items: flex-end; gap: .45em; line-height: 1; }
.strip-title small { margin: 0 0 .15em; font-size: clamp(1.05rem, 2.2vw, 1.5rem); font-weight: 300; letter-spacing: .02em; text-transform: none; opacity: 1; }
.strip-logo { width: clamp(170px, 24vw, 290px); background-color: #fff; filter: drop-shadow(0 3px 14px rgba(0, 0, 0, .3)); }
.strip-4 { margin-left: 0; margin-right: 47%; height: clamp(130px, 18vw, 190px); }
.collage-portrait { top: 45%; width: 45%; right: -3%; }
@media (max-width: 560px) { .collage-portrait { top: 47%; width: 46%; } .strip-4 { margin-right: 49%; } }
/* Collage-Titel: großes "ART", darunter "by" + Logo */
.strip-title { display: grid; gap: .35em; align-items: start; }
.strip-title .strip-big { font-size: clamp(2.4rem, 5.4vw, 3.8rem); font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; line-height: .9; }
.strip-by { display: flex; align-items: flex-end; gap: .4em; }
.strip-by small { font-size: clamp(.9rem, 1.6vw, 1.15rem); }
.strip-by .strip-logo { width: clamp(120px, 15vw, 180px); }
/* Collage-Titel in einer Zeile: "Art by AProduction" */
.strip-title { display: flex; align-items: flex-end; gap: .4em; }
.strip-title .strip-big { font-size: clamp(2.1rem, 4.6vw, 3.3rem); text-transform: none; letter-spacing: -.035em; line-height: .8; }
.strip-title small { margin: 0 0 .05em; font-size: clamp(1rem, 2vw, 1.4rem); }
.strip-title .strip-logo { width: clamp(150px, 19vw, 230px); margin-bottom: .1em; }

/* Kickboxerinnen mittiger: Bild leicht vergrößert und nach links verschoben (sie stehen im Original rechts) */
.strip-2 img { transform: scale(1.3) translate(-11.5%, 8%); }
.strip-2:hover img { transform: scale(1.34) translate(-11.5%, 8%); }

/* Fix: Streifen nach dem Einblenden wirklich an ihre Endposition setzen (vorher blieb ein Versatz von 36 px) */
.js .about-collage.is-visible .strip { transform: none; }
/* Motocross-Streifen: links neben dem Porträt (nicht mehr verdeckt), Fahrer weiter links im Ausschnitt */
.strip-3 { margin-left: 0; margin-right: 46%; height: clamp(130px, 18vw, 180px); }
.strip-3 img { object-position: 50% 60% !important; transform: scale(1.35) translateX(-13%); }
.strip-3:hover img { transform: scale(1.39) translateX(-13%); }
@media (max-width: 560px) { .strip-3 { margin-right: 48%; } }
/* =============================================================
   KOMPAKTES LAYOUT – jeder Hauptbereich passt auf einen normalen Laptop-Bildschirm
   (Hero komplett, Über mich als Ganzes, Portfolio bis zum Ausklappen, Kontakt mit ganzem Formular).
   Höhen richten sich nach der Fensterhöhe (vh), damit es auf 768–900 px hohen Bildschirmen passt.
   ============================================================= */
:root { --section-y: clamp(44px, 7vh, 88px); --view-h: calc(100svh - var(--header-h)); }
.container { max-width: 1160px; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.lead { font-size: clamp(1rem, 1.2vw, 1.08rem); line-height: 1.65; }
.eyebrow { margin-bottom: .7rem; }
.section-head, .reviews .section-head { margin-bottom: clamp(18px, 3vh, 34px); gap: 8px; }
.section-lead { font-size: 1rem; max-width: 64ch; }

/* --- Hero: Überschrift, Buttons und Karussell auf einen Blick --- */
.hero { min-height: var(--view-h); display: flex; flex-direction: column; justify-content: center; padding: clamp(14px, 3vh, 36px) 0 clamp(14px, 3vh, 32px); }
.hero-head { gap: 12px; }
.hero-title { font-size: clamp(2.2rem, 4.6vw, 3.9rem); }
.hero-side, .hero-side .hero-sub { gap: 14px; }
.hero-side .hero-sub, .hero-sub { max-width: 62ch; font-size: clamp(1rem, 1.25vw, 1.1rem); }
.coverflow { --cf-h: clamp(220px, calc(var(--view-h) - 460px), 440px); margin-top: clamp(14px, 3vh, 30px); }
.cf-track { height: var(--cf-h); }
.cf-card { --w: calc(var(--cf-h) * .74); }
.cf-controls { margin-top: clamp(10px, 2vh, 22px); }
.cf-nav { gap: 6px; }
.cf-count { font-size: 1.15rem; }

/* --- Über mich: Collage und Text nebeneinander, zusammen eine Bildschirmhöhe --- */
.about { min-height: var(--view-h); display: flex; align-items: center; }
.about > .container { width: 100%; }
.about-grid { gap: clamp(28px, 5vw, 72px); }
.about-title { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 16px; }
.about-copy .lead { margin-bottom: 0; }
.about-facts { margin: 20px 0 22px; }
.about-facts li { padding: 9px 0; }
@media (min-width: 900px) {
  .about-facts { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
  .about-facts li { border-bottom: 0; padding: 12px 6px; }
  .about-facts li + li { border-left: 1px solid var(--line); }
}
.about-collage { max-width: 540px; padding: 10px 0 18px; gap: 8px; }
.strip-1 { height: clamp(84px, 13vh, 130px); }
.strip-2 { height: clamp(90px, 14vh, 140px); }
.strip-3 { height: clamp(96px, 15vh, 150px); }
.strip-4 { height: clamp(96px, 15vh, 150px); }
.strip-title .strip-big { font-size: clamp(1.9rem, 4vw, 2.9rem); }
.strip-title .strip-logo { width: clamp(130px, 16vw, 200px); }
.collage-mark { width: 54px; height: 54px; }
.collage-mark svg { width: 32px; height: 20px; }
.collage-portrait { top: 40%; width: 42%; right: -2%; }
@media (max-width: 560px) { .collage-portrait { top: 44%; width: 44%; } }

/* Untere zwei Streifen laufen wieder bis hinter das Porträt; das Motiv bleibt links sichtbar,
   rechts geht der Streifen in der Grundfarbe des Bildes weiter. */
.strip-3, .strip-4 { margin-left: 0; margin-right: 2%; }
@media (max-width: 560px) { .strip-3, .strip-4 { margin-right: 2%; } }
.strip-3 { background: #755535; }
.strip-4 { background: #E4E2E3; }
.strip-3 img, .strip-4 img {
  width: 60%;
  -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 72%, transparent 100%);
}

/* --- Portfolio: Kopf, Filterleiste und 2 Bildreihen bis zum Ausklapp-Pfeil auf einen Blick --- */
.pf-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-bottom: clamp(16px, 2.6vh, 26px); }
.pf-controls .pf-tabs { margin: 0; }
.pf-controls .chips { margin: 0; }
.pf-tab { padding: 9px 18px; font-size: .88rem; }
.chip { padding: 7px 14px; font-size: .82rem; }
.gallery { grid-auto-rows: clamp(130px, 19vh, 230px); }
@media (min-width: 1100px) { .gallery { grid-template-columns: repeat(5, 1fr); } }
.g-item { aspect-ratio: auto; }
.gallery-more { margin-top: 10px; }
.more-btn { gap: 4px; padding: 4px 16px; }
.more-arrow { height: 32px; }
.section-cta { margin-top: 32px; padding: 20px 26px; }

/* --- Leistungen & Kundenstimmen: gleiche, kompaktere Abstände --- */
.service-jump { margin-bottom: clamp(24px, 4vh, 44px); }
.service-block { padding-block: clamp(28px, 5vh, 52px); }

/* --- Kontakt: ganzes Feld inkl. Formular in einem Blick --- */
.contact { padding-top: clamp(24px, 4vh, 48px); padding-bottom: clamp(24px, 4vh, 48px); }
.contact-panel { padding: clamp(22px, 4vh, 44px) clamp(20px, 4vw, 52px); gap: clamp(20px, 4vw, 48px); align-items: center; }
.contact-title { font-size: clamp(1.9rem, 3.4vw, 2.9rem); margin-bottom: 14px; }
.contact-lead { font-size: 1rem; margin-bottom: 0; }
.contact-points { margin: 16px auto; gap: 6px; font-size: .95rem; }
.contact-points li::before { width: 22px; height: 22px; }
.form { gap: 12px; padding: clamp(18px, 3vh, 30px); }
.form-row { display: grid; gap: 12px; }
@media (min-width: 600px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { gap: 5px; }
.field label, .field legend { font-size: .82rem; }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea { padding: 11px 14px; border-radius: 12px; }
.field textarea { min-height: 84px; }
.field-check label { font-size: .8rem; }
.btn-lg { min-height: 50px; }@media (max-width: 560px) {
  .collage-portrait { top: 38%; width: 50%; }
  .about-collage .about-badge { left: -14%; bottom: -18px; padding: 8px 12px; font-size: .7rem; }
  .about-collage .about-badge strong { font-size: .85rem; }
}
/* Hero: kleinere Überschrift, Text + Buttons in einer Zeile, dafür größere Karussell-Bilder */
.hero-title { font-size: clamp(2rem, 3.6vw, 3rem); }
@media (min-width: 900px) {
  .hero-side { flex-direction: row; justify-content: center; align-items: center; gap: 28px; }
  .hero-side .hero-sub { max-width: 36ch; text-align: left; margin: 0; }
}
.coverflow { --cf-h: clamp(240px, calc(var(--view-h) - 348px), 470px); }
/* =============================================================
   LEISTUNGEN KOMPAKT – jeder Block (01, 02, 03) passt auf einen Laptop-Bildschirm
   ============================================================= */
.service-block { padding-block: clamp(22px, 4vh, 44px); gap: clamp(14px, 2.4vh, 26px); }
@media (min-width: 1000px) { .service-block { gap: clamp(14px, 2.4vh, 26px); } }
.service-intro { gap: 4px; max-width: 760px; }
.service-intro .service-no { font-size: 2.2rem; }
.service-intro h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.service-intro p { max-width: 68ch; font-size: .95rem; }
.pack { padding: clamp(18px, 2.6vh, 26px) clamp(20px, 2vw, 28px); }
.pack-title { font-size: clamp(1.12rem, 1.5vw, 1.3rem); }
.pack-for { margin: 6px 0 12px; font-size: .86rem; }
.pack-list { gap: 7px; margin-bottom: 16px; }
.pack-list li { font-size: .9rem; padding-left: 28px; }
.pack-list li::before { width: 18px; height: 18px; }
.pack-foot { gap: 10px; }
.price-value { font-size: 2rem; }
.price small { width: auto; }
.pack .btn { min-height: 44px; }
.pack-flag { top: -11px; padding: 5px 11px; }
.pack-wide-img { min-height: 200px; max-height: 330px; }
.pack-wide-body { padding: clamp(18px, 3vh, 30px); }
.services-note { margin-top: 12px; }
/* Hero ohne Buttons: Untertitel mittig, größere Bilder, kompakte Linien statt Pfeile/Zähler */
.hero-side, .hero-side .hero-sub { text-align: center; }
@media (min-width: 900px) { .hero-side .hero-sub { max-width: 80ch; margin: 0 auto; text-align: center; } }
.coverflow { --cf-h: clamp(260px, calc(var(--view-h) - 305px), 520px); }
.cf-controls { gap: 12px; margin-top: clamp(12px, 2.2vh, 22px); }
.cf-dots { gap: 3px; }
.cf-dot { width: 10px; }
.cf-dot[aria-current="true"] { width: 26px; }
.cf-pause { width: 26px; height: 26px; }
.cf-pause svg { width: 11px; height: 11px; }
/* Karussell etwas zügiger: kürzere Gleitbewegung (Intervall in js/main.js: CAROUSEL_INTERVAL) */
.cf-card { transition: transform 1.05s var(--ease), opacity .85s var(--ease), filter .6s var(--ease), box-shadow .7s; }
/* =============================================================
   COLLAGE "ÜBER MICH": Bewegung beim Hovern
   - Parallax: Streifen, Porträt und AP-Kreis verschieben sich mit der Maus unterschiedlich stark
   - Bild unter der Maus zoomt sanft, Porträt richtet sich gerade
   ============================================================= */
.about-collage { --mx: 0; --my: 0; }
.about-collage .strip, .about-collage .collage-portrait, .about-collage .collage-mark {
  transition: opacity .9s var(--ease), transform 1s var(--ease), translate .7s cubic-bezier(.2, .8, .2, 1), box-shadow .5s var(--ease);
}
.about-collage .strip-2 { transition-delay: .12s, .12s, 0s, 0s; }
.about-collage .strip-3 { transition-delay: .24s, .24s, 0s, 0s; }
.about-collage .strip-4 { transition-delay: .36s, .36s, 0s, 0s; }
.about-collage .collage-portrait { transition-delay: .5s, 0s, 0s, 0s; }
.strip-1 { translate: calc(var(--mx) * -12px) calc(var(--my) * -6px); }
.strip-2 { translate: calc(var(--mx) * 16px) calc(var(--my) * 4px); }
.strip-3 { translate: calc(var(--mx) * -18px) calc(var(--my) * 6px); }
.strip-4 { translate: calc(var(--mx) * 14px) calc(var(--my) * 8px); }
.collage-portrait { translate: calc(var(--mx) * 26px) calc(var(--my) * 16px); }
.collage-mark { translate: calc(var(--mx) * -28px) calc(var(--my) * -18px); }

/* Einzelnes Bild beim Hovern: sanfter Zoom + etwas mehr Tiefe */
.strip:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 18px 34px -16px rgba(0, 0, 0, .35); z-index: 1; }
.strip-1:hover img, .strip-4:hover img { transform: scale(1.07); }
.strip-2:hover img { transform: scale(1.36) translate(-11.5%, 8%); }
.strip-3:hover img { transform: scale(1.42) translateX(-13%); }
.about-collage.is-visible .collage-portrait:hover { transform: rotate(0deg) scale(1.03); transition-delay: 0s; }

/* Über mich: kleines Instagram-Logo neben "Lass uns kennenlernen" */
.about-actions { display: flex; align-items: center; justify-content: center; gap: 18px; }
.about-insta {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  transition: background-color .25s, color .25s, border-color .25s, transform .3s var(--ease);
}
.about-insta svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.about-insta svg .fill { fill: currentColor; stroke: none; }
.about-insta:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); }
/* =============================================================
   WEB INTERFACE GUIDELINES (Vercel) – Feinschliff aus dem Audit
   ============================================================= */
:root { color-scheme: light; }
html { -webkit-tap-highlight-color: rgba(0, 128, 128, .15); }
a, button, input, select, textarea, label, .cf-card { touch-action: manipulation; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }
/* Ränder für Geräte mit Notch (viewport-fit=cover) */
.container { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.site-footer { padding-bottom: max(32px, env(safe-area-inset-bottom)); }
/* Dialoge: kein Durchscrollen der Seite */
dialog { overscroll-behavior: contain; }
/* Karussell per Tastatur erreichbar (Pfeiltasten) */
.coverflow:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; border-radius: var(--radius); }
.cf-more { color: #fff; text-decoration: none; }
.cf-more:hover, .cf-more:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
/* Laufband: anhalten beim Hovern oder Fokussieren */
.audience:hover .audience-track, .audience:focus-within .audience-track { animation-play-state: paused; }
/* Hinweis unter der Datenschutz-Checkbox */
.field-hint { grid-column: 2; margin: 2px 0 0; font-size: .78rem; color: var(--muted); }
/* Senden-Zustand der Formulare */
.form button[type="submit"][aria-busy="true"] { opacity: .7; cursor: progress; }
/* =============================================================
   TASTE-SKILL AUDIT – Feinschliff
   ============================================================= */
/* Icons aus der Bibliothek Phosphor (gefüllte Pfade, viewBox 256) */
.socials svg, .about-insta svg, .cf-pause svg, .more-arrow svg { fill: currentColor; stroke: none; }
.cf-pause svg { width: 12px; height: 12px; }
.more-arrow { width: 26px; height: 26px; }
/* Haken in den Paketlisten: Phosphor "check-bold" */
.pack-list li::before {
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23006666' d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center / 11px no-repeat;
}
/* Keine Text-Pills auf den Galeriebildern: Bildunterschrift nur für Screenreader und in der Großansicht */
.g-item figcaption { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 1; transform: none; }
/* Einheitliche Ecken: Interaktives = Pille, Karten/Panels/große Bilder = --radius (22px), kleine Kacheln/Felder = --radius-sm (12px) */
.strip { border-radius: var(--radius); }
.g-item, .g-item.g-wide { border-radius: var(--radius-sm); }
.cf-info { padding-top: 48px; }
/* =============================================================
   RESPONSIVE – Handy (bis 600 px) und Tablet (601–999 px)
   Desktop/Laptop bleibt unverändert. Tablet quer (ab 1000 px) nutzt das Desktop-Layout.
   ============================================================= */

/* Event-Paket: Bild bündig in der Karte (alle Größen) */
.pack.pack-wide { padding: 0; }

/* ---------- Tablet hochkant (601–999 px) ---------- */
@media (min-width: 720px) and (max-width: 899px) {
  /* Über mich: Collage und Text nebeneinander statt untereinander */
  .about-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .about-title { font-size: clamp(1.6rem, 3.6vw, 2rem); }
  .about-copy .lead { font-size: .98rem; }
}
@media (min-width: 601px) and (max-width: 999px) {
  /* Kontakt: Vorteile als eine Zeile, damit Text und Formular auf einen Bildschirm passen */
  .contact-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; width: auto; }
  .contact-panel { gap: 22px; }
  .contact-lead { max-width: 56ch; }
}

/* ---------- Handy (bis 600 px) ---------- */
@media (max-width: 600px) {
  /* Kapitelleiste: gut lesbar und groß genug zum Tippen */
  .main-nav a[data-nav] { font-size: .76rem; letter-spacing: .12em; padding: 11px 12px; }
  .main-nav a[data-nav]::after { left: 12px; right: 12px; }

  /* Labels: eine Zeile, ohne einzelnen Strich davor */
  .eyebrow { font-size: .82rem; letter-spacing: .1em; flex-wrap: wrap; justify-content: center; text-align: center; }
  .hero .eyebrow::before { display: none; }

  /* Hero passt auf den Bildschirm */
  .hero { padding-top: 14px; }
  .hero-head { gap: 10px; }
  .coverflow { --cf-h: clamp(250px, calc(var(--view-h) - 340px), 470px); margin-top: 16px; }

  /* Karussell-Linien: größere Tippfläche, Linie bleibt fein */
  .cf-dots { gap: 2px; }
  .cf-dot { width: 16px; height: 32px; }
  .cf-dot::before { top: 50%; }
  .cf-dot::after { top: calc(50% - .5px); }
  .cf-dot[aria-current="true"] { width: 32px; }
  .cf-pause { width: 36px; height: 36px; }
  .cf-pause svg { width: 14px; height: 14px; }

  /* Leistungs-Sprungleiste kompakt (2 + 1 statt 3 Zeilen) */
  .service-jump { gap: 8px; }
  .service-jump a { padding: 7px 14px 7px 7px; font-size: .84rem; gap: 8px; }
  .service-jump span { width: 26px; height: 26px; font-size: .9rem; }

  /* Event-Paket: Bild nicht zu hoch */
  .pack-wide-img { max-height: 230px; min-height: 0; aspect-ratio: 4 / 3; }

  /* Kontakt: mehr Platz für das Formular */
  .contact-panel { padding: 24px 14px; border-radius: var(--radius); }
  .form { padding: 18px 16px; }
  .field select { padding-right: 38px; background-position: right 12px center; }

  /* Footer-Links: größere Tippflächen */
  .footer-nav a { padding: 6px 4px; }
  .legal-links .text-link { padding: 8px 4px; }
}
/* Kontaktformular: Fehlermeldung beim Versand */
.form-error { margin: 0; padding: 10px 14px; border-radius: var(--radius-sm); background: #FDECEA; color: #8A1C12; font-size: .86rem; line-height: 1.5; }
.form-error a { color: inherit; font-weight: 700; }
.legal-h { font-size: 1.05rem; margin: 18px 0 6px; letter-spacing: -.01em; }
/* Danke-Meldung im Formular: dunkle Schrift (der türkise Kontaktbereich vererbt sonst Weiß) */
.form-success { color: var(--ink-soft); }
.form-success-title { color: var(--ink); }
/* =============================================================
   ÜBER MICH: freigestelltes Porträt über den vier Streifen
   ============================================================= */
.collage-portrait { top: 33%; width: 44%; right: -3%; border-radius: 0; }
.collage-portrait img {
  aspect-ratio: auto; height: auto; object-fit: contain; border: 0; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 16px 22px rgba(30, 30, 30, .28));
  -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
}
.js .about-collage .collage-portrait { transform: translateY(30px); }
.about-collage.is-visible .collage-portrait { transform: none; }
.about-collage.is-visible .collage-portrait:hover { transform: scale(1.03); }
.about-collage .about-badge { left: -16%; bottom: 6%; }
@media (max-width: 560px) { .collage-portrait { top: 34%; width: 50%; } .about-collage .about-badge { left: -20%; bottom: 4%; } }

/* Surfer im ersten Streifen komplett sichtbar und rechts neben dem Schriftzug */
.strip-1 { height: clamp(100px, 15vh, 150px); }
.strip-1 img { object-position: 50% 52%; transform: scale(1.35) translateX(-13%); }
.strip-1:hover img { transform: scale(1.39) translateX(-13%); }
/* Schriftzug rechtsbündig, damit der Surfer (im Foto mittig) links frei steht */
.strip-1 .strip-title { left: auto; right: 6%; justify-content: flex-end; }
.strip-1 .strip-title .strip-big { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.strip-1 .strip-title small { font-size: clamp(.85rem, 1.4vw, 1.05rem); }
.strip-1 .strip-title .strip-logo { width: clamp(100px, 10.5vw, 145px); }
/* =============================================================
   RELAUNCH-SPECIAL – Einführungspreise für die ersten 5 Kund:innen
   ============================================================= */
.special-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px;
  width: fit-content; max-width: 100%; margin: 0 auto clamp(18px, 3vh, 28px); padding: 10px 18px;
  border-radius: 999px; background: var(--accent-soft); color: var(--ink-soft); font-size: .92rem; text-align: center;
}
.special-banner strong {
  padding: 3px 10px; border-radius: 999px; background: var(--accent); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.price-special {
  margin: 0; width: fit-content; padding: 3px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-strong);
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.pack-foot .price { row-gap: 2px; }
.pack-foot .price small { width: 100%; color: var(--muted); }
@media (max-width: 600px) { .special-banner { border-radius: var(--radius-sm); font-size: .86rem; } }
/* Instagram-Logo bei "Über mich": mittig zwischen Text und Faktenzeile */
.about-insta-row { display: flex; justify-content: center; margin: 16px 0 0; }
.about-insta-row + .about-facts { margin-top: 16px; }
/* Porträt bleibt bei jeder Bildschirmgröße innerhalb der Collage (unten verankert, Höhe begrenzt),
   damit es und das Namensschild nie über die Überschrift darunter ragen */
.collage-portrait, .about-collage .collage-portrait { top: auto; bottom: 18px; height: 66%; width: auto; aspect-ratio: 520 / 769; max-width: 52%; right: -2%; }
.collage-portrait img { width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: bottom center; }
.about-collage .about-badge { left: -14%; bottom: 8%; }
@media (max-width: 560px) {
  .collage-portrait, .about-collage .collage-portrait { top: auto; bottom: 14px; height: 64%; width: auto; max-width: 56%; }
  .about-collage .about-badge { left: -18%; bottom: 6%; }
}