/* sourmelon. Arbeitsoberfläche (app.html)
   Tokens und Basiskomponenten aus variants/urban/style.css übernommen und für die Arbeit angepasst.
   Arbeitsflächen auf paper und white; pink, grün, limette nur als wenige Markenmomente. */

@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url(../assets/urban/fonts/bricolage-800.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(../assets/urban/fonts/space-grotesk.woff2) format('woff2')}

:root{--paper:#fffdf5;--ink:#18171b;--muted:#55554f;--lime:#c2ff00;--pink:#ff19a3;--violet:#6236ff;--orange:#ff5b00;--mint:#00ffd1;--lilac:#f5ecff;--line:#73736b;--green:#138d35;--pith:#fff4c9;--white:#fff;--pink-dark:#a51432;--focus:#0754d6;--sour:#c8ff00;--melon:#ff3987;--display:'Bricolage Grotesque','Arial Black',Arial,sans-serif;--body:'Space Grotesk','Helvetica Neue',Arial,sans-serif}

/* Basis */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit}
button,summary{cursor:pointer}
button,a,input,textarea,select,summary{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
main:focus{outline:none}
::selection{background:var(--pink);color:var(--ink)}
img{max-width:100%}
p{margin:0 0 8px}
.wrap{width:min(1336px,calc(100% - 112px));margin-inline:auto}
.skip{position:fixed;top:-100px;left:16px;z-index:30;padding:12px;background:var(--lime);color:var(--ink)}
.skip:focus{top:16px}
.arrow{font-size:20px;font-weight:400;line-height:1}
[hidden]{display:none!important}

h1{font:800 clamp(32px,4vw,48px)/1.05 var(--display);letter-spacing:-1.8px;margin:0 0 16px;overflow-wrap:anywhere}
h2{font:800 clamp(24px,2.6vw,32px)/1.1 var(--display);letter-spacing:-1.2px;margin:0 0 12px}
h3{font:800 20px/1.2 var(--display);letter-spacing:-.6px;margin:0 0 8px}

/* Kopf und Fuß */
/* Schnitt A: Kopf als Tinte-Band über die volle Breite, Innenabstand wie .wrap, Wortmarke zweifarbig. */
.site-header{min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--ink);color:var(--paper);width:100%;padding-inline:max(56px,calc((100% - 1336px) / 2));border-bottom:1px solid var(--ink)}
/* .wrap setzt in den Media Queries eine schmalere Breite; der Kopf bleibt ein volles Band. */
.site-header.wrap{width:100%;margin-inline:0}
.brand{display:inline-flex;align-items:center;gap:8px;font:800 28px/1 var(--display);letter-spacing:-1.5px;text-decoration:none;min-height:44px;color:var(--paper)}
.brand-icon{width:40px;height:40px;object-fit:contain}
.brand-sour{color:var(--sour)}
.brand-melon,.brand-period{color:var(--melon)}
.site-header nav{display:flex;gap:28px;align-items:center}
.site-header nav a{font-size:14px;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;border-bottom:2px solid transparent;color:var(--paper)}
.site-header nav a:hover{border-bottom-color:var(--paper)}
.site-header nav a[aria-current=page]{border-bottom-color:var(--lime);font-weight:700;color:var(--lime)}
#main{padding:32px 0 48px;min-height:60vh}
.site-footer{padding:20px 0 28px;border-top:1px solid var(--line)}
.site-footer .notice{margin:0;padding:0;border:0}

/* Buttons */
.button{min-height:48px;border:1px solid var(--ink);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:12px 20px;background:var(--ink);color:var(--paper);font-size:14px;font-weight:600;text-decoration:none;transition:background .15s,color .15s;cursor:pointer}
.button:hover{background:var(--pink);color:var(--ink)}
.button.secondary{background:var(--white);color:var(--ink)}
.button.secondary:hover{background:var(--lime)}
.button.small{min-height:44px;padding:8px 14px;gap:12px;font-size:13px}
.button[disabled],.button[aria-disabled=true]{opacity:.45;cursor:not-allowed}
.button[disabled]:hover{background:var(--ink);color:var(--paper)}
.textbutton{border:0;background:transparent;padding:8px 2px;min-height:44px;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line);color:var(--ink);cursor:pointer}
.textbutton:hover{text-decoration-color:var(--ink)}
.textbutton[disabled]{color:var(--muted);cursor:not-allowed}
.close{border:0;border-radius:3px;width:44px;height:44px;flex-shrink:0;background:transparent;font-size:27px;line-height:1}
.close:hover{background:var(--pink)}

/* Moduswahl und Navigation in zweiter Zeile */
.mode-switch{display:flex;align-items:center;flex-wrap:wrap;gap:4px 28px;margin-bottom:12px}
.mode-button{border:0;border-bottom:2px solid transparent;background:transparent;min-height:44px;padding:8px 0;font-size:14px;text-decoration:none;display:inline-flex;align-items:center;cursor:pointer}
.mode-button:hover{border-bottom-color:var(--line)}
.mode-button[aria-pressed=true],.mode-button[aria-current=page],.mode-button[aria-selected=true]{border-bottom-color:var(--ink);font-weight:700}
.context-tabs{border-bottom:1px solid var(--line);margin:8px 0 16px}

/* Eingaben */
.input-shell{border:1px solid var(--ink);border-radius:8px;background:var(--white);padding:16px}
.input-label{display:block;font-size:13px;font-weight:500;line-height:1.4;margin-bottom:10px}
.idea-input{width:100%;display:block;resize:vertical;min-height:72px;padding:0;border:0;background:transparent;font-size:16px;line-height:1.5}
.idea-input:focus-visible{outline-offset:6px}
.idea-input::placeholder,.field::placeholder,.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:1}
label.field,div.field{display:block;font-size:13px;font-weight:500;margin-bottom:16px}
.field input,.field select,.field textarea,input.field,select.field,textarea.field{display:block;min-height:48px;width:100%;border:1px solid var(--line);border-radius:4px;padding:11px 12px;background:var(--white);font-size:16px;font-weight:400;line-height:1.4}
.field input,.field select,.field textarea{margin-top:6px}
.field textarea,textarea.field{min-height:96px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover,input.field:hover,select.field:hover,textarea.field:hover{border-color:var(--muted)}
.field input[type=checkbox],.field input[type=radio]{display:inline-block;width:20px;min-height:20px;height:20px;margin:0 8px 0 0;vertical-align:middle}
[aria-invalid=true]{border-color:var(--pink-dark)!important}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.eyebrow{font-size:12px;font-weight:600;line-height:1.5;letter-spacing:.2px;color:var(--muted);margin:0 0 6px}

/* Karten und Listen */
.card{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:16px;min-width:0}
.card.accent{background:var(--lime);border-color:var(--ink)}
.card h3{margin-top:0}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin:0 0 24px}
.list{list-style:none;margin:0;padding:0}
.list-item{padding:12px 0;border-bottom:1px solid var(--line);min-width:0;overflow-wrap:anywhere}
.list-item:first-child{padding-top:4px}
.list-item:last-child{border-bottom:0}
.list-title{font-weight:600;margin:0 0 2px}
.kv{display:grid;grid-template-columns:minmax(120px,max-content) minmax(0,1fr);gap:8px 20px;margin:0 0 16px}
.kv>div{display:contents}
.kv dt,.kv .kv-label{font-size:13px;color:var(--muted)}
.kv dd,.kv .kv-value{margin:0;overflow-wrap:anywhere}
.table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:15px;margin:0 0 16px}
.table th{text-align:left;font-size:12px;font-weight:600;color:var(--muted);border-bottom:1px solid var(--ink);padding:8px}
.table td{border-bottom:1px solid var(--line);padding:10px 8px;vertical-align:top}
.table .num,.table td.num,.table th.num{text-align:right}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px}
.empty{border:1px dashed var(--muted);border-radius:8px;padding:24px;background:var(--paper);color:var(--muted)}
.empty p{margin:0 0 8px}
.empty p:last-child{margin-bottom:0}
.empty .fruit{width:48px;height:48px;margin-bottom:8px}
.empty .button{margin-top:8px}
.error-text{color:var(--pink-dark);font-size:13px;font-weight:500;margin:6px 0 0}
.status-text{font-size:13px;color:var(--muted)}
.status-text.error-text{color:var(--pink-dark);margin:0}
.hint{font-size:12px;line-height:1.5;color:var(--muted);margin:0 0 4px}
.notice{font-size:12px;line-height:1.6;padding-top:12px;margin-top:16px;border-top:1px solid var(--line);color:var(--muted)}
.fruit{width:32px;height:32px;object-fit:contain;flex-shrink:0;vertical-align:middle}

