/* ============ UNTERSEITE WEBSITE (Auftrag Inhaber 31.10.2026, Abschnitt 8) ============
   Passt zum Designsystem der Startseite (css/start.css): Creme und Nachtblau, Orange nur als feine Linie,
   Cinzel in Versalien für Kennzeilen, Cormorant Garamond für Titel und Leitsätze, Inter für Fließtext.
   Schräge Flächen (skewX) mit runden Ecken, darauf die echten Geräteansichten, überlappende Textkarten.
   Nur diese Seite (main.wd). Bewegung nur transform/opacity, ohne Skript steht alles sichtbar da. */

main.legal.wd{
  --wd-creme:#F1EEE6;--wd-creme-2:#e8e3d7;--wd-papier:#faf8f3;
  --wd-navy:#172C50;--wd-nacht:#0c1830;--wd-orange:#E87536;
  --wd-tinte:#172C50;--wd-tinte-2:#3a4458;--wd-linie:rgba(23,44,80,.14);
  --wd-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --wd-titel:'Cinzel','Cormorant Garamond',Georgia,serif;
  --wd-sans:'Inter','Helvetica Neue',Arial,sans-serif;
  --wd-kurve:cubic-bezier(.2,.7,.2,1);
  --wd-schief:-7deg;--wd-zurueck:7deg;
  max-width:none;width:100%;padding:0 0 clamp(60px,8vw,110px);
  font-family:var(--wd-sans);color:var(--wd-tinte);
}
html:has(main.wd),body:has(main.wd){background:#F1EEE6}
body:has(main.wd)::before{background:none}

/* Inhaltsbreite */
body main.legal.wd.pl-page > .lp-krume,body main.legal.wd.pl-page > .wd-teil,body main.legal.wd.pl-page > .contact-duo.anfrage{
  width:min(1240px,100% - 2*clamp(16px,5vw,56px));margin-left:auto;margin-right:auto}

/* Brotkrume auf Creme */
main.legal.wd > .lp-krume{margin-top:0;margin-bottom:0;padding:18px 0 14px;color:var(--wd-tinte-2)}
main.legal.wd > .lp-krume a{display:inline-flex;align-items:center;color:var(--wd-tinte);min-height:44px;min-width:44px}
main.legal.wd > .lp-krume a:hover,main.legal.wd > .lp-krume a:focus-visible{color:var(--wd-tinte)}
main.legal.wd > .lp-krume strong{color:var(--wd-tinte)}

/* ---------- Grundbausteine ---------- */
main.legal.wd.pl-page .wd-kenn{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-family:var(--wd-titel);font-weight:600;
  font-size:12px;line-height:1.3;letter-spacing:.32em;text-transform:uppercase;color:var(--wd-tinte)}
main.legal.wd.pl-page .wd-kenn::before{content:"";flex:0 0 auto;width:34px;height:2px;background:var(--wd-orange)}
main.legal.wd.pl-page .wd-kenn--hell{color:var(--wd-creme)}
main.legal.wd.pl-page .wd-h2{margin:0;padding:0;border:0;font-family:var(--wd-serif);font-weight:500;
  font-size:clamp(30px,1.4rem + 1.8vw,50px);line-height:1.08;letter-spacing:0;color:var(--wd-tinte);text-wrap:balance}
main.legal.wd.pl-page .wd-unter{margin:14px 0 0;max-width:44ch;font-size:clamp(15px,.9rem + .2vw,17px);line-height:1.6;color:var(--wd-tinte-2)}
main.legal.wd.pl-page .wd-kopf{margin:0 0 clamp(30px,4vw,56px)}
main.legal.wd.pl-page .wd-teil{padding-top:clamp(64px,9vw,128px)}
main.legal.wd.pl-page .wd-link{color:inherit;text-decoration:underline;text-decoration-color:var(--wd-orange);text-decoration-thickness:1.5px;
  text-underline-offset:5px;display:inline-flex;align-items:center;min-height:44px}
main.legal.wd.pl-page .wd-link:hover{text-decoration-thickness:2.5px}
main.legal.wd.pl-page .wd-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
main.legal.wd.pl-page :focus-visible{outline:2px solid var(--wd-orange);outline-offset:4px}

/* Knopf mit Rand (der einzige gefüllte Anfrage-Knopf bleibt der im Anfrage-Bereich) */
main.legal.wd.pl-page .wd-knopf{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 26px;
  border-radius:6px;font-size:14px;font-weight:500;letter-spacing:.04em;text-decoration:none;
  transition:background-color .2s ease,color .2s ease,transform .2s var(--wd-kurve)}
main.legal.wd.pl-page .wd-knopf--rand{border:1px solid rgba(241,238,230,.55);color:var(--wd-creme)}
main.legal.wd.pl-page .wd-knopf--rand:hover{background:var(--wd-creme);color:var(--wd-navy)}
main.legal.wd.pl-page .wd-knopf:active{transform:translateY(1px)}

/* Geräte: eigene Größen statt der Bandmaße aus style.css */
main.legal.wd.pl-page .wd-geraete{position:relative;padding:0 0 4%}
main.legal.wd.pl-page .wd-geraete .dv-laptop{width:86%;margin:0}
main.legal.wd.pl-page .wd-geraete .dv-phone{width:21%;right:2%;bottom:0}
main.legal.wd.pl-page .dv-laptop--ohne,main.legal.wd.pl-page .dv-phone--ohne{cursor:default}
main.legal.wd.pl-page .dv-laptop--ohne:hover,main.legal.wd.pl-page .dv-phone--ohne:hover{transform:none}
main.legal.wd.pl-page .dv-screen .wd-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  opacity:0;transition:opacity .35s ease-out}
main.legal.wd.pl-page .dv-screen .wd-video--an{opacity:1}

