/* Nubro Digital · Baukasten-Seite (baukasten.html) · Stand 10.10.2026
   Baut auf site.css auf (Farben, Schriften, Knöpfe, Felder, Navigation, Fußzeile). Ohne GSAP:
   Bewegung nur über kurze CSS-Übergänge, bei reduzierter Bewegung aus. */

.bk main{padding-bottom:0}

/* Start */
.bk-start{position:relative;padding:clamp(120px,17vh,180px) 0 clamp(36px,5vw,72px);overflow:hidden;isolation:isolate}
.bk-start::before{content:"";position:absolute;z-index:-1;top:-10%;right:-10%;width:70%;height:120%;background:radial-gradient(closest-side,rgba(91,157,255,.13),transparent 72%);pointer-events:none}
.bk-start__raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(24px,5vw,72px);align-items:end}
.bk-start__text{display:grid;gap:26px}
.bk-titel{font-weight:600;font-size:clamp(46px,7.2vw,116px);line-height:.92;letter-spacing:-.05em;text-wrap:balance}
.bk-titel em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.bk-fakten{display:grid;gap:10px;max-width:62ch}
.bk-fakten li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:14px 18px;border-radius:14px;background:var(--glas);border:1px solid var(--linie);color:var(--stahl);font-size:15.5px;line-height:1.45}
.bk-fakten strong{min-width:9.5ch;color:var(--tinte);font-weight:600}
.bk-start__cta{display:flex;flex-wrap:wrap;gap:12px}
.bk-start__igel img{width:100%;max-width:380px;height:auto;margin-left:auto}
@media (max-width:900px){
  .bk-start{padding-top:96px}
  .bk-start__raster{grid-template-columns:1fr}
  .bk-start__igel{order:-1}
  .bk-start__igel img{max-width:200px;margin:0 auto}
}

/* Abschnitte */
.bk-abschnitt{padding-top:clamp(80px,10vw,140px)}

