/* Nubro Digital · Planet Landingpage (baukasten.html) · Stand 11.10.2026
   Thema „Bauplan“: Nacht mit Blau und Mint aus dem Website-Film. Geist eng und kräftig für Überschriften, Geist Mono für
   Maße, Nummern und kleine Angaben. Strenges Raster aus sechs Spalten mit feinen Linien, alles links ausgerichtet,
   Haarlinien zwischen den Abschnitten, Mittellinien und Maßlinien wie auf einer technischen Zeichnung.
   Baut auf site.css (Grundlagen, Kopfleiste, Knöpfe, Felder, Fußzeile, Planeten-Farben) und baukasten.css (Formular,
   Skizze) auf und überschreibt nur, was hier anders aussieht. Bewegung nur mit CSS: Der Planet schwebt, die Maßlinien im
   Ablauf zeichnen sich beim Scrollen. Bei reduzierter Bewegung steht alles still. */

/* ── Grundlagen: Farben des Planeten auch für die gemeinsamen Bausteine (Felder, Hinweise, Fußzeile) */
body[data-planet="website"]{
  --tinte:var(--p-tinte);--stahl:var(--p-leise);--stahl-2:#8C959D;--linie:var(--p-linie);--blau:var(--p1);--gruen:var(--p2);
  --verlauf:var(--p-verlauf);--glas:rgba(242,239,233,.025);
  --bp-strich:#3A4752;--bp-raster:rgba(91,156,255,.075);--bp-raster-fein:rgba(91,156,255,.035);
  background:var(--p-grund);color:var(--p-tinte)}
[data-planet="website"] :focus-visible{outline-color:var(--p2)}

/* Raster der Seite: sechs Spalten mit feinen Linien, dazwischen noch feinere Halbspalten (zwölf), genau so breit wie der
   Inhalt. Vierer-Teilungen (Ablauf) und Siebtel-Teilungen (Baukasten) liegen damit auch auf Linien. Auf dem Handy drei. */
body[data-planet="website"]::before{content:"";position:fixed;z-index:-1;top:0;bottom:0;left:50%;width:min(1360px,100% - 2*var(--rand));transform:translateX(-50%);pointer-events:none;
  border-left:1px solid var(--bp-raster);
  background:
    repeating-linear-gradient(90deg,transparent 0 calc(100% / 6 - 1px),var(--bp-raster) calc(100% / 6 - 1px) calc(100% / 6)),
    repeating-linear-gradient(90deg,transparent 0 calc(100% / 12 - 1px),var(--bp-raster-fein) calc(100% / 12 - 1px) calc(100% / 12))}
@media (max-width:700px){body[data-planet="website"]::before{background:repeating-linear-gradient(90deg,transparent 0 calc(100% / 3 - 1px),var(--bp-raster) calc(100% / 3 - 1px) calc(100% / 3))}}

/* ── Gemeinsame Teile der Seite */
.bp-marke{display:inline-flex;align-items:center;gap:12px;font:500 12px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--p-leise)}
.bp-marke__punkt{flex:none;width:8px;height:8px;background:var(--p2);box-shadow:0 0 0 4px rgba(52,211,153,.14)}
.bp-h1{font-weight:700;font-size:clamp(42px,5.7vw,90px);line-height:.95;letter-spacing:-.055em;text-wrap:balance}
.bp-h1 span{display:block;color:var(--p-leise)}
.bp-h2{font-weight:700;font-size:clamp(34px,4.2vw,64px);line-height:.98;letter-spacing:-.05em;text-wrap:balance}
.bp-lead{font-size:clamp(17px,1.25vw,19px);line-height:1.6;color:var(--p-leise);max-width:52ch;text-wrap:pretty}
.bp-link{display:inline-flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--bp-strich);font:500 12px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--p-tinte);transition:color .2s,border-color .2s}
.bp-link::after{content:"\2193";content:"\2193" / "";color:var(--p2)}
.bp-link:hover{color:var(--p2);border-color:var(--p2)}