/* ---------- 1. Start: echtes Website-Mockup auf Nachtblau ---------- */
main.legal.wd.pl-page .wd-held{position:relative;overflow:hidden;background:var(--wd-navy);color:var(--wd-creme);
  padding:clamp(48px,7vw,104px) clamp(16px,5vw,56px) clamp(56px,7vw,110px)}
main.legal.wd.pl-page .wd-held::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,24,48,.55),rgba(12,24,48,0) 45%)}
/* feine Konstruktionslinien wie im Start der Startseite */
main.legal.wd.pl-page .wd-held::after{content:"";position:absolute;left:clamp(16px,5vw,56px);right:clamp(16px,5vw,56px);top:0;bottom:0;pointer-events:none;
  border-left:1px solid rgba(241,238,230,.08);border-right:1px solid rgba(241,238,230,.08)}
main.legal.wd.pl-page .wd-held__in{position:relative;z-index:1;width:min(1240px,100%);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
main.legal.wd.pl-page .wd-held__h{margin:0;padding:0;border:0;min-height:0;display:block;background:none;text-align:left;
  font-family:var(--wd-titel);font-weight:600;font-size:clamp(44px,1.6rem + 4.4vw,96px);line-height:1;
  letter-spacing:.06em;text-transform:uppercase;color:var(--wd-creme)}
main.legal.wd.pl-page .wd-held__h::before,main.legal.wd.pl-page .wd-held__h::after{content:none;display:none}
main.legal.wd.pl-page .wd-held__satz{margin:clamp(18px,2.4vw,28px) 0 clamp(26px,3vw,36px);max-width:none;font-family:var(--wd-serif);font-style:italic;font-weight:500;
  font-size:clamp(22px,1rem + 1.1vw,32px);line-height:1.25;color:var(--wd-creme);text-wrap:pretty}
main.legal.wd.pl-page .wd-held__p{margin:16px 0 clamp(26px,3vw,36px);max-width:36ch;font-size:clamp(15px,.9rem + .2vw,17px);line-height:1.6;
  color:rgba(241,238,230,.82)}
main.legal.wd.pl-page .wd-held__bild{position:relative;margin:0 0 0 auto;padding:6% 0 0;width:min(100%,560px)}
main.legal.wd.pl-page .wd-held__flaeche{position:absolute;left:8%;right:0;top:0;bottom:16%;border-radius:22px;transform:skewX(var(--wd-schief));
  background:var(--wd-creme);box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
main.legal.wd.pl-page .wd-held__flaeche::after{content:"";position:absolute;left:28px;top:24px;width:44px;height:2px;background:var(--wd-orange);
  transform:skewX(var(--wd-zurueck))}
main.legal.wd.pl-page .wd-held__bild .wd-geraete{padding:0 4% 0 0;transform:translateX(-2%)}
main.legal.wd.pl-page .wd-held__bild .dv-laptop{width:90%}
main.legal.wd.pl-page .wd-held__bild .dv-phone{width:22%;right:4%;bottom:-6%}
main.legal.wd.pl-page .wd-held__cap{position:relative;margin:clamp(26px,3vw,40px) 0 0 8%;font-family:var(--wd-titel);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(241,238,230,.78)}

/* ---------- 2/3. Warum eine eigene Website (01.11.2026: wellige Linie statt Trennstriche) ---------- */
main.legal.wd.pl-page .wd-vorteile__h{margin:0 0 clamp(30px,4vw,52px)}
main.legal.wd.pl-page .wd-vorteile__l{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,3vw,44px)}
main.legal.wd.pl-page .wd-vorteile__l li{position:relative;z-index:1;margin:0;padding:0;border:0;max-width:none}
main.legal.wd.pl-page .wd-vorteile__nr{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:48px;height:48px;
  margin:0 0 18px;border-radius:50%;background:var(--wd-creme);border:1.5px solid var(--wd-orange);font-family:var(--wd-titel);font-size:13px;
  letter-spacing:.08em;color:var(--wd-tinte)}
main.legal.wd.pl-page .wd-vorteile__l b{display:block;margin:0 0 10px;font-family:var(--wd-serif);font-weight:600;font-size:clamp(21px,1rem + .5vw,25px);
  line-height:1.2;color:var(--wd-tinte);text-wrap:balance}
main.legal.wd.pl-page .wd-vorteile__l span:not(.wd-vorteile__nr){display:block;font-size:15px;line-height:1.6;color:var(--wd-tinte-2)}
/* die Linie: SVG aus js/seite-website.js, liegt hinter den Kreisen */
main.legal.wd.pl-page .wd-welle{position:absolute;left:0;top:0;z-index:0;overflow:visible;pointer-events:none}
main.legal.wd.pl-page .wd-welle path{fill:none;stroke:var(--wd-orange);stroke-width:2;stroke-linecap:round}

/* ---------- 4. Referenzen: zwei Boxen nach Kategorie (01.11.2026) ---------- */
main.legal.wd.pl-page .wd-refs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.6vw,36px)}
main.legal.wd.pl-page .wd-refbox{min-width:0;background:var(--wd-papier);border-radius:20px;padding:clamp(20px,2.4vw,32px);
  box-shadow:0 24px 50px -34px rgba(12,24,48,.45),0 0 0 1px rgba(23,44,80,.07)}