/* Badges und Chips: Status über Form und Text, nicht über Markenfarbe */
.badge{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:3px 10px;border:1px solid var(--ink);border-radius:4px;background:var(--white);font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap}
.badge-maturity{padding-left:4px}
.badge-maturity .fruit{width:24px;height:24px}
.phase-badge{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0}
.phase-basis{font-size:12px;line-height:1.4;color:var(--muted);margin:0}
.chip-check{border-color:var(--pink-dark);color:var(--pink-dark)}
.subline{font-size:16px;color:var(--muted);margin:-8px 0 0}
.feed-card-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.feed-phase p{margin:0}
.feed-phase-name{font-weight:700}
.feed-phase .chip{margin-top:4px}
.chip{display:inline-flex;align-items:center;min-height:24px;padding:2px 8px;border:1px solid var(--line);border-radius:4px;background:var(--white);font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap}
.chip:empty{display:none}
.chip-fact{border-color:var(--ink)}
.chip-user_input{border-color:var(--line)}
.chip-assumption{border-style:dashed;border-color:var(--ink)}
.chip-suggestion{border-style:dotted;border-color:var(--ink)}
.chip-needs_review{border-color:var(--pink-dark);color:var(--pink-dark)}
.chip-outdated{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip-planned{border-style:dashed;border-color:var(--muted)}
.chip-running{border-color:var(--ink)}
.chip-done{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* Projektkopf der Business-Ansichten (ohne Link erreichbar) */
.project-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-bottom:8px}
.project-title-wrap{flex:1 1 320px;min-width:0}
.project-title{margin:0}
.title-button{border:0;background:transparent;padding:0;text-align:left;font:inherit;letter-spacing:inherit;color:inherit;cursor:text;border-bottom:2px solid transparent;overflow-wrap:anywhere;max-width:100%}
.title-button:hover{border-bottom-color:var(--line)}
.title-input{font:800 clamp(24px,3vw,36px)/1.1 var(--display)!important;letter-spacing:-1px}
.project-badges{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.project-hint{flex-basis:100%;margin:0}
.back-link{margin:0 0 20px}

/* Belege-Balken: belegt lime, offen paper mit Kontur */
.evidence-bar{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.evidence-track{display:flex;flex:1 1 auto;min-width:80px;height:14px;gap:2px}
.evidence-done,.evidence-bar .done{flex:1 1 0;background:var(--lime);border:1px solid var(--ink);border-radius:3px}
.evidence-open,.evidence-bar .open{flex:1 1 0;background:var(--paper);border:1px solid var(--ink);border-radius:3px}
.evidence-numbers{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Aufbau und Start (Bausteine) */
#block-launch .input-shell{margin-bottom:16px}
.launch-switch{display:flex!important;align-items:center;gap:8px;min-height:44px;font-size:16px;font-weight:500;margin-bottom:8px}
.launch-switch input[type=checkbox]{flex-shrink:0;margin:0!important;accent-color:var(--ink)}
.launch-task .launch-switch{margin-bottom:0}
.launch-done{text-decoration:line-through;text-decoration-color:var(--muted);color:var(--muted)}

/* Freigeben: Vorschau vor der Freigabe, Version des Steckbriefs */
.release-preview{border:2px solid var(--ink);margin:4px 0 20px}
.release-preview-text{font-weight:600;margin:12px 0}
.opportunity-version,.feed-version{margin:2px 0 8px}
.release-diff{margin-top:12px;gap:8px 16px}
.release-diff .hint{margin:0}

/* Konto: kleiner Textlink im Kopf, Karten für Registrieren, Anmelden, Dein Konto */
.site-header nav a.account-link{font-size:13px;color:var(--paper);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--paper);white-space:nowrap}
.site-header nav a.account-link:hover{text-decoration-color:var(--lime);border-bottom-color:transparent}
.site-header nav a.account-link[aria-current=page]{color:var(--lime);text-decoration:none}
/* B1 (27.10.2026): „Abmelden“ im Kopf als Textknopf neben „Konto“, gleiche Gestalt wie der Konto-Link. */
.site-header nav .header-signout{min-height:44px;display:inline-flex;align-items:center;padding:0;border:0;border-bottom:2px solid transparent;background:transparent;font-size:13px;color:var(--paper);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--paper);white-space:nowrap;cursor:pointer}
.site-header nav .header-signout:hover{text-decoration-color:var(--lime)}
.site-header nav .header-signout[disabled]{opacity:.6;cursor:not-allowed}
.account-grid{align-items:start;max-width:880px}
.account-card{max-width:880px}
.account-card h2{font-size:24px;letter-spacing:-.8px}
.account-card .toolbar{margin-top:4px}
.account-card .hint{margin:-4px 0 12px}
.account-section{border-top:1px solid var(--line);padding-top:16px;margin-top:20px}
/* Paket 3 Sichtung auch ohne Wand: Links mit 44 px Zielfläche, „Freigeben“ in eigener Zeile. */
.sichtung-werk .text-link{display:inline-flex;align-items:center;min-height:44px}
.sichtung-entscheiden{margin-top:12px}
.account-notice{margin:0 0 16px}
/* Gemeinsamer Einstieg (Paket 2, Schritt A): ein Weg pro Zeile, Häkchen mit 44px Zielfläche. */
.account-card{max-width:560px}
.account-lead{font-size:16px;line-height:1.5;margin:4px 0 20px;max-width:46ch}
.account-choices .button{width:100%;justify-content:space-between}
.account-or{font-size:13px;color:var(--muted);margin:20px 0 4px;padding-top:16px;border-top:1px solid var(--line)}
.check-field{display:flex;align-items:center;gap:10px;min-height:44px;margin:-4px 0 8px}
.check-field input{width:20px;height:20px;margin:0;accent-color:var(--ink)}
.check-field label{font-size:14px;cursor:pointer}
#privacy-hint{margin:16px 0 0}

/* Dialoge */
dialog{border:1px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:8px;width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:24px;overflow:auto}
dialog::backdrop{background:#18171bcc}
dialog h2{margin:0}
.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:12px;margin-top:20px}
.confirm-text{font-size:16px;margin:0}
.context-panel .context-phase{margin:0 0 16px}
.check{font-weight:700}

/* Unterstützung (Stufe C): Slide-over rechts, Mobil von unten; Vorschläge mit Kontur, Diff über Form statt Farbe */
dialog.support-sheet{margin:0 0 0 auto;width:min(520px,100%);height:100dvh;max-height:100dvh;border-radius:8px 0 0 8px;border-right:0}
.support-credits{margin:4px 0 0}
.support-current{border:1px solid var(--line);border-radius:8px;background:var(--white);padding:12px 14px;margin:16px 0}
.support-current-text{white-space:pre-wrap;overflow-wrap:anywhere}
.support-helps{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.support-state{margin-top:16px;overflow-wrap:anywhere}
.support-suggestion{border:1px solid var(--ink);border-radius:8px;background:var(--white);padding:16px;margin:0 0 12px;min-width:0}
.support-suggestion .kv{margin-bottom:8px}
.diff{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0 12px}
.diff-col{border:1px solid var(--line);border-radius:4px;padding:10px 12px;min-width:0;overflow-wrap:anywhere}
.diff-text{margin:0;white-space:pre-wrap}
.diff ins{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;font-weight:600}
.diff del{text-decoration:line-through;color:var(--muted)}
.credits-balance{font-size:18px;font-weight:600;margin:0 0 8px}
.credits-ledger{max-width:560px}
.credits-entry{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
.credits-reason{flex:1 1 auto}
.credits-delta{font-variant-numeric:tabular-nums;font-weight:600}

/* Pseudonym: Handle-Zustand als Text mit Zeichen, ohne Statusfarbe */
.handle-state{font-size:13px;line-height:1.4;color:var(--ink);margin:6px 0 4px;min-height:1.4em}
.handle-state[data-state=checking]{color:var(--muted)}
.feed-creator,.opportunity-handle{overflow-wrap:anywhere}

/* Teil c: Demos und Rückmeldung. Reaktionen über Kontur und Füllung, nie über Statusfarbe */
/* Entdecken: vertikaler Strom, eine Spalte, Filter im Dialog */
.feed-toolbar{margin:0 0 16px}
.feed-stream{display:flex;flex-direction:column;gap:16px;max-width:640px}
.feed-card{touch-action:pan-y;scroll-margin-top:16px}
.feed-card:focus{outline:none}
.feed-card:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.feed-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:var(--muted);margin:0 0 12px}
.feed-meta .feed-version{margin:0}
.feed-pitch{font-size:18px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.feed-kv{margin-bottom:8px}
.filter-row{margin:16px 0 0}
.feed-demo{margin:8px 0 12px}
.feed-demo-title{font-weight:600;margin:0 0 2px;overflow-wrap:anywhere}
.feed-demo-task{overflow-wrap:anywhere}
.feed-demo-video,.feed-demo-image{display:block;width:100%;max-height:320px;object-fit:contain;background:var(--paper);border:1px solid var(--ink);border-radius:8px;margin:4px 0 8px}
.reaction-bar{display:flex;gap:8px;margin:12px 0 4px}
.reaction-button{flex:1 1 0;min-height:44px;border:1px solid var(--ink);border-radius:6px;background:var(--white);color:var(--ink);font-size:14px;font-weight:600;cursor:pointer}
.reaction-button:hover{background:var(--paper)}
.reaction-button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.feed-own{margin:12px 0 4px}
.reason-list{border:0;padding:0;margin:12px 0}
.reason-list legend{padding:0}
.reason-option{display:flex;align-items:center;gap:10px;min-height:44px;font-size:16px;cursor:pointer}
.reason-option input{width:20px;height:20px;margin:0;flex-shrink:0;accent-color:var(--ink)}
.demo-list{margin:0 0 16px}
#rel-demo-form{max-width:640px}
#rel-demo-form input[type=file]{padding:10px 12px}
/* Freigeben: Mitglieder auf dem Server (Schema 005), Gruppe ändern neben Entfernen */
.member-actions{align-items:flex-end;gap:8px 16px;margin-top:4px}
.member-actions .field{flex:0 1 280px;min-width:0;margin:0}
#rel-form-invite{max-width:640px}
@media(max-width:600px){.member-actions .field{flex:1 1 100%}}
.feedback-counts{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;margin:0 0 12px}
.feedback-note{white-space:pre-wrap}
.profile-watchlist{border-top:1px solid var(--line);margin-top:32px;padding-top:20px;max-width:880px}
.watch-item .toolbar{margin-top:4px}

/* Meine Produkte */
.shelf-filter{border-bottom:1px solid var(--line);margin:8px 0 20px}
.product-sentence{overflow-wrap:anywhere}

/* Zusammenfassung „Mehr“ */
.summary-section{border-top:1px solid var(--line);padding-top:12px;margin-top:16px}
.summary-section h3{font-size:18px;margin-bottom:6px}

/* Gespräch (Z2): Kopf oben, Verlauf scrollt in sich, Eingabe unten. Ab 1100px Seitenleiste mit Entwurf,
   Vorlage, Medien. Das Fenster scrollt nicht seitlich; die Eingabe bleibt über der Tastatur (dvh). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body.has-chat{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
body.has-chat .site-footer{display:none}
body.has-chat .site-header{flex:0 0 auto}
body.has-chat #main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:0}
.view-chat{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.chat{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.chat-head{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 20px;background:var(--paper);border-bottom:1px solid var(--line);padding:16px 0 12px}
.chat-head-main{flex:1 1 320px;min-width:0}
.chat-title{font-size:clamp(24px,3vw,32px);letter-spacing:-1px;margin:0 0 4px}
.chat-sentence{margin:0 0 6px;max-width:70ch;overflow-wrap:anywhere}
.chat-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:13px;color:var(--muted);margin:0}
.chat-meta .chip-link{color:var(--ink);text-decoration:none;border-color:var(--ink);min-height:28px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.chat-head-actions{display:flex;flex-wrap:wrap;gap:8px}
.chat-release-state{font-weight:400}
.chat-body{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr)}
.chat-main{min-height:0;min-width:0;display:flex;flex-direction:column}
.chat-log{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;list-style:none;margin:0;padding:16px 0;display:flex;flex-direction:column;gap:12px}
.msg{display:flex;gap:10px;align-items:flex-start;max-width:min(640px,88%);min-width:0}
.msg-assistant{align-self:flex-start}
.msg-user{align-self:flex-end;flex-direction:row-reverse}
.msg-mark{width:28px;height:28px;object-fit:contain;flex-shrink:0}
.msg-bubble{min-width:0}
.msg-text{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.msg-assistant .msg-bubble{padding:3px 0}
.msg-user .msg-bubble{background:var(--paper);border:1px solid var(--ink);border-radius:8px;padding:10px 14px}
.msg-pending{opacity:.6}
.msg-card{width:100%;min-width:0}
.chat-card{background:var(--white);border:1px solid var(--ink);border-radius:8px;padding:16px;min-width:0;overflow-wrap:anywhere}
.chat-card .kv{margin-bottom:8px}
.chat-card .toolbar{margin-top:8px}
.template-summary{font-weight:600}
.template-block{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.template-block h4{font:600 13px/1.4 var(--body);color:var(--muted);margin:0 0 6px}
.template-next{margin:12px 0 0;font-weight:600}
.origin{font-size:12px;font-weight:400;color:var(--muted)}
.chat-questions{margin:0 0 8px;padding-left:20px}
.chat-note{font-size:13px;color:var(--muted)}
.chat-jump{align-self:center}
.chat-thinking{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin:4px 0 8px}
.chat-thinking .eyebrow{margin:0;color:var(--ink)}
.chat-skill{font-size:13px;color:var(--muted)}
.chat-notice{font-size:13px;margin:4px 0 8px}
.chat-composer{background:var(--paper);border-top:1px solid var(--line);padding:10px 0 calc(12px + env(safe-area-inset-bottom,0px))}
.chat-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.chat-chips:empty{display:none}
.chat-chip{min-height:44px;padding:8px 14px;border:1px solid var(--ink);border-radius:6px;background:var(--white);color:var(--ink);font-size:14px;font-weight:600;cursor:pointer}
.chat-chip:hover{background:var(--lime)}
/* Gesprächsleiste 28.10.2026: Feld über die volle Breite, „Senden“ daneben, die Textknöpfe in eigener Zeile darunter. In einer
   Zeile mit dem Feld blieb diesem bei 1440 px neben drei Knöpfen 0 px, und „Senden“ ragte 59 px über den Rahmen (gemessen). */
.chat-input-shell{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"eingabe senden" "werkzeuge werkzeuge";align-items:end;gap:4px 12px;padding:8px 8px 8px 14px}
.chat-input{grid-area:eingabe;min-width:0;min-height:48px;max-height:30dvh;resize:none;border:0;background:transparent;font-size:16px;line-height:1.5;padding:10px 0}
.chat-input:focus-visible{outline-offset:6px}
.chat-composer-actions{display:contents}
.chat-composer-actions>.button{grid-area:senden;align-self:end}
.chat-composer-actions>.chat-attach{grid-area:werkzeuge}
.chat-aside{display:none}
/* I1: Bühne mit der mitgebrachten Demo. Mobil oben, ab 900px links neben dem Gespräch; die Seitenleiste weicht. */
.chat-stage{display:flex;flex-direction:column;gap:8px;min-width:0;padding:16px 0 8px}
.chat-stage[hidden]{display:none}
.chat-stage-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.chat-stage-status{margin:0;font-weight:700}
.chat-stage-frame{display:block;width:100%;height:min(72vh,720px);min-height:420px;border:1px solid var(--ink);border-radius:8px;background:var(--white)}
.chat-stage-note{margin:0}
.chat-run-details summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:14px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}
/* Unter 900px: die Seite ist 100dvh ohne Seitenscroll (body.has-chat). Die Bühne steht oben, das Gespräch darunter
   bleibt per Scroll erreichbar, mit eigener Mindesthöhe, damit die Eingabe nie unter den Rand rutscht. */
@media(max-width:899px){
  .chat-body.has-stage{overflow-y:auto;overscroll-behavior:contain}
  .chat-body.has-stage .chat-stage-frame{height:min(62dvh,560px);min-height:360px}
  .chat-body.has-stage .chat-main{min-height:72dvh}
  .chat-body.has-stage .chat-aside{display:block;order:1;padding:0 0 16px}
  .chat-body.has-stage .chat-main{order:2}
}
@media(min-width:900px){
  .chat-body.has-stage{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px}
  .chat-body.has-stage .chat-stage{min-height:0;overflow-y:auto}
  .chat-body.has-stage .chat-stage-frame{height:min(78vh,820px)}
  /* SR2: Werk links groß, darunter „Dateien und Details“ als eine Zeile; das Gespräch rechts über beide Zeilen. */
  .chat-body.has-stage{grid-template-rows:minmax(0,1fr) auto;grid-template-areas:'stage main' 'aside main'}
  .chat-body.has-stage .chat-stage{grid-area:stage}
  .chat-body.has-stage .chat-main{grid-area:main}
  .chat-body.has-stage .chat-aside{display:block;grid-area:aside;max-height:40vh;overflow-y:auto;border-left:0;padding:0 0 8px}
}
.chat-aside-section{margin:0 0 24px}
.chat-details>summary{min-height:44px;display:flex;align-items:center;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}
.chat-details[open]>summary{margin-bottom:8px}
.chat-aside-section h2{font-size:20px;letter-spacing:-.6px;margin:0 0 8px}
@media(min-width:1100px){
  .chat-body{grid-template-columns:minmax(0,1fr) 320px;gap:24px}
  .chat-aside{display:block;min-height:0;overflow-y:auto;border-left:1px solid var(--line);padding:16px 0 16px 24px}
}
@media(max-width:600px){
  .chat-head{padding:10px 0 8px;gap:8px}
  .chat-head-main{flex-basis:100%}
  .chat-sentence{font-size:14px}
  .chat-head-actions{width:100%}
  .chat-head-actions .button{flex:1 1 auto;white-space:nowrap}
  .msg{max-width:100%}
  .chat-input-shell{padding:6px 6px 6px 12px;gap:8px}
  .chat-composer-actions .button{min-height:44px;padding:8px 12px;gap:8px}
  .chat-card{padding:14px}
}

/* Hinweis unten */
.toast{position:fixed;left:16px;bottom:16px;z-index:40;max-width:min(480px,calc(100% - 32px));background:var(--ink);color:var(--paper);border-radius:6px;padding:12px 16px;font-size:14px}

@media(max-width:1150px){.wrap{width:calc(100% - 72px)}.site-header{padding-inline:36px}}
@media(max-width:900px){.site-header{min-height:72px}#main{padding-top:24px}.card-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}}
@media(max-width:600px){
  .wrap{width:calc(100% - 32px)}
  .site-header{min-height:64px;gap:0 12px;flex-wrap:wrap;padding-inline:16px}
  .site-header nav{flex-basis:100%;justify-content:flex-start}
  .brand{font-size:24px;letter-spacing:-1.2px;gap:6px}
  .brand-icon{width:34px;height:34px}
  /* SR5: vier Links plus Konto; die Zeile bricht um statt seitlich zu scrollen. */
  .site-header nav{gap:0 16px;flex-wrap:wrap}
  .site-header nav a{font-size:13px;white-space:nowrap}
  .site-header nav a.account-link{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  #main{padding:20px 0 32px}
  .field-row{grid-template-columns:1fr;gap:0}
  .card-grid{grid-template-columns:1fr}
  .mode-switch{gap:0 18px}
  .kv{grid-template-columns:1fr;gap:2px}
  .kv dd,.kv .kv-value{margin-bottom:10px}
  .table{display:block;overflow-x:auto}
  .project-head{gap:10px}
  .project-title-wrap{flex-basis:100%}
  .toast{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  body.has-chat .toast{bottom:calc(150px + env(safe-area-inset-bottom,0px))}
  dialog{padding:20px;max-height:calc(100dvh - 24px)}
  dialog.sheet{width:100%;max-width:100%;margin:auto 0 0;border-radius:8px 8px 0 0;border-bottom:0;max-height:85dvh}
  .dialog-actions .button{flex:1 1 auto}
}
@media(max-width:600px){
  dialog.support-sheet{width:100%;height:auto;max-height:85dvh;margin:auto 0 0;border-radius:8px 8px 0 0;border-right:1px solid var(--ink);border-bottom:0}
  .diff{grid-template-columns:1fr}
  .support-helps .button{flex:1 1 auto}
}
@media(max-width:360px){.wrap{width:calc(100% - 32px)}.brand{font-size:22px}.site-header nav{gap:12px}.site-header nav a.account-link{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* Z3 Gespräch und Feed */
/* Gespräch: Eingabe fürs Repository unter dem Feld, Medienliste in der Seitenleiste, Karten run und draft, Vorschau */
.chat-attach{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.chat-repo-form{margin:10px 0 0}
.chat-repo-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chat-repo-url{flex:1 1 220px;min-width:0;min-height:44px;font-size:16px}
.chat-repo-row .button{min-height:44px}
.chat-media-item{display:flex;align-items:center;min-height:44px}
.chat-media-item a{color:var(--ink);overflow-wrap:anywhere}
.chat-media-thumb{display:block;width:100%;max-width:100%;max-height:240px;object-fit:contain;background:var(--paper);border:1px solid var(--ink);border-radius:8px;margin:0 0 10px}
.chat-jobs{margin:0 0 8px}
.chat-jobs .list-item{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;min-height:32px}
.chat-job-kind{font-weight:600}
.chat-job-status{font-size:13px;color:var(--muted)}
.chat-jobs .error-text{flex-basis:100%;margin:0}
.chat-run-status{margin:0 0 8px}
.chat-issues{margin:8px 0 0}
.chat-preview{border-top:1px solid var(--line);margin:12px 0 0;padding-top:12px}
.chat-preview .eyebrow{margin:0 0 6px}
.chat-saved,.chat-dismissed,.chat-pending{margin:8px 0 0}
/* Feed: Titelmedium aus teaser.draft, Poster mit Play-Hinweis, PDF-Seite, Medienanzahl */
.feed-media{margin:8px 0 12px}
/* Hauptaktion im Feed (Schnitt I): Prototyp ersetzt das Cover erst auf Tipp, gleiche Fläche, kein Seitenscroll. */
.feed-media-frame{display:block;width:100%;aspect-ratio:4/3;max-height:70vh;border:1px solid var(--ink);border-radius:8px;background:var(--white)}
.feed-start-bar{margin-top:8px}
.feed-media img{display:block;width:100%;max-width:100%;max-height:360px;object-fit:contain;background:var(--paper);border:1px solid var(--ink);border-radius:8px;margin:4px 0 8px}
.feed-media video{display:block;width:100%;max-width:100%;max-height:360px;background:var(--ink);border:1px solid var(--ink);border-radius:8px;margin:4px 0 8px}
.feed-media-caption{font-weight:600;margin:0 0 2px;overflow-wrap:anywhere}
.feed-media-note{margin:0}
.feed-media-play{min-height:44px}
/* Produktseite #r/<releaseId>: eine Spalte, Medien nie breiter als die Seite, PDF-Seiten blätterbar, iframes isoliert */
.product-page{max-width:720px}
.product-head{margin:0 0 16px}
.product-title{font-size:clamp(28px,4vw,40px);letter-spacing:-1.2px;margin:0 0 6px;overflow-wrap:anywhere}
.product-sentence{font-size:18px;font-weight:600;line-height:1.35;margin:0 0 8px;overflow-wrap:anywhere}
.product-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:var(--muted);margin:0 0 12px}
.product-description{white-space:pre-wrap;overflow-wrap:anywhere;max-width:70ch}
.product-section{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.product-section h2{font-size:20px;letter-spacing:-.6px;margin:0 0 10px}
.product-links{display:flex;flex-wrap:wrap;gap:8px}
.product-links .button{min-height:44px}
.product-media{margin:0 0 16px;min-width:0}
.product-media img,.product-media video{display:block;width:100%;max-width:100%;max-height:70dvh;object-fit:contain;background:var(--paper);border:1px solid var(--ink);border-radius:8px}
.product-media video{background:var(--ink)}
.product-media audio,.editor-audio{display:block;width:100%;max-width:100%;min-height:44px}
.product-media iframe{display:block;width:100%;max-width:100%;height:min(70dvh,560px);border:1px solid var(--ink);border-radius:8px;background:var(--white)}
.product-caption{font-weight:600;margin:6px 0 0;overflow-wrap:anywhere}
.product-pages{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 0}
.product-pages .button{min-height:44px}
.product-page-no{font-size:13px;color:var(--muted)}
.product-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.product-gallery .product-media{margin:0}
.product-reactions{margin:16px 0 0}
@media(max-width:600px){
  .product-gallery{grid-template-columns:1fr}
  .product-media iframe{height:60dvh}
  .product-pages .button{flex:1 1 0}
}

/* Z3 Editor */
/* Entwurf bearbeiten (#e/<id> als volle Ansicht, auf dem Desktop als Dialog über dem Gespräch).
   Formsprache der Designbibel: dünne Konturen, Radius 6/8, keine Schatten, Farben nur als Markenmomente.
   Hauptaktion bleibt unten (sticky), 390px ohne seitliches Scrollen, Touch 44px, Fokus sichtbar. */
.editor{min-width:0;max-width:880px}
.editor-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 20px;margin:0 0 12px}
.editor-head-main{flex:1 1 auto;min-width:0}
.editor-title{font-size:clamp(24px,3vw,32px);letter-spacing:-1px;margin:0 0 4px}
.editor-status{min-height:1.5em;margin:0 0 12px}
.editor-status p{margin:0 0 4px}
.editor-error{font-size:14px}
.editor-section{margin:0 0 20px}
.editor-h2{font-size:20px;letter-spacing:-.6px;margin:0 0 8px}
.editor-form .field{margin-bottom:14px}
.editor-form .field-label{display:block}
.editor-origin{display:inline-block;margin:2px 0 0}
.editor-form .field textarea{min-height:72px}
/* Kurzbeschreibung (27.10.2026): Hinweis und Zähler direkt unter dem Feld, darunter Vorschlag und Zurückholen */
.editor-kurz{margin-bottom:14px}
.editor-kurz .field{margin-bottom:4px}
.editor-kurz-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.editor-kurz-row .error-text{margin:0}
.editor-kurz-count{margin:0 0 0 auto;font-variant-numeric:tabular-nums}
.editor-kurz-actions{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:8px}
.editor-kurz-ask{min-height:44px}
.editor-kurz-status{margin:6px 0 0}
.editor-kurz-status:empty{display:none}
.editor-link-row{display:grid;grid-template-columns:140px minmax(0,1fr) 180px auto;gap:0 12px;align-items:end}
.editor-link-row .field{margin-bottom:0}
.editor-link-row .textbutton{margin-bottom:4px}
.editor-media-item{padding:14px 0}
.editor-media-item.is-hidden .editor-thumb{opacity:.5}
.editor-media-top{display:flex;gap:14px;align-items:flex-start;min-width:0}
.editor-thumb{width:112px;height:76px;flex-shrink:0;object-fit:cover;border:1px solid var(--line);border-radius:4px;background:var(--white)}
.editor-thumb-empty{display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted)}
.editor-media-text{min-width:0;flex:1 1 auto}
.editor-media-text .list-title{margin:0 0 4px}
.editor-media-meta{margin:0 0 2px}
.editor-media-actions{margin:4px 0 0}
.editor-media-item .textbutton{min-height:44px;min-width:44px;justify-content:center;padding:8px 6px}
.editor-media-item .field-row{margin-top:4px}
.editor-media-item .field-row .field{margin-bottom:0}
.editor-visibility{margin:0 0 8px}
.editor-visibility .eyebrow{margin:0;align-self:center}
.editor-bar{position:sticky;bottom:0;z-index:4;display:flex;flex-wrap:wrap;gap:12px;padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));margin-top:8px;background:var(--paper);border-top:1px solid var(--line)}
.editor-conflict{border:1px solid var(--ink);border-radius:8px;background:var(--white);padding:16px;margin:0 0 20px;min-width:0}
.editor-conflict .kv{margin-bottom:12px}
.editor-conflict .field{margin-bottom:8px}
.editor-conflict textarea{min-height:120px}
.editor-preview{min-width:0}
.editor-issues{border:1px solid var(--ink);border-radius:8px;background:var(--white);padding:12px 16px;margin:0 0 16px}
.editor-issues .list-title{margin-bottom:4px}
.editor-card{max-width:640px;margin:0 0 20px}
.editor-card .feed-meta{margin:8px 0 0}
.editor-page{margin:0 0 20px}
.editor-page-text{white-space:pre-wrap;overflow-wrap:anywhere}
.editor-page-media{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
.editor-figure{margin:0;min-width:0}
.editor-released{border:1px solid var(--ink);border-radius:8px;background:var(--lime);padding:16px;margin:0 0 20px}
.editor-released .list-title{margin-bottom:4px}
dialog.editor-sheet{width:min(880px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:20px 24px 0}
dialog.editor-sheet .editor-head{position:sticky;top:0;z-index:5;background:var(--paper);padding:4px 0 8px;margin:0 0 8px;border-bottom:1px solid var(--line)}
dialog.editor-sheet .editor-bar{margin:0 -24px;padding-left:24px;padding-right:24px}
@media(max-width:600px){
  .editor-link-row{grid-template-columns:1fr;gap:0}
  .editor-link-row .field{margin-bottom:10px}
  .editor-media-top{gap:10px}
  .editor-thumb{width:88px;height:60px}
  .editor-media-item .textbutton{padding:8px 2px}
  .editor-bar .button{flex:1 1 auto}
  dialog.editor-sheet{width:100%;max-width:100%;max-height:100dvh;margin:0;border-radius:0;border:0;padding:16px 16px 0}
  dialog.editor-sheet .editor-bar{margin:0 -16px;padding-left:16px;padding-right:16px}
}
/* Einstieg #neu (Onboarding-Korrektur 22.10., Referenz index.html): Werkzeuge am Composer, Ablauf in vier Schritten. */
/* Der Einstieg scrollt als ganze Seite unter dem Tinte-Band; die Gesprächsansicht am Projekt behält ihren festen Rahmen. */
.chat-entry{display:block;overflow-y:auto;overscroll-behavior:contain;padding-bottom:48px}
.entry-context{display:flex;gap:18px;justify-content:space-between;border-bottom:1px solid var(--ink);padding:16px 0;font-size:10px;font-weight:700;letter-spacing:.06em}
.entry-context span:last-child{background:var(--lime);padding:2px 7px}
.entry-welcome{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(230px,1fr);gap:40px;margin-top:35px}
.entry-intro .eyebrow{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--ink);margin:0 0 20px}
.entry-intro h1{font-family:var(--display);font-size:clamp(48px,6vw,84px);letter-spacing:-.055em;line-height:.96;margin:0}
.entry-intro h1 em{font-style:normal;background:var(--lime);display:inline-block;padding:0 5px 5px 0}
.entry-intro>p:not(.eyebrow){font-size:17px;max-width:560px;margin:22px 0 0}
.entry-promise{background:var(--pink);color:var(--ink);padding:25px;align-self:end;border:1px solid var(--ink)}
.entry-promise .label{display:block;font-size:10px;font-weight:700;letter-spacing:.08em}
.entry-promise h2{font-family:var(--display);font-size:34px;letter-spacing:-.055em;line-height:.96;margin:15px 0}
.entry-promise ul{list-style:none;padding:0;margin:20px 0 0;font-size:13px}
.entry-promise li{padding:9px 0;border-top:1px solid var(--ink)}
.entry-promise li span{margin-right:12px;font-weight:700}
.entry-zone{margin-top:30px}
.chat-entry .chat-log{padding:0 0 12px}
.chat-entry .chat-log:empty{display:none}
.chat-entry .chat-chips:empty{display:none}
.entry-composer{border:2px solid var(--ink);border-radius:0;background:var(--white);padding:0}
.entry-composer label{display:block;padding:18px 20px 0;font-weight:700;font-size:14px}
.entry-composer .chat-input{display:block;width:100%;border:0;background:transparent;color:var(--ink);resize:vertical;min-height:95px;font-size:17px;line-height:1.5;padding:16px 20px}
.entry-composer .chat-input:focus-visible{outline-offset:-4px}
.entry-bottom{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:0 12px 12px}
.entry-attach{display:flex;flex-wrap:wrap;gap:5px}
.entry-source{font:inherit;font-size:12px;font-weight:700;padding:9px 11px;border:0;background:none;color:var(--ink);text-align:left;min-height:44px;cursor:pointer}
.entry-source[aria-pressed=true]{background:var(--ink);color:var(--lime)}
.entry-composer .chat-send{margin-left:auto;white-space:nowrap;background:var(--ink);color:var(--lime);border-radius:0;min-height:44px}
.entry-help{border-top:1px solid var(--ink);padding:16px 20px;font-size:13px;background:#eeece1}
.entry-help strong{display:block;margin-bottom:6px}
.entry-help p{margin:0}
.entry-help .button,.entry-help .chat-repo-form{margin-top:12px}
.entry-privacy{font-size:12px;margin:13px 0;color:var(--muted)}
.entry-how{margin:34px 0 0;border-top:2px solid var(--ink)}
.entry-how-top{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-top:16px}
.entry-how-top h2{font-family:var(--display);font-size:26px;letter-spacing:-.055em;margin:0}
.entry-how-top span{font-size:10px;font-weight:700;letter-spacing:.08em}
.entry-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:18px}
.entry-steps button{font:inherit;font-size:12px;font-weight:700;text-align:left;border:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);border-right:1px solid var(--ink);padding:16px 12px;background:none;color:var(--ink);cursor:pointer;min-height:44px}
.entry-steps button:last-child{border-right:0}
.entry-steps button span{display:block;font-family:var(--display);font-size:27px;line-height:1;margin-bottom:12px}
.entry-steps button[aria-pressed=true]{background:var(--ink);color:var(--lime)}
.entry-step-detail{padding:18px 0;max-width:800px;font-size:14px;min-height:78px}
.entry-step-detail p{margin:0}
@media(max-width:1100px){.entry-welcome{gap:25px;grid-template-columns:1.3fr 1fr}.entry-intro h1{font-size:6vw}.entry-promise{padding:20px}.entry-promise h2{font-size:30px}.entry-intro>p:not(.eyebrow){font-size:15px}}
@media(max-width:800px){.entry-welcome{grid-template-columns:1fr 1fr}.entry-intro h1{font-size:8vw}}
@media(max-width:560px){.entry-welcome{grid-template-columns:1fr;gap:22px;margin-top:28px}.entry-intro h1{font-size:15vw}.entry-intro>p:not(.eyebrow){font-size:16px}.entry-promise{padding:18px}.entry-promise h2{font-size:29px}.entry-promise ul{display:grid;grid-template-columns:1fr 1fr;gap:0 15px;margin-top:14px}.entry-promise li{font-size:11px}.entry-context{font-size:9px;gap:10px}.entry-composer label{padding:16px 15px 0}.entry-composer .chat-input{font-size:16px;padding:14px 15px}.entry-bottom{padding:0 8px 8px}.entry-attach{width:100%;justify-content:space-between}.entry-source{font-size:10px;padding:9px 5px}.entry-composer .chat-send{width:100%;text-align:left}.entry-help{padding:16px;font-size:12px}.entry-steps{grid-template-columns:1fr 1fr}.entry-steps button:nth-child(2){border-right:0}.entry-steps button:nth-child(-n+2){border-bottom:0}.entry-how-top{display:block}.entry-how-top span{display:block;margin-top:8px}}

/* I5: Editor mit Vorschau oben, vier Kernfeldern, alles Weitere hinter „Mehr“. */
.editor-stage{margin:0 0 20px}
.editor-stage-frame{display:block;width:100%;height:min(52dvh,480px);min-height:320px;border:1px solid var(--ink);border-radius:8px;background:var(--white)}
.editor-stage-image{display:block;width:100%;max-height:min(40dvh,360px);object-fit:contain;border:1px solid var(--ink);border-radius:8px;background:var(--white)}
.editor-more{border-top:1px solid var(--line);margin:8px 0 16px;padding-top:4px}
.editor-more>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}
.card-more{border-top:1px solid var(--line);margin:8px 0 0}
.start-steps{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.start-step{border:1px solid var(--ink);border-radius:8px;padding:14px 16px;background:var(--paper)}
.start-step[data-state=done]{border-color:var(--line)}
.start-h2{margin:4px 0 6px;font-size:20px}
.card-more>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}

/* Großansicht der Demo als Ebene mit Rückweg (Toms Befund 23.10.). */
.stage-dialog{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;border-radius:0;background:var(--ink);display:none;flex-direction:column}
.stage-dialog[open]{display:flex}
.stage-dialog-bar{flex:0 0 auto;display:flex;align-items:center;padding:8px max(16px,env(safe-area-inset-left,0px));background:var(--ink)}
.stage-dialog-bar .button{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.stage-dialog-frame{flex:1 1 auto;width:100%;border:0;background:var(--white)}

/* SR3/A: Stil-Vorschau im Editor, Werte aus docs/showroom-2026-10-23/STILKATALOG.json (wie site/werk.css). */
@font-face{font-family:'Syne';font-style:normal;font-weight:400 800;font-display:swap;src:url(../assets/creator/fonts/syne.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(../assets/creator/fonts/instrument-italic.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/creator/fonts/ibm-plex-mono-400.woff2) format('woff2')}
[data-palette="burst-01"]{--w-bg:#c8ff00;--w-fg:#151515;--w-a1:#ff3987;--w-a2:#1450ff;--w-motif:url(../assets/creator/backgrounds/color-burst-01.svg)}
[data-palette="burst-02"]{--w-bg:#ff3987;--w-fg:#151515;--w-a1:#00e5ff;--w-a2:#7728ff;--w-motif:url(../assets/creator/backgrounds/color-burst-02.svg)}
[data-palette="burst-03"]{--w-bg:#1450ff;--w-fg:#fffdf3;--w-a1:#c8ff00;--w-a2:#ff6a00;--w-motif:url(../assets/creator/backgrounds/color-burst-03.svg)}
[data-palette="burst-04"]{--w-bg:#7728ff;--w-fg:#fffdf3;--w-a1:#ff9a00;--w-a2:#00e5ff;--w-motif:url(../assets/creator/backgrounds/color-burst-04.svg)}
[data-palette="burst-05"]{--w-bg:#00e5ff;--w-fg:#151515;--w-a1:#ff3987;--w-a2:#1450ff;--w-motif:url(../assets/creator/backgrounds/color-burst-05.svg)}
[data-palette="burst-06"]{--w-bg:#ff6a00;--w-fg:#151515;--w-a1:#7728ff;--w-a2:#c8ff00;--w-motif:url(../assets/creator/backgrounds/color-burst-06.svg)}
[data-palette="burst-07"]{--w-bg:#ff254a;--w-fg:#151515;--w-a1:#00ff9d;--w-a2:#1450ff;--w-motif:url(../assets/creator/backgrounds/color-burst-07.svg)}
[data-palette="burst-08"]{--w-bg:#00ff9d;--w-fg:#151515;--w-a1:#ff3987;--w-a2:#7728ff;--w-motif:url(../assets/creator/backgrounds/color-burst-08.svg)}
[data-palette="burst-09"]{--w-bg:#fff000;--w-fg:#151515;--w-a1:#1450ff;--w-a2:#ff254a;--w-motif:url(../assets/creator/backgrounds/color-burst-09.svg)}
[data-palette="burst-10"]{--w-bg:#ff38d1;--w-fg:#151515;--w-a1:#c8ff00;--w-a2:#00e5ff;--w-motif:url(../assets/creator/backgrounds/color-burst-10.svg)}
[data-palette="burst-11"]{--w-bg:#2040d0;--w-fg:#fffdf3;--w-a1:#ff6a00;--w-a2:#00ff9d;--w-motif:url(../assets/creator/backgrounds/color-burst-11.svg)}
[data-palette="burst-12"]{--w-bg:#a32cff;--w-fg:#fffdf3;--w-a1:#fff000;--w-a2:#00e5ff;--w-motif:url(../assets/creator/backgrounds/color-burst-12.svg)}
.editor-style{margin:0 0 16px;border-top:1px solid var(--line);padding-top:4px}
.editor-style>summary{min-height:44px;display:flex;align-items:center;font-weight:600}
.editor-style-preview{position:relative;min-height:120px;display:flex;align-items:flex-end;padding:56px 72px 16px 16px;margin:8px 0 16px;border:1px solid var(--ink);border-radius:8px;background:var(--white);color:var(--ink);overflow:hidden}
.editor-style-preview[data-palette]{background:var(--w-bg);color:var(--w-fg);border-bottom:8px solid var(--w-a1)}
.editor-style-title{font:800 clamp(28px,4vw,44px)/1.05 var(--display);letter-spacing:-1px;overflow-wrap:anywhere}
.editor-style-motif{display:none}
.editor-style-preview[data-palette] .editor-style-motif{display:block;position:absolute;top:0;right:0;width:56px;aspect-ratio:1;background:var(--w-motif) center/cover no-repeat;border-left:6px solid var(--w-a2)}
.editor-style-group{border:0;padding:0;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:8px}
.editor-style-group legend{font-size:13px;font-weight:500;margin-bottom:8px;padding:0}
.editor-style-option{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 10px 4px 6px;border:1px solid var(--line);border-radius:6px;background:var(--white);cursor:pointer}
.editor-style-option:has(input:checked){border-color:var(--ink);outline:1px solid var(--ink);outline-offset:-2px}
.editor-style-option input{margin:0;width:18px;height:18px;accent-color:var(--ink)}
.editor-style-sample{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 4px;border-radius:4px;border:1px solid var(--line);font:800 16px/1 var(--display)}
.editor-style-sample[data-palette]{background:var(--w-bg);color:var(--w-fg);border-color:var(--w-fg)}
.editor-style-label{font-size:13px}
.editor-style-sample[data-font="syne"],.editor-style-preview[data-font="syne"] .editor-style-title{font-family:'Syne',Arial,sans-serif;font-weight:800}
.editor-style-sample[data-font="instrument-italic"],.editor-style-preview[data-font="instrument-italic"] .editor-style-title{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:0}
.editor-style-sample[data-font="plex-mono"],.editor-style-preview[data-font="plex-mono"] .editor-style-title{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:400}

/* SR7: Frucht-Avatare (Originale, nicht umgefärbt) als kompakte Auswahl; der Name bleibt für Screenreader lesbar. */
.avatar-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:8px}
.avatar-option{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;min-height:56px;padding:6px;border:1px solid var(--line);border-radius:6px;background:var(--white);font-size:13px;cursor:pointer}
.avatar-option:has(input:checked){border-color:var(--ink);outline:2px solid var(--ink);outline-offset:-3px}
.avatar-option:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.avatar-option input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.avatar-option:not(:has(img)){grid-column:span 2}
.avatar-option:has(img) .avatar-name{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.avatar-thumb{display:block;width:40px;height:40px;flex-shrink:0}
.preview-avatar{display:block;width:80px;height:80px;margin:4px 0 8px}

/* SR5: Rückmeldung, Kartenanfrage und Kontakte auf ruhigem Grund. */
.kontakt-head{margin:0 0 24px}
.kontakt-question{margin:12px 0 0;padding:12px 16px;border:1px solid var(--ink);border-radius:8px;background:var(--lime);color:var(--ink);font-weight:500}
.kontakt-form textarea{width:100%;margin:6px 0 8px}
.kontakt-form .toolbar,.kontakt-section .toolbar{gap:8px 16px}
.kontakt-done{display:grid;gap:16px;justify-items:start}
.kontakt-section{margin:0 0 40px;min-width:0}
.kontakt-section .list-item p{margin:0 0 4px;overflow-wrap:anywhere}
.kontakt-fields{margin:4px 0 8px}
.kontakt-fields a{margin-right:12px;overflow-wrap:anywhere}
.kontakt-send{border:1px solid var(--ink);border-radius:8px;padding:16px;background:var(--white)}
.kontakt-picks{border:0;padding:0;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:4px 20px}
.kontakt-picks legend{font-size:13px;font-weight:500;margin-bottom:6px;padding:0}
.kontakt-pick{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.kontakt-card-preview{border:1px solid var(--ink);border-radius:8px;padding:16px;background:var(--paper);margin:0 0 12px}
/* Vorschaubild (Toms Befund 23.10.): das gewählte Bild groß, Vorschläge als Kacheln, Liste darunter kompakt. */
.editor-cover{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0 0 16px}
.editor-cover>*{min-width:0}
.editor-cover .hint{margin:0}
.editor-cover-current{display:block;width:100%;max-width:min(480px,100%);height:auto;max-height:280px;object-fit:contain;border:1px solid var(--ink);border-radius:8px;background:var(--white)}
.editor-cover-empty{margin:0;padding:16px;border:1px dashed var(--muted);border-radius:8px}
.editor-cover-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;max-width:640px}
.editor-cover-option{padding:0;border:1px solid var(--line);border-radius:6px;background:var(--white);aspect-ratio:1;overflow:hidden;cursor:pointer;min-height:44px}
.editor-cover-option:hover{border-color:var(--ink)}
.editor-cover-option img{display:block;width:100%;height:100%;object-fit:cover}
.editor-media-details>summary{min-height:44px;display:inline-flex;align-items:center;font-size:14px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}
.editor-media-details[open]>summary{margin-bottom:8px}
/* Designkorrektur 23.10.: mobiler App-Kopf in zwei klaren Zeilen. Oben Logo und Konto, darunter die vier Links;
   die Konto-Adresse wird gekürzt statt eine dritte Zeile zu öffnen. */
@media(max-width:600px){
  .site-header{position:relative;padding-block:6px}
  .site-header nav a.account-link{position:absolute;top:10px;right:16px;max-width:calc(100% - 210px);display:block;line-height:44px;overflow:hidden;text-overflow:ellipsis}
}
/* Designkorrektur 23.10. (Showroom-Referenz PROJEKTWEG, 01 Ausprobieren): das Projekt als laute Erlebnisfläche.
   Tinte als Grund, eine große Limetten-Fläche trägt Titel und Handlungen, das Werk läuft auf einer schwarzen Bühne.
   Das Gespräch ist optional und liegt bei Bedarf auf ruhigem Papiergrund. */
body.has-chat{background:var(--ink)}
body.has-chat #main{padding-top:16px}
/* Gesprächsleiste 28.10.2026: die Projektseite trägt das Werk über dem Gespräch und scrollt wie eine Seite. Als Fensterfläche
   (100dvh, overflow hidden) stauchte das Werk das Gespräch auf 0 px, und Mausrad oder Wischen bewegten die Seite nicht. */
body.has-chat.has-werk{height:auto;min-height:100dvh;overflow-x:hidden;overflow-y:auto}
.chat-project .chat-body.has-stage{overflow:visible}
.chat-project{background:var(--lime);color:var(--ink);padding-inline:clamp(14px,2.4vw,32px)}
.chat-project .chat-head{background:var(--lime);border-bottom:3px solid var(--ink);padding:20px 0 16px}
.chat-eyebrow{font:600 13px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px}
.chat-project .chat-title{font-size:clamp(30px,4.2vw,56px);line-height:1;letter-spacing:-1.5px;margin:0 0 8px}
.chat-project .chat-meta{color:var(--ink)}
.chat-project .chat-head-actions{align-items:center}
.chat-project .chat-head-actions .button{background:var(--ink);color:var(--paper);border-color:var(--ink);border-radius:0;text-transform:uppercase;letter-spacing:.04em}
.chat-project .chat-head-actions .button:hover{background:var(--pink);color:var(--ink)}
.chat-project .textbutton{color:var(--ink);text-decoration-color:var(--ink)}
.chat-project .chat-stage{background:var(--ink);color:var(--paper);padding:16px;margin:16px 0}
.chat-project .chat-stage-copy{min-width:0}
.chat-stage-ask{font:600 12px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--lime);margin:0 0 4px}
.chat-project .chat-stage-status{font:800 clamp(18px,2vw,26px)/1.15 var(--display);letter-spacing:-.5px;color:var(--lime)}
.chat-project .chat-stage .textbutton{color:var(--paper);text-decoration-color:var(--lime)}
.chat-project .chat-stage .hint{color:var(--paper)}
.chat-project .chat-stage-frame{border:0;border-radius:0}
.chat-project .chat-stage :focus-visible{outline-color:var(--lime)}
.chat-body.has-stage:not(.chat-open) .chat-main{display:none}
.chat-project .chat-main{background:var(--paper);border:3px solid var(--ink);padding:0 16px;margin:16px 0}
.chat-project .chat-composer{background:var(--paper)}
.chat-project .chat-aside,.chat-project .chat-details-body{background:transparent;color:var(--ink)}
.chat-project .chat-details>summary{color:var(--ink);text-decoration-color:var(--ink)}
/* Unter 900 px öffnet das Gespräch mit Werk als Fläche von unten (CLAUDE.md: Kontext als Dialog von unten). Die Tastatur
   verkleinert dvh (app.html: interactive-widget=resizes-content), die Fläche schrumpft mit, Eingabe und „Senden“ bleiben darüber. */
.chat-sheet-head{display:none}
.chat-sheet-title{margin:0;font:600 13px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase}
@media(max-width:899px){
  .chat-project .chat-body.has-stage.chat-open .chat-main{position:fixed;left:0;right:0;bottom:0;z-index:20;height:85dvh;max-height:calc(100dvh - 48px);min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0;border-width:3px 0 0;border-radius:12px 12px 0 0}
  .chat-project .chat-body.has-stage.chat-open .chat-sheet-head:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto;margin:0 -16px;padding:2px 16px;border-bottom:2px solid var(--ink)}
}
/* Offene Tastatur (das Fenster ist dann höchstens 600 px hoch): die Antwortchips weichen, damit Verlauf, Feld, „Senden“ und
   die Textknöpfe in der Fläche bleiben. Gemessen bei 375 x 476: mit Chips lag „Aus einem Konzept bauen“ unter der Tastatur. */
@media(max-width:899px) and (max-height:600px){
  .chat-project .chat-body.has-stage.chat-open .chat-chips{display:none}
}
/* Ab 900 px steht das Gespräch neben dem Werk, höchstens fensterhoch; der Verlauf scrollt darin, die Eingabe bleibt unten. */
@media(min-width:900px){
  .chat-project .chat-body.chat-open .chat-main{max-height:calc(100dvh - 32px)}
  /* Auf der Projektseite steht die Demo bereits darüber. Keine leere Spalte für die frühere eingebettete Bühne. */
  body.has-werk .chat-project .chat-body.has-stage.chat-open{grid-template-columns:minmax(0,1fr);grid-template-areas:'main' 'aside'}
  body.has-werk .chat-project .chat-body.has-stage.chat-open :is(.chat-main,.chat-aside){width:100%;max-width:880px;justify-self:center}
}
@media(min-width:900px){
  .chat-body.has-stage:not(.chat-open){grid-template-columns:minmax(0,1fr);grid-template-areas:'stage' 'aside'}
}
@media(max-width:600px){
  body.has-chat #main{padding-top:8px}
  .chat-project .chat-stage{padding:10px;margin:12px 0}
  .chat-project .chat-head-actions .button{flex:1 1 auto}
}
/* Designkorrektur 23.10. (Referenz 02 Bearbeiten, 03 Teilen): Bearbeiten auf Pink, Teilen auf Cyan als tragende Fläche,
   die Vorschau auf schwarzer Bühne; Eingaben bleiben auf ruhigem weißem Grund. Auf dem Desktop steht die Vorschau links. */
body:has(.view-editor),body:has(.view-share),body:has(dialog.editor-sheet[open]){background:var(--ink)}
.editor{--panel:var(--pink);max-width:1240px;background:var(--panel);color:var(--ink);padding:clamp(14px,2.4vw,28px)}
.view-share .editor,.editor[data-share]{--panel:#00e5ff}
.editor-eyebrow{font:600 13px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px}
.editor .editor-title{font-size:clamp(30px,4vw,52px);line-height:1;letter-spacing:-1.5px}
.editor .hint,.editor .status-text,.editor .editor-origin,.editor .field-label,.editor legend{color:var(--ink)}
.editor .textbutton{color:var(--ink);text-decoration-color:var(--ink)}
.editor-stage-slot .editor-stage{background:var(--ink);padding:12px;margin:0 0 16px}
.editor-stage-slot .editor-stage-frame,.editor-stage-slot .editor-stage-image{border:0;border-radius:0}
.editor-tabs{border-bottom:3px solid var(--ink);margin:0 0 16px;gap:4px 24px}
.editor-tabs .mode-button{font:800 18px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;border-bottom-width:4px;color:var(--ink)}
.editor-tabs .mode-button[aria-pressed=true]{border-bottom-color:var(--ink)}
.editor .editor-section,.editor .editor-more{background:var(--paper);border:3px solid var(--ink);padding:14px 16px;margin:0 0 14px}
.editor .editor-more .editor-section{border:0;padding:0;background:transparent}
.editor .editor-bar{background:var(--panel);border-top:3px solid var(--ink)}
dialog.editor-sheet{width:min(1240px,calc(100% - 32px));background:var(--ink);padding:0}
dialog.editor-sheet .editor-head{background:var(--panel)}
dialog.editor-sheet .editor-bar{margin:0;padding-left:0;padding-right:0}
/* Nachprüfung 27.10.2026: das Raster gilt nur der Editor-Ansicht, nicht dialog#werk-editor (class editor, Design V2.1); sonst
   blieb der geschlossene Dialog ab 1100 px stehen (display:grid statt dialog:not([open]){display:none}), und seine Felder lagen
   in einer 279 px schmalen Spalte. */
@media(min-width:1100px){
  .editor:not(dialog){display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:28px;align-items:start}
  .editor-top{grid-column:1/-1}
  .editor-stage-slot{position:sticky;top:12px}
  .editor-stage-slot:empty{display:none}
  .editor-stage-slot:empty+.editor-main{grid-column:1/-1}
  .editor-stage-slot .editor-stage-frame{height:min(78vh,760px)}
}
/* Teilen in drei Schritten (Designkorrektur 23.10.): Schritte auf Papier, die Besuchervorschau auf schwarzer Bühne. */
.editor-share-step{background:var(--paper);border:3px solid var(--ink);padding:14px 16px;margin:0 0 14px}
.editor-share-step .editor-h2{font-size:clamp(20px,2.2vw,26px);text-transform:uppercase;letter-spacing:-.2px}
.editor-share-stage{background:var(--ink);padding:12px;margin:0 0 10px}
.editor-share-stage>*{background:var(--white)}
.editor-share-feed>summary,.editor-proof-details>summary{min-height:44px;display:flex;align-items:center;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.editor-proof-details{background:var(--paper);border:3px solid var(--ink);padding:4px 16px 10px;margin:0 0 14px}
.editor-share-step .editor-bar{position:static;background:transparent;border-top:0;padding:4px 0 0}
@media(max-width:600px){.chat-project .chat-head-actions #chat-more{flex:0 0 auto}}
.editor-cover-option{position:relative}
.editor-cover-tag{position:absolute;left:4px;bottom:4px;background:var(--ink);color:var(--paper);font:700 11px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;padding:4px 6px}
/* V2-2 (24.10.2026, Design V2.1): Import im Kopf wie .button.small.lime der Referenz (Limette, Tinte, 2px Kontur, Radius 9px,
   44px). Navigation und Knopf rechts. Mobil bleibt der zweizeilige Kopf der Designkorrektur 23.10. ohne Knopf, bis Codex
   entscheidet, wo Konto und Import dort stehen. */
.site-header nav{margin-left:auto}
.site-header .header-import{min-height:44px;padding:10px 16px;border:2px solid var(--ink);border-radius:9px;display:inline-flex;align-items:center;justify-content:space-between;gap:16px;font:700 12px/1.3 var(--body);background:var(--lime);color:var(--ink);text-decoration:none;white-space:nowrap;flex:0 0 auto}
.site-header .header-import span{font-size:22px;line-height:1}
.site-header .header-import:hover{background:var(--paper);color:var(--ink)}
@media(max-width:600px){.site-header .header-import{display:none}}

/* W2: Zeichenzähler der Rückmeldung (Codex V2.1 .over-limit); Fehlerfarbe aus den Tokens. */
.kontakt-count.over-limit { color: var(--pink-dark); font-weight: 600; }
/* C1 (Codex 25.10.2026): mindestens 44 × 44 px aktive Fläche für Kopfnavigation und Projektleiste, auch bei 320 px. */
.site-header nav a{min-width:44px;justify-content:center}
.v21-projekt .creator-bar .quiet{min-width:44px}
/* B16 (Tom 27.10.2026): „Bevor es online geht“ als Checkliste. Ohne Wand schlicht mit nativen Haken, ganze Zeile antippbar,
   44 px Klickflächen; die Gestaltung (drei Varianten) steht in wand-editor.css. */
.editor-dc-liste{list-style:none;margin:12px 0;padding:0;display:grid;gap:8px}
.editor-dc-check{display:grid;gap:4px}
.editor-dc-zeile{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer}
.editor-dc-input{width:24px;height:24px;margin:0;flex:none}
.editor-dc-box{display:none}
.editor-dc-titel{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin:0}
.editor-dc-satz,.editor-dc-hilfe{display:block}
.editor-dc-wahl{border:0;padding:0;margin:0;min-width:0}
.editor-dc-nein,.editor-dc-hin,.editor-dc-notiz > summary{min-height:44px}
.editor-dc-notiz textarea{width:100%}
.editor-dc-zahl{font-weight:700}
/* K1 (Codex 25.10.2026, 4.2): Vorschau der Datei in der Löschbestätigung, Unterzeile mit Projektname (2.3). */
.confirm-view .confirm-preview{display:block;max-width:200px;max-height:140px;border:1px solid var(--line);border-radius:4px;margin:4px 0 12px}
.confirm-view #project-confirm-sub{margin:0 0 12px}
/* K3 (Codex 25.10.2026, 4.4): Vorschaubild-Aktionen in einer Feldkontur, umbrechend statt überlaufend, 44 px. */
.editor-cover-actions{display:flex;flex-wrap:wrap;gap:8px;padding:8px;border:1px solid var(--line);border-radius:4px;background:var(--white);max-width:640px}
.editor-cover-actions .button{min-height:44px;flex:0 1 auto;max-width:100%;white-space:normal;text-align:center}
/* K3 (Codex 25.10.2026, 5.1 Zusatzbefund): Laufzeitrahmen der App auf dem Desktop mindestens 580 px hoch (Gruvi: unterste
   Bedienreihe bei 560 px, die Demo scrollt nicht); bei kurzer Fensterhöhe scrollt der Dialog. */
@media(min-width:721px){.v21-projekt .demo-dialog .embedded-runtime{min-height:580px}.v21-projekt .demo-dialog.expanded .embedded-runtime{min-height:580px}}
/* K4 (Codex 25.10.2026, 6.1): Angaben als Radiogruppe im Pillenstil (v21-feedback.css kennt nur Knöpfe); haftender Dialogkopf. */
.v21-ui .feedback-kinds{border:0;padding:0;margin:0 0 15px;min-width:0}
.v21-ui .feedback-kinds legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.v21-ui .feedback-kinds label{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:10px 12px;border:1px solid var(--ink);border-radius:50px;font-size:11px;font-weight:700;cursor:pointer;margin:0}
.v21-ui .feedback-kinds input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.v21-ui .feedback-kinds label:has(input:checked){background:var(--lime);border-width:2px}
.v21-ui .feedback-kinds label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:5px}
.v21-projekt .demo-dialog .dialog-head{position:sticky;top:0;z-index:2;background:var(--milk);padding-bottom:8px}
/* Paket B (Codex Folgeabnahme 25.10.2026, 4.2): der Dialog scrollt selbst, Kopf und Schließen bleiben stehen; keine Skalierung der Demo. */
.v21-projekt .demo-dialog{overflow-y:auto}
/* C7a (Codex 25.10.2026, Punkt 2): Projektkarte nach V2.1 overview-card (Regeln aus start.css, auf die Karte begrenzt). */
.product-card.overview-card{padding:0;overflow:hidden;border-radius:15px}
.product-card .overview-image{display:flex;align-items:center;justify-content:center;min-height:180px;width:100%;background:var(--mint);padding:20px;text-decoration:none}
.product-card .overview-image>img{height:160px;max-width:90%;object-fit:contain;border-radius:12px}
.product-card .overview-empty{display:block;width:60%;height:120px;border:1px dashed var(--ink);border-radius:12px;opacity:.4}
.product-card .overview-body{padding:20px}
.product-card .overview-body .pill{display:inline-flex;align-items:center;min-height:29px;font-size:10px;font-weight:700;padding:5px 10px;border:1.5px solid currentColor;border-radius:50px;letter-spacing:.04em;white-space:nowrap}
.product-card .overview-body h3{margin:14px 0 8px}
.product-card .overview-actions{display:flex;gap:20px;flex-wrap:wrap;margin:8px 0 12px}
.product-card .overview-actions .text-link{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-decoration:underline;text-underline-offset:5px;border:0;background:transparent;padding:0;color:inherit;cursor:pointer}
.product-card .overview-body .v21-ui .project-pulse{margin:12px 0}
/* C7a (Codex, A1): Avatar-Auswahl eingeklappt, aktuelle Figur mit „Frucht ändern“; „Kein Avatar“ als ruhige leere Fläche. */
.v21-ui .avatar-stage{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:20px}
.v21-ui .avatar-current img{width:120px;height:120px;display:block}
.v21-ui .avatar-empty{display:block;width:120px;height:120px;border:1px dashed var(--ink);border-radius:50%;opacity:.35}
.v21-ui #avatar-change{min-height:44px}
.v21-ui .avatar-picker #avatar-change{width:auto;height:auto;min-height:44px;padding:8px 14px;border-radius:6px;background:var(--white)}
/* T1b Tags (Codex 25.10.2026, tags/tags.css): Themen als Mint-Label unter Satz oder Kurzbeschreibung, getrennt vom Format; „+N“ als Link mit 44 px. */
.tag-labels{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:8px 0 12px}
.label.tag{display:inline-block;border:1px solid var(--ink);border-radius:22px;padding:5px 10px;font-size:12px;line-height:1.3;background:var(--mint);color:var(--ink);overflow-wrap:anywhere}
a.label.tag{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:700}
a.label.tag:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
/* T1c Themenfilter (Codex 25.10.2026, tags/tags.css): Chips mit 44 px, gewählt in Tinte; in Entdecken im Filterdialog, in Meine Projekte über den Karten. */
#projects-tags-box{margin:0 0 16px}
#projects-tags-box .chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 12px}
#projects-tags-box .chip{display:inline-flex;align-items:center;min-height:44px;padding:9px 15px;border:2px solid var(--ink);border-radius:30px;background:var(--white);color:var(--ink);font-size:15px;font-weight:600;line-height:1.2;white-space:normal;max-width:100%;overflow-wrap:anywhere}
#projects-tags-box .chip[aria-pressed=true]{background:var(--ink);color:var(--paper)}
#projects-tags-box .chip:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
/* Paket C (Codex Folgeabnahme 25.10.2026, 2.3): Installationshilfe je Plattform aufklappbar, Zeilen mit 44 px. */
.account-install-help p{margin:8px 0}
.account-install-help details{border:1px solid var(--line);border-radius:4px;margin:6px 0}
.account-install-help summary{min-height:44px;display:flex;align-items:center;padding:0 12px;cursor:pointer;font-weight:600}
.account-install-help details>p{margin:0;padding:0 12px 12px}

/* Öffentliches Originalmaterial: Quellenfeld auch mobil bedienbar, übrige Prüfkarten bleiben unverändert. */
.editor-dc-source{display:block;box-sizing:border-box;width:100%;min-width:0;min-height:48px;margin:8px 0 16px;padding:10px 12px;border:2px solid currentColor;border-radius:0;background:var(--paper);color:var(--ink);font:inherit}.editor-dc-source:focus-visible{outline:3px solid currentColor;outline-offset:3px}