/* Abschnitte: Haarlinie mit Endmarken, Nummer und Angabe in Mono, darunter Überschrift und Einleitung im Raster */
.bp-abschnitt{padding-top:clamp(84px,9.5vw,140px)}
.bp-kopf{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin-bottom:clamp(28px,3.4vw,48px);padding-top:16px;border-top:1px solid var(--p-linie);font:500 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--p-leise)}
.bp-kopf::before,.bp-kopf::after{content:"";position:absolute;top:-5px;width:1px;height:9px;background:var(--p1)}
.bp-kopf::before{left:0}
.bp-kopf::after{right:0}
.bp-nr span{display:inline-block;min-width:3em;color:var(--p1)}
.bp-einleitung{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:end;row-gap:18px;margin-bottom:clamp(32px,4vw,56px)}
.bp-einleitung .bp-h2{grid-column:1/4;padding-right:28px}
.bp-einleitung .bp-lead{grid-column:4/7}
@media (max-width:900px){
  .bp-einleitung{grid-template-columns:minmax(0,1fr)}
  .bp-einleitung .bp-h2,.bp-einleitung .bp-lead{grid-column:1;padding-right:0}
}

/* Passkreuze an den Ecken, wie auf einer Zeichnung */
.bp-ecken{position:relative}
.bp-ecken::before{content:"";position:absolute;inset:-7px;z-index:1;pointer-events:none;
  background:
    linear-gradient(var(--p1) 0 0) left 0 top 7px/15px 1px,linear-gradient(var(--p1) 0 0) left 7px top 0/1px 15px,
    linear-gradient(var(--p1) 0 0) right 0 top 7px/15px 1px,linear-gradient(var(--p1) 0 0) right 7px top 0/1px 15px,
    linear-gradient(var(--p1) 0 0) left 0 bottom 7px/15px 1px,linear-gradient(var(--p1) 0 0) left 7px bottom 0/1px 15px,
    linear-gradient(var(--p1) 0 0) right 0 bottom 7px/15px 1px,linear-gradient(var(--p1) 0 0) right 7px bottom 0/1px 15px;
  background-repeat:no-repeat}

/* ── Ankunft */
.bp-ankunft{position:relative;isolation:isolate;overflow:hidden;padding:clamp(136px,19vh,190px) 0 clamp(72px,8vw,120px)}
.bp-ankunft__raster{position:relative;container-type:inline-size}
/* Millimeterpapier hinter dem Planeten: vier feine Linien je Spalte, am Raster der Seite ausgerichtet */
.bp-ankunft__raster::before{content:"";position:absolute;z-index:-2;top:-190px;bottom:-120px;left:0;right:calc(-1 * var(--rand));pointer-events:none;
  background-image:linear-gradient(90deg,var(--bp-raster) 1px,transparent 1px),linear-gradient(var(--bp-raster) 1px,transparent 1px);
  background-size:calc(100cqi / 24) calc(100cqi / 24);
  -webkit-mask-image:radial-gradient(55% 70% at 84% 42%,#000 20%,transparent 74%);mask-image:radial-gradient(55% 70% at 84% 42%,#000 20%,transparent 74%)}
.bp-planet{position:absolute;z-index:-1;top:calc(-1 * clamp(96px,13vh,132px));right:calc(-1 * clamp(160px,17vw,330px));width:clamp(340px,58vw,900px);aspect-ratio:1200/1206;pointer-events:none}
.bp-planet__schwebe{position:absolute;inset:0}
.bp-planet__bild{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 70px rgba(91,156,255,.2))}
.bp-planet__bahn{position:absolute;inset:-7%;border-radius:50%;border:1px solid rgba(91,156,255,.16)}
.bp-planet__achse{position:absolute;opacity:.42}
.bp-planet__achse--h{left:-12%;right:-12%;top:50%;height:1px;background:repeating-linear-gradient(90deg,var(--p1) 0 26px,transparent 26px 34px,var(--p1) 34px 38px,transparent 38px 46px)}
.bp-planet__achse--v{top:-12%;bottom:-12%;left:50%;width:1px;background:repeating-linear-gradient(180deg,var(--p1) 0 26px,transparent 26px 34px,var(--p1) 34px 38px,transparent 38px 46px)}
.bp-ankunft__text{position:relative;display:grid;justify-items:start;gap:clamp(22px,2.3vw,30px);width:66.667cqi}
.bp-ankunft .bp-lead{max-width:50ch}
.bp-aktion{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;margin-top:2px}

/* Schriftfeld wie auf einer technischen Zeichnung: drei Felder, je eine Spalte breit */
.bp-schriftfeld{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,max(50cqi,600px));margin:0;border:1px solid var(--bp-strich);background:rgba(10,13,16,.72)}
.bp-schriftfeld>div{display:grid;align-content:start;gap:10px;padding:14px 16px 16px}
.bp-schriftfeld>div+div{border-left:1px solid var(--bp-strich)}
.bp-schriftfeld dt{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--p1)}
.bp-schriftfeld dd{display:grid;gap:6px;margin:0}
.bp-schriftfeld strong{font-weight:600;font-size:clamp(18px,1.5vw,22px);line-height:1.15;letter-spacing:-.02em;color:var(--p-tinte)}
.bp-schriftfeld span{font-size:13px;line-height:1.45;color:var(--p-leise)}