main.legal.wd.pl-page .wd-refbox__k{display:flex;align-items:center;gap:12px;margin:0 0 clamp(16px,2vw,24px);padding:0;border:0;
  font-family:var(--wd-titel);font-weight:600;font-size:13px;line-height:1.3;letter-spacing:.3em;text-transform:uppercase;color:var(--wd-tinte)}
main.legal.wd.pl-page .wd-refbox__k::before{content:"";flex:0 0 auto;width:28px;height:2px;background:var(--wd-orange)}
main.legal.wd.pl-page .wd-refbox__l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
main.legal.wd.pl-page .wd-ref{min-width:0}
main.legal.wd.pl-page .wd-ref__buehne{border-radius:14px;background:var(--wd-navy);padding:14px 12px 8px}
main.legal.wd.pl-page .wd-ref .wd-geraete{padding:0 0 6%}
main.legal.wd.pl-page .wd-ref .wd-geraete .dv-laptop{width:84%}
main.legal.wd.pl-page .wd-ref .wd-geraete .dv-phone{width:22%;right:1%;bottom:0}
main.legal.wd.pl-page .wd-ref__t{margin:12px 0 0;padding:0;border:0;font-family:var(--wd-serif);font-weight:600;font-size:clamp(18px,.9rem + .4vw,21px);
  line-height:1.25;color:var(--wd-tinte)}
main.legal.wd.pl-page .wd-hinweis{margin:clamp(20px,3vw,32px) 0 0;font-size:14px;color:var(--wd-tinte-2)}

/* ---------- 5. Funktionen ---------- */
main.legal.wd.pl-page .wd-funktionen__l{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(28px,5vw,80px)}
main.legal.wd.pl-page .wd-funktionen__l li{position:relative;break-inside:avoid;margin:0;padding:18px 0 18px 46px;border:0;border-top:1px solid var(--wd-linie);
  font-size:16px;line-height:1.55;color:var(--wd-tinte)}
