/* Kiez-Webseiten · 4 Design-Vorlagen für Laden-Vorschauen */
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}img{max-width:100%;display:block}
@media(max-width:759px){body{padding-bottom:74px}}

/* ---------- Designs ---------- */
.d1{--bg:#0d0d0d;--bg2:#161616;--ink:#f4f1ea;--mut:#a39e93;--acc:#f5b53d;--accink:#111;--line:#2a2a2a;--disp:Anton,Impact,sans-serif;--text:Inter,system-ui,sans-serif;--rad:14px}
.d2{--bg:#f6f0e6;--bg2:#efe5d4;--ink:#3b2e22;--mut:#7d6c5b;--acc:#8a6a45;--accink:#fff;--line:#dccfba;--disp:"Cormorant Garamond",Georgia,serif;--text:Inter,system-ui,sans-serif;--rad:4px}
.d3{--bg:#0f271d;--bg2:#143426;--ink:#efe6d2;--mut:#a9b5a6;--acc:#d6b675;--accink:#0f271d;--line:#25483a;--disp:"DM Serif Display",Georgia,serif;--text:Jost,system-ui,sans-serif;--rad:8px}
.d4{--bg:#fff6f3;--bg2:#ffebe5;--ink:#2b1d22;--mut:#7f6970;--acc:#d2557a;--accink:#fff;--line:#f3d5cd;--disp:Jost,system-ui,sans-serif;--text:Jost,system-ui,sans-serif;--rad:24px}

/* ---------- Intro ---------- */
.intro{position:fixed;inset:0;z-index:50;pointer-events:none;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:transform .9s cubic-bezier(.7,0,.2,1)}
.intro span{font-family:var(--disp);font-size:clamp(40px,9vw,90px);color:var(--acc);opacity:0;transform:translateY(20px);animation:introText .7s .1s forwards}
.d1 .intro span{text-transform:uppercase}.d2 .intro span{font-style:italic}
.intro.weg{transform:translateY(-100%)}
@keyframes introText{to{opacity:1;transform:none}}

/* ---------- Entwurfs-Leiste ---------- */
.entwurf{position:sticky;top:0;z-index:30;background:#1b1b1b;color:#fff;font-family:Inter,system-ui,sans-serif;font-size:13px;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.entwurf .in{max-width:1160px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.entwurf .t{opacity:.85}.entwurf .t b{color:#ffd166}
.wahl{display:flex;gap:6px;align-items:center}.wahl span{opacity:.7;margin-right:2px}
.wahl button{font:inherit;font-weight:600;border:1px solid #555;background:#2a2a2a;color:#fff;border-radius:999px;padding:5px 12px;cursor:pointer}
.wahl button.an{background:#ffd166;color:#111;border-color:#ffd166}

/* ---------- Navigation ---------- */
.kopfbereich{position:relative}
nav{position:relative;z-index:3;border-bottom:1px solid var(--line)}
nav .in{max-width:1160px;margin:0 auto;padding:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{font-family:var(--disp);font-size:24px;line-height:1.05}
.navr{display:flex;align-items:center;gap:14px}
.navr .lk{display:none;text-decoration:none;font-size:15px;opacity:.85}
@media(min-width:900px){.navr .lk{display:inline}}
.tel{background:var(--acc);color:var(--accink);text-decoration:none;font-weight:600;padding:9px 16px;border-radius:999px;font-size:14px;white-space:nowrap}
.d1 nav,.d3 nav{position:absolute;left:0;right:0;top:0;border-bottom-color:rgba(255,255,255,.14);color:#fff}
.d1 .logo{text-transform:uppercase;letter-spacing:.06em}
.d2 .logo{font-style:italic;font-size:30px;font-weight:500}
.d2 .tel,.d2 .btn{border-radius:2px}
.d4 .logo{font-weight:600;letter-spacing:-.02em}
.d4 nav{border-bottom:0}

/* ---------- Status ---------- */
.status{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.35);color:#fff;backdrop-filter:blur(6px)}
.status i{width:9px;height:9px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.7);animation:puls 2s infinite}
.status.zu i{background:#ff6b6b;animation:none}
@keyframes puls{70%{box-shadow:0 0 0 9px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.d2 .status,.d4 .status{background:#fff;color:var(--ink);box-shadow:0 4px 18px rgba(0,0,0,.08)}

/* ---------- Kopfbild ---------- */
.held{position:relative;overflow:hidden}
.bilder{position:relative;overflow:hidden}
.bilder img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease;transform:scale(1.08)}
.bilder img.an{opacity:1;animation:kenburns 9s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.12)}to{transform:scale(1)}}
.inhalt{position:relative;z-index:2}
.kicker{color:var(--acc);font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:13px}
h1{font-family:var(--disp);font-weight:400;font-size:clamp(46px,10vw,108px);line-height:.98;margin:14px 0 22px}
h1 em{font-style:normal;color:var(--acc)}
.lead{font-size:18px;max-width:540px;margin:0 0 28px;opacity:.86}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font-weight:600;padding:14px 24px;border-radius:999px;border:2px solid var(--acc);color:inherit;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn.voll{background:var(--acc);color:var(--accink)}
.unten{margin-top:30px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sterne{display:flex;align-items:center;gap:8px;font-size:15px}
.sterne b{font-size:22px}.sterne i{color:var(--acc);font-style:normal;letter-spacing:2px}
.sterne span{opacity:.75}

/* d1: Vollbild, Text unten links */
.d1 .held{min-height:min(94vh,860px);display:flex;align-items:flex-end;color:#fff}
.d1 .bilder{position:absolute;inset:0}
.d1 .schleier{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 35%,rgba(13,13,13,.92) 88%,#0d0d0d 100%)}
.d1 .inhalt{max-width:1160px;margin:0 auto;padding:140px 16px 60px;width:100%}
.d1 h1{text-transform:uppercase;font-size:clamp(58px,13vw,150px);line-height:.9}

/* d2: Text + Bogenbild */
.d2 .schleier,.d4 .schleier{display:none}
.d2 .held{max-width:1160px;margin:0 auto;padding:30px 16px 70px;display:grid;gap:34px;align-items:center}
.d2 .bilder{height:380px;border-radius:999px 999px 6px 6px;order:-1;box-shadow:0 30px 60px -30px rgba(59,46,34,.5)}
.d2 .inhalt{text-align:center}
.d2 .lead{margin-left:auto;margin-right:auto}
.d2 .cta,.d2 .unten{justify-content:center}
.d2 h1{font-weight:500;font-style:italic;letter-spacing:-.01em}
.d2 h1 em{font-style:normal}
.d2 .kicker:before,.d2 .kicker:after{content:"";display:inline-block;width:30px;height:1px;background:var(--acc);vertical-align:middle;margin:0 10px}
@media(min-width:860px){.d2 .held{grid-template-columns:1.1fr .9fr;padding-top:50px}.d2 .bilder{order:2;height:600px}.d2 .inhalt{text-align:left}.d2 .lead{margin-left:0}.d2 .cta,.d2 .unten{justify-content:flex-start}}

/* d3: Vollbild grün getönt, zentriert im Rahmen */
.d3 .held{min-height:min(92vh,820px);display:flex;align-items:center;justify-content:center;color:#efe6d2;text-align:center}
.d3 .bilder{position:absolute;inset:0}
.d3 .schleier{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,39,29,.78),rgba(15,39,29,.62) 50%,rgba(15,39,29,.95))}
.d3 .inhalt{max-width:820px;margin:110px 16px 50px;padding:46px 22px;border:1px solid rgba(214,182,117,.55);outline:1px solid rgba(214,182,117,.25);outline-offset:8px}
.d3 .lead{margin-left:auto;margin-right:auto}
.d3 .cta,.d3 .unten{justify-content:center}
.d3 .btn{border-radius:var(--rad)}

/* d4: Text + abgerundete Bildkarte */
.d4 .held{max-width:1160px;margin:0 auto;padding:20px 16px 70px;display:grid;gap:30px;align-items:center;isolation:isolate}
.d4 .held:before{content:"";position:absolute;z-index:-1;width:480px;height:480px;right:-160px;top:-80px;border-radius:50%;background:radial-gradient(circle,#ffc6d3,transparent 70%)}
.d4 .held:after{content:"";position:absolute;z-index:-1;width:340px;height:340px;left:-150px;bottom:-120px;border-radius:50%;background:radial-gradient(circle,#ffe0b8,transparent 70%)}
.d4 .bilder{height:400px;border-radius:32px;order:-1;box-shadow:0 30px 60px -28px rgba(210,85,122,.45)}
.d4 h1{font-weight:600;letter-spacing:-.035em;font-size:clamp(44px,9vw,96px)}
.d4 .bilder .status{position:absolute;left:16px;bottom:16px;z-index:2}
@media(min-width:860px){.d4 .held{grid-template-columns:1fr 1fr;padding-top:40px}.d4 .bilder{order:2;height:580px}}

/* ---------- Laufband ---------- */
.band-lauf{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2)}
.band-lauf div{display:inline-block;padding:18px 0;animation:lauf 28s linear infinite;font-family:var(--disp);font-size:26px}
.band-lauf span{margin:0 22px}.band-lauf b{color:var(--acc);font-weight:400}
.d1 .band-lauf{background:var(--acc);color:#111;border:0}.d1 .band-lauf div{text-transform:uppercase}.d1 .band-lauf b{color:#111}
.d2 .band-lauf div{font-style:italic}
.d4 .band-lauf{background:var(--acc);color:#fff;border:0}.d4 .band-lauf b{color:#ffd1dd}.d4 .band-lauf div{font-weight:500}
@keyframes lauf{to{transform:translateX(-50%)}}

/* ---------- Abschnitte ---------- */
section{max-width:1160px;margin:0 auto;padding:76px 16px}
.band{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ueber{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:30px}
h2{font-family:var(--disp);font-weight:400;font-size:clamp(36px,6vw,60px);margin:6px 0 0;line-height:1.02}
.d1 h2{text-transform:uppercase}
.d2 h2{font-style:italic;font-weight:500}
.d2 .ueber{justify-content:center;text-align:center}
.d4 h2{font-weight:600;letter-spacing:-.03em}

.drei{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.box{background:var(--bg);border:1px solid var(--line);border-radius:var(--rad);padding:28px 24px;transition:transform .3s,border-color .3s}
.box:hover{transform:translateY(-4px);border-color:var(--acc)}
.box .z{font-family:var(--disp);font-size:44px;color:var(--acc);line-height:1}
.box b{display:block;margin-top:10px;font-size:19px}
.box p{color:var(--mut);margin:6px 0 0}
.d2 .box{text-align:center;background:transparent;border:0;border-top:1px solid var(--acc);border-radius:0}
.d4 .box{background:#fff;border-color:transparent;box-shadow:0 10px 30px rgba(210,85,122,.08)}

/* Galerie */
.galerie{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:170px;gap:10px}
.galerie figure{margin:0;position:relative;overflow:hidden;border-radius:var(--rad)}
.galerie figure:first-child,.galerie figure:last-child{grid-column:span 2}
.galerie img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.galerie figure:hover img{transform:scale(1.07)}
.galerie figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;font-size:13px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.6));opacity:0;transition:opacity .3s}
.galerie figure:hover figcaption{opacity:1}
@media(min-width:760px){.galerie{grid-template-columns:repeat(3,1fr);grid-auto-rows:240px}.galerie figure:last-child{grid-column:auto}.galerie figure:first-child{grid-column:span 2;grid-row:span 2}}
.d2 .galerie figure:first-child{border-radius:999px 999px 6px 6px}
.foto-hinweis{color:var(--mut);font-size:13px;margin-top:12px}

/* Preise mit Tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.d2 .tabs{justify-content:center}
.tabs button{font:inherit;font-weight:500;cursor:pointer;padding:10px 20px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink)}
.tabs button.an{background:var(--acc);color:var(--accink);border-color:var(--acc)}
.d2 .tabs button{border-radius:2px}
.liste{border-top:1px solid var(--line);max-width:820px}
.d2 .liste{margin:0 auto}
.pos{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);animation:rein .45s both}
.pos b{font-size:18px;font-weight:600}.pos small{display:block;color:var(--mut);font-size:14px}
.pos .p{font-family:var(--disp);font-size:28px;color:var(--acc);white-space:nowrap}
.d2 .pos{border-bottom-style:dotted}
.d4 .liste{border:0;display:grid;gap:10px}
.d4 .pos{background:#fff;border:0;border-radius:18px;padding:18px 20px}
.d4 .pos .p{font-weight:600}
@keyframes rein{from{opacity:0;transform:translateY(10px)}}
.hinweis-preise{color:var(--mut);font-size:13px;margin-top:14px}
.d2 .hinweis-preise{text-align:center}

/* Termin + Kontakt */
.zwei{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:30px;align-items:start}
table{width:100%;border-collapse:collapse}td{padding:12px 0;border-bottom:1px solid var(--line)}td:last-child{text-align:right;color:var(--mut)}
tr.heute td{color:var(--acc);font-weight:600}
.karte{border-radius:var(--rad);overflow:hidden;position:relative;min-height:300px;display:flex;align-items:flex-end}
.karte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.karte:before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(0,0,0,.78));z-index:1}
.karte .k{position:relative;z-index:2;padding:24px;color:#fff;display:grid;gap:10px}
.karte p{margin:0;font-size:18px}

.buchung{background:var(--bg);border:1px solid var(--line);border-radius:calc(var(--rad) + 4px);padding:24px;max-width:820px}
.d2 .buchung{margin:0 auto}
.d4 .buchung{background:#fff;border:0;box-shadow:0 10px 40px rgba(210,85,122,.1)}
.schritt{font-weight:600;margin:20px 0 10px;color:var(--acc);font-size:13px;letter-spacing:.08em;text-transform:uppercase}.schritt:first-child{margin-top:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;background:var(--bg2);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:10px 14px;cursor:pointer;transition:transform .15s}
.chip:hover{transform:translateY(-1px)}
.chip small{color:var(--mut);margin-left:6px}
.chip.an{background:var(--acc);color:var(--accink);border-color:var(--acc)}.chip.an small{color:var(--accink)}
.chip.belegt{opacity:.35;text-decoration:line-through;cursor:not-allowed}
.zeiten .chip{padding:8px 12px;font-size:14px}
.kontakt{display:grid;gap:10px;margin-top:20px}
.kontakt input{font:inherit;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg2);color:var(--ink)}
.senden{font:inherit;font-weight:600;background:var(--acc);color:var(--accink);border:0;border-radius:12px;padding:14px;cursor:pointer}
.fertig{text-align:center;padding:16px 0}
.haken{width:60px;height:60px;border-radius:50%;background:var(--acc);color:var(--accink);font-size:32px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;animation:pop .5s}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.15)}}
.hinweis{color:var(--mut);font-size:13px}

/* ---------- Scroll-Effekt ---------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s ease}
.rv.sicht{opacity:1;transform:none}
.drei .rv:nth-child(2){transition-delay:.12s}.drei .rv:nth-child(3){transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.bilder img.an,.band-lauf div{animation:none}}

/* ---------- Angebot von Kiez-Webseiten ---------- */
.angebot{background:#1b1b1b;color:#fff;font-family:Inter,system-ui,sans-serif}
.angebot .in{max-width:1160px;margin:0 auto;padding:44px 16px;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:center}
.angebot h3{margin:0 0 8px;font-size:24px}
.angebot p{margin:0;color:#c9c9c9}
.angebot .preis{font-size:15px;color:#c9c9c9;line-height:1.7}
.angebot .preis b{color:#ffd166;font-size:22px}
.angebot .knopf{display:flex;gap:10px;flex-wrap:wrap}
.angebot a{display:inline-block;text-decoration:none;font-weight:600;padding:13px 20px;border-radius:999px;background:#ffd166;color:#111}
.angebot a.zw{background:transparent;border:2px solid #ffd166;color:#ffd166}

footer{border-top:1px solid var(--line);color:var(--mut);font-size:14px}
footer .in{max-width:1160px;margin:0 auto;padding:26px 16px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* ---------- Handy-Leiste unten ---------- */
.leiste-unten{position:fixed;left:0;right:0;bottom:0;z-index:25;display:flex;gap:10px;padding:12px 14px;background:var(--bg);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(0,0,0,.12)}
.leiste-unten a{flex:1;text-align:center;text-decoration:none;font-weight:600;padding:13px;border-radius:999px;border:2px solid var(--acc);color:var(--ink)}
.leiste-unten a.voll{background:var(--acc);color:var(--accink)}
.d2 .leiste-unten a{border-radius:2px}
@media(min-width:760px){.leiste-unten{display:none}}

/* =========================================================
   Design 5 · Rosé-Gold (für Frauen)   Design 6 · Natur (für Frauen)
   ========================================================= */
.d5{--bg:#fbf3ef;--bg2:#f5e6df;--ink:#3a2a2a;--mut:#8a7470;--acc:#b9846a;--accink:#fff;--line:#ecd8cf;--disp:"Cormorant Garamond",Georgia,serif;--text:Jost,system-ui,sans-serif;--rad:999px}
.d6{--bg:#f3f1ea;--bg2:#e9e6dc;--ink:#2f3a33;--mut:#6f7a70;--acc:#7d8f72;--accink:#fff;--line:#dcd8cb;--disp:"DM Serif Display",Georgia,serif;--text:Jost,system-ui,sans-serif;--rad:22px}
.d5 .nur-d4,.d6 .nur-d4{display:none}

/* d5: Vollbild hell, zentriert, Rosé-Schleier */
.d5 .logo{font-style:italic;font-size:30px;font-weight:500}
.d5 .held{min-height:min(90vh,800px);display:flex;align-items:center;justify-content:center;text-align:center}
.d5 .bilder{position:absolute;inset:0}
.d5 .schleier{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at center,rgba(251,243,239,.88) 0%,rgba(251,243,239,.74) 55%,rgba(251,243,239,.55) 100%)}
.d5 .inhalt{max-width:780px;margin:60px 16px}
.d5 .kicker:before,.d5 .kicker:after{content:"✦";margin:0 12px;letter-spacing:0}
.d5 h1{font-weight:500;font-style:italic;font-size:clamp(52px,11vw,118px);line-height:.95}
.d5 h1 em{font-style:normal}
.d5 .lead{margin-left:auto;margin-right:auto;opacity:1;color:var(--mut)}
.d5 .cta,.d5 .unten{justify-content:center}
.d5 .status{background:#fff;color:var(--ink);box-shadow:0 4px 18px rgba(185,132,106,.18)}
.d5 h2{font-style:italic;font-weight:500}
.d5 .ueber{justify-content:center;text-align:center}
.d5 .box{text-align:center;border-radius:200px 200px 24px 24px;padding:44px 26px 30px;background:#fff;border-color:transparent;box-shadow:0 12px 34px rgba(185,132,106,.12)}
.d5 .band-lauf{background:transparent;border-color:var(--acc)}
.d5 .band-lauf div{font-style:italic;color:var(--acc)}
.d5 .band-lauf b{color:var(--ink);font-size:16px}
.d5 .galerie figure{border-radius:24px}
.d5 .galerie figure:first-child{border-radius:999px 999px 24px 24px}
.d5 .tabs{justify-content:center}
.d5 .liste{margin:0 auto}
.d5 .pos{border-bottom-style:dashed}
.d5 .hinweis-preise{text-align:center}
.d5 .buchung{margin:0 auto;border-radius:28px;background:#fff;border:0;box-shadow:0 12px 40px rgba(185,132,106,.14)}
.d5 .karte{border-radius:28px}

/* d6: Ovalbild links, Text rechts, Salbei */
.d6 .logo{font-size:26px}
.d6 nav{border-bottom:0}
.d6 .held{max-width:1160px;margin:0 auto;padding:20px 16px 70px;display:grid;gap:34px;align-items:center}
.d6 .schleier{display:none}
.d6 .bilder{height:420px;border-radius:220px;box-shadow:0 30px 60px -30px rgba(47,58,51,.45)}
.d6 .bilder:after{content:"";position:absolute;inset:12px;border:1px solid rgba(255,255,255,.7);border-radius:220px;z-index:2;pointer-events:none}
.d6 .held:after{content:"";position:absolute;z-index:-1;width:260px;height:260px;border-radius:50%;background:#dfe5d6;left:-90px;top:40px}
.d6 .held{isolation:isolate}
.d6 h1{font-size:clamp(46px,9vw,98px);line-height:1}
.d6 .status{background:#fff;color:var(--ink);box-shadow:0 4px 18px rgba(0,0,0,.06)}
@media(min-width:860px){.d6 .held{grid-template-columns:.9fr 1.1fr;padding-top:40px}.d6 .bilder{height:620px}}
.d6 .band-lauf{background:var(--acc);color:#fff;border:0}.d6 .band-lauf b{color:#e3ead9}
.d6 .box{background:#fff;border-color:transparent;border-radius:28px}
.d6 .box .z{font-size:50px}
.d6 .galerie figure{border-radius:28px}
.d6 .galerie figure:first-child{border-radius:200px 200px 28px 28px}
.d6 .pos{border-bottom-color:var(--line)}
.d6 .buchung{background:#fff;border:0;border-radius:28px}
.d6 .tabs button{border-radius:14px}