@media (max-width:1100px){
  .bp-planet{width:clamp(340px,52vw,620px);right:calc(-1 * 20vw)}
}
@media (max-width:900px){
  .bp-ankunft{padding:64px 0 24px}
  .bp-abschnitt{padding-top:76px}
  .bp-ankunft__raster{display:grid}
  .bp-ankunft__raster::before{top:-64px;mask-image:radial-gradient(70% 40% at 80% 18%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(70% 40% at 80% 18%,#000 20%,transparent 75%)}
  .bp-planet{position:relative;top:auto;right:auto;justify-self:end;width:min(84vw,460px);margin:0 calc(-1 * min(22vw,140px)) calc(-1 * min(10vw,60px)) 0}
  .bp-ankunft__text{width:100%}
  .bp-schriftfeld{width:100%}
}
@media (max-width:640px){
  .bp-schriftfeld{grid-template-columns:minmax(0,1fr)}
  .bp-schriftfeld>div{grid-template-columns:minmax(0,7.5em) minmax(0,1fr);align-items:baseline;column-gap:12px}
  .bp-schriftfeld>div+div{border-left:0;border-top:1px solid var(--bp-strich)}
}

/* ── Vorlagen: Karussell aus site.css (.sq), hier im Bauplan-Look */
[data-planet="website"] .sq{--sq-radius:8px;--sq-gap:12px}
[data-planet="website"] .sq__pfeile{align-items:center;margin-bottom:14px}
.sq__tipp{margin-right:auto;font:500 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--p-leise)}
[data-planet="website"] .sq__pfeil{border-color:var(--bp-strich);background:none}
[data-planet="website"] .sq__pfeil:hover{background:var(--p1);border-color:var(--p1);color:#06101E}
[data-planet="website"] .sq__karte{background:var(--p-flaeche)}
[data-planet="website"] .sq__karte:focus-visible{outline-color:#fff}
/* Solange es keine Beispielseite gibt: Skizze der Seite auf jeder Karte (Kopf, Überschrift = Fachrichtung, Textzeilen,
   Knopf, Bildfeld mit Kreuz, drei Kacheln). Positionen in Prozent der Skizze, Rechnung: Lage / (1 - Größe). */
[data-planet="website"] .sq__bild{background:radial-gradient(80% 70% at 85% 0,rgba(255,255,255,.14),transparent 60%),linear-gradient(150deg,var(--a),var(--b))}
[data-planet="website"] .sq__bild::before{opacity:.3}
[data-planet="website"] .sq__bild::after{content:"";position:absolute;top:13%;left:7%;right:7%;bottom:-2%;border:1px solid rgba(255,255,255,.26);border-bottom:0;border-radius:6px 6px 0 0;
  background:
    linear-gradient(rgba(255,255,255,.6) 0 0) 4.35% 6.2%/8% 3.5% no-repeat,
    linear-gradient(rgba(255,255,255,.3) 0 0) 65.96% 7.1%/6% 2% no-repeat,
    linear-gradient(rgba(255,255,255,.3) 0 0) 75.5% 7.1%/6% 2% no-repeat,
    linear-gradient(rgba(255,255,255,.3) 0 0) 85.1% 7.1%/6% 2% no-repeat,
    linear-gradient(rgba(255,255,255,.16) 0 0) 0 15%/100% 1px no-repeat,
    linear-gradient(rgba(255,255,255,.34) 0 0) 6.67% 61.5%/40% 2.6% no-repeat,
    linear-gradient(rgba(255,255,255,.22) 0 0) 5.88% 67.5%/32% 2.6% no-repeat,
    linear-gradient(rgba(255,255,255,.82) 0 0) 4.7% 78%/15% 6% no-repeat,
    linear-gradient(to top right,transparent calc(50% - .7px),rgba(255,255,255,.32) 50%,transparent calc(50% + .7px)) 93.3% 42.3%/40% 48% no-repeat,
    linear-gradient(to bottom right,transparent calc(50% - .7px),rgba(255,255,255,.32) 50%,transparent calc(50% + .7px)) 93.3% 42.3%/40% 48% no-repeat,
    linear-gradient(rgba(255,255,255,.08) 0 0) 93.3% 42.3%/40% 48% no-repeat,
    linear-gradient(rgba(255,255,255,.08) 0 0) 5.6% 106%/29% 20% no-repeat,
    linear-gradient(rgba(255,255,255,.08) 0 0) 50% 106%/29% 20% no-repeat,
    linear-gradient(rgba(255,255,255,.08) 0 0) 94.4% 106%/29% 20% no-repeat,
    rgba(4,8,12,.14)}
[data-planet="website"] .sq__name{position:absolute;left:10.4%;top:32%;max-width:42%;font:700 clamp(17px,3cqi,40px)/1.02 var(--sans);letter-spacing:-.045em;white-space:normal;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.22)}
[data-planet="website"] .sq__marke{inset:0 auto auto 0;padding:clamp(9px,1.25cqi,17px) 0 0 7%;width:100%;background:none;font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.88)}
/* Karten mit echter Beispielseite (Vorschaubild): Beschriftung als dunkle Pille unten rechts, damit sie den Kopf der
   Beispielseite (Band „erfundener Betrieb“, Name) frei lässt und auch auf hellen Seiten lesbar ist */
[data-planet="website"] .sq__karte img~.sq__marke{inset:auto clamp(10px,1.4cqi,16px) clamp(10px,1.4cqi,16px) auto;width:auto;padding:9px 13px;border-radius:999px;background:rgba(4,8,16,.78);box-shadow:0 0 0 1px rgba(255,255,255,.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff}
[data-planet="website"] .sq__texte{margin-top:18px;padding-top:18px;border-top:1px solid var(--p-linie)}
[data-planet="website"] .sq__tafel p{color:var(--p-leise)}
[data-planet="website"] .sq__bald{border-radius:6px;border-color:var(--bp-strich);padding:12px 14px;font:500 11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase}
[data-planet="website"] .sq__aktionen .btn--rand{border-color:rgba(52,211,153,.6)}
[data-planet="website"] .sq__aktionen .btn--rand::after{content:"\2193";content:"\2193" / "";font-family:var(--mono);color:var(--p2);transition:color .45s var(--kino)}
[data-planet="website"] .sq__aktionen .btn--rand:hover::after,[data-planet="website"] .sq__aktionen .btn--rand:focus-visible::after{color:inherit}
/* ohne JavaScript: die Liste der Fachrichtungen als Tabelle mit Haarlinien */
[data-planet="website"] .sq__daten{gap:0 28px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));border-top:1px solid var(--p-linie)}
[data-planet="website"] .sq__daten li{padding:18px 0;border:0;border-bottom:1px solid var(--p-linie);border-radius:0;background:none}
[data-planet="website"] .sq__daten .sq__bald{display:flex;width:max-content}

/* ── Preis und Umfang: eine Karte wie ein Datenblatt */
.bp-preis{--glut-r:12px}
.bp-preis .glutkarte__inhalt{display:grid}
.bp-preis__kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding:15px clamp(20px,2.4vw,32px);border-bottom:1px solid var(--p-linie)}
.bp-preis__name{font:500 12px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--p-leise)}
.bp-preis__raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.bp-preis__raster>*{padding:clamp(24px,2.6vw,36px) clamp(20px,2.4vw,32px)}
.bp-preis__raster>*+*{border-left:1px solid var(--p-linie)}
.bp-preis__betrag{display:grid;align-content:start;justify-items:start}
.bp-preis__zahl{font-weight:700;font-size:clamp(76px,8.2vw,124px);line-height:.82;letter-spacing:-.065em;font-variant-numeric:tabular-nums lining-nums;color:var(--p-tinte)}
.bp-preis__zahl small{margin-left:.08em;font-size:.36em;font-weight:600;letter-spacing:0;vertical-align:.95em;color:var(--p2)}
.bp-preis__fuer{margin-top:18px;font:500 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--p2)}
.bp-preis__text{margin:14px 0 26px;max-width:32ch;font-size:15.5px;line-height:1.55;color:var(--p-leise)}
.bp-liste h4{margin-bottom:12px;font:500 12px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--p2)}
.bp-liste--nein h4{color:var(--p-leise)}
.bp-liste li{position:relative;padding:11px 0 11px 27px;border-top:1px solid var(--p-linie);font-size:15.5px;line-height:1.5}
.bp-liste li::before{content:"";position:absolute;left:2px;top:22px;width:11px;height:1.5px;background:var(--p2)}
.bp-liste--ja li::after{content:"";position:absolute;left:6.75px;top:17.25px;width:1.5px;height:11px;background:var(--p2)}
.bp-liste--nein li{color:var(--p-leise)}
.bp-liste--nein li::before,.bp-liste--nein li::after{content:"";position:absolute;left:2.5px;top:22px;width:10px;height:1.5px;background:var(--p-leise);transform:rotate(45deg)}
.bp-liste--nein li::after{transform:rotate(-45deg)}
.bp-liste a{text-decoration:underline;text-decoration-color:var(--bp-strich);text-underline-offset:3px}
.bp-liste a:hover{color:var(--p-tinte);text-decoration-color:var(--p2)}
.bp-preis__fuss{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 24px;padding:12px clamp(20px,2.4vw,32px) 14px;border-top:1px solid var(--p-linie)}
@media (max-width:1000px){
  .bp-preis__raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bp-preis__betrag{grid-column:1/-1;border-bottom:1px solid var(--p-linie)}
  .bp-preis__raster>*+*{border-left:0}
  .bp-preis__raster>.bp-liste--nein{border-left:1px solid var(--p-linie)}
}
@media (max-width:640px){
  .bp-preis__raster{grid-template-columns:minmax(0,1fr)}
  .bp-preis__raster>.bp-liste--nein{border-left:0;border-top:1px solid var(--p-linie)}
}

