/* ---------- Design Tokens ---------- */
:root{
  --accent:#007CBE;          /* Stierli Blau – exakt aus dem Logo */
  --accent-dark:#00639A;
  --accent-soft:#E4F2FA;
  --accent-tint:#F2F8FC;
  --accent-light:#8FD0F5;     /* helle Variante für dunkle Flächen */
  --ink:#0F172A;
  --ink-2:#334155;
  --muted:#616F86;      /* 02.09.2026 minimal abgedunkelt: #64748B ergab auf --surface nur 4,47:1 */
  --line:#E5E9EF;
  --surface:#F6F8FA;
  --bg:#FFFFFF;
  --radius:20px;
  --radius-sm:12px;
  --max:1180px;
  --shadow:0 10px 40px rgba(15,23,42,.08);
  --font:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.1;letter-spacing:-.02em;font-weight:800}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
section{padding:96px 0}
@media(max-width:720px){section{padding:64px 0}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-dark)}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);border-radius:2px}
.h2{font-size:clamp(30px,4vw,46px);margin-top:14px;max-width:16ch}
.lead{font-size:18px;color:var(--ink-2);max-width:56ch;margin-top:18px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font-weight:700;font-size:15px;transition:.2s;border:1.5px solid transparent;cursor:pointer}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:var(--ink)}
.btn svg{width:18px;height:18px}

