/* ==========================================================
   Handbetrieb – hand-betrieb.de
   Stylesheet. Systemschriften (kein Google-Fonts-Einbinden,
   damit keine IP-Adressen an Dritte übertragen werden).
   ========================================================== */

:root{
  --red: #B3121B;
  --red-dark: #8C0E15;
  --black: #1A1A1A;
  --ink: #2B2A28;
  --grey: #5B5952;
  --grey-light: #8A8780;
  --line: #E4E1D9;
  --bg: #FAF8F4;
  --bg-alt: #F1EEE6;
  --white: #FFFFFF;
  --radius: 6px;
  --maxw: 1140px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;
  overflow-wrap: break-word;
}
img{ max-width:100%; display:block; }
a{ color: var(--red); text-decoration: none; }
a:hover{ text-decoration: underline; }
/* Links im Fließtext und in Hinweiskästen unterstrichen – nicht nur an der Farbe erkennbar (Barrierefreiheit) */
section p a:not(.btn), .note-box a{ text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
h1,h2,h3,h4{ font-family: var(--font); font-weight: 800; color: var(--black); line-height:1.2; margin: 0 0 .5em; hyphens: auto; }
h1{ font-size: clamp(1.7rem, 4vw, 2.9rem); }
h2{ font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
h3, h2.h3{ font-size: 1.2rem; }
p{ margin: 0 0 1em; }
ul{ margin:0 0 1em; padding-left: 1.2em; }
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.section{ padding: 64px 0; }
.section-alt{ background: var(--bg-alt); }
.small{ font-size: .92rem; color: var(--grey); }
.eyebrow{ text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 700; color: var(--red); margin-bottom: .6em; display:block; }
.lead{ font-size: 1.15rem; color: var(--grey); }
.center{ text-align:center; }

/* Buttons */
.btn{
  display:inline-block; padding: 13px 26px; border-radius: var(--radius);
  font-weight: 700; text-decoration:none; border: 2px solid var(--red);
  transition: all .15s ease; cursor:pointer; font-size: 1rem;
}
.btn-primary{ background: var(--red); color: var(--white); }
.btn-primary:hover{ background: var(--red-dark); border-color: var(--red-dark); text-decoration:none; }
.btn-outline{ background: transparent; color: var(--black); border-color: var(--black); }
.btn-outline:hover{ background: var(--black); color: var(--white); text-decoration:none; }
.btn-white{ background: var(--white); color: var(--black); border-color: var(--white); }
.btn-white:hover{ background: transparent; color: var(--white); text-decoration:none; }

/* Header */
.site-header{
  position: sticky; top:0; z-index: 100; background: var(--white);
  border-bottom: 1px solid var(--line);
}
.site-header .inner{ display:flex; align-items:center; justify-content:space-between; padding: 14px 20px; max-width: var(--maxw); margin:0 auto; }
.logo{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.12rem; color: var(--black); }
.logo .mark{
  height:38px; width:auto; display:block; flex: none;
}
.claim > span::before{ content: attr(data-z); }
.logo .claim{ display:flex; justify-content:space-between; margin-top:3px; font-size:.6rem; font-weight:600; letter-spacing:0; color: var(--red); text-transform:uppercase; }
.logo-text{ display:inline-flex; flex-direction:column; line-height:1.1; text-transform:uppercase; letter-spacing:.14em; }
.logo-name{ margin-right:-.14em; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
nav.main-nav ul{ list-style:none; display:flex; gap: 22px; margin:0; padding:0; align-items:center; }
nav.main-nav a{ color: var(--ink); font-weight:600; font-size: .96rem; }
nav.main-nav a:hover{ color: var(--red); text-decoration:none; }
.nav-cta{ background: var(--red); color:var(--white) !important; padding: 9px 18px; border-radius: var(--radius); }
.nav-cta:hover{ background: var(--red-dark); }
.nav-toggle{ display:none; background:none; border:none; font-size:1.6rem; cursor:pointer; color:var(--black); }
@media (max-width: 1100px){ /* seit 10/2026 wegen des breiteren Schriftzugs im Logo-Stil (vorher 1060px) */
  nav.main-nav{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--white); border-bottom:1px solid var(--line); }
  nav.main-nav.open{ display:block; }
  nav.main-nav ul{ flex-direction:column; align-items:stretch; padding: 10px 20px 20px; gap:4px; }
  nav.main-nav a{ display:block; padding: 10px 0; border-bottom:1px solid var(--line); }
  .nav-cta{ display:inline-block; margin-top:8px; text-align:center; }
  .nav-toggle{ display:block; }
}

/* Hero */
.hero{ background: var(--black); color: var(--white); padding: 76px 0 68px; position:relative; overflow:hidden; }
.hero::after{ content:""; position:absolute; right:-10%; top:-30%; width:60%; height:160%; background: var(--red); opacity:.12; transform: rotate(18deg); }
.hero .container{ position:relative; z-index:0; }
.hero .eyebrow{ color:#FF6B63; }
.hero h1{ color: var(--white); max-width: 780px; }
.hero p.lead{ color:#D8D5CC; max-width: 640px; }
.hero .cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 26px; }
.hero .badges{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 26px 32px; margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.15); }
.hero .badges div{ font-size:.88rem; color:#C9C6BD; }
.hero .badges strong{ display:block; font-size:1.5rem; color:var(--white); }
@media (max-width: 700px){ .hero .badges{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px){ .hero .badges{ grid-template-columns: 1fr; } }

/* Cards / grids */
.grid{ display:grid; gap: 24px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px){ .grid-3, .grid-2, .grid-4{ grid-template-columns: minmax(0,1fr); } }
@media (min-width: 861px) and (max-width: 1100px){ .grid-4{ grid-template-columns: repeat(2, 1fr); } }

.card{
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; height:100%;
}
.icon{ display:inline-block; width:24px; height:24px; color: var(--red); }
.icon svg{ width:100%; height:100%; display:block; }
.card .icon{ width:46px; height:46px; margin-bottom: 14px; color: var(--red); }
.card h3, .card h2.h3{ margin-bottom:.4em; }
.card a.more{ font-weight:700; font-size:.92rem; }

/* Leistungskarten: weiße, erhabene Karte mit klarem Foto-Band oben */
.card-photo{ display:flex; flex-direction:column; padding:0; overflow:hidden; box-shadow: 0 10px 28px -12px rgba(26,26,26,.28); transition: transform .25s ease, box-shadow .25s ease; }
.card-photo img{ width:100%; height:auto; aspect-ratio: 800 / 436; object-fit:cover; border-radius:0; transition: transform .5s ease; }
.card-photo .card-body{ display:flex; flex-direction:column; flex:1; padding: 22px 26px 26px; }
.card-photo .card-body .more{ margin-top:auto; padding-top:8px; }
@media (min-width: 561px) and (max-width: 860px){ .card-photo img{ aspect-ratio: 12 / 5; } }
.card-photo:hover{ transform: translateY(-4px); box-shadow: 0 18px 36px -14px rgba(26,26,26,.34); }
.card-photo:hover img{ transform: scale(1.04); }
@media (prefers-reduced-motion: reduce){ .card-photo, .card-photo img{ transition:none; } .card-photo:hover, .card-photo:hover img{ transform:none; } }

.tile{
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; display:flex; gap:16px; align-items:flex-start;
}
.tile .icon{ width:34px; height:34px; color: var(--red); flex:none; margin-top:2px; }
.tile > div{ min-width:0; hyphens:auto; }
.contact-tiles .tile .icon{ color: #A5A7A6; }

/* Value / quote strip */
.quote-strip{ background: var(--bg-alt); border-left: 5px solid var(--red); padding: 26px 30px; border-radius: var(--radius); margin: 24px 0; }
.quote-strip p{ font-size:1.15rem; font-style:italic; color: var(--black); margin:0; }

/* Trust bar */

/* CTA band */
.cta-band{ background: var(--red); color: var(--white); padding: 54px 0; text-align:center; }
.cta-band h2{ color: var(--white); }
.cta-band p{ color: #FCE6E4; }

/* FAQ */
details.faq{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius); padding: 4px 22px; margin-bottom: 12px; }
details.faq summary{ cursor:pointer; font-weight:700; padding: 16px 0; list-style:none; position:relative; padding-right: 30px;}
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary::after{ content:"+"; position:absolute; right:0; top:14px; font-size:1.4rem; color: var(--red); }
details.faq[open] summary::after{ content:"–"; }
details.faq .answer{ padding: 0 0 18px; color: var(--grey); }

/* Table (Zertifikate / Übersicht) */
table.plain{ width:100%; border-collapse: collapse; margin: 0 0 1.4em; }
table.plain th, table.plain td{ text-align:left; padding: 12px 14px; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
table.plain th{ background: var(--bg-alt); font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; color: var(--grey); }

/* Breadcrumb */
.breadcrumb{ font-size:.85rem; color: var(--grey); padding: 16px 0 0; }
.breadcrumb a{ color: var(--grey); }

/* Footer */
footer.site-footer{ background: var(--black); color:#C9C6BD; padding: 56px 0 26px; margin-top: 40px; }
footer.site-footer h2{ color:var(--white); font-size:.95rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:1em; }
footer.site-footer a{ color:#C9C6BD; }
footer.site-footer .small{ color:#A8A59C; } /* Kontrast 7:1 auf dem dunklen Hintergrund (vorher 2,5:1) */
footer.site-footer a:hover{ color: var(--white); }
footer.site-footer .grid{ grid-template-columns: 1.4fr 1fr 1fr 1fr; }
footer.site-footer ul{ list-style:none; padding:0; margin:0; }
footer.site-footer li{ margin-bottom:.5em; }
footer.site-footer .logo{ font-size:1.6rem; }
footer.site-footer .claim{ color: #FF6B63; font-weight:700; font-size:.66rem; text-transform:uppercase; letter-spacing:0; }
footer.site-footer .social-row{ display:flex; justify-content:center; gap:18px; margin-top: 40px; }
footer.site-footer .social-row a{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.25); color:#C9C6BD; transition: all .15s ease; }
footer.site-footer .social-row a:hover{ color:#fff; border-color:#fff; background: rgba(255,255,255,.08); }
footer.site-footer .social-row .icon{ width:20px; height:20px; }
footer.site-footer .bottom{ border-top:1px solid #3A3936; margin-top: 24px; padding-top: 20px; font-size:.82rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:#8A877E; }
@media (max-width: 860px){ footer.site-footer .grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ footer.site-footer .grid{ grid-template-columns: 1fr; } }

/* Forms */
form.contact-form{ display:grid; gap: 16px; }
form.contact-form label{ font-weight:700; font-size:.9rem; display:block; margin-bottom:6px; }
form.contact-form input, form.contact-form select, form.contact-form textarea{
  width:100%; padding: 12px 14px; border:1px solid var(--line); border-radius: var(--radius);
  font-family: var(--font); font-size:1rem; background:var(--white);
  transition: border-color .15s ease, box-shadow .15s ease;
}
form.contact-form input:hover, form.contact-form select:hover, form.contact-form textarea:hover{
  border-color: var(--grey-light);
}
form.contact-form input:focus, form.contact-form select:focus, form.contact-form textarea:focus{
  border-color: var(--red); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent);
}
form.contact-form textarea{ min-height: 130px; resize: vertical; }
.hp-field{ display:none; } /* Spam-Falle: unsichtbar, auch für Vorlese-Programme */
.form-row-2{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width:700px){ .form-row-2{ grid-template-columns:1fr; } }

/* Misc */
.list-check{ list-style:none; padding:0; }
.list-check li{ padding-left: 30px; position:relative; margin-bottom:.6em; }
.list-check li::before{
  content:"";
  position:absolute; left:0; top:.2em;
  width:16px; height:16px;
  background: url('../img/logo-icon.png') center / contain no-repeat;
}

.two-col{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 46px; align-items:start; }
.two-col > *, .grid > *{ min-width: 0; }
@media (max-width: 860px){ .two-col{ grid-template-columns: minmax(0,1fr); } }
.two-col > .card{ height:auto; align-self:start; }

/* Illustrationen (eigene Vektor-Grafiken) bzw. echte Fotos in denselben Slots */
.illus{ width:100%; align-self:center; }
.illus svg{ width:100%; height:auto; display:block; }
.illus img{ width:100%; height:auto; display:block; border-radius: var(--radius); object-fit:cover; }
.illus.small{ max-width:300px; margin:0 auto; }
.illus.round{ max-width:380px; margin:0 auto; aspect-ratio:1/1; }
.illus.round img{ width:100%; height:100%; border-radius:50%; object-fit:cover; box-shadow:0 0 0 6px var(--white), 0 0 0 8px var(--line), 0 20px 40px -12px rgba(26,26,26,.35); }

.hero-illus{ position:absolute; inset:0; align-self:stretch; z-index:-1; display:flex; align-items:center; justify-content:center; opacity:.24; pointer-events:none; overflow:hidden; }
.hero-illus svg{ width:100%; max-width:1040px; height:auto; }
@media (max-width: 700px){ .hero-illus{ opacity:.18; } .hero-illus svg{ width:160%; max-width:620px; } }
/* Sobald ein echtes Foto im Hero-Slot liegt: volles Hintergrundbild statt blasser Deko-Grafik */
.hero-illus:has(img){ opacity:1; }
.hero:has(.hero-illus img){ z-index:0; }
.hero:has(.hero-illus img) .container{ position:static; }
.hero-illus img{ width:100%; height:100%; border-radius:0; object-fit:cover; object-position:center; filter: blur(4px); transform: scale(1.05); }
/* Startbild: sehr langsamer Zoom (30 s hinein, 30 s wieder hinaus) – kaum bemerkbar, gibt dem Einstieg etwas Leben */
.hero-illus img{ animation: hero-zoom 30s ease-in-out infinite alternate; will-change: transform; }
@keyframes hero-zoom{ from{ transform: scale(1.05); } to{ transform: scale(1.12) translate(-1%, -.5%); } }
@media (prefers-reduced-motion: reduce){ .hero-illus img{ animation:none; } }
@media (max-width: 860px){ .hero-illus img{ object-position: 76% center; } }
@media (max-width: 700px){ .hero-illus img{ filter: blur(3px); } }
.hero-illus::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(26,26,26,.62), rgba(26,26,26,.88)); opacity:0; }
.hero-illus:has(img)::after{ opacity:1; }
.hero:has(.hero-illus img)::after{ display:none; }
@media (min-width: 861px){
  .hero-illus:has(img)::after{ background: linear-gradient(90deg, rgba(26,26,26,.84) 0%, rgba(26,26,26,.6) 42%, rgba(26,26,26,.2) 100%), linear-gradient(180deg, rgba(26,26,26,.2), rgba(26,26,26,.5)); }
}

.tag{ display:inline-block; background: var(--bg-alt); border:1px solid var(--line); border-radius: 999px; padding: 5px 14px; font-size:.82rem; font-weight:600; margin: 0 6px 8px 0; color: var(--ink); }

.note-box{ background:#FFF7ED; border:1px solid #F3D9A8; border-radius: var(--radius); padding: 18px 22px; font-size:.92rem; color:#6B4A15; margin: 20px 0; }

/* Schnell-Anfrage */
.quick-form{ border-color: var(--red); box-shadow: 0 6px 24px color-mix(in srgb, var(--red) 8%, transparent); }
.quick-form h3, .quick-form h2.h3{ margin-bottom:.2em; }

/* Google-Bewertungs-Widget */
.review-badge{ display:flex; align-items:center; gap:14px; background:var(--white); border:1px solid var(--line); border-radius: var(--radius); padding:14px 20px; }
.review-badge .stars{ display:flex; gap:2px; color: var(--red); flex:none; }
.review-badge .stars .icon{ width:20px; height:20px; }
.review-badge div:last-child{ font-size:.92rem; color: var(--grey); }
.review-badge strong{ color: var(--black); }
.hero .review-badge{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.hero .review-badge div:last-child{ color:#D8D5CC; }
.hero .review-badge strong{ color:#fff; }
.hero .review-badge a{ color:#FF6B63; }

/* Dezente Bild-Animationen (rein dekorativ): Schnee (Winterdienst), Tropfen (Reinigung), Laub (Baumpflege),
   Samen (Grünpflege), Bläschen (Bodenaufbereitung), Puls (Einsatzgebiet-Karte) */
.fx{ position:relative; overflow:hidden; }
.card-photo > .fx{ line-height:0; }
.illus.fx{ border-radius: var(--radius); }

/* Schnee: zwei Ebenen wiederholter Flocken */
.fx-schnee::before, .fx-schnee::after{
  content:""; position:absolute; left:0; right:0; bottom:0; z-index:1; pointer-events:none; will-change:transform;
  filter: drop-shadow(0 0 1px rgba(26,26,26,.35));
}
.fx-schnee::before{
  top:-200px; background-size:200px 200px; animation: schneefall-nah 9s linear infinite;
  background-image:
    radial-gradient(circle at 22px 28px, rgba(255,255,255,.95) 1.8px, transparent 2.6px),
    radial-gradient(circle at 96px 118px, rgba(255,255,255,.9) 1.4px, transparent 2.2px),
    radial-gradient(circle at 152px 58px, rgba(255,255,255,.95) 2.2px, transparent 3px),
    radial-gradient(circle at 58px 168px, rgba(255,255,255,.85) 1.5px, transparent 2.3px),
    radial-gradient(circle at 178px 182px, rgba(255,255,255,.9) 1.9px, transparent 2.7px),
    radial-gradient(circle at 126px 12px, rgba(255,255,255,.85) 1.3px, transparent 2px);
}
.fx-schnee::after{
  top:-140px; background-size:140px 140px; opacity:.75; animation: schneefall-fern 15s linear infinite;
  background-image:
    radial-gradient(circle at 14px 44px, rgba(255,255,255,.9) 1px, transparent 1.7px),
    radial-gradient(circle at 70px 96px, rgba(255,255,255,.85) 1.2px, transparent 1.9px),
    radial-gradient(circle at 118px 22px, rgba(255,255,255,.9) 1px, transparent 1.7px),
    radial-gradient(circle at 40px 128px, rgba(255,255,255,.8) .9px, transparent 1.6px),
    radial-gradient(circle at 104px 70px, rgba(255,255,255,.85) 1.1px, transparent 1.8px);
}
@keyframes schneefall-nah{ from{ transform:translateY(0); } to{ transform:translateY(200px); } }
@keyframes schneefall-fern{ from{ transform:translateY(0); } to{ transform:translateY(140px); } }

/* Tropfen: perlen auf, gleiten ein Stück herab und verschwinden – wie Wasser auf frisch gereinigtem Glas */
.fx-t{
  position:absolute; left:var(--x); top:var(--y); z-index:1; pointer-events:none; opacity:0;
  width:var(--s); height:calc(var(--s) * 1.2);
  border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.95) 0 14%, rgba(255,255,255,.38) 15% 42%, rgba(255,255,255,.14) 43% 72%, rgba(255,255,255,0) 73%);
  box-shadow: inset 0 -1px 2px rgba(255,255,255,.55), inset 0 1px 1px rgba(26,26,26,.08), 0 1px 2px rgba(26,26,26,.25);
  animation: tropfen-perlen var(--d) cubic-bezier(.55,0,.85,.6) var(--v) infinite;
}
@keyframes tropfen-perlen{
  0%{ opacity:0; transform:translateY(0) scale(.5); }
  12%{ opacity:.95; transform:translateY(0) scale(1); }
  38%{ opacity:.95; transform:translateY(0) scale(1); }
  85%{ opacity:.8; transform:translateY(var(--weg)) scale(.9); }
  100%{ opacity:0; transform:translateY(var(--weg)) scale(.85); }
}

/* Laub: fällt langsam, schaukelt und dreht sich dabei */
.fx-l{
  position:absolute; left:var(--x); top:-8%; z-index:1; pointer-events:none;
  filter: drop-shadow(0 1px 1px rgba(26,26,26,.3));
  animation: laub-fallen var(--d) linear var(--v) infinite;
}
.fx-l i{
  display:block; width:var(--s); height:var(--s); opacity:.92;
  background: linear-gradient(135deg, rgba(255,255,255,.3), rgba(255,255,255,0) 60%), var(--f);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1C15.5 4.5 17.5 11 10 19C2.5 11 4.5 4.5 10 1Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1C15.5 4.5 17.5 11 10 19C2.5 11 4.5 4.5 10 1Z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: laub-schaukeln calc(var(--d) / 4) ease-in-out var(--v) infinite;
}
@keyframes laub-fallen{ from{ top:-8%; } to{ top:108%; } }
@keyframes laub-schaukeln{
  0%, 100%{ transform: translateX(-12px) rotate(-30deg); }
  50%{ transform: translateX(12px) rotate(40deg); }
}

/* Samen: Pusteblumen-Samen ziehen langsam mit dem Wind durchs Bild und schweben dabei auf und ab */
.fx-s{
  position:absolute; left:-8%; top:var(--y); z-index:1; pointer-events:none;
  filter: drop-shadow(0 0 1px rgba(26,26,26,.5));
  animation: samen-flug var(--d) linear var(--v) infinite;
}
.fx-s i{
  display:block; width:var(--s); height:calc(var(--s) * 1.25); opacity:.9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Ccircle cx='12' cy='8' r='7.5' fill='white' fill-opacity='.3'/%3E%3Cpath d='M12 12L2.5 7M12 12L4 3M12 12L8 1M12 12L12 .5M12 12L16 1M12 12L20 3M12 12L21.5 7M12 12L3 10.5M12 12L21 10.5' stroke='white' stroke-width='1' stroke-linecap='round' fill='none'/%3E%3Cpath d='M12 12V23' stroke='white' stroke-opacity='.85' stroke-width='.8'/%3E%3Cellipse cx='12' cy='26' rx='1.3' ry='3' fill='%23B39A6E'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: samen-schweben calc(var(--d) / 5) ease-in-out var(--v) infinite;
}
@keyframes samen-flug{ from{ left:-8%; transform:translateY(0); } to{ left:106%; transform:translateY(-24px); } }
@keyframes samen-schweben{
  0%, 100%{ transform: translateY(-6px) rotate(-14deg); }
  50%{ transform: translateY(6px) rotate(12deg); }
}

/* Bläschen: steigen aus dem gelockerten Boden auf und zerplatzen – Andeutung der Druckluft-Belüftung */
.fx-b{
  position:absolute; left:var(--x); top:var(--y); z-index:1; pointer-events:none; opacity:0;
  width:var(--s); height:var(--s); border-radius:50%;
  border:1px solid rgba(255,255,255,.75);
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.9) 0 18%, rgba(255,255,255,.18) 22% 60%, rgba(255,255,255,.05) 64%);
  box-shadow: 0 0 2px rgba(26,26,26,.3);
  animation: blasen-steigen var(--d) linear var(--v) infinite;
}
@keyframes blasen-steigen{
  0%{ opacity:0; transform:translate(0, 0) scale(.3); }
  8%{ opacity:.85; transform:translate(0, -4px) scale(1); }
  25%{ transform:translate(2px, calc(var(--weg) * -.4)) scale(1); }
  42%{ opacity:.75; transform:translate(-2px, calc(var(--weg) * -.85)) scale(1.05); }
  50%, 100%{ opacity:0; transform:translate(0, calc(var(--weg) * -1)) scale(1.35); }
}

/* Puls: Ring um Mechernich auf der Einsatzgebiet-Karte sendet langsam Wellen aus (wie ein Radar) */
.fx-puls{ overflow:visible; }
.fx-p{
  position:absolute; left:var(--x); top:var(--y); z-index:1; pointer-events:none;
  width:var(--w); aspect-ratio:1 / 1; transform:translate(-50%, -50%);
}
.fx-p::before, .fx-p::after{
  content:""; position:absolute; inset:0; border-radius:50%; opacity:0;
  border:2px solid var(--red); box-shadow: 0 0 0 1px rgba(255,255,255,.6);
  animation: puls-radar 3.6s ease-out infinite;
}
.fx-p::after{ animation-delay:-1.8s; }
@keyframes puls-radar{
  0%{ opacity:.8; transform:scale(1); }
  65%, 100%{ opacity:0; transform:scale(2.4); }
}

/* Grenze: Deutschland-Umriss auf der Netzwerk-Karte pulsiert leicht (Linie passgenau zur Karte, auf den runden Ausschnitt begrenzt) */
.fx-grenze{ overflow:visible; }
.fx-g{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: url("../img/fotos/netzwerk-grenze.svg") center / 100% 100% no-repeat;
  clip-path: circle(50% at 50% 50%);
  animation: grenze-puls 3.6s ease-in-out infinite;
}
@keyframes grenze-puls{
  0%, 100%{ opacity:.35; }
  50%{ opacity:.85; }
}

/* Drehen: die Erde auf der Nachhaltigkeits-Seite dreht sich sehr langsam im runden Rahmen.
   Rahmen und Schatten liegen dafür auf dem Container, damit sie stehen bleiben – nur das Bild dreht sich. */
.illus.round.fx-drehen{ border-radius:50%; box-shadow: 0 0 0 6px var(--white), 0 0 0 8px var(--line), 0 20px 40px -12px rgba(26,26,26,.35); }
.illus.round.fx-drehen img{ box-shadow:none; animation: erde-drehen 200s linear infinite; }
@keyframes erde-drehen{ from{ transform: rotate(0deg); } to{ transform: rotate(-360deg); } }

@media (prefers-reduced-motion: reduce){
  .fx-schnee::before, .fx-schnee::after{ animation:none; }
  .fx-t, .fx-l, .fx-s, .fx-b, .fx-p{ display:none; }
  .fx-g{ animation:none; opacity:.7; }
  .illus.round.fx-drehen img{ animation:none; }
}

/* Autorenzeile auf den Ratgeber-Artikeln */
.autor-zeile{ display:flex; align-items:center; gap:12px; margin:2px 0 20px; font-size:.92rem; color: var(--grey); }
.autor-zeile img{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none; box-shadow:0 0 0 2px var(--white), 0 0 0 3px var(--line); }
.autor-zeile a{ color: var(--ink); font-weight:700; }

/* Gründer-Porträt auf „Über uns“ (einziges Bild der Seite): auf dem Handy zwischen Einleitung und Gründer-Text,
   am Desktop von oben an rechts neben dem ganzen Text und beim Lesen mitlaufend */
.gruender{ margin:0; text-align:center; }
.gruender .illus.round{ max-width:300px; }
.gruender figcaption{ margin-top:22px; font-size:.92rem; color: var(--grey); }
.gruender figcaption strong{ display:block; font-size:1.05rem; color: var(--ink); }
@media (min-width: 861px){
  .ueber-raster > .ueber-intro{ grid-column:1; grid-row:1; }
  .ueber-raster > .ueber-geschichte{ grid-column:1; grid-row:2; }
  .ueber-raster > .gruender{ grid-column:2; grid-row:1 / span 2; position:sticky; top:110px; }
}

/* Quellenangabe unter Kartenausschnitten */
.illus-figure{ margin:0; width:100%; align-self:center; }
.illus-credit{ text-align:center; margin-top:14px; font-size:.75rem; color: var(--grey); }
.illus-credit a{ color: inherit; text-decoration: underline; }