main.legal.wd.pl-page .wd-funktionen__l li::before{content:"";position:absolute;left:0;top:30px;width:26px;height:1.5px;background:var(--wd-orange)}
main.legal.wd.pl-page .wd-funktionen__l li strong{font-weight:600;color:var(--wd-tinte)}
main.legal.wd.pl-page .wd-funktionen__l li .li-mehr{color:var(--wd-tinte-2)}
main.legal.wd.pl-page .wd-funktionen__l li small{display:block;margin-top:5px;font-size:13.5px;line-height:1.5;color:var(--wd-tinte-2)}

/* ---------- 6. Hosting und Betreuung: dunkles Band ---------- */
main.legal.wd.pl-page .wd-hosting{margin-top:clamp(64px,9vw,128px);background:var(--wd-navy);color:var(--wd-creme);
  padding:clamp(60px,8vw,112px) clamp(16px,5vw,56px)}
main.legal.wd.pl-page .wd-hosting__in{width:min(1240px,100%);margin:0 auto}
main.legal.wd.pl-page .wd-hosting .wd-h2{color:var(--wd-creme)}
main.legal.wd.pl-page .wd-hosting .wd-unter{color:rgba(241,238,230,.82)}
main.legal.wd.pl-page .wd-pakete{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);padding:0 clamp(8px,1.5vw,20px)}
main.legal.wd.pl-page .wd-paket{transform:skewX(var(--wd-schief));border-radius:18px;background:var(--wd-creme);color:var(--wd-tinte);
  box-shadow:0 26px 50px -30px rgba(0,0,0,.55)}
main.legal.wd.pl-page .wd-paket + .wd-paket{transform:skewX(var(--wd-schief)) translateY(clamp(0px,2.4vw,32px))}
main.legal.wd.pl-page .wd-paket__in{transform:skewX(var(--wd-zurueck));padding:clamp(24px,2.8vw,40px) clamp(26px,3.2vw,48px)}
main.legal.wd.pl-page .wd-paket__name{margin:0;font-family:var(--wd-titel);font-weight:600;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--wd-tinte)}
main.legal.wd.pl-page .wd-paket__wort{position:relative;display:inline-block;margin:12px 0 14px;padding-bottom:8px;font-family:var(--wd-serif);font-style:italic;
  font-weight:500;font-size:clamp(28px,1.2rem + 1vw,38px);line-height:1.1;color:var(--wd-tinte)}
main.legal.wd.pl-page .wd-paket__wort::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--wd-orange)}
main.legal.wd.pl-page .wd-paket__p{margin:0;font-size:15.5px;line-height:1.6;color:var(--wd-tinte-2)}
main.legal.wd.pl-page .wd-hosting__fuss{margin:clamp(44px,5vw,72px) 0 0;max-width:62ch;font-size:14.5px;line-height:1.6;color:rgba(241,238,230,.78)}
main.legal.wd.pl-page .wd-hosting__fuss .wd-link{color:var(--wd-creme);margin-left:4px}

/* Vergleich Basic/Pro und App-Video aus hosting.html (01.11.2026). style.css färbt .hs auf Unterseiten dunkel für helle Flächen;
   hier steht beides auf Nachtblau, darum hell. */
