/* Webdesign Schinck, Theme 3.4: Hero 4.0 "Schwerelos".
   Headline mittig, schwebende Karten, Seide im Hintergrund. Bewegung nur über transform und opacity (held4.js).
   Ohne Javascript, mit "weniger Bewegung" oder wenn das Skript ausbleibt, steht alles sofort im Ruhebild. */
.held4{
  --h4-karte:#fff; --h4-schatten:0 30px 60px -28px rgba(18,28,90,.38),0 0 0 1px rgba(14,16,22,.06);
  --h4-glas:linear-gradient(135deg,rgba(255,255,255,.8),rgba(255,255,255,.5)); --h4-glas-rand:rgba(255,255,255,.9);
  --h4-glas-glanz:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(47,91,255,.06);
  --h4-wa:#dcf8c6; --h4-wa-text:#0f1a0f; --h4-weich:#f5f6f9; --h4-stern:#f5a300;
  --h4-verlauf:linear-gradient(100deg,#2f5bff 0%,#2f5bff 26%,#1e8ff5 42%,#18b4f0 50%,#2f5bff 64%,#2f5bff 78%,#5560ff 90%,#2f5bff 100%);
  position:relative; isolation:isolate; overflow:hidden; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:calc(var(--navh) + 30px) var(--gutter) 56px; text-align:center;
}
html[data-theme="dark"] .held4{
  --h4-karte:#141927; --h4-schatten:0 30px 60px -28px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.07);
  --h4-glas:linear-gradient(135deg,rgba(30,36,56,.74),rgba(17,22,36,.52)); --h4-glas-rand:rgba(255,255,255,.14);
  --h4-glas-glanz:inset 0 1px 0 rgba(255,255,255,.16);
  --h4-wa:#144d37; --h4-wa-text:#e9fbe9; --h4-weich:#121624; --h4-stern:#ffb400;
  --h4-verlauf:linear-gradient(100deg,#5b7cff 0%,#5b7cff 26%,#3aa2ff 42%,#3cc8f5 50%,#5b7cff 64%,#5b7cff 78%,#7d7fff 90%,#5b7cff 100%);
}
.held4 .held-ende{ height:90px; }

/* Mitte */
.h4-mitte{ position:relative; z-index:3; width:min(1100px,100%); display:flex; flex-direction:column; align-items:center; }
.h4-h1{ margin:0; display:flex; flex-direction:column; align-items:center; font-weight:800; color:var(--ink); line-height:1; letter-spacing:-.05em;
  font-size:clamp(44px,min(7.4vw,12.2vh),110px); }
.h4-h1 .h1-ort{ font-size:13.5px; letter-spacing:0; line-height:1.2; margin-bottom:clamp(16px,2.2vw,24px); }
.h4-z1{ display:block; font-size:.6em; letter-spacing:-.045em; margin-bottom:.02em; }
.h4-z2{ display:block; white-space:nowrap; }
.h4-m{ display:inline-block; overflow:hidden; overflow:clip; vertical-align:bottom; padding:.06em .04em .2em; margin:-.06em -.04em -.2em; }
.h4-m > span{ display:inline-block; }
.h4-kwm{ padding-bottom:.34em; margin-bottom:-.34em; }
.h4-kw{ display:inline-block; color:var(--blue); background-image:var(--h4-verlauf); background-size:240% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; padding:.08em .03em .3em; margin:-.08em -.03em -.3em; }
/* Nach dem Zerlegen trägt jeder Buchstabe einen Ausschnitt desselben Verlaufs */
.h4-kw.zerlegt{ background:none; -webkit-text-fill-color:currentColor; padding:0; margin:0; display:inline-flex; }
.h4-kw .c{ display:inline-block; background-image:var(--h4-verlauf); background-repeat:repeat-x; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; padding:.08em .03em .3em; margin:-.08em -.03em -.3em; }

.h4-pillen{ display:flex; gap:12px; justify-content:center; align-items:center; margin-top:22px; }
.h4-pille{ display:flex; align-items:center; height:58px; border-radius:999px; overflow:hidden; background:var(--h4-karte); box-shadow:0 16px 30px -14px rgba(18,28,90,.42),0 0 0 1px rgba(14,16,22,.06); white-space:nowrap; }
html[data-theme="dark"] .h4-pille{ box-shadow:0 16px 30px -14px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08); }
.h4-p1{ width:136px; padding:5px; }
.h4-p1 .vp{ position:relative; width:100%; height:100%; border-radius:999px; overflow:hidden; }
.h4-p1 .sl{ position:absolute; inset:0; display:flex; flex-direction:column; }
.h4-p1 img{ width:100%; height:100%; object-fit:cover; object-position:50% 0; flex:none; }
.h4-p2{ gap:11px; padding:0 20px 0 7px; }
.h4-p2 .gg{ flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:#fff; box-shadow:0 0 0 1px rgba(14,16,22,.06); }
.h4-p2 .gg svg{ width:24px; height:24px; }
.h4-p2 .tx{ display:flex; flex-direction:column; align-items:flex-start; line-height:1; }
.h4-p2 .tx b{ font-size:21px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.h4-p2 .tx i{ font-style:normal; font-size:11px; font-weight:600; color:var(--ink-dim); margin-left:4px; letter-spacing:0; }
.h4-p2 .tx small{ margin-top:4px; font-size:12px; letter-spacing:1.5px; color:var(--h4-stern); }

.h4-lede{ margin:24px auto 0; max-width:36em; font-size:clamp(15.5px,1.25vw,18px); line-height:1.6; color:var(--ink-dim); text-wrap:pretty; }
.h4-lede strong{ color:var(--ink-soft); font-weight:650; }
.h4-knoepfe{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center; margin-top:26px; }
.h4-knoepfe .btn{ padding-inline:24px; font-size:15px; }
.h4-knoepfe .btn-wa{ min-height:54px; padding:0 24px; }
.h4-knoepfe .btn-wa .lbl{ display:inline-flex; align-items:center; gap:9px; }
.h4-trust{ margin:20px 0 0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; font-size:14px; color:var(--ink-dim); }
.h4-trust b{ color:var(--ink); }
.h4-trust .st{ color:var(--h4-stern); letter-spacing:1px; }
.h4-trust i{ display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--blue); margin-right:7px; vertical-align:middle; }

/* Karten */
.h4-karten{ position:absolute; inset:var(--navh) 0 0; z-index:2; pointer-events:none; }
.h4-k{ position:absolute; will-change:transform; text-align:left; }
.h4-win{ border-radius:14px; overflow:hidden; background:var(--h4-karte); box-shadow:var(--h4-schatten); }
.h4-bar{ display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; background:var(--h4-weich); border-bottom:1px solid var(--line); }
.h4-bar i{ width:9px; height:9px; border-radius:50%; background:#ff5f57; } .h4-bar i:nth-child(2){ background:#febc2e; } .h4-bar i:nth-child(3){ background:#28c840; }
.h4-bar span{ margin-left:10px; padding:3px 12px; border-radius:999px; background:var(--h4-karte); font-size:11px; color:var(--ink-dim); font-weight:550; }
.h4-win img{ display:block; width:100%; height:auto; }
.h4-ich{ display:flex; align-items:center; gap:10px; padding:7px 16px 7px 7px; border-radius:999px; background:var(--h4-karte); box-shadow:var(--h4-schatten); font-size:13px; }
.h4-ich img{ width:40px; height:40px; border-radius:50%; object-fit:cover; object-position:50% 20%; }
.h4-ich b{ display:block; font-size:13.5px; color:var(--ink); } .h4-ich span span{ color:var(--ink-dim); font-size:12px; }
.h4-notiz{ display:flex; gap:11px; align-items:center; padding:12px 14px; border-radius:22px; color:var(--ink); background:var(--h4-glas);
  -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%); border:1px solid var(--h4-glas-rand);
  box-shadow:var(--h4-glas-glanz),0 24px 48px -22px rgba(18,28,90,.38),0 2px 6px -2px rgba(18,28,90,.08); }
.h4-notiz .ic{ flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg,var(--blue),#7c4dff); }
.h4-notiz .ic svg{ width:17px; height:17px; stroke:#fff; fill:none; stroke-width:2; }
.h4-notiz b{ display:block; font-size:13.5px; } .h4-notiz span span{ font-size:12px; color:var(--ink-dim); }
.h4-notiz time{ margin-left:auto; align-self:flex-start; font-size:11px; color:var(--ink-dim); }
.h4-serp{ padding:14px; display:grid; gap:10px; border-radius:20px; background:var(--h4-karte); box-shadow:var(--h4-schatten); }
.h4-serp .q{ display:flex; align-items:center; gap:8px; padding:9px 13px; border-radius:999px; border:1px solid var(--line); font-size:13px; font-weight:550; color:var(--ink); }
.h4-serp .q svg{ width:14px; height:14px; stroke:var(--ink-dim); fill:none; stroke-width:2.4; }
.h4-serp .r{ padding:11px 12px; border-radius:14px; background:var(--blue-soft); display:grid; gap:3px; }
.h4-serp .u{ font-size:11px; color:var(--ink-dim); } .h4-serp .t{ font-size:14px; font-weight:700; color:var(--blue); line-height:1.3; } .h4-serp .s{ font-size:11.5px; font-weight:650; color:var(--ink); }
.h4-serp .sk{ height:7px; border-radius:5px; background:var(--line); }
.held4 .st{ color:var(--h4-stern); letter-spacing:1px; }
.h4-rev{ padding:15px 16px; display:grid; gap:7px; font-size:13px; line-height:1.45; color:var(--ink); border-radius:20px; background:var(--h4-karte); box-shadow:var(--h4-schatten); }
.h4-rev .who{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-dim); }
.h4-rev .who i{ width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:11px; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--blue),#7c4dff); }
.h4-fon{ border-radius:28px; padding:6px; background:#0b0d14; box-shadow:var(--h4-schatten); }
.h4-fon img{ display:block; width:100%; height:auto; border-radius:22px; }
.h4-wa{ padding:12px 14px 10px; border-radius:18px 18px 18px 6px; background:var(--h4-wa); color:var(--h4-wa-text); font-size:13px; line-height:1.4; box-shadow:var(--h4-schatten); }
.h4-wa small{ display:block; text-align:right; font-size:10.5px; opacity:.6; margin-top:3px; }
.h4-stern svg{ width:100%; height:100%; display:block; }
.h4-kugel{ border-radius:50%; background:radial-gradient(circle at 32% 28%,#fff 0 6%,#9db1ff 18%,#2f5bff 52%,#1a2a9e 100%); box-shadow:0 24px 40px -16px rgba(47,91,255,.30); }
.h4-kugel2{ background:radial-gradient(circle at 32% 28%,#fff 0 6%,#c6b2ff 18%,#7c4dff 55%,#3b1d9e 100%); box-shadow:0 24px 40px -16px rgba(124,77,255,.30); }
.h4-ring{ border-radius:50%; border:10px solid transparent; background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(135deg,#22c3f5,var(--blue),#7c4dff) border-box; }
.h4-kachel{ display:grid; place-items:center; border-radius:18px; background:var(--h4-glas); border:1px solid var(--h4-glas-rand); color:var(--blue);
  font:800 18px/1 ui-monospace,Menlo,Consolas,monospace; box-shadow:var(--h4-glas-glanz),0 20px 34px -16px rgba(18,28,90,.4); }

/* Startmoment: Lichtteilchen, Punkt, Schockwelle */
.h4-start{ position:absolute; inset:0; z-index:4; pointer-events:none; }
.h4-teile i{ position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px; border-radius:3px; background:var(--blue); opacity:0; }
.h4-teile i:nth-child(3n){ background:#7c4dff; } .h4-teile i:nth-child(4n){ background:#22c3f5; }
.h4-punkt{ position:absolute; left:50%; top:50%; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; background:var(--blue); opacity:0;
  box-shadow:0 0 0 8px rgba(47,91,255,.15),0 0 60px 20px rgba(124,77,255,.17); }
.h4-welle{ position:absolute; left:50%; top:50%; width:1600px; height:1600px; margin:-800px 0 0 -800px; border-radius:50%; border:2px solid var(--blue); opacity:0; }
.h4-blitz{ position:absolute; inset:0; background:radial-gradient(circle at 50% 50%,rgba(47,91,255,.22),transparent 55%); opacity:0; }

/* Startzustand nur, solange held4.js gleich übernimmt */
.js:not(.h4-not) .held4:not(.h4-los) .h4-anim,
.js:not(.h4-not) .held4:not(.h4-los) .h4-w,
.js:not(.h4-not) .held4:not(.h4-los) .h4-kw{ opacity:0; }
@media (prefers-reduced-motion:reduce){
  .js .held4 .h4-anim, .js .held4 .h4-w, .js .held4 .h4-kw{ opacity:1 !important; }
  .h4-start{ display:none; }
}

@media (max-width:1100px){
  .h4-k.h4-ich, .h4-k.h4-kachel, .h4-k.h4-rev{ display:none; }
}
/* Niedrige Bildschirme (Laptops): Bewertungskarte und Kachel aus, damit nichts über dem Text liegt */
@media (max-height:860px) and (min-width:761px){
  .h4-k.h4-rev, .h4-k.h4-kachel{ display:none; }
  .h4-k.h4-wa{ top:86% !important; }
}
@media (max-width:760px){
  .held4{ align-items:flex-start; padding:calc(var(--navh) + 104px) 16px 118px; }
  .h4-h1{ font-size:11.2vw; }
  .h4-z1{ font-size:.66em; }
  .h4-pillen{ margin-top:16px; gap:10px; }
  .h4-pille{ height:48px; } .h4-p1{ width:108px; padding:4px; }
  .h4-p2{ padding:0 15px 0 5px; gap:9px; } .h4-p2 .gg{ width:38px; height:38px; } .h4-p2 .tx b{ font-size:18px; } .h4-p2 .tx small{ font-size:10.5px; }
  .h4-lede{ font-size:15px; margin-top:18px; }
  .h4-knoepfe{ flex-direction:column; width:100%; max-width:360px; margin-inline:auto; }
  .h4-knoepfe .cta-hof, .h4-knoepfe .btn{ width:100%; }
  .h4-trust{ font-size:12.5px; gap:6px 12px; }
  .h4-k{ display:none; }
  .h4-k.h4-notiz{ display:flex; left:16px !important; top:16px !important; width:250px !important; }
  .h4-lang{ display:none; }
  .h4-k.h4-wa{ display:block; left:auto !important; right:12px; top:auto !important; bottom:16px; width:236px !important; font-size:12px; }
  .h4-k.h4-kugel2{ display:block; left:auto !important; right:22px; top:28px !important; width:34px !important; height:34px !important; }
  .h4-k.h4-ring{ display:block; left:22px !important; top:auto !important; bottom:40px; width:40px !important; height:40px !important; }
}

/* 3.4.3 (14.10.2026, Wunsch Maxi): Chatkarte entfernt, Vertrauenszeile neu geordnet
   (3 Punkte in einer Zeile, darunter mittig Google), "Kunden gewinnen." eine Stufe leichter (700 statt 800). */
.h4-z2{ font-weight:700; }
.h4-trust{ flex-direction:column; align-items:center; gap:10px; }
.h4-tr-punkte{ display:flex; flex-wrap:nowrap; justify-content:center; gap:8px 18px; white-space:nowrap; }
.h4-tr-google{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
@media (max-width:760px){
  .held4{ padding-bottom:64px; }
  .h4-trust{ gap:8px; font-size:min(12.5px,2.95vw); }
  .h4-tr-punkte{ gap:6px 9px; }
  .h4-trust i{ margin-right:5px; }
}
@media (max-width:330px){ .h4-tr-punkte{ flex-wrap:wrap; white-space:normal; } }

/* 3.4.4 (14.10.2026, Wunsch Maxi)
   Benachrichtigung flacher wie eine echte Handy Mitteilung, Google Pille in der Mitte entfernt
   (Google steht unten in der Vertrauenszeile), dafür das Projektfenster groß und mittig. */
.h4-notiz{ gap:10px; padding:8px 12px 8px 9px; border-radius:18px; line-height:1.25; }
.h4-notiz .ic{ width:30px; height:30px; border-radius:8px; }
.h4-notiz .ic svg{ width:15px; height:15px; }
.h4-notiz b{ font-size:13px; line-height:1.25; } .h4-notiz span span{ display:block; font-size:12px; line-height:1.25; }
.h4-notiz time{ font-size:10.5px; padding-top:1px; }
.h4-pillen{ margin-top:26px; }
.h4-p1{ width:min(400px,62vw); height:auto; aspect-ratio:2.2 / 1; padding:6px; border-radius:20px; }
.h4-p1 .vp{ border-radius:14px; }
@media (max-width:760px){
  .h4-pillen{ margin-top:20px; }
  .h4-pille.h4-p1{ width:min(330px,86vw); height:auto; padding:5px; border-radius:18px; }
  .h4-p1 .vp{ border-radius:13px; }
}