/* ---------- Foto-Platzhalter (später durch echte Bilder ersetzen) ---------- */
.ph{position:relative;background:
  linear-gradient(135deg,var(--accent-soft),#fff 60%,var(--surface));
  border:1px dashed #BFDDF0;border-radius:var(--radius);overflow:hidden;display:grid;place-items:center;color:var(--accent-dark);font-weight:600;font-size:14px;text-align:center;padding:16px}
.ph::after{content:"";position:absolute;inset:0;background-image:radial-gradient(#007CBE .8px,transparent .9px);background-size:18px 18px;opacity:.15}
.ph span{position:relative;z-index:1}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph.photo{border:0;background:var(--surface)}
.ph.photo::after{display:none}
.logo img.mark-img{width:34px;height:auto}
.logo .word{font-size:17px;line-height:1.05}
/* ---------- Fotoband ---------- */
.band{padding:0 0 96px}
.band .grid{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}
.band .ph{aspect-ratio:16/10;border-radius:var(--radius)}
.band .ph:last-child{aspect-ratio:auto}
.band .cap{position:absolute;left:18px;bottom:16px;z-index:2;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);color:var(--ink);font-size:13px;font-weight:700;padding:8px 12px;border-radius:999px}
@media(max-width:720px){.band{padding-bottom:64px}.band .grid{grid-template-columns:1fr}.band .ph:last-child{aspect-ratio:16/10}}
.pricecols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
.pricecols h3{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-dark);padding:18px 24px 6px}
.pricelist .row{padding:13px 24px}
@media(max-width:720px){.pricecols{grid-template-columns:1fr}}

/* ---------- Announcement ---------- */
/* ---------- Betriebsferien ----------
   Ueberarbeitet am 02.09.2026: die dunkle Leiste ging im Seitenkopf unter.
   Signalfarbe Amber statt Ink, damit sie sich vom blauen Auftritt abhebt.
   Kontrast Ink auf Amber betraegt 8,3:1. */
.announce{background:#F59E0B;color:#0F172A;font-size:15px;padding:12px 16px;
  border-bottom:1px solid #D18707}
.announce .wrap{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.announce b{color:inherit;font-weight:800}
.ferien-ico{width:17px;height:17px;flex:none}
.announce .ferien-text{font-weight:700}
.announce .ferien-zurueck{font-weight:600;opacity:.85}
@media(max-width:720px){
  .announce{font-size:14px;padding:12px 14px}
  .announce .wrap{gap:6px;text-align:center}
  .announce .ferien-zurueck{width:100%}
}

/* Karte im Hero, direkt unter den beiden Knoepfen */
.ferienkarte{display:flex;gap:14px;align-items:flex-start;margin-top:24px;
  background:#FFFBEB;border:1px solid #F5C86B;border-left:5px solid #F59E0B;
  border-radius:var(--radius-sm);padding:16px 20px;max-width:46ch}
.ferienkarte .ferien-ico{width:17px;height:17px;color:#B45309;margin-top:4px}
.ferienkarte b{display:block;font-size:16px;color:#7C4A03}
.ferienkarte .fk-zeitraum{display:block;font-size:19px;font-weight:800;color:#7C4A03;
  letter-spacing:-.01em;margin-top:2px}
.ferienkarte .fk-zurueck{display:block;font-size:14px;color:#8A5A12;margin-top:6px}

/* Hinweis im Kasten mit den Oeffnungszeiten */
.ferienhinweis{margin-top:18px;background:#FFFBEB;border:1px solid #F5C86B;
  border-left:5px solid #F59E0B;border-radius:var(--radius-sm);padding:14px 16px;
  font-size:15px;font-weight:600;color:#7C4A03}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:12px;font-weight:800;font-size:18px;letter-spacing:-.01em}
.logo .mark{width:38px;height:38px;border-radius:12px;background:var(--accent);display:grid;place-items:center;color:#fff}
.logo small{display:block;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.menu{display:flex;gap:28px;font-weight:600;font-size:15px;color:var(--ink-2)}
.menu a:hover{color:var(--accent-dark)}
.nav .btn{padding:10px 18px;font-size:14px}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px}
@media(max-width:900px){
  .menu,.nav .btn{display:none}
  .burger{display:block}
  .menu.open{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:72px;background:#fff;padding:20px 24px 28px;border-bottom:1px solid var(--line);gap:18px;font-size:17px}
}

/* ---------- Hero ---------- */
.hero{padding:72px 0 80px;background:
  radial-gradient(900px 500px at 85% -10%,var(--accent-soft),transparent 60%),#fff}
.hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(40px,6vw,72px);max-width:12ch}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lead{font-size:19px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero .facts{display:flex;gap:28px;flex-wrap:wrap;margin-top:40px;color:var(--muted);font-size:14px;font-weight:600}
.hero .facts b{display:block;color:var(--ink);font-size:22px;font-weight:800;letter-spacing:-.02em}
.hero .visual{position:relative}
.hero .ph{aspect-ratio:4/5;border-radius:28px}
.hero .card{position:absolute;left:-28px;bottom:36px;background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:16px 18px;display:flex;gap:12px;align-items:center;font-size:14px;font-weight:600}
.hero .card .dot{width:10px;height:10px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 4px #DCFCE7}
@media(max-width:900px){
  .hero{padding:48px 0 56px}
  .hero .grid{grid-template-columns:1fr;gap:36px}
  .hero .card{left:12px;bottom:12px}
  .hero .ph{aspect-ratio:4/3}
}

/* ---------- Trust strip ---------- */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);padding:22px 0}
.strip .wrap{display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap;font-weight:600;font-size:15px;color:var(--ink-2)}
.strip div{display:flex;align-items:center;gap:10px}
.strip svg{width:20px;height:20px;color:var(--accent)}

/* ---------- Services ---------- */
.services .head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.card-s{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:.25s;display:flex;flex-direction:column;gap:14px}
.card-s:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-3px)}
.card-s .ico{width:48px;height:48px;border-radius:14px;background:var(--accent-soft);color:var(--accent-dark);display:grid;place-items:center}
.card-s .ico svg{width:24px;height:24px}
.card-s h3{font-size:20px}
.card-s p{color:var(--ink-2);font-size:15px}
.card-s .tag{margin-top:auto;font-size:13px;font-weight:700;color:var(--accent-dark)}
.card-s.feature{grid-column:span 2;background:var(--ink);color:#fff;border-color:var(--ink);display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.card-s.feature p{color:#CBD5E1}
.card-s.feature .ico{background:rgba(255,255,255,.1);color:var(--accent-light)}
.card-s.feature .price{font-size:40px;font-weight:800;letter-spacing:-.03em;color:var(--accent-light);line-height:1}
.card-s.feature .price small{font-size:14px;color:#94A3B8;font-weight:600;letter-spacing:0}
.card-s.feature .ph{aspect-ratio:4/3;border-color:rgba(255,255,255,.25);background:linear-gradient(135deg,#1E293B,#0F172A);color:var(--accent-light)}
@media(max-width:900px){.cards{grid-template-columns:1fr 1fr}.card-s.feature{grid-column:span 2;grid-template-columns:1fr}}
@media(max-width:600px){.cards{grid-template-columns:1fr}.card-s.feature{grid-column:span 1}}

/* ---------- Process ---------- */
.process{background:var(--surface)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.step{background:#fff;border-radius:var(--radius);padding:28px;border:1px solid var(--line)}
.step .n{font-size:13px;font-weight:800;color:var(--accent);letter-spacing:.1em}
.step h3{font-size:19px;margin:12px 0 8px}
.step p{color:var(--ink-2);font-size:15px}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* ---------- Preise ---------- */
.prices .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.pricelist{margin-top:36px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.pricelist .row{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--line);gap:16px}
.pricelist .row:last-child{border:0}
.pricelist .row span{color:var(--ink-2)}
.pricelist .row small{display:block;color:var(--muted);font-size:13px}
.pricelist .row b{font-weight:800;white-space:nowrap}
.loyalty{background:var(--accent);color:#fff;border-radius:var(--radius);padding:36px;position:relative;overflow:hidden}
.loyalty::before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.12);right:-120px;top:-120px}
.loyalty h3{font-size:28px;position:relative}
.loyalty p{color:#DCEFFA;margin-top:12px;position:relative}
/* repeat(5,1fr) laesst die Spalten nicht unter ihren Inhalt schrumpfen: bei
   1fr ist die Untergrenze die Mindestbreite des Inhalts. Das Wort «gratis»
   bricht nicht um, und Kreise mit festem Seitenverhaeltnis leiten in manchen
   Browsern zusaetzlich eine Mindestbreite aus ihrer Hoehe ab. Beim
   Verkleinern des Fensters ragt die Reihe dann rechts aus der Karte, wo
   overflow:hidden sie abschneidet. minmax(0,1fr) und min-width:0 nehmen
   diese Untergrenze weg, die Kreise schrumpfen sauber mit. */
.stamps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:24px;position:relative}
.stamps div{aspect-ratio:1;min-width:0;border-radius:50%;border:2px dashed rgba(255,255,255,.6);display:grid;place-items:center;font-weight:800;font-size:14px}
/* Damit «gratis» auf schmalen Geraeten im Kreis bleibt statt ihn zu sprengen. */
@media(max-width:430px){.stamps div{font-size:12px}}
.stamps div.full{background:#fff;color:var(--accent-dark);border-style:solid}
.stamps div.gift{background:var(--ink);border-color:var(--ink);color:var(--accent-light)}
.gift-card{margin-top:20px;border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;gap:20px;align-items:center}
.gift-card .ico{flex:none;width:52px;height:52px;border-radius:14px;background:var(--accent-soft);color:var(--accent-dark);display:grid;place-items:center}
.gift-card h4{font-size:18px}
.gift-card p{color:var(--ink-2);font-size:15px;margin-top:4px}
@media(max-width:900px){.prices .grid{grid-template-columns:1fr;gap:36px}}

/* ---------- Über mich ---------- */
.about{background:var(--surface)}
.about .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.about .ph{aspect-ratio:4/5;border-radius:28px}
.quote{font-size:clamp(26px,3.2vw,38px);font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-top:16px}
.quote em{font-style:normal;color:var(--accent)}
.about .lead{margin-top:22px}
.about .sig{margin-top:28px;display:flex;align-items:center;gap:14px}
.about .sig b{display:block}
.about .sig span{color:var(--muted);font-size:14px}
.press{margin-top:28px;padding:16px 20px;border-left:3px solid var(--accent);background:#fff;border-radius:0 12px 12px 0;font-size:14px;color:var(--ink-2)}
@media(max-width:900px){.about .grid{grid-template-columns:1fr;gap:36px}.about .ph{aspect-ratio:4/3}}

/* ---------- Bücher ---------- */
.books .box{background:var(--accent-tint);border:1px solid #CFE4F2;border-radius:28px;padding:56px;display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.books .ph{aspect-ratio:1;border-radius:20px}
@media(max-width:900px){.books .box{grid-template-columns:1fr;padding:32px}}

/* ---------- Kontakt ---------- */
.contact .grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
.panel{border:1px solid var(--line);border-radius:var(--radius);padding:32px}
.panel h3{font-size:20px;display:flex;align-items:center;gap:10px}
.panel h3 svg{width:22px;height:22px;color:var(--accent)}
.hours{margin-top:20px;width:100%;border-collapse:collapse}
.hours td{padding:12px 0;border-bottom:1px solid var(--line);font-size:16px}
.hours tr:last-child td{border:0}
.hours td:last-child{text-align:right;font-weight:700}
.hours .closed td:last-child{color:var(--muted);font-weight:600}
.contact-lines{margin-top:20px;display:flex;flex-direction:column;gap:14px}
.contact-lines a{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:600}
.contact-lines a:hover{color:var(--accent-dark)}
.contact-lines svg{width:20px;height:20px;color:var(--accent)}
.map{margin-top:24px;grid-column:span 2;aspect-ratio:21/7;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.map iframe{width:100%;height:100%;border:0}
@media(max-width:900px){.contact .grid{grid-template-columns:1fr}.map{grid-column:span 1;aspect-ratio:4/3}}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:#94A3B8;padding:56px 0 28px;font-size:14px}
footer .grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:40px}
footer h4{color:#fff;font-size:15px;margin-bottom:14px}
footer a{display:block;margin:8px 0}
footer a:hover{color:#fff}
footer .logo{color:#fff}
footer .logo small{color:#94A3B8}
footer .bottom{border-top:1px solid #1E293B;margin-top:40px;padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
@media(max-width:720px){footer .grid{grid-template-columns:1fr}}

/* Mobile sticky call */
.call-fab{display:none}
@media(max-width:720px){
  .call-fab{display:flex;position:fixed;left:16px;right:16px;bottom:16px;z-index:60;justify-content:center}
  .call-fab .btn{width:100%;justify-content:center;box-shadow:0 12px 30px rgba(0,124,190,.35)}
  footer{padding-bottom:96px}
}

/* Reveal */
.reveal{transition:.7s cubic-bezier(.2,.7,.2,1)}
.reveal.pre{opacity:0;transform:translateY(18px)}
@media(prefers-reduced-motion:reduce){.reveal,.reveal.pre{opacity:1;transform:none;transition:none}}

/* ---------- Sichtbarer Tastaturfokus ----------
   Ergaenzt am 02.09.2026. Vorher war nur der Standardrahmen des Browsers da,
   der auf hellem Grund und auf dem dunklen Footer kaum zu sehen ist. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--accent-dark);outline-offset:3px;border-radius:8px}
footer :focus-visible,.announce :focus-visible,.card-s.feature :focus-visible,
.loyalty :focus-visible{outline-color:var(--accent-light)}

/* Sprungmarke zum Inhalt, nur bei Tastaturbedienung sichtbar */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;
  padding:12px 18px;border-radius:0 0 12px 0;font-weight:700}
.skip:focus{left:0}

/* ---------- Textseiten (AGB, Impressum, Datenschutz) ---------- */
.pagehead{padding:64px 0 8px;background:
  radial-gradient(700px 380px at 80% -20%,var(--accent-soft),transparent 60%),#fff}
.pagehead h1{font-size:clamp(30px,4.4vw,46px);margin-top:14px;max-width:22ch}
.pagehead .lead{margin-top:16px}
.prose{padding:40px 0 96px}
.prose .spalte{max-width:68ch}
.prose h2{font-size:24px;margin:44px 0 0}
.prose h3{font-size:18px;margin:28px 0 0}
.prose p{margin-top:14px;color:var(--ink-2)}
.prose ul,.prose ol{margin:14px 0 0;padding-left:22px;color:var(--ink-2)}
.prose li{margin:8px 0}
.prose li>ul{margin-top:8px}
.prose a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{text-decoration-thickness:2px}
.prose dl{margin:14px 0 0;color:var(--ink-2)}
.prose dt{font-weight:700;color:var(--ink);margin-top:14px}
.prose dd{margin:2px 0 0}
.prose .stand{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);
  font-size:14px;color:var(--muted)}

/* Hinweis auf noch nicht freigegebene Inhalte. Bewusst auffaellig,
   damit er vor dem Aufschalten nicht uebersehen wird. */
.fuellen{margin-top:20px;border:1px dashed #E0B341;background:#FFFBEB;border-radius:var(--radius-sm);
  padding:18px 20px;color:#7C5A10;font-size:15px}
.fuellen b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:#A97C12;margin-bottom:6px}
.fuellen p{color:#7C5A10;margin-top:8px}

/* ---------- Video ----------
   Steht direkt unter dem Fotoband, deshalb oben ohne eigenen Abstand.
   `preload="metadata"` laedt nur die Kopfdaten, das Vorschaubild traegt die
   Flaeche bis zum Klick. */
.video{padding-top:0}
.video .player{margin-top:40px;border-radius:var(--radius);overflow:hidden;
  background:var(--ink);box-shadow:var(--shadow);aspect-ratio:16/9}
.video video{width:100%;height:100%;display:block;object-fit:cover}
.videohinweis{margin-top:14px;font-size:14px;color:var(--muted)}
@media(max-width:720px){.video .player{border-radius:var(--radius-sm)}}