main.legal.wd.pl-page .wd-hosting .hs{margin:clamp(44px,5vw,72px) 0 0}
main.legal.wd.pl-page .wd-hosting .hs-vgl{margin:0 auto;border-color:rgba(241,238,230,.22)!important}
main.legal.wd.pl-page .wd-hosting .hs-h{color:var(--wd-creme);font-family:var(--wd-serif)}
main.legal.wd.pl-page .wd-hosting .hs-w{color:var(--wd-orange)!important}
main.legal.wd.pl-page .wd-hosting .hs-tab tbody th{color:rgba(241,238,230,.86)}
main.legal.wd.pl-page .wd-hosting .hs-tab thead th,main.legal.wd.pl-page .wd-hosting .hs-tab thead .hs-sp{color:var(--wd-orange)!important}
main.legal.wd.pl-page .wd-hosting .hs-schalter{border-color:rgba(241,238,230,.35)}
main.legal.wd.pl-page .wd-hosting .hs-schalter-daumen{background:var(--wd-creme)}
main.legal.wd.pl-page .wd-hosting .hs-schalter-k{color:rgba(241,238,230,.86)}
main.legal.wd.pl-page .wd-hosting .hs-schalter-k[aria-pressed="true"]{color:var(--wd-navy)}
main.legal.wd.pl-page .wd-hosting .hs-tab .hs-sp,main.legal.wd.pl-page .wd-hosting .hs-zahl,main.legal.wd.pl-page .wd-hosting .hs-betrag{color:var(--wd-creme)}
main.legal.wd.pl-page .wd-hosting .hs-betrag--jahr{color:rgba(241,238,230,.75)}
main.legal.wd.pl-page .wd-hosting .hs-tab th,main.legal.wd.pl-page .wd-hosting .hs-tab td{border-bottom-color:rgba(241,238,230,.12)}
main.legal.wd.pl-page .wd-hosting .hs-tab thead th,main.legal.wd.pl-page .wd-hosting .hs-tab .hs-preise tr:first-child th,
main.legal.wd.pl-page .wd-hosting .hs-tab .hs-preise tr:first-child td{border-color:rgba(232,117,54,.45)}
main.legal.wd.pl-page .wd-hosting .hs-nein{background:rgba(241,238,230,.35)}
main.legal.wd.pl-page .wd-hosting .hs-kreis path{stroke:var(--wd-orange)}
main.legal.wd.pl-page .wd-hosting .hs-clip figcaption{color:rgba(241,238,230,.86)}
main.legal.wd.pl-page .wd-hosting .hs-clip-rahmen{background:var(--wd-nacht);border-color:rgba(241,238,230,.18)}

/* ---------- 7. Preis ---------- */
main.legal.wd.pl-page .wd-preis{display:flex;justify-content:center}
main.legal.wd.pl-page .wd-preis__karte{width:min(620px,100%);transform:skewX(var(--wd-schief));border-radius:22px;background:var(--wd-papier);
  border:1px solid rgba(23,44,80,.18);box-shadow:0 30px 60px -40px rgba(12,24,48,.5)}
main.legal.wd.pl-page .wd-preis__in{transform:skewX(var(--wd-zurueck));padding:clamp(30px,4vw,54px) clamp(30px,5vw,64px);text-align:center}
main.legal.wd.pl-page .wd-preis__in .wd-kenn{justify-content:center}
main.legal.wd.pl-page .wd-preis__in .wd-kenn::after{content:"";width:34px;height:2px;background:var(--wd-orange)}
main.legal.wd.pl-page .wd-preis__betrag{margin:0;padding:0;border:0}
main.legal.wd.pl-page .wd-preis__betrag .pk-price{display:block;font-family:var(--wd-serif);font-weight:500;font-size:clamp(52px,2rem + 3.6vw,84px);
  line-height:1;letter-spacing:0;color:var(--wd-tinte);background:none;-webkit-text-fill-color:currentColor}
main.legal.wd.pl-page .wd-preis__p{text-align:center;margin:16px 0 0;font-size:15.5px;line-height:1.6;color:var(--wd-tinte-2)}

/* ---------- 8. Häufige Fragen ---------- */
main.legal.wd.pl-page .wd-fragen__l{border-top:1px solid var(--wd-linie);max-width:900px}
main.legal.wd.pl-page .wd-frage{border-bottom:1px solid var(--wd-linie)}
main.legal.wd.pl-page .wd-frage__f{position:relative;display:flex;align-items:center;min-height:64px;padding:16px 52px 16px 0;cursor:pointer;list-style:none;
  font-family:var(--wd-serif);font-weight:600;font-size:clamp(19px,1rem + .4vw,23px);line-height:1.3;color:var(--wd-tinte)}
main.legal.wd.pl-page .wd-frage__f::-webkit-details-marker{display:none}
/* Plus aus zwei Linien, wird beim Öffnen zum Minus (nur transform) */
main.legal.wd.pl-page .wd-frage__f::before,main.legal.wd.pl-page .wd-frage__f::after{content:"";position:absolute;right:12px;top:50%;width:16px;height:1.5px;
  background:var(--wd-tinte);transition:transform .3s var(--wd-kurve)}