.bk-ablauf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:clamp(28px,3vw,44px)}
.bk-ablauf li{display:grid;align-content:start;gap:10px;padding:24px;border-radius:18px;background:var(--glas);border:1px solid var(--linie)}
.bk-ablauf b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--verlauf);color:var(--dunkel);font:600 15px var(--mono)}
.bk-ablauf h3{font-weight:600;font-size:20px;letter-spacing:-.02em}
.bk-ablauf p{color:var(--stahl);font-size:15.5px;line-height:1.55}
@media (max-width:1000px){.bk-ablauf{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.bk-ablauf{grid-template-columns:1fr}}

.bk-umfang{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(28px,3vw,44px)}
.bk-umfang>div{padding:clamp(22px,2.6vw,32px);border-radius:20px;border:1px solid var(--linie);background:var(--glas)}
.bk-umfang__ja{background:linear-gradient(160deg,rgba(56,217,160,.1),transparent 60%),var(--glas)!important}
.bk-umfang h3{margin-bottom:12px;font-weight:600;font-size:22px;letter-spacing:-.02em}
.bk-umfang li{position:relative;padding:11px 0 11px 30px;border-top:1px solid var(--linie);font-size:16px;line-height:1.45}
.bk-umfang li::before{content:"";position:absolute;left:2px;top:17px;width:13px;height:7px;border-left:2px solid var(--gruen);border-bottom:2px solid var(--gruen);transform:rotate(-45deg)}
.bk-umfang__nein li{color:var(--stahl)}
.bk-umfang__nein li::before{top:22px;width:12px;height:2px;border:0;background:var(--stahl-2);transform:none}
.bk-ust{margin-top:14px}
@media (max-width:760px){.bk-umfang{grid-template-columns:1fr}}

/* Baukasten */
.bk-bau__kopf{display:grid;gap:18px;margin-bottom:clamp(28px,3vw,44px)}
.bk-bau__raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:start}
.bk-form,.bk-danke{grid-column:1}
.bk-vorschau{grid-column:2;grid-row:1/span 2;align-self:stretch}
.bk-vorschau__kleben{position:sticky;top:100px;display:grid;gap:12px}
.bk-form{display:grid;gap:18px}
.bk-schritt{display:grid;gap:18px;min-inline-size:0;margin:0;padding:clamp(20px,2.4vw,30px);border-radius:20px;border:1px solid var(--linie);background:var(--glas)}
.bk-schritt legend{float:left;display:flex;align-items:center;gap:12px;width:100%;margin-bottom:2px;padding:0;font-weight:600;font-size:22px;letter-spacing:-.02em}
.bk-schritt__nr{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--verlauf);color:var(--dunkel);font:600 14px var(--mono)}
.bk-schritt .lbl{display:flex;flex-direction:column;gap:6px}
.bk-schritt .hinweis{margin-top:-6px}
.bk-feld{display:grid;gap:10px}
.bk-zwei{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bk-halb{max-width:260px}
textarea.input{min-height:76px;resize:vertical;font:400 15px/1.5 var(--sans)}
input[type="date"].input{color-scheme:dark}
[data-wenn][hidden]{display:none!important}

.bk-kacheln{display:grid;gap:10px}
.bk-kacheln--fach{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.bk-kacheln--bau{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.bk-kacheln--stil{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.bk-kachel,.bk-baustein,.bk-stil{position:relative;display:block;cursor:pointer;font:inherit;text-transform:none;letter-spacing:0;color:var(--tinte)}
.bk-kachel input,.bk-baustein input,.bk-stil input{position:absolute;width:1px;height:1px;opacity:0}
.bk-kachel>span,.bk-baustein>span,.bk-stil>span{display:grid;height:100%;border-radius:14px;border:1px solid rgba(232,237,242,.18);background:rgba(232,237,242,.03);transition:border-color .2s,background .2s}
.bk-kachel>span{align-items:center;min-height:54px;padding:12px 14px;font-weight:500;font-size:15px;line-height:1.25}
.bk-kachel:hover>span,.bk-baustein:hover>span,.bk-stil:hover>span{border-color:rgba(232,237,242,.36)}
.bk-kachel input:checked+span,.bk-baustein input:checked+span,.bk-stil input:checked+span{border-color:var(--gruen);background:rgba(56,217,160,.1)}
.bk-kachel input:focus-visible+span,.bk-baustein input:focus-visible+span,.bk-stil input:focus-visible+span{outline:2px solid var(--gruen);outline-offset:2px}
.bk-baustein>span{position:relative;align-content:start;gap:4px;padding:14px 16px 14px 46px}
.bk-baustein>span::before{content:"";position:absolute;left:15px;top:16px;width:18px;height:18px;border-radius:5px;border:1.5px solid rgba(232,237,242,.42)}
.bk-baustein input:checked+span::before{border-color:var(--gruen);background:var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%2304121A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
.bk-baustein input:disabled+span{cursor:default}
.bk-baustein b{font-weight:600;font-size:15px}
.bk-baustein small{color:var(--stahl);font-size:13px;line-height:1.4}
.bk-baustein i{font:500 11px var(--mono);font-style:normal;letter-spacing:.06em;color:var(--gruen)}
.bk-stil>span{gap:4px;padding:12px}
.bk-stil>span::before{content:"";height:46px;margin-bottom:6px;border-radius:8px;border:1px solid rgba(232,237,242,.1);background:var(--muster)}
.bk-stil b{font-weight:600;font-size:14.5px}
.bk-stil small{color:var(--stahl);font-size:12.5px;line-height:1.35}
.bk-stil--ruhig{--muster:linear-gradient(180deg,#F7F5F0 0 38%,#E7E2D8 38% 44%,#F7F5F0 44%)}
.bk-stil--hell{--muster:linear-gradient(135deg,#FFFFFF,#E3ECFA)}
.bk-stil--kraeftig{--muster:linear-gradient(135deg,#0E1621 40%,#2B5BB8)}
.bk-stil--warm{--muster:radial-gradient(60% 90% at 20% 30%,#E8C9A0,transparent 70%),linear-gradient(135deg,#F3E6D3,#CFA77A)}
.bk-farbe{flex-direction:row!important;align-items:center;justify-content:space-between;padding:8px 10px 8px 16px;border-radius:12px;border:1px solid rgba(232,237,242,.18)}
.bk-farbe input[type="color"]{width:46px;height:34px;padding:0;border:0;border-radius:8px;background:none;cursor:pointer}
.bk-wahl{display:grid;gap:8px}
.bk-schritt .check{font-size:14.5px;line-height:1.5;color:var(--tinte)}
.bk-schritt .check a{color:inherit}
.bk-senden{display:grid;justify-items:start;gap:10px}
.bk-senden [hidden]{display:none}
.bk-senden .btn{padding:18px 30px;font-size:16px}

.bk-danke{display:grid;gap:14px;padding:clamp(22px,3vw,34px);border-radius:20px;border:1px solid rgba(56,217,160,.4);background:linear-gradient(160deg,rgba(56,217,160,.1),transparent 60%),var(--glas)}
.bk-danke[hidden]{display:none}
.bk-danke__titel{font-weight:600;font-size:24px;letter-spacing:-.02em}
.bk-danke p{color:var(--stahl)}
.bk-danke__liste{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 18px;margin:4px 0;font-size:15px}
.bk-danke__liste dt{color:var(--stahl)}
.bk-danke__liste dd{margin:0;white-space:pre-line;overflow-wrap:anywhere}
.bk-danke .btn{justify-self:start}
.bk-danke__text{width:100%;min-height:220px;font:400 14px/1.55 var(--mono);white-space:pre-wrap;resize:vertical}
.bk-danke__knoepfe{display:flex;flex-wrap:wrap;gap:10px}
.bk-danke__knoepfe .btn{justify-self:auto}
.bk-danke a{text-decoration:underline;text-underline-offset:3px}
.bk-danke .btn{text-decoration:none}

/* Skizze der Seite: Stil und Farben folgen dem Formular */
.bk-vorschau__titel{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px;font-weight:600;font-size:16px}
.bk-vorschau__titel span{font:500 12px var(--mono);color:var(--stahl)}
.bk-browser{--f1:#2F6FDB;--f2:#2FA77F;--grund:#FAF9F6;--text:#1B2430;--leise:#6B7380;--fl:rgba(27,36,48,.12);--karte:rgba(27,36,48,.04);--kopf:var(--serif);--rund:6px;
  overflow:hidden;border-radius:14px;border:1px solid rgba(232,237,242,.14);background:#11161E;box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
.bk-browser[data-stil="hell"]{--grund:#FFFFFF;--karte:#F1F5FB;--kopf:var(--sans);--rund:10px}
.bk-browser[data-stil="kraeftig"]{--grund:#0E141C;--text:#E8EDF2;--leise:#9AA5B1;--fl:rgba(232,237,242,.14);--karte:rgba(232,237,242,.05);--kopf:var(--sans);--rund:8px}
.bk-browser[data-stil="warm"]{--grund:#F6EEE2;--text:#3A2A1C;--leise:#7A6553;--fl:rgba(122,86,48,.18);--karte:rgba(122,86,48,.08);--rund:16px}
.bk-browser__leiste{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#161C25}
.bk-browser__leiste i{width:9px;height:9px;border-radius:50%;background:rgba(232,237,242,.2)}
.bk-browser__leiste span{flex:1;min-width:0;margin-left:10px;padding:4px 10px;border-radius:999px;background:rgba(232,237,242,.07);font:500 11px var(--mono);color:var(--stahl);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-browser__seite{position:relative;display:grid;gap:10px;max-height:min(64vh,620px);overflow:auto;padding:12px;background:var(--grund);color:var(--text);font-family:var(--sans);transition:background-color .4s,color .4s}
.vs-kopf{display:flex;justify-content:space-between;align-items:center;font:600 14px var(--kopf)}
.vs-menue{display:flex;gap:4px}
.vs-menue i{width:16px;height:3px;border-radius:2px;background:var(--fl)}
.vs-start{display:grid;gap:6px;padding:20px 14px;border-radius:var(--rund);background:linear-gradient(135deg,var(--f1),var(--f2));color:#fff;transition:background .4s}
.vs-start strong{font:600 21px/1.1 var(--kopf);overflow-wrap:anywhere}
.vs-start span{font-size:12px;opacity:.92}
.vs-start em{justify-self:start;margin-top:6px;padding:5px 11px;border-radius:999px;background:#fff;color:var(--text);font:600 10.5px var(--sans)}
.vs-block{display:grid;gap:6px;padding:12px;border-radius:var(--rund);background:var(--karte);animation:vsRein .45s var(--auftritt) both}
.vs-block[hidden]{display:none}
.vs-block b{font:600 13.5px var(--kopf);color:var(--f1)}
.bk-browser[data-stil="kraeftig"] .vs-block b{color:var(--f2)}
.vs-block ul{display:grid;gap:4px;margin:0;padding:0;list-style:none;font-size:11.5px;color:var(--leise)}
.vs-block li{overflow-wrap:anywhere}
.vs-block li::before{content:"";display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--f2);vertical-align:1px}
.vs-zeilen,.vs-preise{display:grid;gap:5px}
.vs-zeilen i,.vs-preise i{height:5px;border-radius:3px;background:var(--fl)}
.vs-zeilen i:nth-child(2){width:84%}
.vs-zeilen i:nth-child(3){width:62%}
.vs-preise i{width:100%;background:linear-gradient(90deg,var(--fl) 0 62%,transparent 62% 82%,var(--fl) 82%)}
.vs-zeiten{font-size:11.5px;color:var(--leise);white-space:pre-line;overflow-wrap:anywhere}
.vs-galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.vs-galerie i{aspect-ratio:4/3;border-radius:4px;background:linear-gradient(135deg,var(--f1),var(--f2));opacity:.35}
.vs-zitat{font:italic 400 13px var(--serif);color:var(--leise)}
.vs-form{display:grid;gap:5px}
.vs-form i{height:14px;border-radius:4px;border:1px solid var(--fl)}
.vs-form em{justify-self:start;padding:4px 11px;border-radius:999px;background:var(--f1);color:#fff;font:600 10px var(--sans);font-style:normal}
.vs-fuss{padding:6px 0 2px;text-align:center;font-size:10px;color:var(--leise)}
.vs-chat{position:sticky;bottom:6px;justify-self:end;display:flex;align-items:center;gap:6px;padding:5px 11px 5px 5px;border-radius:999px;background:var(--f1);color:#fff;font:600 10.5px var(--sans);box-shadow:0 6px 14px rgba(0,0,0,.22);animation:vsRein .45s var(--auftritt) both}
.vs-chat[hidden]{display:none}
.vs-chat i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#fff;color:var(--f1);font:700 8px var(--sans);font-style:normal}
@keyframes vsRein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (max-width:1000px){
  .bk-bau__raster{grid-template-columns:1fr}
  .bk-vorschau{grid-column:1;grid-row:auto;order:-1}
  .bk-vorschau__kleben{position:static}
  .bk-browser__seite{max-height:320px}
}
@media (max-width:560px){.bk-zwei{grid-template-columns:1fr}.bk-danke__liste{grid-template-columns:1fr;gap:2px}.bk-danke__liste dd{margin-bottom:8px}}

/* Fragen */
.bk-fragen{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:start}
.bk-fragen__liste details{border-top:1px solid var(--linie)}
.bk-fragen__liste details:last-child{border-bottom:1px solid var(--linie)}
.bk-fragen__liste summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;list-style:none;cursor:pointer;font-weight:600;font-size:clamp(16px,1.4vw,19px);letter-spacing:-.01em}
.bk-fragen__liste summary::-webkit-details-marker{display:none}
.bk-fragen__liste summary::after{content:"+";flex:none;font:400 24px/1 var(--mono);color:var(--gruen);transition:transform .3s var(--kino)}
.bk-fragen__liste details[open] summary::after{transform:rotate(45deg)}
.bk-fragen__liste p{max-width:62ch;padding:0 0 22px;color:var(--stahl);line-height:1.6}
.bk-fragen__liste a{text-decoration:underline;text-underline-offset:2px}
@media (max-width:900px){.bk-fragen{grid-template-columns:1fr}}

/* Fuß */
.bk-fuss{margin-top:clamp(90px,10vw,140px);padding-bottom:36px}
.bk-fuss .abspann__ki{margin-top:4px}

@media (prefers-reduced-motion:reduce){
  .vs-block,.vs-chat{animation:none}
  .bk-browser__seite,.vs-start,.bk-fragen__liste summary::after{transition:none}
}

/* Vorlagen: Karussell aus site.css (.sq), hier nur der Abstand im Abschnitt */
.bk .beispiele .sq,.bk .beispiele .sq__daten{margin-top:clamp(8px,1vw,16px)}
/* Unterlagen im Baukasten */
.bk-datei .input[type="file"]{padding:12px 14px;cursor:pointer}
.bk-datei .input::file-selector-button{margin-right:12px;padding:8px 14px;border:1px solid rgba(232,237,242,.3);border-radius:999px;background:rgba(232,237,242,.06);color:var(--tinte);font:500 13px var(--sans);cursor:pointer}
.bk-datei__liste{display:grid;gap:6px;margin:0;padding:0;list-style:none;font-size:14px;color:var(--stahl)}
.bk-datei__liste li{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:10px;background:rgba(232,237,242,.05)}
.bk-datei__liste li.fehlt{color:#FF9A8A}

/* E-Book-Seite */
.eb-reihe{font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--stahl)}
.eb-start__raster{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center}
.eb-film{display:grid;gap:10px;margin:0}
.eb-film__video{display:block;width:100%;aspect-ratio:16/9;border-radius:18px;border:1px solid var(--linie);background:#0A0F16;box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.eb-wen{grid-template-columns:repeat(3,minmax(0,1fr))}
.eb .ebook{padding-top:clamp(80px,10vw,140px)}
.eb-autor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(28px,5vw,80px);align-items:center}
.eb-autor__bild{margin:0;border-radius:24px;overflow:hidden;background:radial-gradient(70% 80% at 60% 30%,#15202E,#080C12);box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 0 1px var(--linie)}
.eb-autor__bild img{display:block;width:100%;height:auto}
.eb-autor__text{display:grid;gap:22px}
.eb-kauf__raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.eb-kauf__gratis,.eb-kauf__bestellen{display:grid;gap:18px;padding:clamp(24px,3vw,40px);border-radius:24px;border:1px solid var(--linie);background:var(--glas)}
.eb-kauf__gratis{background:linear-gradient(160deg,rgba(56,217,160,.12),transparent 60%),var(--glas)}
.eb-kauf__titel{font-weight:600;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.03em}
.eb-form{display:grid;gap:14px}
.eb-form .lbl{display:flex;flex-direction:column;gap:6px}
.gratis__zeile{display:flex;flex-wrap:wrap;gap:10px}
.gratis__zeile .input{flex:1 1 240px;min-width:0;border-radius:999px;padding:14px 18px}
.eb-form [hidden]{display:none!important}
@media (max-width:900px){.eb-start__raster,.eb-autor,.eb-kauf__raster{grid-template-columns:1fr}.eb-wen{grid-template-columns:1fr}.eb-autor__bild{max-width:360px}}