/* Ideen aus Glas (/ideen/): Anwendungsseiten, Pilot Küchenrückwand 23.09.2026.
   Gleiche Bausteine wie die Startseite (Bildkarten mit Nummer, grünes
   Planungsband, Knöpfe), damit die Seiten wie ein Teil davon wirken.
   Baut auf theme.css auf. Keine Inline-Stile: die Auslieferung setzt style-src 'self'. */
body{font-family:Manrope,Arial,sans-serif}
a{color:inherit}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:500;letter-spacing:-.045em;line-height:1.08;hyphens:auto;overflow-wrap:break-word}
p{line-height:1.65}
img{display:block;max-width:100%}
section,article,div,li{min-width:0}
a:focus-visible,summary:focus-visible{outline:3px solid #a2480a;outline-offset:4px}
.skip{position:fixed;top:-100px;left:16px;z-index:100;background:#fff;padding:12px}
.skip:focus{top:12px}
.id-wrap{max-width:var(--k-breite,1760px);margin:auto;padding-inline:var(--k-rand,64px)}
.id-krumen{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:12px;padding-block:14px;color:var(--t-muted)}
.id-krumen a{display:inline-flex;align-items:center;min-height:44px;color:var(--t-muted)}

/* Knöpfe wie auf der Startseite */
.id-knopf{display:inline-flex;justify-content:space-between;align-items:center;gap:35px;min-height:52px;padding:15px 24px;font-size:13px;font-weight:600;background:var(--t-ink);color:var(--t-paper);text-decoration:none;border:1px solid transparent;transition:transform .16s,background .16s}
.id-knopf:hover{transform:translateY(-2px);background:#283a55}
.id-knopf span,.id-textlink span{font-size:20px;line-height:1}
.id-knopf-hell{background:var(--t-paper);color:var(--t-ink)}
.id-knopf-hell:hover{background:#fff}
.id-textlink{display:inline-flex;align-items:center;gap:18px;min-height:44px;border-bottom:1px solid currentColor;font-size:13px;font-weight:600;text-decoration:none}

/* Bildfläche: Höhe aus dem Seitenverhältnis des Kastens, nie aus dem Bild. */
.id-bild{display:block;position:relative;overflow:hidden;background:#e4e6ea;aspect-ratio:4/3}
.id-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%;transition:transform .4s}
.id-bild-leer span{position:absolute;left:18px;bottom:14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-muted)}

/* Kopf mit Bild */
.id-held{display:grid;grid-template-columns:minmax(0,46%) minmax(0,54%);background:var(--t-paper);border-block:1px solid var(--t-line);min-height:540px}
.id-held-text{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:56px 9% 56px max(5vw,calc((100vw - 1404px)/2))}
.id-held h1{font-size:clamp(44px,5vw,76px);line-height:1.02;margin:20px 0 26px}
.id-lead{font-size:17px;max-width:520px}
.id-wege{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:34px}
.id-held-bild{aspect-ratio:auto;min-height:100%}
.id-held-bild img{object-position:50% 30%}

/* Abschnitte */
.id-abschnitt{padding-block:72px}
.id-abschnitt-kopf{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:32px}
.id-abschnitt-kopf h2,.id-wissen h2{font-size:clamp(30px,3vw,42px);margin-top:14px}
.id-abschnitt-kopf>p{font-size:14px;max-width:380px;color:var(--t-muted)}

/* Ausführungen: Bildkarten mit Nummer wie "Was hast du vor?" auf der Startseite */
.id-ausf-raster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 25px}
.id-ausf{display:flex;flex-direction:column}
.id-ausf:hover .id-bild img{transform:scale(1.03)}
.id-ausf-text{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-top:18px;flex:1}
.id-karte-kat{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-muted)}
.id-ausf h3{font-size:20px;letter-spacing:-.03em}
.id-ausf-text>p:not(.id-karte-kat){font-size:14px;color:#3d4654}
.id-mehr{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:auto;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:5px}
.id-ausf-eigen{background:var(--t-ink);color:var(--t-paper)}
.id-ausf-eigen .id-ausf-text{padding:26px 24px 24px;gap:16px}
.id-ausf-eigen .id-karte-kat{color:var(--t-sage)}
.id-ausf-eigen h3{font-size:26px;line-height:1.15}
.id-ausf-eigen .id-knopf{margin-top:auto}

/* Planung: grünes Band wie "Von deiner Idee zur Konfiguration" */
.id-planung{background:var(--t-ink);color:var(--t-paper);padding:72px 5%}
.id-planung-innen{max-width:1404px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:10%}
.id-planung-innen>div:first-child{position:sticky;top:calc(var(--t-kopf-h,0px) + 32px);align-self:start}
.id-planung .t-eyebrow{color:var(--t-sage)}
.id-planung h2{font-size:clamp(32px,3.2vw,44px);font-weight:400;line-height:1.15;margin:20px 0 34px}
.id-planung em{font-style:normal;color:var(--t-sage)}
.id-schritte{list-style:none;margin:0;padding:0}
.id-schritte li{display:flex;gap:30px;padding:22px 0;border-top:1px solid #d3dae44d}
.id-schritte li:last-child{border-bottom:1px solid #d3dae44d}
.id-schritte li>span{font-size:11px;margin-top:3px;color:var(--t-sage);min-width:16px}
.id-schritte h3{font-size:17px;letter-spacing:-.01em}
.id-schritte p{font-size:14px;color:#cfd3da;margin-top:8px;max-width:560px}

/* Glaswissen */
.id-wissen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:10%}
.id-wissen .id-textlink{margin-top:26px}
.id-wissen-liste article{padding:24px 0;border-top:1px solid var(--t-line)}
.id-wissen-liste article:last-child{border-bottom:1px solid var(--t-line)}
.id-wissen-liste h3{font-size:19px;letter-spacing:-.02em}
.id-wissen-liste p{font-size:14px;color:#3d4654;margin-top:8px}

/* Übersicht /ideen/ */
.id-sprung{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.id-sprung a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--t-line);background:#fff;font-size:13px;font-weight:600;text-decoration:none}
.id-sprung a:hover{border-color:var(--t-ink)}
.id-sprung span{font-weight:400;color:var(--t-muted)}
.id-bereich{padding-block:20px 30px;border-top:1px solid var(--t-line)}
.id-bereich-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:10px 40px;align-items:end;padding-block:40px 10px}
.id-bereich-kopf .t-eyebrow{grid-column:1/-1}
.id-bereich-kopf h2{font-size:clamp(34px,3.6vw,52px)}
.id-bereich-kopf>p:last-child{font-size:15px;color:var(--t-muted)}
.id-gruppe{padding-top:44px;scroll-margin-top:20px}
.id-gruppe-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 24px;margin-bottom:22px}
.id-gruppe-kopf h3{font-size:26px;letter-spacing:-.03em}
.id-gruppe-kopf p{font-size:14px;color:var(--t-muted);max-width:640px}
.id-weiter{border-top:1px solid var(--t-line)}
.id-karte-titel{margin:0}
.id-kopf-schmal{padding-block:24px 40px;max-width:760px}
.id-kopf-schmal h1{font-size:clamp(42px,4.6vw,68px);margin:20px 0 22px}
.id-raster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 25px}
.id-karte{display:flex;flex-direction:column;gap:8px;text-decoration:none}
.id-karte .id-bild{margin-bottom:10px}
.id-karte:hover img{transform:scale(1.03)}
.id-karte-titel{display:flex;justify-content:space-between;gap:12px;font-size:19px;font-weight:500;letter-spacing:-.03em}
.id-leer{padding-bottom:80px}
.id-bereich:last-child{padding-bottom:80px}

@media(prefers-reduced-motion:reduce){.id-knopf,.id-bild img{transition:none}.id-knopf:hover{transform:none}.id-ausf:hover .id-bild img,.id-karte:hover img{transform:none}}
@media(max-width:1100px){.id-ausf-raster{grid-template-columns:repeat(2,minmax(0,1fr))}.id-raster{grid-template-columns:repeat(2,minmax(0,1fr))}.id-held{min-height:480px}}
@media(max-width:860px){.id-bereich-kopf{grid-template-columns:minmax(0,1fr)}.id-held{grid-template-columns:minmax(0,1fr)}.id-held-text{padding:40px 5% 44px}.id-held-bild{order:-1;aspect-ratio:4/3;min-height:0}.id-planung-innen,.id-wissen{grid-template-columns:minmax(0,1fr);gap:40px}.id-planung-innen>div:first-child{position:static}.id-abschnitt-kopf{flex-direction:column;align-items:flex-start;gap:14px}.id-abschnitt{padding-block:56px}.id-planung{padding-block:56px}}
@media(max-width:560px){.id-ausf-raster,.id-raster{grid-template-columns:minmax(0,1fr)}.id-held h1,.id-kopf-schmal h1{font-size:clamp(34px,11vw,44px)}.id-lead{font-size:16px}.id-knopf{gap:20px}.id-schritte li{gap:18px}}
/* Mindestschrift 12 px (Vollprüfung 24.09.2026, W07). */
.id-karte-kat{font-size:12px}
.id-schritte li>span,.id-bild-leer span{font-size:12px}

/* Gestaltungsrunde G4 (24.09.2026) */
/* Befund 29: Titel ohne Trennstrich. Die Klasse t-wl-NN am Textblock nennt das längste Wort (server/service.mjs,
   wortKlasse); die Schrift wird nur so weit kleiner, dass es in die Spalte passt. */
h1{hyphens:manual;-webkit-hyphens:manual}
.id-held-text{container-type:inline-size}
.id-held h1{--h1-fs:clamp(44px,5vw,76px);font-size:min(var(--h1-fs),calc(100cqi / (var(--wl,1) * .56)));text-wrap:balance}
@media(max-width:560px){.id-held h1{--h1-fs:clamp(34px,11vw,44px)}}
.t-wl-10{--wl:10}.t-wl-12{--wl:12}.t-wl-14{--wl:14}.t-wl-16{--wl:16}.t-wl-18{--wl:18}.t-wl-20{--wl:20}.t-wl-22{--wl:22}.t-wl-24{--wl:24}.t-wl-26{--wl:26}.t-wl-28{--wl:28}.t-wl-30{--wl:30}
/* Brotkrumen wie auf den Serviceseiten: der Schrägstrich bricht mit dem folgenden Glied um. */
.id-krumen{column-gap:8px}
.id-krumen>[aria-hidden]{display:none}
.id-krumen>:not(:first-child){position:relative;padding-left:24px}
.id-krumen>:not(:first-child)::before{content:"/";content:"/" / "";position:absolute;left:7px;top:50%;transform:translateY(-50%)}
/* Befund 29: bei gerader Punktzahl (Klasse id-breit) Titel und Knopf in einer Kopfzeile, Punkte in zwei Spalten
   darunter; so bleibt unter Knopf und Link keine leere Spalte. */
@media(min-width:861px){
  .id-breit.id-planung .id-planung-innen,.id-breit.id-wissen{grid-template-columns:minmax(0,1fr);gap:40px}
  .id-breit .id-planung-innen>div:first-child,.id-breit.id-wissen>div:first-child{position:static;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:40px}
  .id-breit .id-planung-innen>div:first-child .t-eyebrow,.id-breit.id-wissen>div:first-child .t-eyebrow{grid-column:1/-1}
  .id-breit.id-planung h2{margin:20px 0 0}
  .id-breit .id-planung-innen>div:first-child .id-knopf,.id-breit.id-wissen .id-textlink{grid-column:2;grid-row:2;margin-top:0}
  .id-breit .id-schritte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:8%;border-bottom:1px solid #d3dae44d}
  .id-breit .id-schritte li:last-child{border-bottom:0}
  .id-breit .id-wissen-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:8%;border-bottom:1px solid var(--t-line)}
  .id-breit .id-wissen-liste article:last-child{border-bottom:0}
}
/* Befund 26: dunkle Kachel in Rasterlücken der Übersicht, wie "Deine Ausführung" der Ideenseite. Sichtbar nur, wo bei
   der aktuellen Spaltenzahl ein Platz frei ist (id-l3-N: frei bei drei Spalten, id-l2-N: bei zwei). */
.id-luecke{display:flex;background:var(--t-ink);color:var(--t-paper)}
.id-luecke-text{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:16px;padding:26px 24px 24px;width:100%}
.id-luecke .id-karte-kat{color:var(--t-sage)}
.id-luecke-titel{font-size:26px;line-height:1.15;letter-spacing:-.03em}
.id-luecke-text>p:not([class]){font-size:14px;color:#cfd3da}
.id-luecke .id-knopf{margin-top:8px}
@media(min-width:1101px){.id-l3-0{display:none}.id-l3-2{grid-column:span 2}}
@media(min-width:561px) and (max-width:1100px){.id-l2-0{display:none}}
@media(max-width:560px){.id-luecke{display:none}}
/* Übersicht: Abschlussband direkt unter dem letzten Bereich */
.id-bereich:last-child{padding-bottom:72px}