main.legal.wd.pl-page .wd-frage__f::after{transform:rotate(90deg)}
main.legal.wd.pl-page .wd-frage[open] .wd-frage__f::after{transform:rotate(0deg)}
main.legal.wd.pl-page .wd-frage[open] .wd-frage__f::before{background:var(--wd-orange)}
main.legal.wd.pl-page .wd-frage__a{margin:0;padding:0 52px 22px 0;max-width:68ch;font-size:15.5px;line-height:1.65;color:var(--wd-tinte-2)}
main.legal.wd.pl-page .wd-mehr{margin:22px 0 0;font-size:14.5px;color:var(--wd-tinte-2)}

/* ---------- 9. Anfrage: Block aus dem Erzeuger, hier nur eingefärbt ---------- */
body main.legal.wd.pl-page > .contact-duo.anfrage{margin-top:clamp(64px,9vw,128px);margin-bottom:0;padding:clamp(32px,4.5vw,64px) clamp(22px,4.5vw,64px);background:var(--wd-papier);border:1px solid rgba(23,44,80,.12);
  border-radius:22px;box-shadow:0 30px 60px -44px rgba(12,24,48,.5)}
main.legal.wd .anfrage .anfrage-k{font-family:var(--wd-titel);letter-spacing:.3em;text-transform:uppercase;color:var(--wd-tinte)}
main.legal.wd .anfrage .anfrage-h{font-family:var(--wd-serif);color:var(--wd-tinte)}
main.legal.wd .anfrage .anfrage-l li{border-top-color:var(--wd-linie)}
main.legal.wd .anfrage .btn.btn-primary{background:var(--wd-orange);color:var(--wd-nacht)}
main.legal.wd .anfrage .btn.btn-primary:hover{background:#ef8a50}

/* ---------- Auftauchen beim Scrollen (nur mit Skript, nur ohne „Bewegung reduzieren") ---------- */
@media(prefers-reduced-motion:no-preference){
  html.wd-js main.legal.wd.pl-page .wd-auf{opacity:0;translate:0 26px;transition:opacity .8s var(--wd-kurve),translate .8s var(--wd-kurve)}
  html.wd-js main.legal.wd.pl-page .wd-auf.wd-da{opacity:1;translate:0 0}
}
@media(prefers-reduced-motion:reduce){
  main.legal.wd.pl-page .wd-frage__f::after,main.legal.wd.pl-page .dv-screen .wd-video{transition:none}
}

/* ---------- Tablet ---------- */
@media(max-width:1060px){
  /* Punkte untereinander, Kreise links in einer Spalte, die Linie läuft wellig senkrecht durch die Kreise */
  main.legal.wd.pl-page .wd-vorteile__l{grid-template-columns:1fr;gap:clamp(26px,4vw,40px);max-width:640px}
  main.legal.wd.pl-page .wd-vorteile__l li{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:14px;align-items:start}
  main.legal.wd.pl-page .wd-vorteile__nr{grid-row:1 / span 2;margin:0 auto}
  main.legal.wd.pl-page .wd-vorteile__l b,main.legal.wd.pl-page .wd-vorteile__l span:not(.wd-vorteile__nr){grid-column:2}
  main.legal.wd.pl-page .wd-vorteile__l b{margin-top:10px}
  main.legal.wd.pl-page .wd-refbox__l{grid-template-columns:1fr}
}
@media(max-width:899px){
  main.legal.wd.pl-page{--wd-schief:-4deg;--wd-zurueck:4deg}
  main.legal.wd.pl-page .wd-held__in{grid-template-columns:1fr;gap:clamp(40px,7vw,56px)}
  main.legal.wd.pl-page .wd-held__bild{padding-top:5%}
  main.legal.wd.pl-page .wd-held__bild{margin:0 auto;width:min(100%,440px)}
  main.legal.wd.pl-page .wd-funktionen__l{columns:1}
  main.legal.wd.pl-page .wd-pakete{grid-template-columns:1fr;gap:22px}
  main.legal.wd.pl-page .wd-paket + .wd-paket{transform:skewX(var(--wd-schief)) translateX(clamp(0px,3vw,24px))}
}
@media(max-width:699px){
  main.legal.wd.pl-page .wd-refs{grid-template-columns:1fr}
}
@media(min-width:480px) and (max-width:699px){
  main.legal.wd.pl-page .wd-refbox__l{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  main.legal.wd.pl-page .wd-vorteile__l li{grid-template-columns:52px minmax(0,1fr);column-gap:12px}
  main.legal.wd.pl-page .wd-vorteile__nr{width:44px;height:44px;font-size:12px}
  main.legal.wd.pl-page .wd-vorteile__l b{margin-top:8px}
  main.legal.wd.pl-page .wd-held__h{letter-spacing:.04em}
  main.legal.wd.pl-page .wd-held__bild{width:min(100%,260px);padding-top:3%}
  main.legal.wd.pl-page .wd-refbox{padding:18px 16px 20px;border-radius:16px}
  main.legal.wd.pl-page .wd-refbox__l{gap:18px}
  /* je Projekt eine Zeile: Geräte links, Name rechts (Handy-Knopf bleibt mindestens 44 px breit) */
  main.legal.wd.pl-page .wd-ref{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;align-items:center}
  main.legal.wd.pl-page .wd-ref__buehne{padding:10px 8px 4px;border-radius:12px}
  main.legal.wd.pl-page .wd-ref .wd-geraete .dv-laptop{width:82%}
  main.legal.wd.pl-page .wd-ref .wd-geraete .dv-phone{width:27%;right:0}
  main.legal.wd.pl-page .wd-ref__t{margin:0;font-size:18px}
  main.legal.wd.pl-page .wd-held__cap{margin-left:0;letter-spacing:.16em;line-height:1.7}
  /* Blocksatz der Leistungsseiten (js/wort-licht.js) reißt bei 375 px Lücken: am Handy linksbündig */
  main.legal.wd.pl-page .rd-block{text-align:left}
  main.legal.wd.pl-page .wd-funktionen__l li{padding-left:38px;font-size:15.5px}
  main.legal.wd.pl-page .wd-funktionen__l li::before{width:22px}
  main.legal.wd.pl-page .wd-frage__f{padding-right:44px}
  main.legal.wd.pl-page .wd-frage__a{padding-right:0}
  main.legal.wd.pl-page .wd-paket + .wd-paket{transform:skewX(var(--wd-schief))}
  body main.legal.wd.pl-page > .contact-duo.anfrage{border-radius:18px;padding:28px 20px}
}

/* Design-Prüfer 31.10.2026 (DESIGNSPRACHE §11): Zwischenüberschriften mindestens 30 px am Handy und bis 48 px am Rechner, Fließtext höchstens 68 Zeichen breit, Abschnitte mit Luft oben und unten */
main.legal.wd.pl-page .wd-unter{max-width:68ch}
main.legal.wd.pl-page .wd-unter:not(.rd-block){max-width:44ch}
main.legal.wd.pl-page li{max-width:68ch}
main.legal.wd.pl-page .wd-teil{padding-bottom:clamp(32px,4.5vw,64px)}
/* Prüfung 01.11.2026 abends: am Handy klebte die Bildunterschrift an der hellen Fläche; die Fläche endet jetzt 18 px über ihr */
@media(max-width:560px){main.legal.wd.pl-page .wd-held__flaeche{bottom:56px}}
/* Prüfung 01.11.2026 Teil 2 (DESIGNSPRACHE §5.3 und §11): Abschnittsluft oben und unten gleich, nie unter 64 / 88 / 128 px bei 375 / 768 / 1440.
   Zwischen zwei Abschnitten stand bisher oben 128 und unten 64 px; die Abstände der dunklen Bänder und der Anfragekarte
   ergeben sich jetzt allein aus dieser Luft. Antworten der häufigen Fragen und der Hosting-Untertitel lesbar schmal
   (style.css setzt Blocksatz-Absätze mit !important auf volle Breite). */
main.legal.wd.pl-page{--wd-luft:clamp(64px,42px + 6vw,144px)}
main.legal.wd.pl-page .wd-teil{padding-top:var(--wd-luft);padding-bottom:var(--wd-luft)}
main.legal.wd.pl-page .wd-held{padding-top:var(--wd-luft);padding-bottom:var(--wd-luft)}
main.legal.wd.pl-page .wd-hosting{margin-top:0;padding-top:var(--wd-luft);padding-bottom:var(--wd-luft)}
body main.legal.wd.pl-page > .contact-duo.anfrage{margin-top:0}
main.legal.wd.pl-page p.wd-frage__a{max-width:68ch!important}
main.legal.wd.pl-page p.wd-unter{max-width:60ch!important}
main.legal.wd.pl-page .wd-hinweis{margin-top:16px}
main.legal.wd.pl-page .wd-vorteile__l span:not(.wd-vorteile__nr){font-size:16px;line-height:1.6}