/* Tagesmutter finden – gemeinsames Stylesheet (Liste + Profilseiten) */

@font-face{
  font-family:"Nunito";
  src:url("fonts/nunito-var.woff2") format("woff2-variations"),url("fonts/nunito-var.woff2") format("woff2");
  font-weight:200 1000;font-style:normal;font-display:swap;
}
:root{
  color-scheme:light; /* nur helles Design – Browser/OS soll die Seite nicht automatisch abdunkeln */
  --coral:#d9634f; --coral-dark:#bf4c3a; --coral-soft:#f6e7e2;
  --sage:#5f9e74; --sage-dark:#4c8560; --sage-bg:#e9f3ec;
  --cream:#fdf8f2; --card:#ffffff; --ink:#2d241b; --ink-soft:#5a4f45; --muted:#7e7365; /* --muted auf WCAG-AA-Kontrast (4.6:1 auf Weiß) angehoben */
  --amber:#b97e14; --amber-bg:#fcf3e0; --line:#eadfd0;
  --radius:16px;
  --shadow-sm:0 2px 10px rgba(70,50,32,.07);
  --shadow:0 10px 30px rgba(70,50,32,.11);
  --shadow-lg:0 18px 46px rgba(70,50,32,.15);
  --grad-coral:linear-gradient(135deg,#df6d59 0%,#cd5240 100%);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--cream);color:var(--ink);line-height:1.65;font-size:16.5px}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 1.4rem}

/* ---------- Scroll-Reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(253,248,242,.88);backdrop-filter:blur(12px);transition:box-shadow .25s}
header.scrolled{box-shadow:var(--shadow-sm)}
/* Barrierefreiheit: sichtbarer Tastatur-Fokus + Skip-Link */
:focus-visible{outline:3px solid var(--coral);outline-offset:2px;border-radius:3px}
.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--coral);color:#fff;padding:.7rem 1.1rem;font-weight:800;border-radius:0 0 10px 0;text-decoration:none}
.skip-link:focus{left:0}
/* Ratgeber-Artikel: Titelbild (flache Illustration im Site-Stil) */
.ratgeber-hero{margin:0 0 1.6rem;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);aspect-ratio:16/9;background:var(--cream)}
.ratgeber-hero img{width:100%;height:100%;object-fit:cover;display:block}
.header-inner{max-width:1120px;margin:0 auto;padding:.75rem 1.4rem;display:flex;align-items:center;gap:.9rem}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.logo .mark{width:42px;height:42px;border-radius:13px;background:var(--grad-coral);display:grid;place-items:center;font-size:1.35rem;box-shadow:0 4px 12px rgba(150,66,50,.2)}
.logo .word{font-weight:800;font-size:1.18rem;letter-spacing:-.01em;line-height:1.1}
.logo .word small{display:block;font-size:.68rem;font-weight:700;color:var(--sage);letter-spacing:.08em;text-transform:uppercase}
.logo-img{height:46px;width:auto;display:block}
@media(max-width:600px){.logo-img{height:38px}}
nav{margin-left:auto;display:flex;gap:.2rem;align-items:center}
nav a{text-decoration:none;color:var(--ink-soft);font-weight:700;font-size:.93rem;padding:.5rem .95rem;border-radius:999px;transition:background .15s,color .15s}
nav a:hover{background:#f6ebdd;color:var(--ink)}
nav a.cta{background:var(--grad-coral);color:#fff;box-shadow:0 4px 14px rgba(150,66,50,.2);margin-left:.4rem}
nav a.cta:hover{filter:brightness(1.05)}

/* Vorschau-/Demo-Hinweis vorerst ausgeblendet – zum Reaktivieren "display:none" entfernen */
.demo-banner{background:var(--amber-bg);color:var(--amber);text-align:center;font-size:.82rem;font-weight:700;padding:.5rem 1rem;display:none}

/* ---------- Hero ---------- */
.hero{padding:3.2rem 0 2.6rem;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:2rem}}
.eyebrow{display:inline-flex;align-items:center;gap:.45rem;background:var(--sage-bg);color:var(--sage-dark);font-weight:800;font-size:.8rem;padding:.35rem .95rem;border-radius:999px;letter-spacing:.02em}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.15rem);font-weight:800;letter-spacing:-.025em;line-height:1.13;margin:1rem 0 .9rem}
.hero h1 em{font-style:normal;color:var(--coral);position:relative}
.hero .lead{color:var(--ink-soft);font-size:1.08rem;max-width:34rem}
.searchbar{margin-top:1.6rem;display:flex;background:#fff;border:2px solid var(--line);border-radius:999px;padding:.35rem .4rem .35rem 1.3rem;box-shadow:var(--shadow-sm);max-width:33rem;transition:border-color .2s,box-shadow .2s}
.searchbar:focus-within{border-color:var(--coral);box-shadow:0 6px 24px rgba(150,66,50,.12)}
.searchbar input{flex:1;border:none;outline:none;font-size:1rem;background:transparent;color:var(--ink);font-family:inherit;min-width:0}
.searchbar .go{background:var(--grad-coral);color:#fff;border:none;border-radius:999px;padding:.65rem 1.35rem;font-weight:800;font-size:.95rem;cursor:pointer;font-family:inherit}
.trust{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:1.3rem;color:var(--ink-soft);font-size:.88rem;font-weight:700}
.trust span{display:inline-flex;align-items:center;gap:.4rem}
.trust b{color:var(--sage-dark)}

.hero-visual{position:relative}
.hero-visual .frame{border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg);transform:rotate(1deg)}
.hero-visual::before{content:"";position:absolute;inset:-8% -6% auto auto;width:190px;height:190px;background:radial-gradient(circle,var(--coral-soft),transparent 65%);z-index:-1}
.hero-visual::after{content:"";position:absolute;left:-9%;bottom:-12%;width:230px;height:230px;background:radial-gradient(circle,var(--sage-bg),transparent 65%);z-index:-1}
.float-chip{position:absolute;background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:.65rem 1rem;font-weight:800;font-size:.86rem;display:flex;align-items:center;gap:.5rem}
.float-chip.tl{top:7%;left:-1.4rem;animation:bob 5s ease-in-out infinite}
.float-chip.br{bottom:8%;right:-1rem;animation:bob 6s ease-in-out .8s infinite}
.float-chip .dot{width:10px;height:10px;border-radius:50%;background:var(--sage)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(max-width:900px){.float-chip.tl{left:.4rem}.float-chip.br{right:.4rem}}

/* ---------- Stats ---------- */
.stats{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats-grid{max-width:1120px;margin:0 auto;padding:1.5rem 1.4rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center}
@media(max-width:760px){.stats-grid{grid-template-columns:repeat(2,1fr);row-gap:1.4rem}}
.stat .n{font-size:1.75rem;font-weight:800;color:var(--coral);letter-spacing:-.02em;line-height:1.1}
.stat .l{font-size:.83rem;font-weight:700;color:var(--muted)}

/* ---------- Sections ---------- */
section.block{padding:3.6rem 0}
.sec-head{text-align:center;max-width:40rem;margin:0 auto 2.2rem}
.sec-head .eyebrow{margin-bottom:.8rem}
.sec-head h2{font-size:clamp(1.55rem,3.2vw,2.15rem);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.sec-head p{color:var(--ink-soft);margin-top:.6rem}

/* ---------- Filter + Cards ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:center;margin-bottom:.9rem}
.filters select{appearance:none;background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" stroke="%2394897e" stroke-width="1.6" fill="none" stroke-linecap="round"/></svg>') no-repeat right .95rem center;border:1.5px solid var(--line);border-radius:999px;padding:.55rem 2.3rem .55rem 1.1rem;font-size:.9rem;font-weight:700;color:var(--ink);cursor:pointer;font-family:inherit;box-shadow:var(--shadow-sm)}
.filters select:focus{outline:none;border-color:var(--coral)}
.toggle{display:flex;align-items:center;gap:.45rem;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:.55rem 1.1rem;font-size:.9rem;font-weight:700;cursor:pointer;user-select:none;box-shadow:var(--shadow-sm)}
.toggle input{accent-color:var(--coral);width:1rem;height:1rem;cursor:pointer}
.count-line{text-align:center;color:var(--muted);font-size:.9rem;font-weight:700;margin-bottom:1.6rem}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1.3rem}
.card{position:relative;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.45rem;display:flex;flex-direction:column;gap:.75rem;border:1px solid #fbf4ec;transition:transform .25s ease,box-shadow .25s ease;cursor:pointer}
.fav-btn{position:absolute;top:.7rem;right:.7rem;background:#fff;border:1px solid var(--line);border-radius:50%;width:34px;height:34px;font-size:1rem;line-height:1;padding:0;cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow-sm);z-index:2;transition:transform .12s}
.fav-btn:hover{transform:scale(1.15)}
.fav-btn.on{border-color:var(--coral)}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.card-top{display:flex;gap:.95rem;align-items:center}
.avatar{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:1.25rem;color:#fff;flex-shrink:0;box-shadow:inset 0 -3px 8px rgba(0,0,0,.12),0 0 0 3px #fff,0 0 0 5px var(--line);overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.card h3{font-size:1.12rem;font-weight:800;letter-spacing:-.01em}
.card .ort{color:var(--muted);font-size:.85rem;font-weight:700}
.card .ort .bl{font-weight:600;opacity:.72}
.badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.75rem;font-weight:800;padding:.2rem .65rem;border-radius:999px}
.b-frei{background:var(--sage-bg);color:var(--sage-dark)}
.b-voll{background:#efe8e0;color:var(--muted)}
.b-neu{background:var(--amber-bg);color:var(--amber)}
.b-check{background:#eaf1fa;color:#4a7fb5}
.badges{display:flex;flex-wrap:wrap;gap:.4rem}
.card p.desc{font-size:.9rem;color:var(--ink-soft);flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.meta{font-size:.85rem;color:var(--muted);display:flex;flex-direction:column;gap:.3rem;font-weight:600}
.meta b{color:var(--ink);font-weight:800}
.chips{display:flex;gap:.35rem;flex-wrap:wrap}
.chip{background:#f8eee1;color:#9a6b3f;font-size:.73rem;font-weight:800;padding:.16rem .6rem;border-radius:999px}
.card .contact{margin-top:.4rem;display:flex;gap:.55rem}
.card .contact .btn{flex:1;white-space:nowrap}
.btn{display:inline-block;border:none;cursor:pointer;text-decoration:none;text-align:center;font-weight:800;font-size:.9rem;padding:.62rem 1.15rem;border-radius:999px;transition:filter .15s,transform .15s;font-family:inherit}
.btn:active{transform:scale(.97)}
.btn-coral{background:var(--grad-coral);color:#fff;box-shadow:0 4px 12px rgba(150,66,50,.18)}
.btn-coral:hover{filter:brightness(1.06)}
.btn-ghost{background:#f6ecdf;color:var(--ink)}
.btn-ghost:hover{background:#efe1cd}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:3rem 1rem;font-weight:700}

/* ---------- Foto-Platzhalter & Upload ---------- */
.p-photo{width:150px;height:150px;border-radius:18px;flex-shrink:0;display:grid;place-items:center;position:relative;color:#fff;box-shadow:var(--shadow-sm);overflow:hidden;background:#e8ddd0}
.p-photo .ini{font-size:3.1rem;font-weight:800;line-height:1}
.p-photo .hint{position:absolute;bottom:.6rem;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.94);color:var(--ink-soft);font-size:.66rem;font-weight:800;padding:.2rem .65rem;border-radius:999px;white-space:nowrap;box-shadow:var(--shadow-sm)}
.p-photo img{width:100%;height:100%;object-fit:cover}
@media(max-width:600px){.p-photo{width:112px;height:112px}.p-photo .ini{font-size:2.3rem}}
.photo-upload{display:flex;gap:1rem;align-items:center}
.photo-preview{width:84px;height:84px;border-radius:18px;border:2px dashed var(--line);display:grid;place-items:center;font-size:1.6rem;background:var(--cream);overflow:hidden;flex-shrink:0}
.photo-preview img{width:100%;height:100%;object-fit:cover}
.photo-meta{min-width:0}
.photo-meta input[type=file]{font-family:inherit;font-size:.85rem;max-width:100%}
.photo-meta .opt-hint{font-size:.76rem;color:var(--muted);margin-top:.35rem}
.photo-meta a{color:var(--coral);font-size:.8rem;font-weight:800}
.opt-hint{font-size:.76rem;color:var(--muted);margin-top:.35rem}
/* Galerie-Upload (bis zu 5 Zusatzbilder) */
.galerie-preview{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.7rem}
.g-thumb{position:relative;width:78px;height:78px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--cream)}
.g-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.g-thumb button{position:absolute;top:3px;right:3px;width:22px;height:22px;border:none;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:.72rem;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.g-thumb button:hover{background:var(--coral)}
/* Bilder-Wechsel auf der Profilseite */
.p-galerie{margin:1.6rem 0}
.p-galerie .haupt{width:100%;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:var(--cream);border:1px solid var(--line)}
.p-galerie .haupt img{width:100%;height:100%;object-fit:cover;display:block}
.p-galerie .thumbs{display:flex;gap:.55rem;margin-top:.7rem;flex-wrap:wrap}
.p-galerie .thumbs img{width:72px;height:72px;border-radius:12px;object-fit:cover;cursor:pointer;border:2px solid transparent;opacity:.7;transition:.15s}
.p-galerie .thumbs img.aktiv,.p-galerie .thumbs img:hover{opacity:1;border-color:var(--coral)}

/* ---------- Profilseite ---------- */
.profile-main{max-width:820px;margin:0 auto;padding:2.4rem 1.4rem 3.5rem}
.back-link{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;color:var(--ink-soft);font-weight:800;font-size:.92rem;margin-bottom:1.4rem;padding:.45rem .95rem;border-radius:999px;background:#fff;border:1.5px solid var(--line);box-shadow:var(--shadow-sm);transition:background .15s}
.back-link:hover{background:#f6ebdd}
.profile-card{background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:2.4rem;border:1px solid #fbf4ec}
@media(max-width:600px){.profile-card{padding:1.5rem}}
.p-head{display:flex;gap:1.3rem;align-items:center;margin-bottom:1.1rem;flex-wrap:wrap}
.p-avatar{width:92px;height:92px;font-size:2rem}
.p-head h1{font-size:clamp(1.5rem,4vw,2rem);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.p-head .ort{color:var(--muted);font-size:.95rem;font-weight:700}
.p-meta{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:.95rem 1.15rem;margin:1.2rem 0 1.6rem;font-size:.92rem;font-weight:600;color:var(--muted)}
.p-meta b{color:var(--ink);font-weight:800}
.p-label{font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--sage-dark);margin-bottom:.5rem}
.p-text{white-space:pre-line;color:var(--ink-soft);font-size:.98rem}
.p-contact{display:flex;gap:.6rem;margin-top:1.7rem;flex-wrap:wrap}
.p-contact .btn{font-size:.98rem;padding:.75rem 1.5rem}
/* Rechtsseiten (Impressum, Datenschutz) */
.legal h1{font-size:clamp(1.6rem,4vw,2.1rem);font-weight:800;letter-spacing:-.02em;margin-bottom:1.2rem}
.legal h2{font-size:1.08rem;font-weight:800;margin:1.7rem 0 .45rem;color:var(--ink)}
.legal p{font-size:.93rem;color:var(--ink-soft);margin-bottom:.6rem}
.legal ul{margin:.3rem 0 .8rem 1.2rem;font-size:.93rem;color:var(--ink-soft)}
.legal li{margin-bottom:.3rem}
.legal a{color:var(--coral);font-weight:700}

.p-error{text-align:center;padding:3.5rem 1rem}
.p-error .big{font-size:2.6rem;margin-bottom:.6rem}
.p-error h1{font-size:1.4rem;font-weight:800;margin-bottom:.4rem}
.p-error p{color:var(--ink-soft);margin-bottom:1.4rem}

/* ---------- Vorteile ---------- */
.benefits{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
@media(max-width:820px){.benefit-grid{grid-template-columns:1fr}}
.benefit{background:var(--cream);border-radius:var(--radius);padding:1.7rem 1.5rem;border:1px solid var(--line)}
.benefit .ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:1.5rem;margin-bottom:.9rem;background:var(--sage-bg)}
.benefit:nth-child(2) .ico{background:var(--coral-soft)}
.benefit:nth-child(3) .ico{background:#eaf1fa}
.benefit h3{font-size:1.05rem;font-weight:800;margin-bottom:.35rem}
.benefit p{font-size:.9rem;color:var(--ink-soft)}

/* ---------- Steps ---------- */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
@media(max-width:820px){.steps-grid{grid-template-columns:1fr;max-width:26rem;margin:0 auto}}
.step{text-align:center;padding:1.4rem 1.1rem;position:relative}
.step .num{width:52px;height:52px;margin:0 auto .85rem;border-radius:50%;background:var(--grad-coral);color:#fff;font-weight:800;display:grid;place-items:center;font-size:1.25rem;box-shadow:0 6px 16px rgba(150,66,50,.2)}
.step h4{font-size:1.02rem;font-weight:800;margin-bottom:.25rem}
.step p{font-size:.89rem;color:var(--ink-soft)}
@media(min-width:821px){
  .step:not(:last-child)::after{content:"";position:absolute;top:26px;left:calc(50% + 40px);width:calc(100% - 80px);border-top:2px dashed #e5d5c2}
}

/* ---------- Für Tagesmütter (Formular) ---------- */
.register{background:#fff;border-top:1px solid var(--line)}
.register-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:start}
@media(max-width:900px){.register-grid{grid-template-columns:1fr}}
.register-side{position:sticky;top:90px}
@media(max-width:900px){.register-side{position:static}}
.register-side .frame{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);transform:rotate(-1deg);margin-bottom:1.6rem}
.perk{display:flex;gap:.8rem;align-items:flex-start;margin-bottom:.95rem}
.perk .tick{width:26px;height:26px;border-radius:50%;background:var(--sage-bg);color:var(--sage-dark);display:grid;place-items:center;font-size:.8rem;font-weight:800;flex-shrink:0;margin-top:.15rem}
.perk b{display:block;font-size:.95rem}
.perk span{font-size:.86rem;color:var(--ink-soft)}

form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:600px){form .row{grid-template-columns:1fr}}
.field{margin-bottom:1.05rem}
.field label{display:block;font-weight:800;font-size:.85rem;margin-bottom:.35rem}
.field label .opt{color:var(--muted);font-weight:600}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{width:100%;border:1.5px solid var(--line);border-radius:13px;padding:.7rem .95rem;font-size:.95rem;font-family:inherit;background:var(--cream);color:var(--ink);transition:border-color .15s,background .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--coral);background:#fff}
.field textarea{resize:vertical;min-height:95px}
.age-boxes{display:flex;gap:.5rem;flex-wrap:wrap}
.age-boxes label{display:flex;align-items:center;gap:.4rem;background:var(--cream);border:1.5px solid var(--line);border-radius:999px;padding:.5rem 1rem;font-size:.9rem;font-weight:700;cursor:pointer;margin:0}
.age-boxes input{accent-color:var(--coral)}
.consent{display:flex;gap:.65rem;align-items:flex-start;background:var(--sage-bg);border-radius:14px;padding:.95rem 1.05rem;font-size:.85rem;margin-bottom:1.1rem}
.consent input{margin-top:.25rem;accent-color:var(--sage);flex-shrink:0}
.form-note{font-size:.79rem;color:var(--muted);text-align:center;margin-top:1rem}
.submit-row{text-align:center;margin-top:.6rem}
.submit-row .btn{font-size:1.02rem;padding:.85rem 2.4rem}

/* ---------- FAQ ---------- */
.faq{max-width:46rem;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:16px;margin-bottom:.75rem;box-shadow:var(--shadow-sm);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:1.05rem 1.3rem;font-weight:800;font-size:.98rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--coral);font-weight:800;transition:transform .25s;line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 1.3rem 1.15rem;color:var(--ink-soft);font-size:.92rem}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:1.6rem;transform:translateX(-50%) translateY(20px);background:var(--sage-dark);color:#fff;font-weight:800;padding:.85rem 1.5rem;border-radius:999px;box-shadow:0 12px 34px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:all .3s;z-index:99}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:#cfc5ba;margin-top:3.5rem}
.footer-grid{max-width:1120px;margin:0 auto;padding:3rem 1.4rem 2.2rem;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr;gap:1.8rem}}
footer .logo .word{color:#fff}
footer .brand-txt{font-size:.88rem;margin-top:.9rem;max-width:22rem;color:#b6aa9d}
footer h5{color:#fff;font-size:.85rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.8rem}
footer ul{list-style:none}
footer li{margin-bottom:.45rem}
footer a{color:#cfc5ba;text-decoration:none;font-size:.9rem}
footer a:hover{color:#fff}
/* Powered by Gaseit GmbH (Footer) */
.powered{display:flex;align-items:center;justify-content:center;gap:.65rem;padding:1.4rem 1.4rem .3rem}
.pw-label{font-size:.8rem;color:#9d9184;font-weight:700}
.pw-gaseit{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;transition:transform .15s}
.pw-gaseit:hover{transform:translateY(-1px)}
.pw-logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#d9634f,#bf4c3a);color:#fff;font-weight:900;font-size:1.05rem;display:grid;place-items:center;box-shadow:0 3px 10px rgba(150,66,50,.3)}
.pw-name{color:#fff;font-weight:700;font-size:1rem;letter-spacing:-.01em}
.pw-name b{font-weight:800;color:#f2a25c}
.pw-gaseit-img{height:30px;width:auto;filter:brightness(0) invert(1);opacity:.9;transition:opacity .15s}
.pw-gaseit:hover .pw-gaseit-img{opacity:1}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);text-align:center;padding:1.1rem 1.4rem;font-size:.78rem;color:#9d9184;margin-top:1rem}
.footer-bottom a{font-size:.78rem}

/* ---------- Auth-Seiten (Login / Registrieren / Konto) ---------- */
.auth-wrap{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:2rem 1.2rem}
.auth-card{width:100%;max-width:440px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:2.4rem;box-shadow:var(--shadow)}
.auth-card .brand{text-align:center;margin-bottom:1.4rem}
.auth-card .brand .mark{width:56px;height:56px;margin:0 auto .7rem;border-radius:16px;background:var(--grad-coral);display:grid;place-items:center;font-size:1.7rem;box-shadow:0 4px 12px rgba(150,66,50,.2)}
.auth-card h1{font-size:1.5rem;font-weight:800;text-align:center}
.auth-card .sub{color:var(--muted);font-size:.92rem;text-align:center;margin-top:.25rem;margin-bottom:1.5rem}
.auth-card .field{margin-bottom:1rem}
.auth-card label{display:block;font-weight:800;font-size:.82rem;margin-bottom:.35rem}
.auth-card input[type=email],.auth-card input[type=password],.auth-card input[type=text]{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:.75rem 1rem;font-size:1rem;font-family:inherit;background:var(--cream)}
.auth-card input:focus{outline:none;border-color:var(--coral);background:#fff}
.auth-card .btn{width:100%;margin-top:.3rem;font-size:1rem;padding:.82rem}
.auth-card .links{margin-top:1.4rem;text-align:center;font-size:.88rem;color:var(--muted);line-height:1.9}
.auth-card .links a{color:var(--coral);font-weight:800;text-decoration:none}
.auth-err{background:var(--coral-soft);color:var(--coral-dark);font-size:.86rem;font-weight:700;padding:.75rem 1rem;border-radius:11px;margin-bottom:1.1rem}
.auth-ok{background:var(--sage-bg);color:var(--sage-dark);font-size:.86rem;font-weight:700;padding:.75rem 1rem;border-radius:11px;margin-bottom:1.1rem}

/* ---------- Werbe-Platzhalter links/rechts (Demo, später Google AdSense) ---------- */
.ad-rail{display:none}
@media(min-width:1490px){
  .ad-rail{display:block;position:fixed;top:50%;transform:translateY(-50%);z-index:40;width:160px}
  .ad-rail.left{left:14px}
  .ad-rail.right{right:14px}
  .ad-label{text-align:center;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
  .ad-box{height:600px;max-height:82vh;border:2px dashed #ddcebd;border-radius:14px;background:repeating-linear-gradient(45deg,#faf3ea,#faf3ea 12px,#f5ece0 12px,#f5ece0 24px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;color:#a8988a;font-weight:800;text-align:center;padding:1rem;line-height:1.35}
  .ad-box .icon{font-size:1.9rem}
  .ad-box small{font-weight:700;font-size:.72rem;color:#bdae9f}
}

/* ============ Mobile-Navigation (Hamburger) ============ */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:0;width:44px;height:44px;margin-left:auto;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.nav-toggle span{display:block;width:24px;height:2.5px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .2s}
.nav-backdrop{position:fixed;inset:0;background:rgba(51,41,31,.45);opacity:0;pointer-events:none;transition:opacity .3s;z-index:55}
.nav-backdrop.show{opacity:1;pointer-events:auto}
@media(max-width:1050px){
  .nav-toggle{display:flex}
  nav{position:fixed;top:0;right:0;height:100dvh;width:min(80vw,310px);background:var(--cream);flex-direction:column;align-items:stretch;gap:.15rem;padding:4.9rem 1.1rem 1.4rem;box-shadow:-12px 0 44px rgba(51,41,31,.18);transform:translateX(105%);transition:transform .3s ease;margin-left:0;z-index:60;overflow-y:auto}
  nav.open{transform:none}
  nav a,nav a:not(.cta){display:block;padding:.85rem 1rem;font-size:1.02rem;border-radius:12px}
  nav a.cta{margin:.5rem 0 0;text-align:center;box-shadow:none}
  .nav-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}

/* ============ Sticky Filter-Leiste + aktive-Filter-Chips ============ */
.filterbar{position:sticky;top:60px;z-index:30;background:var(--cream);padding:.55rem 0 .5rem}
.filter-toggle{display:none;align-items:center;gap:.5rem;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:.65rem 1.2rem;font-size:.94rem;font-weight:800;font-family:inherit;color:var(--ink);cursor:pointer;box-shadow:var(--shadow-sm);width:100%;justify-content:center}
.filter-toggle .ft-badge{background:var(--coral);color:#fff;border-radius:999px;font-size:.72rem;padding:.05rem .5rem;min-width:1.35rem;text-align:center}
.filter-reset{background:var(--coral-soft);color:var(--coral-dark);border:none;border-radius:999px;padding:.55rem 1.1rem;font-size:.86rem;font-weight:800;font-family:inherit;cursor:pointer;box-shadow:var(--shadow-sm)}
.filter-reset:hover{background:#fbd9d2}
.active-filters{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;margin-top:.7rem}
.active-filters:empty{display:none}
.af-chip{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border:1.5px solid var(--coral);color:var(--coral-dark);border-radius:999px;padding:.3rem .4rem .3rem .85rem;font-size:.82rem;font-weight:800;box-shadow:var(--shadow-sm)}
.af-chip button{background:var(--coral-soft);border:none;color:var(--coral-dark);cursor:pointer;font-size:.9rem;line-height:1;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;padding:0;font-family:inherit}
.af-chip button:hover{background:var(--coral);color:#fff}
@media(max-width:700px){
  .filter-toggle{display:flex}
  .filters{display:none;flex-direction:column;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:18px;padding:1rem;margin-top:.6rem;box-shadow:var(--shadow)}
  .filters.open{display:flex}
  .filters select,.filters .toggle,.filters .filter-reset{width:100%}
}

/* ============ Sticky Kontakt-CTA (Profil, mobil) ============ */
.mobile-cta{display:none}
@media(max-width:700px){
  .mobile-cta{display:inline-flex;align-items:center;gap:.5rem;position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:45;background:var(--grad-coral);color:#fff;font-weight:800;font-size:1rem;padding:.85rem 1.7rem;border-radius:999px;text-decoration:none;box-shadow:0 10px 30px rgba(150,66,50,.26);font-family:inherit;border:none;cursor:pointer;animation:cta-in .4s ease}
  @keyframes cta-in{from{opacity:0;transform:translate(-50%,22px)}to{opacity:1;transform:translate(-50%,0)}}
}

/* ============ Skeleton-Ladezustand ============ */
.skeleton-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.45rem;border:1px solid #fbf4ec}
.sk{background:linear-gradient(90deg,#efe6db 25%,#f7f0e7 50%,#efe6db 75%);background-size:200% 100%;animation:sk-shimmer 1.3s infinite;border-radius:8px}
@keyframes sk-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk-row{display:flex;gap:.95rem;align-items:center;margin-bottom:1rem}
.sk-avatar{width:58px;height:58px;border-radius:50%;flex-shrink:0}
.sk-line{height:12px;margin-bottom:.55rem}
@media(prefers-reduced-motion:reduce){.sk{animation:none}}

/* ============ Bild-Lightbox (Profil) ============ */
.lightbox{position:fixed;inset:0;background:rgba(20,14,8,.93);z-index:100;display:none;align-items:center;justify-content:center;padding:2rem;cursor:zoom-out}
.lightbox.open{display:flex;animation:lb-in .2s ease}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
.lightbox img{max-width:94%;max-height:88%;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.55);cursor:default}
.lightbox .lb-close{position:absolute;top:1.1rem;right:1.3rem;background:rgba(255,255,255,.16);color:#fff;border:none;width:44px;height:44px;border-radius:50%;font-size:1.4rem;cursor:pointer;display:grid;place-items:center}
.lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.16);color:#fff;border:none;width:48px;height:48px;border-radius:50%;font-size:1.7rem;cursor:pointer;display:grid;place-items:center;line-height:1}
.lightbox .lb-nav:hover,.lightbox .lb-close:hover{background:rgba(255,255,255,.3)}
.lightbox .lb-prev{left:1rem}.lightbox .lb-next{right:1rem}
.p-galerie .haupt{cursor:zoom-in}
.p-photo{cursor:zoom-in}

/* Dark Mode bewusst entfernt – die Seite wird für alle einheitlich hell dargestellt
   (zu dunkel & stellenweise schlecht lesbar). color-scheme:light steht im :root oben. */

/* ============ Formular-Feinschliff: Inline-Validierung, Zeichenzähler, Button-Spinner ============ */
.field input:user-invalid,.field textarea:user-invalid,.auth-card input:user-invalid{border-color:var(--coral-dark)}
.field input:user-valid,.field textarea:user-valid,.auth-card input:user-valid{border-color:var(--sage)}
.char-count{font-size:.74rem;color:var(--muted);text-align:right;margin-top:.25rem;font-weight:700}
.char-count.warn{color:var(--coral-dark)}
.btn.loading{color:transparent!important;pointer-events:none;position:relative}
.btn.loading::after{content:"";position:absolute;top:50%;left:50%;width:17px;height:17px;margin:-8.5px 0 0 -8.5px;border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:btn-spin .6s linear infinite}
.btn-ghost.loading::after{border-color:rgba(51,41,31,.3);border-top-color:var(--ink)}
@keyframes btn-spin{to{transform:rotate(360deg)}}

/* ============ „Nach oben"-Button ============ */
.to-top{position:fixed;right:1.1rem;bottom:1.1rem;z-index:44;width:46px;height:46px;border-radius:50%;background:#fff;border:1.5px solid var(--line);box-shadow:var(--shadow);color:var(--ink);font-size:1.3rem;cursor:pointer;display:grid;place-items:center;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .25s,transform .25s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--coral);color:#fff;border-color:var(--coral)}

/* ============ Empty-State-Illustration ============ */
.empty .emo{font-size:3rem;display:block;margin-bottom:.5rem}
.empty .sub{font-weight:600;color:var(--muted);font-size:.9rem;margin-top:.3rem}
.empty .btn{margin-top:1.1rem}

/* ============ UX: Nachbarorte, Vertrauen, WhatsApp, Bausteine, Checkliste ============ */
.empty.near-hint{grid-column:1/-1;text-align:center;padding:1rem 1rem 0;font-weight:700;color:var(--ink-soft)}
.empty.near-hint .emo{margin-bottom:.3rem}
.b-frisch{background:var(--sage-bg);color:var(--sage-dark)}
.btn-whatsapp{background:#25d366;color:#fff;box-shadow:0 4px 12px rgba(37,211,102,.3)}
.btn-whatsapp:hover{filter:brightness(1.05)}
.bausteine{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.6rem}
.bausteine button{background:var(--cream);border:1.5px solid var(--line);border-radius:999px;padding:.35rem .8rem;font-size:.82rem;font-weight:700;font-family:inherit;color:var(--ink-soft);cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.bausteine button:hover{border-color:var(--coral);color:var(--coral-dark);background:var(--coral-soft)}
.p-checkliste{margin-top:1.6rem;background:var(--cream);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.p-checkliste summary{cursor:pointer;padding:.95rem 1.2rem;font-weight:800;font-size:.98rem;list-style:none;display:flex;align-items:center;gap:.5rem}
.p-checkliste summary::-webkit-details-marker{display:none}
.p-checkliste summary::after{content:"+";margin-left:auto;font-size:1.35rem;color:var(--coral);font-weight:800;transition:transform .2s;line-height:1}
.p-checkliste[open] summary::after{transform:rotate(45deg)}
.p-checkliste .pc-body{padding:0 1.2rem 1.1rem}
.p-checkliste .pc-body p{color:var(--ink-soft);font-size:.92rem;margin-bottom:.6rem}
.p-checkliste .pc-body ul{margin:0 0 0 1.15rem;color:var(--ink-soft);font-size:.92rem}
.p-checkliste .pc-body li{margin-bottom:.4rem}

/* ============ Freitextsuche im Header ============ */
.header-search{width:min(230px,24vw);display:flex;align-items:center;gap:.5rem;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:.5rem .85rem;margin-left:1rem;box-shadow:var(--shadow-sm);transition:border-color .2s}
.header-search:focus-within{border-color:var(--coral)}
.header-search .hs-icon{font-size:.85rem;opacity:.55;flex-shrink:0}
.header-search input{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:.92rem;color:var(--ink);min-width:0}
.header-search input::-webkit-search-cancel-button{cursor:pointer}
@media(max-width:1050px){
  .header-inner{flex-wrap:wrap}
  .header-search{width:100%;order:3;margin:.55rem 0 0}
}

/* ============ Großes Stadt-Dropdown im Hero ============ */
.hero-stadt{margin-top:1.6rem;max-width:33rem}
.hs-label{display:block;font-weight:800;font-size:1.02rem;color:var(--ink);margin-bottom:.6rem}
.stadt-wrap{display:flex;gap:.5rem;background:#fff;border:2px solid var(--line);border-radius:14px;padding:.4rem;box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s}
.stadt-wrap:focus-within{border-color:var(--coral);box-shadow:0 6px 24px rgba(150,66,50,.12)}
.stadt-select{flex:1;border:none;outline:none;background:transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="7" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" stroke="%23d9634f" stroke-width="1.7" fill="none" stroke-linecap="round"/></svg>') no-repeat right 1rem center;font-family:inherit;font-size:1.05rem;font-weight:700;color:var(--ink);padding:.75rem 2.4rem .75rem 1rem;cursor:pointer;appearance:none;min-width:0}
.stadt-select option{font-weight:600}
.stadt-go{background:var(--grad-coral);color:#fff;border:none;border-radius:11px;padding:.75rem 1.7rem;font-weight:800;font-size:1rem;cursor:pointer;font-family:inherit;flex-shrink:0;box-shadow:0 4px 12px rgba(150,66,50,.18);transition:filter .15s}
.stadt-go:hover{filter:brightness(1.06)}
@media(max-width:600px){.stadt-select{font-size:1rem;padding:.7rem 2.2rem .7rem .9rem}.stadt-go{padding:.7rem 1.2rem}}

/* ============ Städte-Übersicht (interne SEO-Verlinkung) ============ */
.staedte-grid{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center}
.staedte-grid a{background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:.5rem 1.05rem;font-size:.9rem;font-weight:700;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm);transition:border-color .15s,color .15s}
.staedte-grid a:hover{border-color:var(--coral);color:var(--coral-dark)}