/* „Limitiert“ und die Plätze im Bauplan-Look: Mint statt Rot und Gold, die Plätze als Belegungsplan */
[data-planet="website"] .limit{margin:0;gap:9px;padding:8px 13px 8px 11px;border:1px solid rgba(52,211,153,.5);background:rgba(52,211,153,.07);color:var(--p2);font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;box-shadow:none;transition:background .2s}
[data-planet="website"] .limit:hover{filter:none;background:rgba(52,211,153,.15)}
[data-planet="website"] .limit i{width:7px;height:7px;border-radius:0;background:var(--p2)}
[data-planet="website"] .limit-info{margin:0;padding:22px clamp(20px,2.4vw,32px) 24px;border:0;border-bottom:1px solid var(--p-linie);border-radius:0;background:linear-gradient(180deg,rgba(52,211,153,.07),rgba(52,211,153,0))}
[data-planet="website"] .limit-info__titel{font-size:clamp(17px,1.4vw,19px);color:var(--p-tinte)}
[data-planet="website"] .limit-info p{max-width:72ch;color:var(--p-leise)}
[data-planet="website"] .limit-info__plaetze{gap:clamp(3px,.4vw,6px);max-width:880px;margin:18px 0 12px}
[data-planet="website"] .limit-info__plaetze i{border-radius:2px;border:1px solid rgba(52,211,153,.55);background:rgba(52,211,153,.1)}
[data-planet="website"] .limit-info__plaetze i.weg{border-color:var(--p1);background:var(--p1)}
@media (prefers-reduced-motion:no-preference){[data-planet="website"] .limit i{animation:bp-puls 1.6s ease-out 3}}   /* dreimal, unter 5 s (WCAG 2.2.2) */
@keyframes bp-puls{0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}100%{box-shadow:0 0 0 8px rgba(52,211,153,0)}}
/* ohne JavaScript stehen die Bedingungen offen da */
html:not(.js) .limit-info[hidden]{display:block}
html:not(.js) .limit{pointer-events:none}
html:not(.js) .limit::after{display:none}

