/* Normalisierung – enthaelt bewusst keine Gestaltung. */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
img,picture,svg,video{display:block;max-width:100%;height:auto}
input,button,textarea,select{font:inherit;color:inherit}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ==========================================================
   Harmonie Ambulanter Pflegedienst GmbH, Frankfurt-Fechenheim
   Erscheinungsbild: warmes Papier, tiefes Pflegegruen, Bernstein
   Handgeschrieben, mobil zuerst.
   ========================================================== */

:root{
  /* Flaechen */
  --papier:#FDFAF4;
  --ton:#F2EDE2;
  --ton-tief:#E9E1D0;
  --anker:#14281F;
  --anker-hell:#1E3A2C;
  /* Farben */
  --gruen:#2E6A4E;
  --gruen-tief:#22523C;
  --bernstein:#D98C27;
  --bernstein-hell:#EFB55C;
  /* Schrift */
  --tinte:#1B2E25;
  --tinte-leise:#55605A;
  --tinte-hell:#EDF1EC;
  --linie:#DDD5C4;
  --linie-dunkel:rgba(237,241,236,.18);
  /* Raster und Rhythmus */
  --innen:min(100% - 2.5rem, 1180px);
  --rund:14px;
  --kapsel:32px;
  --luft-s:clamp(1.4rem, 1rem + 1.2vw, 2rem);
  --luft-m:clamp(2.2rem, 1.6rem + 1.9vw, 3rem);
  --luft-l:clamp(3rem, 2rem + 3.2vw, 4.5rem);
  --schrift-kopf:'Outfit','Segoe UI',system-ui,sans-serif;
  --schrift-text:'Manrope','Segoe UI',system-ui,sans-serif;
}

/* ---------- Grundlagen ---------- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--schrift-text);
  font-size:clamp(1.0625rem, 1rem + .2vw, 1.125rem);
  line-height:1.65;
  font-weight:400;
}
img{max-width:100%;height:auto}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{
  font-family:var(--schrift-kopf);
  color:var(--anker);
  line-height:1.18;
  letter-spacing:-.02em;
  font-weight:600;
  margin:0 0 .7em;
}
h1{font-size:clamp(1.95rem, 1.35rem + 2.4vw, 2.75rem);letter-spacing:-.03em}
h2{font-size:clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem)}
h3{font-size:clamp(1.15rem, 1.02rem + .5vw, 1.35rem);font-weight:600}
h4{font-size:1.05rem;font-weight:600}
p{margin:0 0 1.05em;max-width:66ch}
p:last-child{margin-bottom:0}
strong{font-weight:700;color:var(--anker)}
a{color:var(--gruen-tief);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px;transition:color .3s ease}
a:hover{color:var(--bernstein)}
:focus-visible{outline:3px solid var(--bernstein);outline-offset:3px;border-radius:4px}

.rubrik{
  display:inline-block;
  font-family:var(--schrift-kopf);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gruen);
  margin:0 0 .9rem;
}
.strich{width:56px;height:2px;background:var(--bernstein);border:0;margin:0 0 1.4rem}
.strich--mitte{margin-left:auto;margin-right:auto}
.vorspann{font-size:1.075rem;color:var(--tinte-leise);max-width:60ch}
.leise{color:var(--tinte-leise);font-size:.95rem}
.zahl-tab{font-variant-numeric:tabular-nums}

/* ---------- Layout ---------- */
.innen{width:var(--innen);margin-inline:auto}
.abschnitt{padding-block:var(--luft-m)}
.abschnitt--luft{padding-block:var(--luft-l)}
.abschnitt--eng{padding-block:var(--luft-s)}
.abschnitt--ton{background:var(--ton)}
.abschnitt--ton-tief{background:var(--ton-tief)}
.abschnitt--dunkel{background:var(--anker)}
.abschnitt + .abschnitt--ton,
.abschnitt--ton + .abschnitt--ton{border-top:1px solid var(--linie)}

.kopfzeile-abschnitt{max-width:64ch;margin-bottom:var(--luft-s)}
.kopfzeile-abschnitt--mitte{margin-inline:auto;text-align:center}
.kopfzeile-abschnitt--mitte p{margin-inline:auto}

/* Zweispalter, absichtlich nicht 50/50 */
.duo{display:grid;gap:var(--luft-s);align-items:center}
@media (min-width:900px){
  .duo{grid-template-columns:1.05fr 1.35fr;gap:clamp(2rem,4vw,3.6rem)}
  .duo--text-rechts{grid-template-columns:1.35fr 1.05fr}
  .duo--text-rechts .duo__text{order:2}
}
.duo__bild{position:relative;overflow:hidden;border-radius:var(--rund)}
.duo__bild img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .4s ease}
.duo__bild:hover img{transform:scale(1.04)}
.duo__bild figcaption{
  font-size:.88rem;color:var(--tinte-leise);padding:.6rem .2rem 0;
}

