/* ===== neu.css ===== */
/* Neuer Seitenaufbau 10/2026 – baut auf new-style.css (Redesign 08/2026) auf.
   Karten nehmen wie dort den ANDEREN Ton als ihre Sektion. */
:root{
    --neu-karte:var(--dark-card,#1e1e1e);
    --neu-karte2:#262626;
    --neu-linie:var(--input-border,#3a3a3a);
    --neu-pink:var(--primary,#ea4c88);
    --neu-pink-soft:rgba(234,76,136,.15);
    --neu-ok:#5fcf8f;
}
.bg-card{ --neu-karte:var(--body-bg,#181818); }

.neu-sec{ padding:6rem 0; }
@media (max-width:768px){ .neu-sec{ padding:3.6rem 0; } }

/* Hero mit Grafik daneben */
.neu-hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; }
.neu-hero-grid .hero-title{ font-size:clamp(2.2rem,4.4vw,3.6rem); }
@media (max-width:900px){ .neu-hero-grid{ grid-template-columns:minmax(0,1fr); gap:36px; } }
.neu-art{ background:var(--dark-card,#1e1e1e); border:1px solid var(--neu-linie); border-radius:22px; padding:18px; min-width:0; }
.neu-art svg{ display:block; width:100%; height:auto; }
.neu-art figcaption{ font-size:.8rem; color:var(--text-secondary,#b3b3b3); text-align:center; margin-top:6px; }
.neu-trust{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:1.8rem; font-size:.92rem; color:var(--text-secondary,#b3b3b3); font-weight:500; }
.neu-trust span{ display:inline-flex; align-items:center; gap:8px; }
.neu-trust svg{ width:18px; height:18px; color:var(--neu-pink); flex:none; }

/* Drei Handys auf der Startseite */
.neu-shots{ position:relative; height:clamp(380px,40vw,520px); min-width:0; }
.neu-phone{ position:absolute; width:40%; border-radius:22px; padding:7px; background:#0d0d0d; border:1px solid #333; box-shadow:0 24px 60px rgba(0,0,0,.45); }
.neu-screen{ aspect-ratio:390/844; border-radius:15px; overflow:hidden; background:#202020; }
.neu-screen img{ display:block; width:100%; height:100%; object-fit:cover; }
.neu-shots .s1{ left:2%; top:9%; transform:rotate(-7deg); }
.neu-shots .s2{ left:30%; top:0; z-index:2; }
.neu-shots .s3{ right:2%; top:9%; transform:rotate(7deg); }
@media (max-width:900px){ .neu-shots{ height:clamp(340px,95vw,500px); max-width:480px; width:100%; margin:0 auto; } }

/* Funktionen mit Icon */
.neu-feats{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px 34px; }
@media (max-width:900px){ .neu-feats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .neu-feats{ grid-template-columns:minmax(0,1fr); gap:22px; } }
.neu-feats li{ display:grid; grid-template-columns:48px minmax(0,1fr); gap:16px; align-items:start; }
.neu-ic{ width:48px; height:48px; border-radius:14px; background:var(--neu-pink-soft); color:var(--neu-pink); display:grid; place-items:center; }
.neu-ic svg{ width:24px; height:24px; }
.neu-feats h3{ font-size:1.08rem; font-weight:800; margin:2px 0 4px; color:var(--text-primary,#fff); }
.neu-feats p{ margin:0; font-size:.95rem; line-height:1.5; color:var(--text-secondary,#b3b3b3); }
.neu-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; }
.neu-split .neu-feats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 24px; }
@media (max-width:900px){ .neu-split{ grid-template-columns:minmax(0,1fr); gap:36px; } }
@media (max-width:560px){ .neu-split .neu-feats{ grid-template-columns:minmax(0,1fr); } }

/* So geht's mit Bildern (ohne Nummern) */
.neu-howto{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
@media (max-width:760px){ .neu-howto{ grid-template-columns:minmax(0,1fr); } }
.neu-howto li{ background:var(--neu-karte); border-radius:18px; padding:16px 16px 20px; display:grid; gap:8px; align-content:start; position:relative; }
.neu-howto li:not(:last-child)::after{ content:""; position:absolute; right:-16px; top:72px; width:10px; height:10px; border-top:2px solid var(--neu-pink); border-right:2px solid var(--neu-pink); transform:rotate(45deg); }
@media (max-width:760px){ .neu-howto li:not(:last-child)::after{ display:none; } }
.neu-howto svg{ display:block; width:100%; height:auto; background:var(--dark-card,#1e1e1e); border-radius:12px; margin-bottom:6px; }
.bg-body .neu-howto svg{ background:var(--body-bg,#181818); }
.neu-howto h3{ font-size:1.08rem; font-weight:800; margin:0; color:var(--text-primary,#fff); }
.neu-howto p{ margin:0; font-size:.95rem; line-height:1.5; color:var(--text-secondary,#b3b3b3); }

/* Bots der Startseite mit Bild */
.neu-prod{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
@media (max-width:900px){ .neu-prod{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .neu-prod{ grid-template-columns:minmax(0,1fr); } }
.neu-prod a{ display:grid; grid-template-rows:auto 1fr; background:var(--neu-karte); border-radius:18px; overflow:hidden; text-decoration:none; color:inherit; height:100%; border:1px solid transparent; }
.neu-prod a:hover{ border-color:var(--neu-linie); }
.neu-prod a:focus-visible{ outline:2px solid var(--neu-pink); outline-offset:2px; }
.neu-thumb{ height:170px; overflow:hidden; position:relative; background:#202020; }
.neu-thumb img{ position:absolute; left:0; top:-4%; width:100%; height:auto; }
.neu-thumb::after{ content:""; position:absolute; inset:auto 0 0; height:56px; background:linear-gradient(transparent,var(--neu-karte)); }
.neu-prod .neu-body{ padding:16px 20px 22px; display:grid; gap:6px; align-content:start; }
.neu-prod h3{ display:flex; align-items:center; gap:10px; font-size:1.15rem; font-weight:800; margin:0; color:var(--text-primary,#fff); }
.neu-prod h3 svg{ width:20px; height:20px; color:var(--neu-pink); }
.neu-prod p{ margin:0; font-size:.95rem; line-height:1.5; color:var(--text-secondary,#b3b3b3); }
.neu-prod .neu-mehr-link{ color:var(--neu-pink); font-weight:700; font-size:.92rem; margin-top:4px; }

.neu-free{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; }
@media (max-width:900px){ .neu-free{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:480px){ .neu-free{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.neu-free a{ display:grid; justify-items:center; gap:8px; text-align:center; padding:22px 10px; border-radius:18px; background:var(--neu-karte); text-decoration:none; color:var(--text-primary,#fff); font-weight:700; height:100%; }
.neu-free a:hover{ outline:1px solid var(--neu-linie); }
.neu-free svg{ width:30px; height:30px; color:var(--neu-pink); }
.neu-free small{ font-weight:500; color:var(--text-secondary,#b3b3b3); font-size:.82rem; line-height:1.3; }

/* Trustpilot */
.neu-tp{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:28px; align-items:center; }
@media (max-width:900px){ .neu-tp{ grid-template-columns:minmax(0,1fr); } }
.neu-tp-card{ background:var(--neu-karte); border-radius:20px; padding:26px 28px; display:grid; gap:12px; }
.neu-tp-stars{ display:flex; gap:3px; }
.neu-tp-stars i{ width:26px; height:26px; background:#00b67a; display:grid; place-items:center; }
.neu-tp-stars svg{ width:18px; height:18px; fill:#fff; }
.neu-tp-card h3{ margin:0; font-size:1.25rem; font-weight:800; color:var(--text-primary,#fff); }
.neu-tp-card blockquote{ margin:0; font-size:1rem; line-height:1.6; color:var(--text-secondary,#b3b3b3); }
.neu-tp-meta{ font-size:.85rem; color:var(--text-secondary,#b3b3b3); }
.neu-tp-meta b{ color:var(--text-primary,#fff); }
.neu-tp-card a{ color:var(--neu-pink); font-weight:700; text-decoration:none; font-size:.92rem; }
.neu-tp-side{ display:grid; gap:14px; align-content:start; }
.neu-tp-side p{ margin:0; font-size:1.05rem; color:var(--text-primary,#fff); font-weight:600; }
.neu-tp-side small{ font-size:.8rem; line-height:1.45; color:var(--text-secondary,#b3b3b3); }
.neu-tp-side .btn{ justify-self:start; }

/* Mehr dazu (langer Text, zugeklappt) */
.neu-mehr{ margin-top:2.4rem; border:1px dashed var(--neu-linie); border-radius:14px; padding:0 20px; max-width:900px; }
.neu-mehr > summary{ cursor:pointer; list-style:none; padding:16px 0; font-weight:700; color:var(--text-primary,#fff); display:flex; justify-content:space-between; gap:12px; }
.neu-mehr > summary::-webkit-details-marker{ display:none; }
.neu-mehr > summary::after{ content:"+"; color:var(--neu-pink); font-weight:800; font-size:1.3rem; line-height:1; }
.neu-mehr[open] > summary::after{ content:"–"; }
.neu-mehr-inhalt{ padding-bottom:20px; color:var(--text-secondary,#b3b3b3); }
.neu-mehr-inhalt .section-title{ margin-bottom:1.2rem; }
.neu-mehr-inhalt .section-title h2{ font-size:1.35rem; }
.neu-mehr-inhalt .section-title h2::after{ display:none; }
.neu-mehr-inhalt h3{ font-size:1.05rem; margin:1.2rem 0 .4rem; color:var(--text-primary,#fff); }

/* SVG-Grafiken: Farben aus den Tokens */
.f-card{fill:var(--dark-card,#1e1e1e)} .f-card2{fill:var(--neu-karte2)} .f-page{fill:var(--body-bg,#181818)} .f-pink{fill:var(--neu-pink)} .f-pinks{fill:var(--neu-pink-soft)} .f-ok{fill:var(--neu-ok)} .f-line{fill:#333} .f-muted{fill:#4a4548}
.s-line{stroke:#333;fill:none} .s-muted{stroke:#8c8689;fill:none} .s-pink{stroke:var(--neu-pink);fill:none} .s-ok{stroke:var(--neu-ok);fill:none} .s-page{stroke:#181818;fill:none}
.tx{fill:#f1eef0;font-family:inherit;font-weight:600;font-size:14px}
.tm{fill:#a8a2a5;font-family:inherit;font-size:12px}
.tp{fill:var(--neu-pink);font-family:inherit;font-weight:700;font-size:13px}
.tw{fill:#fff;font-family:inherit;font-weight:600;font-size:13px}
.av{fill:#fff;font-family:inherit;font-weight:700}
.neu-art .f-card2{fill:var(--neu-karte2)}

/* Nur in der Vorschau */
.neu-vorschau{ position:fixed; left:14px; bottom:calc(14px + env(safe-area-inset-bottom,0px)); z-index:9999; background:#0d0d0d; color:#fff; border:1px solid #444; border-radius:999px; padding:8px 14px; font-size:13px; font-weight:600; text-decoration:none; box-shadow:0 8px 24px rgba(0,0,0,.5); }
.neu-vorschau b{ color:var(--neu-pink); }

/* ===== Version 5: echtes iPhone mit Kringel, Gut zu wissen, Ratgeber ===== */
.iphone{ display:block; width:100%; height:auto; filter:drop-shadow(0 30px 50px rgba(0,0,0,.55)); }
.bd-a{ margin:0; position:relative; display:grid; justify-items:center; }
.bd-a .iphone{ width:min(310px,80%); }
.bd-note{ font-family:"Caveat","Segoe Print","Bradley Hand",cursive; color:#ff7aa9; font-size:1.75rem; line-height:1.05; font-weight:700; }
.bd-a .bd-note{ position:absolute; left:-6%; width:min(180px,36%); transform:rotate(-5deg); }
.bd-pfeil{ display:block; width:86px; margin:4px 0 0 46px; }
@media (max-width:900px){ .bd-a .bd-note{ position:static; transform:none; width:auto; margin-top:14px; text-align:center; } .bd-pfeil{ display:none; } }
.neu-thumb-phone{ padding:26px 22% 0; background:radial-gradient(70% 90% at 50% 100%, rgba(234,76,136,.16), transparent 70%); }
.neu-thumb-phone .iphone{ filter:drop-shadow(0 10px 24px rgba(0,0,0,.5)); }
.neu-prod .neu-thumb{ height:auto; }
.neu-prod .neu-thumb::after{ display:none; }
.bd-wissen{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 48px; margin-bottom:2.4rem; max-width:1000px; }
@media (max-width:820px){ .bd-wissen{ grid-template-columns:minmax(0,1fr); gap:22px; } }
.bd-wissen h3{ font-size:1.12rem; font-weight:800; color:var(--text-primary,#fff); margin:0 0 .5rem; }
.bd-wissen p{ margin:0; color:var(--text-secondary,#b3b3b3); line-height:1.65; }
.bd-ratgeber{ display:grid; grid-template-columns:48px minmax(0,1fr); gap:20px; align-items:start; background:var(--neu-karte); border:1px solid #2f2f2f; border-radius:20px; padding:22px 24px; text-decoration:none; color:inherit; max-width:820px; }
.bd-ratgeber:hover{ border-color:var(--neu-pink); }
.bd-ratgeber:focus-visible{ outline:2px solid var(--neu-pink); outline-offset:2px; }
.bd-ratgeber h3{ margin:.25rem 0 .45rem; font-size:1.2rem; font-weight:800; color:var(--text-primary,#fff); }
.bd-ratgeber p{ margin:0 0 .7rem; color:var(--text-secondary,#b3b3b3); }
.bd-ratgeber b{ color:var(--neu-pink); }
.bd-rat-art{ font-size:.88rem; color:#ff7aa9; font-weight:700; }



/* ===== muster.css ===== */
/* ===== Neue Abschnitte (Version 4) ===== */
.neu-blockhead{ margin-bottom:2rem; }
.neu-table-wrap{ overflow-x:auto; border-radius:18px; border:1px solid var(--input-border,#3a3a3a); background:var(--neu-karte); }
.neu-table{ width:100%; border-collapse:collapse; min-width:520px; font-size:.97rem; }
.neu-table th, .neu-table td{ padding:14px 18px; text-align:left; border-bottom:1px solid #2c2c2c; vertical-align:top; }
.neu-table tr:last-child td{ border-bottom:0; }
.neu-table thead th{ font-size:.92rem; color:var(--text-secondary,#b3b3b3); font-weight:700; background:rgba(255,255,255,.02); }
.neu-table tbody th{ font-weight:600; color:var(--text-primary,#fff); width:30%; }
.neu-table td{ color:var(--text-secondary,#b3b3b3); }
.neu-table .our{ background:rgba(234,76,136,.07); color:var(--text-primary,#fff); }
.neu-table thead .our{ color:var(--neu-pink); box-shadow:inset 0 3px 0 var(--neu-pink); }
.neu-ja, .neu-nein{ display:inline-flex; align-items:center; gap:6px; font-weight:700; }
.neu-ja{ color:var(--neu-ok); } .neu-nein{ color:#8c8689; }
.neu-ja svg, .neu-nein svg{ width:16px; height:16px; }

.neu-cards{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.neu-cards li{ background:var(--neu-karte); border-radius:18px; padding:20px; display:grid; gap:8px; align-content:start; }
.neu-cards h3{ margin:4px 0 0; font-size:1.08rem; font-weight:800; color:var(--text-primary,#fff); }
.neu-cards p{ margin:0; font-size:.95rem; line-height:1.5; color:var(--text-secondary,#b3b3b3); }

.neu-fixes{ list-style:none; margin:0; padding:0; display:grid; gap:10px; max-width:900px; }
.neu-fixes li{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); gap:6px 24px; background:var(--neu-karte); border-radius:14px; padding:16px 20px; align-items:start; }
@media (max-width:640px){ .neu-fixes li{ grid-template-columns:minmax(0,1fr); } }
.neu-fixes b{ display:flex; gap:10px; align-items:flex-start; color:var(--text-primary,#fff); }
.neu-fixes b svg{ width:20px; height:20px; color:#f5c27a; flex:none; margin-top:1px; }
.neu-fixes span{ color:var(--text-secondary,#b3b3b3); font-size:.97rem; line-height:1.5; }

.neu-textblock{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:56px; align-items:center; }
.neu-textblock.solo{ grid-template-columns:minmax(0,1fr); max-width:760px; }
@media (max-width:900px){ .neu-textblock{ grid-template-columns:minmax(0,1fr); gap:32px; } }
.neu-textblock p{ font-size:1.05rem; line-height:1.65; color:var(--text-secondary,#b3b3b3); margin:0 0 1rem; max-width:62ch; }
.neu-textblock p a{ color:var(--neu-pink); font-weight:700; }
.neu-textblock .section-title{ margin-bottom:1.6rem; }

.neu-links{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
@media (max-width:700px){ .neu-links{ grid-template-columns:minmax(0,1fr); } }
.neu-links li{ background:var(--neu-karte); border-radius:18px; padding:20px; display:grid; grid-template-columns:48px minmax(0,1fr); gap:6px 16px; }
.neu-links .neu-ic{ grid-row:span 3; }
.neu-links h3{ margin:0; font-size:1.05rem; font-weight:800; color:var(--text-primary,#fff); }
.neu-links p{ margin:0; font-size:.95rem; color:var(--text-secondary,#b3b3b3); }
.neu-links div a{ color:var(--neu-pink); font-weight:700; font-size:.95rem; }

.neu-free.neu-free-bild{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
@media (max-width:820px){ .neu-free.neu-free-bild{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px){ .neu-free.neu-free-bild{ grid-template-columns:minmax(0,1fr); } }
.neu-free-bild a{ padding:0; overflow:hidden; justify-items:stretch; text-align:left; gap:0; }
.neu-free-bild .szene{ border-radius:0; border:0; border-bottom:1px solid #2b2b2b; }
.neu-free-bild .neu-free-txt{ padding:14px 18px 18px; display:grid; gap:2px; }
.neu-free-bild .neu-free-txt b{ display:flex; gap:8px; align-items:center; font-size:1.05rem; }
.neu-free-bild .neu-free-txt svg{ width:18px; height:18px; }

/* ===== Muster ===== */
.muster-punkte{ background-image:radial-gradient(rgba(234,76,136,.16) 1.2px, transparent 1.4px); background-size:22px 22px; }
.bg-card.muster-punkte{ background-color:var(--dark-card,#1e1e1e); }
.bg-body.muster-punkte{ background-color:var(--body-bg,#181818); }
.muster-raster{ position:relative; }
.muster-raster::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:56px 56px; -webkit-mask-image:radial-gradient(ellipse 70% 80% at 75% 40%, #000 20%, transparent 75%); mask-image:radial-gradient(ellipse 70% 80% at 75% 40%, #000 20%, transparent 75%); }
.muster-raster > .container{ position:relative; z-index:1; }
.muster-kringel{ position:relative; overflow:hidden; }
.muster-kringel::before{ content:""; position:absolute; inset:-20px 0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40' viewBox='0 0 160 40'%3E%3Cpath d='M0 20 C 20 6, 40 6, 60 20 S 100 34, 120 20 S 150 8, 160 20' fill='none' stroke='%23ea4c88' stroke-opacity='.22' stroke-width='2'/%3E%3C/svg%3E");
  background-size:160px 40px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask-image:linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); }
.muster-kringel > .container{ position:relative; }
.muster-wellen{ background-image:repeating-radial-gradient(circle at 100% 0%, transparent 0 34px, rgba(234,76,136,.07) 35px 36px); }

/* ===== Endlos-Animationen (nur ohne „Bewegung reduzieren“) ===== */
.neu-laufband{ overflow:hidden; border-block:1px solid #2b2b2b; background:#141414; padding:14px 0; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.neu-laufband-spur{ display:flex; gap:44px; width:max-content; }
.neu-laufband span{ display:inline-flex; align-items:center; gap:10px; font-weight:700; color:var(--text-secondary,#b3b3b3); white-space:nowrap; }
.neu-laufband svg{ width:18px; height:18px; color:var(--neu-pink); }
@media (prefers-reduced-motion:no-preference){
  .neu-laufband-spur{ animation:neuLauf 38s linear infinite; }
  .neu-laufband:hover .neu-laufband-spur{ animation-play-state:paused; }
  @keyframes neuLauf{ to{ transform:translateX(-50%); } }

  .anim-schweben .sz-c, .anim-schweben .sz-toast, .anim-schweben .sz-big{ animation:neuSchweben 7s ease-in-out infinite alternate; }
  .anim-schweben .sz-c:nth-of-type(2n){ animation-duration:8.5s; animation-delay:-2s; }
  .anim-schweben .sz-c:nth-of-type(3n){ animation-duration:6s; animation-delay:-4s; }
  .anim-schweben .sz-toast{ animation-duration:5.5s; animation-delay:-1s; }
  .anim-schweben .sz-shot{ animation-name:neuSchwebenSchief; }
  @keyframes neuSchweben{ from{ translate:0 0; } to{ translate:0 -7px; } }
  @keyframes neuSchwebenSchief{ from{ translate:0 0; } to{ translate:0 -9px; } }

  .anim-ring .sz-big::before{ content:""; position:absolute; inset:-7%; border-radius:50%; background:conic-gradient(from 0deg, transparent, #ea4c88, #ff8a5c, transparent 60%); animation:neuDrehen 6s linear infinite; z-index:-1; -webkit-mask:radial-gradient(circle, transparent 66%, #000 67%); mask:radial-gradient(circle, transparent 66%, #000 67%); }
  @keyframes neuDrehen{ to{ transform:rotate(360deg); } }

  .anim-puls .sz-toast::before{ content:""; width:.55em; height:.55em; border-radius:50%; background:#5fcf8f; animation:neuPuls 2s ease-out infinite; flex:none; }
  @keyframes neuPuls{ 0%{ box-shadow:0 0 0 0 rgba(95,207,143,.7); } 100%{ box-shadow:0 0 0 .8em rgba(95,207,143,0); } }

  .anim-glanz{ position:relative; overflow:hidden; }
  .anim-glanz::after{ content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); animation:neuGlanz 4.5s ease-in-out infinite; }
  @keyframes neuGlanz{ 0%,55%{ left:-60%; } 100%{ left:130%; } }

  .anim-kurve .sz-spark path:last-child{ stroke-dasharray:200; animation:neuKurve 6s ease-in-out infinite; }
  @keyframes neuKurve{ 0%{ stroke-dashoffset:200; } 45%,100%{ stroke-dashoffset:0; } }
}

/* Muster-Seite */
.neu-galerie{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
@media (max-width:760px){ .neu-galerie{ grid-template-columns:minmax(0,1fr); } }
.neu-probe{ border-radius:18px; overflow:hidden; border:1px solid #2b2b2b; background:var(--dark-card,#1e1e1e); }
.neu-probe-flaeche{ min-height:200px; padding:24px; display:grid; place-items:center; position:relative; }
.neu-probe-text{ padding:16px 20px; display:grid; gap:4px; }
.neu-probe-text b{ color:var(--text-primary,#fff); font-size:1.05rem; }
.neu-probe-text span{ color:var(--text-secondary,#b3b3b3); font-size:.92rem; }
.neu-probe .szene{ width:min(320px, 90%); }

.neu-pruef{ color:#ea4c88; font-weight:700; }

.neu-howto svg{ max-height:150px; }


/* ===== v6.css ===== */
/* Version 6: Korrekturen nach vier Prüfungen (Design, Verkauf, SEO, Handy/Barrierefreiheit) */

/* Handschrift der Bild-Notizen: selbst gehostet (kein Abruf bei Google vor der Einwilligung).
   Caveat 700, nur lateinische Zeichen inkl. Umlaute; SIL Open Font License. Lädt nur, wo ein Element sie benutzt.
   Seit 10.10.2026 stehen die 18 iPhone-Notizen als fertiger <path> im HTML (spart 51 KB je Seite) – diese
   Schrift wird dort nicht mehr geladen. */
@font-face{ font-family:"Caveat"; src:url("../fonts/caveat-700-latin.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* „Was ist InstaZoom?“: echtes iPhone statt des alten CSS-Handys, ohne den Kasten dahinter */
.hiw-detail-animation.clean{ padding:0; min-height:0; background:none; border:0; border-radius:0; }
.hiw-detail-animation .iphone{ width:auto; max-width:100%; max-height:520px; }

/* Etikett an einer Karte, z. B. „Premium“ neben einem Bezahl-Tool in der Tool-Liste */
.neu-tag{ display:inline-block; vertical-align:middle; margin-left:8px; padding:2px 9px; border-radius:999px; background:rgba(234,76,136,.16); color:#ff7aa9; font-size:.72rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }

/* Hero: zweiter Teil der Überschrift auf eigener Zeile, kein Strich am Zeilenanfang */
.hero-title span{ display:block; }
.neu-hero-grid .hero-title{ font-size:clamp(2.1rem,4vw,3.4rem); text-wrap:balance; max-width:none; }
@media (max-width:400px){ .hero .hero-title{ font-size:clamp(1.9rem,8vw,2.2rem); } }
.neu-preis{ margin:1rem 0 0; font-size:.95rem; color:var(--text-secondary,#b3b3b3); }
.bd-a{ margin:0; display:flex; justify-content:center; }
.bd-a .iphone{ width:auto; max-width:100%; max-height:600px; filter:drop-shadow(0 30px 50px rgba(0,0,0,.55)); }
@media (max-width:900px){ .bd-a .iphone{ max-height:460px; } }

/* Kringel nur noch einmal je Seite: unter „Was … kann“ (#funktionen) bzw. „Instagram automatisieren“ (#tools) */
main .section-title h2::after{ display:none; }
main #funktionen .section-title h2::after, main #tools .section-title h2::after{ display:block; }

/* Sichtbarer Fokus überall (new-style.css setzt a{outline:0}) */
a:focus-visible, button:focus-visible, summary:focus-visible, .tab-item:focus-visible{ outline:3px solid #ff7aa9; outline-offset:3px; }

/* Knöpfe: EIN Pink (Markenfarbe, wie die Paketkarten), Pille, leichter Schatten – überall gleich (User 08.10.:
   „sieht nicht einheitlich aus“). Das dunklere Kontrast-Pink von v6 ist damit wieder weg. */
.btn:not(.btn-outline), .btn-primary, .packages .sf-up-knopf{ background-color:var(--primary,#ea4c88); border-color:var(--primary,#ea4c88); color:#fff; border-radius:999px; box-shadow:0 10px 26px rgba(234,76,136,.32); }
.btn:not(.btn-outline):hover, .btn-primary:hover, .packages .sf-up-knopf:hover{ background-color:var(--primary-hover,#d63d77); border-color:var(--primary-hover,#d63d77); box-shadow:0 12px 30px rgba(234,76,136,.42); }
/* Handy und Tablet: Hero-Knöpfe in voller Breite wie alle anderen Knöpfe der Seite */
@media (max-width:900px){
  .neu-hero-grid .hero-buttons{ flex-direction:column; align-items:stretch; gap:.7rem; }
  .neu-hero-grid .hero-buttons .btn{ width:100%; text-align:center; }
  .neu-tp-side .btn{ width:100%; text-align:center; justify-self:stretch; }
}
/* Gratis-Tools: bis 640 px zwei Spalten (drei waren zu eng, Beschriftungen brachen ungleich um) */
@media (max-width:640px){ .neu-free{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* Produktkarten: Ausschnitt läuft unten weich in die Karte aus statt mit harter Kante */
.neu-prod .neu-thumb::after{ content:""; display:block; position:absolute; inset:auto 0 0; height:64px; background:linear-gradient(transparent,var(--neu-karte,#1e1e1e)); pointer-events:none; }

/* Trustpilot als schmale Zitatzeile unter dem Kopfbereich */
.neu-tpstrip{ background:#141414; border-block:1px solid #2a2a2a; padding:22px 0; }
.neu-tpstrip .container{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 22px; align-items:center; }
.neu-tpstrip .neu-tp-stars{ grid-row:span 2; }
.neu-tpstrip blockquote{ margin:0; color:var(--text-primary,#fff); font-size:1.02rem; font-weight:600; }
.neu-tpstrip p{ margin:0; font-size:.875rem; color:var(--text-secondary,#b3b3b3); }
.neu-tpstrip a{ color:#ff7aa9; font-weight:700; }
@media (max-width:640px){ .neu-tpstrip .container{ grid-template-columns:minmax(0,1fr); } .neu-tpstrip .neu-tp-stars{ grid-row:auto; } }

/* Klickfolge: kein automatisches Weiterschalten, oben bündig, besser lesbare Schritte */
.sf-demo-steuerung{ display:none !important; }
.sf-demo-buehne{ align-items:start !important; }
.sf-demo-schritt:not(.is-aktiv) .sf-demo-text strong{ color:#d0cbce !important; }
.sf-demo-hinweis{ font-size:.875rem !important; }
.neu-hinweis{ max-width:900px; margin:2.4rem auto 0; border:1.5px solid #ea4c88; background:rgba(234,76,136,.09); border-radius:16px; padding:16px 20px; color:var(--text-primary,#fff); line-height:1.55; }
.neu-hinweis b{ color:#ff7aa9; }

/* Vergleichstabellen: schmaler, eigene Spalte immer an zweiter Stelle, auf dem Handy als Karten */
.neu-table-wrap{ max-width:860px; }
.neu-table{ table-layout:fixed; }
.neu-table thead td{ width:28%; background:rgba(255,255,255,.02); border-bottom:1px solid #2c2c2c; }
@media (max-width:600px){
  .neu-table-wrap{ overflow:visible; border:0; background:none; }
  .neu-table{ min-width:0; table-layout:auto; }
  .neu-table thead{ display:none; }
  .neu-table tbody, .neu-table tr{ display:block; }
  .neu-table tr{ background:var(--neu-karte); border:1px solid #2c2c2c; border-radius:14px; margin-bottom:10px; padding:12px 14px; }
  .neu-table tbody th{ display:block; width:auto; padding:0 0 8px; border:0; }
  .neu-table td{ display:grid; grid-template-columns:42% minmax(0,1fr); gap:10px; padding:6px 0; border:0; }
  .neu-table td::before{ content:attr(data-label); color:#8c8689; font-size:.85rem; font-weight:600; }
  .neu-table td.our{ background:none; }
  .neu-table td.our::before{ color:#ff7aa9; }
}

/* Zweites Raster als ruhige Liste statt Icon-Kacheln */
.neu-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 48px; max-width:1000px; }
@media (max-width:760px){ .neu-list{ grid-template-columns:minmax(0,1fr); } }
.neu-list li{ padding:18px 0; border-top:1px solid #2e2e2e; }
.neu-list h3{ margin:0 0 4px; font-size:1.05rem; font-weight:800; color:var(--text-primary,#fff); }
.neu-list p{ margin:0; color:var(--text-secondary,#b3b3b3); line-height:1.55; }

/* Reine Textabschnitte zweispaltig: Überschrift links, Text rechts */
.neu-textblock{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:48px; align-items:start; }
.neu-textblock .section-title{ margin:0; }
@media (max-width:820px){ .neu-textblock{ grid-template-columns:minmax(0,1fr); gap:16px; } }

/* Startseite: echte Ausschnitte statt Mini-Handys */
.neu-prod .neu-thumb{ height:auto; padding:18px 18px 0; background:radial-gradient(80% 100% at 50% 100%, rgba(234,76,136,.12), transparent 70%); }
.neu-crop{ display:block; width:100%; height:auto; border-radius:12px 12px 0 0; border:1px solid #333; border-bottom:0; }
/* Seit 10.10.2026 ein fertig zugeschnittenes <img loading="lazy"> statt SVG-Ausschnitt (SVG-Bilder laden nie spät) –
   die alte Regel „.neu-thumb img“ (absolut, top:-4 %) darf hier nicht greifen. */
.neu-prod .neu-thumb img.neu-crop{ position:static; top:auto; left:auto; }
.neu-free a{ gap:4px; }
.neu-free a b{ display:block; }
.neu-free small{ display:block; font-size:.875rem; }

/* Ratgeber-Karte: Titel ist kein Überschrift-Element mehr */
.bd-rat-txt{ display:grid; gap:4px; }
.bd-rat-t{ font-size:1.12rem; font-weight:700; color:var(--text-primary,#fff); line-height:1.4; }
.neu-rat-unten{ margin-top:2rem; }

/* Tipp-Flächen und Mindestgrößen */
.neu-links div a{ display:block; padding:8px 0; }
.neu-free small, .neu-tp-side small, .sf-demo-hinweis, figcaption{ font-size:.875rem; }
.disclaimer{ font-size:13px; }

/* Handy: im Kopfbereich zuerst das iPhone, dann Überschrift und Text */
@media (max-width:900px){
  .neu-hero-grid{ gap:22px; }
  /* Handy (User-Wunsch 08.10. abends): Überschrift, Text, dann das Bild, dann Knöpfe und Preiszeile.
     Der Textblock wird aufgelöst (display:contents), damit seine Kinder neben dem Bild sortierbar sind. */
  .neu-hero-grid{ display:flex; flex-direction:column; gap:18px; align-items:stretch; }   /* nicht center: sonst schrumpfen Knöpfe und Preiszeile auf Inhaltsbreite */
  .neu-hero-grid .hero-content{ display:contents; }
  .neu-hero-grid .hero-title{ order:1; margin-bottom:0; }
  .neu-hero-grid .hero-subtitle{ order:2; margin:0; }
  .neu-hero-grid .bd-a{ order:3; margin:6px 0; }
  .neu-hero-grid .bd-a .iphone{ width:100%; max-width:360px; height:auto; max-height:none; filter:drop-shadow(0 8px 18px rgba(0,0,0,.45)); }   /* feste Breite (sonst keine Höhe); kurzer Schatten, der Desktop-Schatten reichte bis in den Knopf darunter */
  .neu-hero-grid .hero-buttons, .neu-hero-grid .neu-preis{ position:relative; z-index:1; }   /* Knöpfe über dem Geräteschatten */
  .neu-hero-grid .hero-buttons{ order:4; margin:0; }
  .neu-hero-grid .neu-preis{ order:5; margin:0; }
  .bd-a .iphone{ max-height:400px; }
  .hero{ padding-top:2rem; }
}

/* ===== Klickfolge im selben iPhone wie der Kopfbereich ===== */
section.sf-demo .sf-demo-rahmen.ip-rahmen{ position:relative; width:100%; max-width:320px; aspect-ratio:430/880; padding:0; border:0; border-radius:0; background:none; box-shadow:none; container-type:inline-size; filter:drop-shadow(0 30px 50px rgba(0,0,0,.55)); }
section.sf-demo .ip-rahmen > svg{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
section.sf-demo .sf-demo-bildschirm.ip-screen{ position:absolute; inset:auto; left:4.651cqw; top:4.186cqw; width:90.698cqw; height:196.28cqw; aspect-ratio:auto; border-radius:12.33cqw; overflow:hidden; background:var(--ip-bg,#0c0c0c); }
section.sf-demo .ip-screen img{ inset:auto; left:0; top:10.93cqw; width:100%; height:196.28cqw; }
@media (max-width:760px){ section.sf-demo .sf-demo-rahmen.ip-rahmen{ max-width:260px; } }

/* Gitter-Muster: Variante für Abschnitte mit dem Handy links und für den Abschluss */
.muster-raster.muster-links::after{ -webkit-mask-image:radial-gradient(ellipse 60% 85% at 20% 50%, #000 15%, transparent 75%); mask-image:radial-gradient(ellipse 60% 85% at 20% 50%, #000 15%, transparent 75%); }
.muster-raster.muster-mitte::after{ -webkit-mask-image:radial-gradient(ellipse 55% 100% at 50% 50%, #000 10%, transparent 75%); mask-image:radial-gradient(ellipse 55% 100% at 50% 50%, #000 10%, transparent 75%); }
.cta.muster-raster{ position:relative; }
/* Handy: Gitter im Hero links neben dem Gerät (auf dem Desktop liegt die Betonung rechts beim Handy, Frage des Users 08.10.) */
@media (max-width:900px){
  .hero.muster-raster::after{ -webkit-mask-image:radial-gradient(ellipse 80% 42% at 12% 54%, #000 12%, transparent 72%); mask-image:radial-gradient(ellipse 80% 42% at 12% 54%, #000 12%, transparent 72%); }
}

/* Ratgeber als ein Satz */
.bd-rat-inline{ display:flex; gap:10px; align-items:flex-start; margin:1.6rem 0 0; color:var(--text-secondary,#b3b3b3); font-size:1rem; line-height:1.55; max-width:70ch; }
.bd-rat-inline svg{ width:20px; height:20px; flex:none; color:var(--neu-pink); margin-top:3px; }
.bd-rat-inline a{ color:var(--text-primary,#fff); font-weight:700; text-decoration:underline; text-decoration-color:var(--neu-pink); text-underline-offset:3px; }
.neu-rat-unten{ margin-top:1.6rem; }