/* ── Film */
.bp-film{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:start;row-gap:28px}
.bp-film__text{grid-column:1/4;display:grid;gap:18px;padding-right:28px}
.bp-film__rahmen{grid-column:4/7;margin:0}
.bp-film__video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#06090C}
.bp-film__unter{margin-top:14px;font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--p-leise)}
@media (max-width:900px){
  .bp-film{grid-template-columns:minmax(0,1fr)}
  .bp-film__text,.bp-film__rahmen{grid-column:1;padding-right:0}
}

/* ── Ablauf: vier Schritte auf einer Linie, darüber Maßlinien (auf dem Handy links daneben) */
.bp-ablauf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.bp-ablauf__mass{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:subgrid}
.bp-mass{position:relative;display:flex;align-items:center;justify-content:center;height:30px;margin:0 28px 22px 0;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--p1)}
.bp-mass--a{grid-column:1/3}
.bp-mass--b{grid-column:3/5;color:var(--p2)}
.bp-mass::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;opacity:.8}
.bp-mass::after{content:"";position:absolute;left:0;right:0;top:7px;bottom:7px;border-inline:1px solid currentColor}
.bp-mass span{position:relative;padding:0 12px;background:var(--p-grund);white-space:nowrap}
.bp-ablauf__schritte{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:subgrid}
.bp-ablauf__schritte li{position:relative;display:grid;align-content:start;gap:10px;padding:24px 28px 0 0;border-top:1px solid var(--bp-strich)}
.bp-ablauf__schritte li::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;background:var(--p1)}
.bp-ablauf__schritte li:nth-child(n+3)::before{background:var(--p2)}
.bp-ablauf__nr{font:500 12px/1 var(--mono);letter-spacing:.12em;color:var(--p-leise)}
.bp-ablauf__schritte h3{font-weight:600;font-size:clamp(19px,1.5vw,22px);line-height:1.2;letter-spacing:-.025em}
.bp-ablauf__schritte p{max-width:34ch;font-size:15.5px;line-height:1.55;color:var(--p-leise)}
@media (max-width:760px){
  .bp-ablauf{grid-template-columns:30px minmax(0,1fr);grid-template-rows:repeat(4,auto);column-gap:16px}
  .bp-ablauf__mass{grid-column:1;grid-row:1/-1;grid-template-columns:none;grid-template-rows:subgrid}
  .bp-mass{width:30px;height:auto;margin:0 0 14px;writing-mode:vertical-rl;transform:rotate(180deg)}
  .bp-mass--a{grid-column:auto;grid-row:1/3}
  .bp-mass--b{grid-column:auto;grid-row:3/5}
  .bp-mass::before{left:50%;right:auto;top:0;bottom:0;width:1px;height:auto}
  .bp-mass::after{left:7px;right:7px;top:0;bottom:0;border:0;border-top:1px solid currentColor;border-bottom:1px solid currentColor}   /* physisch: in senkrechter Schrift wären „block“-Ränder links und rechts */
  .bp-mass span{padding:12px 0}
  .bp-ablauf__schritte{grid-column:2;grid-row:1/-1;grid-template-columns:none;grid-template-rows:subgrid}
  .bp-ablauf__schritte li{padding:20px 0 28px}
}
/* die Maßlinien zeichnen sich beim Scrollen (nur wo der Browser das mit CSS kann, sonst stehen sie fertig da) */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .bp-mass::before{animation:bp-zeichnen linear both;animation-timeline:view();animation-range:cover 12% cover 42%}
    .bp-mass span{animation:bp-zeigen linear both;animation-timeline:view();animation-range:cover 26% cover 44%}
  }
}
@media (prefers-reduced-motion:no-preference) and (max-width:760px){
  @supports (animation-timeline:view()){.bp-mass::before{animation-name:bp-zeichnen-hoch}}
}
@keyframes bp-zeichnen{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes bp-zeichnen-hoch{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes bp-zeigen{from{opacity:0}to{opacity:1}}

/* ── Baukasten: Formular aus baukasten.css, Schritte als Blätter mit Haarlinie statt Glas-Karten */
[data-planet="website"] .bk-bau__raster{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:0}
[data-planet="website"] .bk-form,[data-planet="website"] .bk-danke{grid-column:1/8;margin-right:clamp(28px,4vw,64px)}
[data-planet="website"] .bk-vorschau{grid-column:8/13}
@media (max-width:1000px){
  [data-planet="website"] .bk-bau__raster{grid-template-columns:minmax(0,1fr);row-gap:28px}
  [data-planet="website"] .bk-form,[data-planet="website"] .bk-danke,[data-planet="website"] .bk-vorschau{grid-column:1;margin-right:0}
}
[data-planet="website"] .bk-form{gap:0}
[data-planet="website"] .bk-schritt{gap:18px;padding:26px 0 34px;border:0;border-top:1px solid var(--p-linie);border-radius:0;background:none}
[data-planet="website"] .bk-schritt legend{gap:14px;margin-bottom:4px;font-size:clamp(20px,1.6vw,23px);letter-spacing:-.025em}
[data-planet="website"] .bk-schritt__nr{width:auto;height:auto;border-radius:0;background:none;color:var(--p1);font:500 12px/1 var(--mono);letter-spacing:.1em}
[data-planet="website"] .bk-kachel>span,[data-planet="website"] .bk-baustein>span,[data-planet="website"] .bk-stil>span{border-radius:10px;border-color:rgba(242,239,233,.2);background:rgba(242,239,233,.02)}
[data-planet="website"] .bk-kachel:hover>span,[data-planet="website"] .bk-baustein:hover>span,[data-planet="website"] .bk-stil:hover>span{border-color:rgba(242,239,233,.42)}
[data-planet="website"] .bk-kachel input:checked+span,[data-planet="website"] .bk-baustein input:checked+span,[data-planet="website"] .bk-stil input:checked+span{border-color:var(--p2);background:rgba(52,211,153,.08)}
[data-planet="website"] .bk-baustein input:checked+span::before{border-color:var(--p2);background-color:var(--p2)}
[data-planet="website"] .bk-baustein i{color:var(--p2)}
[data-planet="website"] .bk-farbe{border-radius:10px;border-color:rgba(242,239,233,.2)}
[data-planet="website"] .bk-senden{gap:12px;padding-top:28px;border-top:1px solid var(--p-linie)}
[data-planet="website"] .bk-danke{border-radius:12px;border-color:rgba(52,211,153,.45);background:linear-gradient(160deg,rgba(52,211,153,.08),transparent 60%),var(--p-flaeche)}
[data-planet="website"] .bk-vorschau__kleben{gap:14px}
[data-planet="website"] .bk-vorschau__titel{font:500 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--p-leise)}
[data-planet="website"] .bk-vorschau__titel span{font-size:12px;color:var(--p2)}
[data-planet="website"] .bk-browser{border-radius:8px;border-color:var(--bp-strich);background:var(--p-flaeche)}
[data-planet="website"] .bk-browser__leiste{background:#141B22}

/* ── Empfehlen als kompakte Zeile */
.bp-empfehlen{padding-top:clamp(84px,9.5vw,140px)}
.bp-empfehlen__zeile{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;row-gap:10px;padding:clamp(24px,2.8vw,36px) 0;border-block:1px solid var(--p-linie)}
.bp-empfehlen__betrag{grid-column:1/2;font:500 clamp(44px,4.6vw,68px)/1 var(--mono);letter-spacing:-.05em;color:var(--p2);white-space:nowrap}
.bp-empfehlen__betrag small{margin-left:.12em;font-size:.5em;letter-spacing:0;vertical-align:.7em}
.bp-empfehlen__titel{grid-column:2/4;padding-right:28px;font-weight:600;font-size:clamp(20px,1.7vw,25px);line-height:1.2;letter-spacing:-.025em;text-wrap:balance}
.bp-empfehlen__text{grid-column:4/7;max-width:56ch;font-size:15.5px;line-height:1.6;color:var(--p-leise)}
.bp-empfehlen__text ul{margin:6px 0 0;padding-left:1.2em;list-style:disc}
.bp-empfehlen__text li{margin:0 0 4px}
@media (max-width:900px){
  .bp-empfehlen{padding-top:76px}
  .bp-empfehlen__zeile{grid-template-columns:minmax(0,1fr)}
  .bp-empfehlen__betrag,.bp-empfehlen__titel,.bp-empfehlen__text{grid-column:1;padding-right:0}
}

/* ── Fragen */
[data-planet="website"] .bk-fragen{grid-template-columns:repeat(6,minmax(0,1fr));gap:24px 0}
[data-planet="website"] .bk-fragen>.bp-h2{grid-column:1/4;padding-right:28px}
[data-planet="website"] .bk-fragen__liste{grid-column:4/7}
[data-planet="website"] .bk-fragen__liste summary{padding:18px 0;font-size:clamp(16px,1.3vw,18px)}
[data-planet="website"] .bk-fragen__liste summary::after{font:400 22px/1 var(--mono);color:var(--p2)}
[data-planet="website"] .bk-fragen__liste p{color:var(--p-leise)}
@media (max-width:900px){
  [data-planet="website"] .bk-fragen{grid-template-columns:minmax(0,1fr)}
  [data-planet="website"] .bk-fragen>.bp-h2,[data-planet="website"] .bk-fragen__liste{grid-column:1;padding-right:0}
}

/* ── Fußzeile */
[data-planet="website"] .bk-fuss{margin-top:clamp(96px,10vw,150px)}

/* ── Bewegung: der Planet schwebt ruhig; bei reduzierter Bewegung steht er still */
@media (prefers-reduced-motion:no-preference){
  .bp-planet__schwebe{animation:bp-schweben 16s ease-in-out infinite}
}
@keyframes bp-schweben{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(-8px,-16px,0) rotate(-1.2deg)}}

/* Zusage unter dem Ablauf (12.10.2026): 4 Werktage oder Geld zurück */
[data-planet="website"] .bp-zusage{grid-column:1/-1;max-width:62rem;margin-top:clamp(24px,3vw,36px);padding:18px 22px;border:1px solid rgba(52,211,153,.45);border-radius:10px;background:rgba(52,211,153,.06);color:var(--p-leise);font-size:clamp(15px,1.15vw,17px);line-height:1.6}
[data-planet="website"] .bp-zusage strong{color:var(--tinte);font-weight:600}
/* Gesamtpreis am Bestellknopf und Feld „Weitere Seiten“ (12.10.2026) */
[data-planet="website"] .bk-gesamt{margin:4px 0 2px;font-size:clamp(16px,1.3vw,19px);color:var(--p-leise)}
[data-planet="website"] .bk-gesamt strong{color:var(--tinte);font-weight:600;font-size:1.2em}
[data-planet="website"] .bk-seiten .input{max-width:9rem}