/* Bildflaechen mit Schleier (Kundenfotos) */
.bildflaeche{
  background-color:var(--anker);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  color:var(--tinte-hell);
}
.bildflaeche h1,.bildflaeche h2,.bildflaeche h3,.bildflaeche h4{color:#fff}
.bildflaeche .rubrik{color:var(--bernstein-hell)}
.bildflaeche p,.bildflaeche li,.bildflaeche span,.bildflaeche small{color:var(--tinte-hell)}
.bildflaeche a:not(.knopf){color:var(--bernstein-hell)}
.bildflaeche .strich{background:var(--bernstein-hell)}

.bild--top{background-image:linear-gradient(rgba(14,32,24,.62),rgba(14,32,24,.72)),url('bilder/tagespflege-8.png')}
.bild--mehrstunden{background-image:linear-gradient(rgba(14,32,24,.70),rgba(14,32,24,.70)),url('bilder/tagespflege-4.png')}
.bild--medizin{background-image:linear-gradient(rgba(14,32,24,.72),rgba(14,32,24,.72)),url('bilder/medizinische-versorgung-scharf-3.jpg')}
.bild--beratung{background-image:linear-gradient(rgba(14,32,24,.70),rgba(14,32,24,.74)),url('bilder/tagespflege-8.png')}
.bild--grund{background-image:linear-gradient(rgba(14,32,24,.68),rgba(14,32,24,.74)),url('bilder/tagespflege-8.png')}
.bild--buegeln{background-image:linear-gradient(rgba(14,32,24,.70),rgba(14,32,24,.74)),url('bilder/buegeln.jpg')}

/* ---------- Dunkle Flaechen: Schrift ausdruecklich setzen ---------- */
.abschnitt--dunkel,
.abschnitt--dunkel p,
.abschnitt--dunkel li,
.abschnitt--dunkel span,
.abschnitt--dunkel small,
.abschnitt--dunkel dd,
.abschnitt--dunkel dt{color:var(--tinte-hell)}
.abschnitt--dunkel h1,.abschnitt--dunkel h2,.abschnitt--dunkel h3,.abschnitt--dunkel h4{color:#fff}
.abschnitt--dunkel .rubrik{color:var(--bernstein-hell)}
.abschnitt--dunkel .strich{background:var(--bernstein-hell)}
.abschnitt--dunkel .leise{color:#C9D2CB}
.abschnitt--dunkel a:not(.knopf){color:var(--bernstein-hell)}
.abschnitt--dunkel a:not(.knopf):hover{color:#fff}

/* ---------- Aufmacher ---------- */
.hero{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:clamp(24rem,62vh,34rem);
  padding-block:clamp(3.5rem,10vw,6rem);
  overflow:hidden;
}
.hero--klein{min-height:clamp(16rem,38vh,21rem);align-items:center}
.hero__inhalt{width:var(--innen);margin-inline:auto;max-width:min(100% - 2.5rem, 900px)}
.hero h1{max-width:22ch}
.hero__text{font-size:1.1rem;max-width:52ch}
.hero__tasten{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.6rem}
.hero__ruf{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.1rem;
  margin-top:1.5rem;font-family:var(--schrift-kopf);font-size:1.3rem;font-weight:600;
}
.hero__ruf a{color:#fff;text-decoration:none}
.hero__ruf a:hover{color:var(--bernstein-hell)}
.hero__ruf .marke-24{
  font-family:var(--schrift-text);font-size:.85rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  background:var(--bernstein);color:#1B2E25;
  padding:.35rem .8rem;border-radius:var(--kapsel);
}

/* ---------- Schaltflaechen ---------- */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:48px;padding:.9rem 1.75rem;
  font-family:var(--schrift-kopf);font-size:1rem;font-weight:600;line-height:1.2;
  text-decoration:none;border:2px solid transparent;border-radius:var(--kapsel);
  background:var(--gruen);color:#fff;cursor:pointer;
  transition:background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.knopf:hover{background:var(--gruen-tief);color:#fff;transform:translateY(-2px)}
.knopf--bernstein{background:var(--bernstein);color:#1B2E25}
.knopf--bernstein:hover{background:var(--bernstein-hell);color:#14281F}
.knopf--linie{background:transparent;border-color:var(--gruen);color:var(--gruen-tief)}
.knopf--linie:hover{background:var(--gruen);color:#fff}
.knopf--hell{background:#fff;color:var(--anker);border-color:#fff}
.knopf--hell:hover{background:var(--bernstein);color:#1B2E25;border-color:var(--bernstein)}
.knopf--klein{min-height:44px;padding:.7rem 1.25rem;font-size:.95rem}
.tastenreihe{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.5rem}

/* ---------- Symbole ---------- */
[data-symbol]{display:inline-flex;flex:0 0 auto;width:1.15em;height:1.15em;vertical-align:-.15em;color:inherit}
[data-symbol] svg{width:100%;height:100%}
.symbol-halter{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.9rem;height:2.9rem;border-radius:50%;
  background:var(--ton);color:var(--gruen);margin-bottom:1rem;
}
.symbol-halter--gross{width:3.4rem;height:3.4rem;font-size:1.35rem}
.abschnitt--dunkel .symbol-halter,.bildflaeche .symbol-halter{background:rgba(237,241,236,.12);color:var(--bernstein-hell)}

/* ---------- Vertrauensband ---------- */
.band{
  display:grid;gap:1.1rem 1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
  list-style:none;margin:0;padding:0;align-items:start;
}
.band li{
  display:flex;align-items:center;gap:.75rem;
  font-family:var(--schrift-kopf);font-weight:500;
  font-size:clamp(.94rem,.9rem + .15vw,1rem);line-height:1.4;
  overflow-wrap:anywhere;
}
.band li [data-symbol]{color:var(--bernstein);margin-top:0;width:1em;height:1em}
.symbol-halter--klein{
  width:2.15rem;height:2.15rem;margin-bottom:0;
  background:#fff;color:var(--bernstein);
  border:1px solid var(--linie);font-size:.95rem;
}
.symbol-halter--klein [data-symbol]{width:1.05em;height:1.05em;margin-top:0}



#vertrauen .band.band{grid-template-columns:repeat(5,minmax(0,1fr));gap:1.6rem;align-items:start}
  #vertrauen .band li:not(#\9){flex-direction:column;text-align:center;gap:.65rem;justify-content:flex-start}


/* ---------- Hakenlisten ---------- */
.haken-liste{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.6rem}
.haken-liste--zwei{gap:.6rem 1.8rem}
@media (min-width:720px){.haken-liste--zwei{grid-template-columns:1fr 1fr}}
.haken-liste li{display:flex;align-items:flex-start;gap:.65rem;line-height:1.5}
.haken-liste li [data-symbol]{color:var(--gruen);margin-top:.22em;width:1.1em;height:1.1em}
.abschnitt--dunkel .haken-liste li [data-symbol],
.bildflaeche .haken-liste li [data-symbol]{color:var(--bernstein-hell)}

/* ---------- Karten und Raster ---------- */
.raster{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}
.raster--drei{grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr))}
.karte{
  background:#fff;border:1px solid var(--linie);border-radius:var(--rund);
  padding:1.5rem 1.4rem;
  transition:border-color .4s ease, transform .4s ease, background-color .4s ease;
}
.karte h3{margin-bottom:.45rem}
.karte p{font-size:1rem;color:var(--tinte-leise);max-width:none}
.karte:hover{border-color:var(--gruen);transform:translateY(-3px)}
.abschnitt--ton .karte,.abschnitt--ton-tief .karte{background:var(--papier)}
.abschnitt--dunkel .karte{background:var(--anker-hell);border-color:var(--linie-dunkel)}
.abschnitt--dunkel .karte p{color:#C9D2CB}
.karte__mehr{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;
  font-family:var(--schrift-kopf);font-weight:600;font-size:.95rem;text-decoration:none;
}

/* Karte mit Bild */
.karte--bild{padding:0;overflow:hidden;display:flex;flex-direction:column}
.karte--bild img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .4s ease}
.karte--bild:hover img{transform:scale(1.05)}
.karte--bild .karte__text{padding:1.3rem 1.4rem 1.5rem}

/* ---------- Ablauf in Schritten ---------- */
.schritte{list-style:none;margin:0;padding:0;display:grid;gap:1.3rem;counter-reset:schritt}
@media (min-width:820px){.schritte{grid-template-columns:repeat(4,1fr)}}
.schritt{
  counter-increment:schritt;position:relative;
  padding-top:1.1rem;border-top:2px solid var(--linie);
}
.schritt::before{
  content:counter(schritt,decimal-leading-zero);
  display:block;font-family:var(--schrift-kopf);font-size:1.6rem;font-weight:600;
  color:var(--bernstein);line-height:1;margin-bottom:.5rem;
}
.schritt h3{font-size:1.1rem;margin-bottom:.35rem}
.schritt p{font-size:.98rem;color:var(--tinte-leise);max-width:none}
.abschnitt--dunkel .schritt{border-top-color:var(--linie-dunkel)}
.abschnitt--dunkel .schritt p{color:#C9D2CB}

/* ---------- Zahlen ---------- */
.zahlen{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));list-style:none;margin:0;padding:0}
.zahlen li{border-left:2px solid var(--bernstein);padding-left:1.1rem}
.zahlen b{
  display:block;font-family:var(--schrift-kopf);font-weight:600;
  font-size:clamp(1.9rem,1.4rem + 1.4vw,2.4rem);line-height:1.05;
  font-variant-numeric:tabular-nums;color:#fff;
}
.zahlen span{display:block;font-size:.95rem;line-height:1.4;margin-top:.35rem}

/* ---------- Kundenstimmen (Platzhalter) ---------- */
.stimmen__liste{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}
.stimme{background:#fff;border:1px dashed var(--linie);border-radius:var(--rund);padding:1.5rem 1.4rem}
.stimme__text{font-family:var(--schrift-kopf);font-size:1.05rem;color:var(--tinte-leise);max-width:none}
.stimme__text::before{content:'\201E'}
.stimme__text::after{content:'\201C'}
.stimme__wer{margin:.8rem 0 0;font-size:.9rem;color:var(--tinte-leise)}
.platzhalter{opacity:.9}

/* ---------- Galerie ---------- */
.galerie{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));list-style:none;margin:0;padding:0}
.galerie a{display:block;position:relative;overflow:hidden;border-radius:var(--rund);text-decoration:none}
.galerie img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .4s ease}
.galerie a:hover img{transform:scale(1.05)}
.galerie figcaption{
  position:absolute;inset:auto 0 0 0;padding:.7rem .9rem;
  background:rgba(20,40,31,.86);color:var(--tinte-hell);font-size:.9rem;
  transform:translateY(100%);transition:transform .4s ease;
}
.galerie a:hover figcaption,.galerie a:focus-visible figcaption{transform:translateY(0)}

/* ---------- Aufklapper (Fragen) ---------- */
.fragen{display:grid;gap:.7rem}
.frage{background:#fff;border:1px solid var(--linie);border-radius:var(--rund);padding:0 1.2rem}
.frage summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  cursor:pointer;list-style:none;
  padding:1.05rem 0;min-height:48px;
  font-family:var(--schrift-kopf);font-weight:600;font-size:1.05rem;color:var(--anker);
}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:'+';font-size:1.5rem;line-height:1;color:var(--bernstein);transition:transform .3s ease}
.frage[open] summary::after{transform:rotate(45deg)}
.frage__inhalt{padding:0 0 1.2rem}
.frage__inhalt p{color:var(--tinte-leise)}
.abschnitt--ton .frage,.abschnitt--ton-tief .frage{background:var(--papier)}

/* ---------- Kontaktangaben ---------- */
.kontaktliste{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.kontaktliste li{display:flex;gap:.75rem;align-items:flex-start;line-height:1.45}
.kontaktliste [data-symbol]{color:var(--gruen);margin-top:.2em}
.abschnitt--dunkel .kontaktliste [data-symbol],
.bildflaeche .kontaktliste [data-symbol]{color:var(--bernstein-hell)}
.kontaktliste a{text-decoration:none;font-weight:600}
.zeiten{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.zeiten th,.zeiten td{text-align:left;padding:.5rem 0;border-bottom:1px solid var(--linie);font-weight:400}
.zeiten th{font-weight:600;font-family:var(--schrift-kopf)}
.zeiten tr:last-child th,.zeiten tr:last-child td{border-bottom:0}
.tabelle-halter{overflow-x:auto}

/* Notruf-Hinweis */
.notruf{
  display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.2rem;
  background:var(--bernstein);color:#14281F;
  border-radius:var(--rund);padding:1.1rem 1.3rem;margin-top:1.4rem;
}
.notruf strong{color:#14281F;font-family:var(--schrift-kopf);font-size:1.15rem}
.notruf a{color:#14281F;text-decoration:none;font-weight:700}

/* ---------- Karte (laedt nach Klick) ---------- */
[data-karte]{
  background:var(--ton-tief);border:1px solid var(--linie);border-radius:var(--rund);
  min-height:20rem;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1rem;padding:1.6rem;text-align:center;overflow:hidden;
}
[data-karte] iframe{width:100%;height:100%;min-height:20rem;border:0;display:block}
[data-karte] p{color:var(--tinte-leise);font-size:.95rem;max-width:44ch}

/* ---------- Formular ---------- */
.formular{display:grid;gap:1.1rem;max-width:40rem}
.feld{display:grid;gap:.4rem}
.feld label{font-family:var(--schrift-kopf);font-weight:600;font-size:.98rem;color:var(--anker)}
.feld input,.feld textarea,.feld select{
  width:100%;min-height:48px;padding:.75rem .9rem;
  font-family:var(--schrift-text);font-size:1rem;color:var(--tinte);
  background:#fff;border:1px solid var(--linie);border-radius:10px;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.feld textarea{min-height:9rem;resize:vertical}
.feld input:focus,.feld textarea:focus{border-color:var(--gruen);box-shadow:0 0 0 3px rgba(46,106,78,.15);outline:none}
@media (min-width:720px){.formular--zwei{grid-template-columns:1fr 1fr}.formular--zwei .feld--breit,.formular--zwei .einwilligung,.formular--zwei .formular__aktion,.formular--zwei [data-formstatus]{grid-column:1 / -1}}
.einwilligung{display:block;font-size:.95rem;line-height:1.5;color:var(--tinte-leise)}
.einwilligung input{width:1.25rem;height:1.25rem;margin-right:.5rem;vertical-align:-.2em;accent-color:var(--gruen)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.formular-hinweis{
  border-radius:10px;padding:.9rem 1.1rem;font-size:1rem;
  border-left:4px solid var(--gruen);background:var(--ton);color:var(--tinte);
}
.hinweis-ok{border-left-color:#2E6A4E;background:#E7F1EA;color:#1B4030}
.hinweis-fehler{border-left-color:#A32A1E;background:#F8E6E3;color:#6E1C13}

/* ---------- Kopfzeile ---------- */
.kopf{
  position:sticky;top:0;z-index:60;
  background:var(--papier);
  border-bottom:1px solid var(--linie);
  transition:box-shadow .3s ease, padding .3s ease, background-color .3s ease;
}
.kopf.gescrollt{box-shadow:0 1px 0 var(--linie), 0 6px 18px rgba(20,40,31,.07)}
.kopf__innen{
  width:var(--innen);margin-inline:auto;position:relative;
  display:flex;align-items:center;gap:1rem;
  min-height:72px;padding-block:.55rem;
}
.kopf.gescrollt .kopf__innen{min-height:64px}
.marke{display:flex;align-items:center;margin-right:auto;text-decoration:none;flex:0 0 auto}
.marke img{height:40px;width:auto;max-width:190px;object-fit:contain;display:block}
.kopf__nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--papier);border-bottom:1px solid var(--linie);box-shadow:0 12px 20px rgba(20,40,31,.09)}
.menue-schalter:checked ~ .kopf__nav{display:block}
.kopf__nav ul{list-style:none;margin:0;padding:.5rem 1.25rem 1.1rem;display:grid;gap:.15rem}
.kopf__nav a:not(.knopf){
  display:flex;align-items:center;min-height:48px;padding:.5rem 0;
  font-family:var(--schrift-kopf);font-weight:600;font-size:1.05rem;
  color:var(--anker);text-decoration:none;border-bottom:1px solid var(--linie);
  transition:color .3s ease;
}
.kopf__nav a:not(.knopf):hover,.kopf__nav a[aria-current='page']:not(.knopf){color:var(--gruen)}
.menue-schalter{position:absolute;left:-9999px}
.menue-taste{
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:48px;min-width:48px;padding:.5rem .9rem;
  border:1px solid var(--linie);border-radius:var(--kapsel);
  font-family:var(--schrift-kopf);font-weight:600;font-size:.95rem;color:var(--anker);
  cursor:pointer;background:#fff;transition:border-color .3s ease}
.menue-taste:hover{border-color:var(--gruen)}
.menue-taste .balken{position:relative;width:18px;height:2px;background:var(--anker);display:block}
.menue-taste .balken::before,.menue-taste .balken::after{content:'';position:absolute;left:0;width:18px;height:2px;background:var(--anker)}
.menue-taste .balken::before{top:-6px}
.menue-taste .balken::after{top:6px}
.kopf__aktion{display:flex;align-items:center;gap:.6rem}
.kopf__tel{
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:48px;padding:.5rem .9rem;border-radius:var(--kapsel);
  font-family:var(--schrift-kopf);font-weight:700;font-size:1rem;
  color:var(--gruen-tief);text-decoration:none;background:var(--ton);
  transition:background-color .3s ease,color .3s ease}
.kopf__tel:hover{background:var(--gruen);color:#fff}
.kopf__tel .tel-text{display:none}
.kopf__aktion .knopf{display:none}

@media (min-width:1000px){
  .menue-taste{display:none}
  .menue-schalter:checked ~ .kopf__nav,
  .kopf__nav{display:block;position:static;background:none;border:0;box-shadow:none;margin-inline:auto}
  .kopf__nav ul{display:flex;gap:1.5rem;padding:0}
  .kopf__nav a:not(.knopf){min-height:auto;padding:.3rem 0;font-size:.98rem;border-bottom:2px solid transparent}
  .kopf__nav a:not(.knopf):hover,.kopf__nav a[aria-current='page']:not(.knopf){border-bottom-color:var(--bernstein)}
  .kopf__tel .tel-text{display:inline}
  .kopf__aktion .knopf{display:inline-flex}
}
@media (min-width:1180px){.kopf__nav ul{gap:1.9rem}}

/* ---------- Fusszeile ---------- */
.fuss{background:var(--anker);color:var(--tinte-hell);padding-top:var(--luft-m);margin-top:0}
.fuss h3{color:#fff;font-size:1.02rem;letter-spacing:.02em;margin-bottom:.9rem}
.fuss p,.fuss li,.fuss td,.fuss th,.fuss span,.fuss small{color:var(--tinte-hell)}
.fuss a:not(.knopf){color:var(--tinte-hell);text-decoration:none}
.fuss a:not(.knopf):hover{color:var(--bernstein-hell)}
.fuss__raster{display:grid;gap:var(--luft-s);padding-bottom:var(--luft-s)}
@media (min-width:760px){.fuss__raster{grid-template-columns:1.4fr 1fr 1fr}}
@media (min-width:1040px){.fuss__raster{grid-template-columns:1.5fr 1fr 1fr .9fr}}
.fuss__logo{height:46px;width:auto;max-width:200px;object-fit:contain;background:#fff;padding:.45rem .6rem;border-radius:8px;margin-bottom:1rem}
.fuss__liste{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.fuss__liste li{display:flex;gap:.6rem;align-items:flex-start;font-size:.98rem}
.fuss__liste [data-symbol]{color:var(--bernstein-hell);margin-top:.2em}
.fuss .zeiten th,.fuss .zeiten td{border-bottom-color:var(--linie-dunkel);font-size:.95rem;padding:.35rem 0}
.fuss__unten{
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;justify-content:space-between;
  border-top:1px solid var(--linie-dunkel);padding-block:1.1rem;
}
.fuss__unten p{margin:0;font-size:.9rem;color:#C9D2CB}
.fuss__recht{display:flex;gap:1.2rem;flex-wrap:wrap}
.fuss__recht a{font-size:.9rem}

/* ---------- Nach oben ---------- */
.nach-oben,[data-nach-oben]{
  position:fixed;right:1rem;bottom:1rem;z-index:50;
  width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:var(--gruen);color:#fff;cursor:pointer;
  transition:background-color .3s ease, opacity .3s ease}
.nach-oben:hover,[data-nach-oben]:hover{background:var(--anker)}

/* ---------- Rechtstexte ---------- */
.rechtstext{width:min(100% - 2.5rem, 46rem);margin:var(--luft-m) auto var(--luft-l);}
.rechtstext h1{margin-bottom:1.2rem}
.rechtstext h2{font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem);margin-top:2.2rem}
.rechtstext h3{margin-top:1.6rem;font-size:1.1rem}
.rechtstext p,.rechtstext li{max-width:70ch}
.rechtstext ul,.rechtstext ol{padding-left:1.3rem;margin:0 0 1.1em}
.rechtstext li{margin-bottom:.4em}
.rechtstext a{word-break:break-word}

/* ---------- Ruhiges Einblenden ---------- */
.js-zeigen [data-zeigen]{opacity:0;transform:translateY(20px);transition:opacity .4s ease, transform .4s ease}
.js-zeigen [data-zeigen].sichtbar{opacity:1;transform:none}
.js-zeigen [data-zeigen]:nth-child(2){transition-delay:.07s}
.js-zeigen [data-zeigen]:nth-child(3){transition-delay:.14s}
.js-zeigen [data-zeigen]:nth-child(4){transition-delay:.21s}

/* Rueckfallebene: ohne Skript bleibt alles sichtbar */
@media (scripting:none){.js-zeigen [data-zeigen]:not(#\9){opacity:1;transform:none}}
.hero__inhalt{animation:heran 12s ease forwards}
@keyframes heran{from{transform:scale(1.01)}to{transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .js-zeigen [data-zeigen]:not(#\9){opacity:1;transform:none}
  html{scroll-behavior:auto}
}


/* === Angepasst über das Wunsch-Feld === */
/* Telefon-Schaltflaeche in der Kopfzeile: kleineres Symbol, gleichmaessige Innenabstaende */
.kopf__tel{
  align-items:center;
  line-height:1;
  padding-block:.5rem;
  padding-inline:.9rem;
}
.kopf__tel [data-symbol]{
  width:.95em;
  height:.95em;
  vertical-align:middle;
  margin:0;
  align-self:center;
}
.kopf__tel .tel-text{
  line-height:1;
  display:none;
}
@media (min-width:1000px){
  .kopf__tel .tel-text{display:inline-block}
}
/* === Ende Anpassungen === */


.galerie-bild{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;}

/* === Textfarbe Zustände: znbi0qv === */
[data-zustand="znbi0qv"], [data-zustand="znbi0qv"] *:not([data-farbe]):not([data-farbe] *):not([data-symbol-eigen]):not([data-symbol-eigen] *) { color: #ffffff !important; }
/* === Ende Textfarbe Zustände znbi0qv === */

/* === Textfarbe Zustände: zuuulgm === */
[data-zustand="zuuulgm"], [data-zustand="zuuulgm"] *:not([data-farbe]):not([data-farbe] *):not([data-symbol-eigen]):not([data-symbol-eigen] *) { color: #ffffff !important; }
/* === Ende Textfarbe Zustände zuuulgm === */

/* === Textfarbe Zustände: zfwsb2n === */
[data-zustand="zfwsb2n"], [data-zustand="zfwsb2n"] *:not([data-farbe]):not([data-farbe] *):not([data-symbol-eigen]):not([data-symbol-eigen] *) { color: #ffffff !important; }
/* === Ende Textfarbe Zustände zfwsb2n === */

/* === Textfarbe Zustände: z3hzm2v === */
[data-zustand="z3hzm2v"], [data-zustand="z3hzm2v"] *:not([data-farbe]):not([data-farbe] *):not([data-symbol-eigen]):not([data-symbol-eigen] *) { color: #ffffff !important; }
/* === Ende Textfarbe Zustände z3hzm2v === */

/* === Textfarbe Zustände: z4xpkku === */
[data-zustand="z4xpkku"], [data-zustand="z4xpkku"] *:not([data-farbe]):not([data-farbe] *):not([data-symbol-eigen]):not([data-symbol-eigen] *) { color: #ffffff !important; }
/* === Ende Textfarbe Zustände z4xpkku === */

/* === Textfarbe Zustände: z48csmj === */
[data-zustand="z48csmj"], [data-zustand="z48csmj"] *:not([data-farbe]):not([data-farbe] *):not([data-symbol-eigen]):not([data-symbol-eigen] *) { color: #ffffff !important; }
/* === Ende Textfarbe Zustände z48csmj === */


/* Knopf mit Symbol im Aufmacher: gleiche Masse wie alle Schaltflaechen */
.knopf--symbol{gap:.55rem}
.knopf--symbol [data-symbol]{width:1.1em;height:1.1em;color:inherit}



/* ---------- Schaltflaechen: einheitliche Masse (Bezug: Knopf in der Kopfzeile) ---------- */
.knopf,
button.knopf,
a.knopf{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.55rem;
  min-height:48px;
  padding:.75rem 1.5rem;
  font-family:var(--schrift-kopf);
  font-size:1rem;
  font-weight:600;
  line-height:1.2;
  max-width:100%;
  text-align:center;
}
.knopf [data-symbol]{
  width:1.1em;height:1.1em;
  flex:0 0 auto;
  margin:0;
  align-self:center;
  vertical-align:middle;
  color:inherit;
}
.knopf [data-symbol] svg{width:100%;height:100%;display:block}

/* kleine Variante: gleiche Proportionen, nur eine Stufe kompakter */
.knopf--klein,
button.knopf--klein,
a.knopf--klein{min-height:44px;padding:.6rem 1.2rem;font-size:.95rem}
.knopf--klein [data-symbol]{width:1.05em;height:1.05em}

/* Knopf und Telefon-Kapsel in der Kopfzeile auf dieselbe Hoehe bringen */
.kopf__aktion .knopf{min-height:48px;padding:.65rem 1.3rem;font-size:.98rem}
.kopf__tel [data-symbol]{width:1.1em;height:1.1em}

/* Tastenreihen: gleichmaessiger Abstand, ab 360px umbruchsicher */
.tastenreihe,.hero__tasten{gap:.75rem}
@media (max-width:420px){
  .knopf{width:100%;padding-inline:1.1rem}
}


/* ---------- Vertrauensband: Symbole exakt ausgerichtet ---------- */
#vertrauen .band{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
  gap:clamp(1rem,.85rem + .5vw,1.5rem);
  align-items:start;
  list-style:none;margin:0;padding:0;
}
#vertrauen .band li{
  display:flex;align-items:center;gap:.8rem;
  min-width:0;margin:0;
  font-size:clamp(.94rem,.9rem + .15vw,1rem);line-height:1.45;
}
#vertrauen .band .symbol-halter{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:clamp(2.25rem,2.1rem + .4vw,2.5rem);
  height:clamp(2.25rem,2.1rem + .4vw,2.5rem);
  margin:0;padding:0;
  font-size:1rem;line-height:1;
  border-radius:50%;
}
#vertrauen .band .symbol-halter [data-symbol]{
  display:block;
  width:1.15em;height:1.15em;
  margin:0;vertical-align:middle;
}
#vertrauen .band .symbol-halter [data-symbol] svg{
  display:block;width:100%;height:100%;
}
@media (min-width:1000px){
  #vertrauen .band{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:1.6rem;align-items:start;
  }
  #vertrauen .band li{
    flex-direction:column;align-items:center;justify-content:flex-start;
    text-align:center;gap:.7rem;
  }
}

/* === Textfarbe Zustände: z37vfr9 === */
[data-zustand="z37vfr9"], [data-zustand="z37vfr9"] *:not([data-farbe]):not([data-farbe] *):not([data-symbol-eigen]):not([data-symbol-eigen] *) { color: #000000 !important; }
/* === Ende Textfarbe Zustände z37vfr9 === */


/* Aufmacher Startseite: Schleier deutlich transparenter, Bildfarben bleiben sichtbar */
.bild--top.bild--top-leicht{
  background-image:linear-gradient(rgba(14,32,24,.08),rgba(14,32,24,.15)),url('bilder/tagespflege-8.png');
}
.bild--top.bild--top-leicht .hero__inhalt{
  text-shadow:0 1px 14px rgba(14,32,24,.75), 0 1px 3px rgba(14,32,24,.55);
}

/* === Angepasst über das Wunsch-Feld (Fuß) === */
/* Fusszeile: Logo ohne weisse Flaeche */
.fuss .fuss__logo{
  background:transparent;
  padding:0;
  border-radius:0;
}

/* Fusszeile: Logo etwas groesser */
.fuss .fuss__logo{
  height:auto;
  width:clamp(200px, 60%, 280px);
  max-width:280px;
}

/* ---------- Fusszeile: Symbole harmonisch ---------- */
.fuss__liste{gap:.75rem}
.fuss__liste li{
  display:flex;
  align-items:center;
  gap:.7rem;
  font-size:.97rem;
  line-height:1.5;
  min-width:0;
}
.fuss__liste li:empty{display:none}

/* runde, dezente Halteflaeche im Stil der uebrigen Symbolkreise */
.fuss .fuss__liste [data-symbol]{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2rem;
  height:2rem;
  margin:0;
  padding:0;
  font-size:1rem;
  line-height:1;
  border-radius:50%;
  background:rgba(237,241,236,.08);
  border:1px solid var(--linie-dunkel);
  color:var(--bernstein-hell);
  transition:background-color .3s ease, border-color .3s ease, color .3s ease;
}
.fuss .fuss__liste [data-symbol] svg{
  display:block;
  width:1.05em;
  height:1.05em;
  stroke-width:1.6;
}
.fuss .fuss__liste li:hover [data-symbol],
.fuss .fuss__liste li:focus-within [data-symbol]{
  background:rgba(217,140,39,.20);
  border-color:rgba(239,181,92,.45);
  color:#fff;
}

/* Uhr-Symbol im Hinweistext: gleiche Anmutung, ohne Kreis */
.fuss .leise [data-symbol]{
  width:1.05em;
  height:1.05em;
  margin:0 .15rem 0 0;
  color:var(--bernstein-hell);
  vertical-align:-.16em;
}
.fuss .leise [data-symbol] svg{width:100%;height:100%;display:block;stroke-width:1.6}

/* Links in der Seitenliste sauber ohne Symbolkreis ausrichten */
.fuss__liste a{font-weight:500}
/* === Ende Anpassungen (Fuß) === */


/* Leistungen: etwas breitere Buehne fuer ein ausgewogeneres Raster */
#leistungen > .innen{width:min(100% - 2.5rem, 1360px)}

/* Grundpflege (Leistungen): Text 60 %, Bild 40 % */
@media (min-width:900px){
  .duo--6040{grid-template-columns:60fr 40fr}
}

/* Grundpflege (Leistungen): Text 50 %, Bild 50 % */
@media (min-width:900px){
  .duo--5050{grid-template-columns:repeat(2, minmax(0,1fr))}
}

/* ---------- Symbole im Abschnitt "Persönlich beraten lassen" ---------- */
#beratung-anfragen .ruf__nummer{gap:.8rem}
#beratung-anfragen .ruf__nummer [data-symbol]{
  width:clamp(2.3rem,2.05rem + .9vw,2.7rem);height:clamp(2.3rem,2.05rem + .9vw,2.7rem);
  padding:.6rem;box-sizing:border-box;border-radius:50%;
  background:var(--bernstein);color:#14281F;
  vertical-align:middle;transition:background .3s ease,color .3s ease;
}
#beratung-anfragen .ruf__nummer:hover [data-symbol]{background:var(--gruen);color:#fff}
#beratung-anfragen .ruf__marke{color:var(--gruen-tief)}
#beratung-anfragen .ruf__marke [data-symbol]{width:1.05em;height:1.05em;color:var(--bernstein)}
#beratung-anfragen .kontaktliste{gap:1rem}
#beratung-anfragen .kontaktliste li{align-items:center;overflow-wrap:anywhere}
#beratung-anfragen .kontaktliste [data-symbol]{
  width:2.1rem;height:2.1rem;flex:0 0 auto;
  padding:.5rem;box-sizing:border-box;border-radius:50%;
  background:var(--ton);color:var(--gruen-tief);
  border:1px solid var(--linie);margin-top:0;
}
#beratung-anfragen .knopf [data-symbol]{width:1.05em;height:1.05em;vertical-align:-.1em}


/* ---------- Vertrauensband: mobile Ansicht vertikal ---------- */
@media (max-width:639px){
  #vertrauen .band{
    grid-template-columns:1fr;
    gap:1.35rem;
    justify-items:center;
  }
  #vertrauen .band li{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:.6rem;
    max-width:24ch;
    font-size:clamp(.95rem,.92rem + .3vw,1.05rem);
    line-height:1.45;
  }
  #vertrauen .band .symbol-halter--klein{
    width:2.7rem;height:2.7rem;font-size:1.15rem;
  }
}

/* === Breite: #aufmacher a#0.knopf === */
#aufmacher > .hero__inhalt { max-width: 480px !important; }
#aufmacher > .hero__inhalt > .hero__tasten { max-width: 480px !important; width: auto !important; }
/* === Ende Breite #aufmacher a#0.knopf === */


/* ---------- Vorschalt-Bild ---------- */
html.laedt { overflow: hidden; }
.lader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  /* Halbdurchsichtig mit Weichzeichner: die Seite ist dahinter zu erahnen
     und kommt beim Ausblenden zum Vorschein - statt einer toten Flaeche. */
  background: color-mix(in srgb, var(--lader-farbe, var(--papier, var(--paper, #fff))) var(--lader-deckung, 68%), transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  transition: opacity .7s cubic-bezier(.4,0,.2,1),
              visibility .7s,
              -webkit-backdrop-filter .7s ease,
              backdrop-filter .7s ease;
}
/* Kein Weichzeichner im Browser? Dann deckend, damit nichts flackert. */
@supports not (backdrop-filter: blur(2px)) {
  .lader { background: var(--lader-farbe, var(--papier, var(--paper, #fff))); }
}
.lader--fertig {
  opacity: 0; visibility: hidden;
  /* Sobald das Vorschaltbild fertig ist, darf es KEINE Klicks mehr
     abfangen. Bisher haing das allein an visibility:hidden - und das
     wird ueber 0,7 s hinweg uebergeblendet. In dieser Zeit lag eine
     unsichtbare Flaeche mit z-index 9999 ueber der ganzen Seite, und
     jeder Fingertipp landete dort statt auf dem Menue.
     pointer-events wird nicht uebergeblendet, gilt also sofort. */
  pointer-events: none;
  -webkit-backdrop-filter: blur(0) saturate(1);
  backdrop-filter: blur(0) saturate(1);
}
/* Das Sicherheitsnetz der Laufzeit setzt nach 700 ms das hidden-Attribut.
   Ohne diese Regel bleibt es wirkungslos: .lader mit display:grid hat
   dieselbe Gewichtung und steht spaeter, gewinnt also. Auf der Seite von
   Motorgeraete Freitag war genau das zu messen - hidden gesetzt, display
   trotzdem grid. */
.lader[hidden] { display: none !important; }
.lader--fertig .lader-inhalt { transform: scale(1.04); opacity: 0; }
.lader-inhalt { transition: transform .7s cubic-bezier(.4,0,.2,1), opacity .5s ease; }
.lader-inhalt { display: grid; justify-items: center; gap: 1.5rem; }
.lader-logo { height: clamp(40px, 8vw, 72px); width: auto; }

/* SVG-Logo: wird von links mit der Akzentfarbe gefuellt */
.lader-logo--svg svg { height: 100%; width: auto; display: block; }
.lader-logo--svg svg * { fill: color-mix(in srgb, currentColor 16%, transparent) !important; stroke: none !important; }
.lader-logo--svg .lader-fuellung * { fill: var(--gold, var(--accent, #C8901F)) !important; }
.lader-logo--svg .lader-fuellung {
  position: absolute; inset: 0;
  clip-path: inset(0 100% 0 0);
  animation: logoFuellen 1.25s cubic-bezier(.5,0,.2,1) forwards;
}
.lader-logo--svg { position: relative; display: inline-block; }
@keyframes logoFuellen { to { clip-path: inset(0 0 0 0); } }

/* Bild-Logo: Graustufen, wird farbig aufgedeckt */
.lader-logo--bild { position: relative; display: inline-block; height: clamp(40px, 8vw, 72px); }
.lader-logo--bild img { height: 100%; width: auto; display: block; }
.lader-logo--bild > img:first-child { filter: grayscale(1) opacity(.22); }
.lader-logo__farbe {
  position: absolute; inset: 0;
  clip-path: inset(0 100% 0 0);
  animation: logoFuellen 1.25s cubic-bezier(.5,0,.2,1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .lader-logo--svg .lader-fuellung, .lader-logo__farbe { clip-path: none; }
  .lader-logo--bild > img:first-child { filter: none; }
}
.lader-wort {
  font-family: var(--font-display, var(--schrift-display, serif));
  font-size: clamp(1.5rem, 1rem + 2.6vw, 2.75rem);
  font-weight: 700; letter-spacing: -.03em;
  color: color-mix(in srgb, var(--tinte, var(--ink, #222)) 18%, transparent);
  background-image: linear-gradient(90deg,
    var(--gold, var(--accent, #C8901F)) 0 50%,
    color-mix(in srgb, var(--tinte, var(--ink, #222)) 18%, transparent) 50% 100%);
  background-size: 200% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: laderFuellen 1.15s cubic-bezier(.5,0,.2,1) forwards;
}
@keyframes laderFuellen { to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .lader-wort { -webkit-text-fill-color: currentColor; color: var(--tinte, var(--ink, #222)); }
}

/* ---------- Cookie-Hinweis ---------- */
.cookie {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 9000;
  max-width: 34rem; margin-inline: auto;
  display: grid; gap: 1rem;
  padding: 1.25rem 1.4rem;
  background: var(--tinte, var(--paper-deep, #1b1b1b)); color: #fff;
  border-radius: var(--radius-lg, 10px);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.55);
  transform: translateY(130%); transition: transform .45s cubic-bezier(.16,1,.3,1);
  font-size: .9375rem;
}
.cookie.sichtbar { transform: none; }
.cookie b { display: block; margin-bottom: .4rem; }
.cookie p { color: rgba(255,255,255,.78); line-height: 1.55; margin: 0; max-width: none; }
.cookie a { color: #fff; }
.cookie-knoepfe { display: flex; gap: .6rem; flex-wrap: wrap; }
.cookie-knoepfe button { padding: .65rem 1.2rem; border-radius: var(--radius, 5px); border: 1px solid rgba(255,255,255,.3); background: none; color: #fff; cursor: pointer; font-size: .9rem; }
.cookie-ok { background: var(--gold, var(--accent, #C8901F)) !important; border-color: transparent !important; color: #1b1b1b !important; font-weight: 600; }
@media (min-width: 620px) { .cookie { grid-template-columns: 1fr auto; align-items: center; } }

/* ---------- WhatsApp ---------- */
.wa-knopf {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 8000;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff;
  box-shadow: 0 10px 26px -8px rgba(37,211,102,.7);
  transition: transform .2s ease;
}
.wa-knopf:hover { transform: scale(1.07); }
.wa-knopf svg { width: 28px; height: 28px; }

/* ---------- Nach oben ---------- */
.nach-oben {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 7900;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--tinte, var(--paper-deep, #1b1b1b)); color: #fff; border: 0;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease;
}
.nach-oben.sichtbar { opacity: 1; pointer-events: auto; transform: none; }
.nach-oben svg { width: 20px; height: 20px; }

/* Sicherheitsnetz gegen riesige Symbole. Ein eingebettetes SVG ohne Breite
   und Hoehe waechst auf die volle Zeilenbreite - bei Jacob fuellte eine Uhr
   den halben Bildschirm, nachdem ein Umbau den Abschnitt mit Klassen
   versehen hatte, fuer die das Stylesheet keine Regel kennt. :where() haelt
   die Gewichtung bei null, damit jede echte Gestaltungsregel gewinnt. */
main :where(svg.symbol:not([width]):not([height])) { width: 1.25em; height: 1.25em; vertical-align: -0.2em; }
main :where(svg:not([width]):not([height]):not([class])) { width: 2.25rem; height: 2.25rem; max-width: 100%; }
.wa-knopf ~ .nach-oben, body:has(.wa-knopf) .nach-oben { bottom: 4.9rem; }

/* ---------- Einblenden ---------- */
.js-zeigen [data-zeigen] {
  opacity: 0; transform: translateY(18px);
  transition:opacity 0.45s cubic-bezier(.16,1,.3,1), transform 0.45s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--verzug, 0ms);
}
.js-zeigen [data-zeigen].sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-zeigen [data-zeigen] { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ---------- Lightbox ---------- */
dialog.lichtkasten { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 94vh; overflow: visible; }
dialog.lichtkasten::backdrop { background: rgba(0,0,0,.9); }
dialog.lichtkasten img { max-height: 88vh; max-width: 90vw; width: auto; border-radius: 4px; }
dialog.lichtkasten button { position: absolute; background: none; border: 0; color: #fff; cursor: pointer; line-height: 1; }
.lk-zu { top: -2.6rem; right: 0; font-size: 2.2rem; }
.lk-vor, .lk-nach { top: 50%; transform: translateY(-50%); font-size: 3.2rem; padding: 0 1rem; opacity: .7; }
.lk-vor { left: -3.5rem; } .lk-nach { right: -3.5rem; }
.lk-vor:hover, .lk-nach:hover { opacity: 1; }
@media (max-width: 780px) { .lk-vor { left: -.5rem; } .lk-nach { right: -.5rem; } }


/* Bauteile wiederhergestellt – spätere Regeln hatten Polster
   oder Rahmen entfernt, die zum Bauteil gehören. */
.fuss__raster img.fuss__logo{ padding:.45rem .6rem; }


/* Kontrast nachgezogen – spezifischere Regeln hatten die
   Schriftfarbe überschrieben, ohne den Grund mitzunehmen. */
.leise span.symbol-halter{ color:#1a1a1a; }
.ruf__marke span.symbol-halter{ color:#1a1a1a; }