/* C5 (Codex 25.10.2026, Punkte 6, 7, 15): Ergänzungen zu start.css, keine zweite Tokenliste. Farbwelt je Projektkarte
   im Coverumfeld und in der Titelzone (Flächenpaare aus V2.1: pink Pink/Mint, lime Lime/Violett, violet Violett/Orange,
   orange Orange/Lilac; Text auf Violett Paper, sonst Tinte). Globale Flächen, Navigation und Wortmarke bleiben. */
.feed-card{--card-hero:var(--pink);--card-hero-text:var(--ink);--card-stage:var(--mint);--card-stage-text:var(--ink)}
.feed-card[data-theme=lime]{--card-hero:var(--lime);--card-stage:var(--violet);--card-stage-text:var(--paper)}
.feed-card[data-theme=violet]{--card-hero:var(--violet);--card-hero-text:var(--paper);--card-stage:var(--orange)}
.feed-card[data-theme=orange]{--card-hero:var(--orange);--card-stage:var(--lilac)}
.feed-card .feed-image{background:var(--card-stage);color:var(--card-stage-text)}
.feed-card .feed-body{background:var(--card-hero);color:var(--card-hero-text)}
/* Punkt 15: Begleittext mit eigenem Abstand von mindestens 12 px. */
.prototype-offer .prototype-status{margin-top:16px}
/* Punkt 7: lange Titel umbrechen, nicht abschneiden. */
.work-copy h1{overflow-wrap:anywhere}
/* L2 Profil-Claim (26.10.2026): eine Zeile über dem Alias im Werk-Kopf (.eyebrow), lange Claims brechen um wie Titel. */
.work-claim{overflow-wrap:anywhere}
/* Aktionen unter dem Bedienhinweis nebeneinander mit Abstand, Statuszeile darunter. */
.werk-actions{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px}
.werk-actions .werk-share-status{flex-basis:100%;margin:0}
/* K3 (Codex 25.10.2026, 5.1 Zusatzbefund): auf dem Desktop braucht die eingebettete Demo mindestens 580 px Höhe (Gruvi:
   unterste Bedienreihe bei 560 px, die Demo scrollt nicht). Bei kurzer Fensterhöhe scrollt der Dialog statt die Demo abzuschneiden. */
@media(min-width:721px){.embedded-runtime{min-height:580px}.expanded .embedded-runtime{min-height:580px}}
/* K4 (Codex 25.10.2026, 6.1): Angaben als Radiogruppe im Pillenstil der V2.1-Knöpfe; haftender Dialogkopf, damit Schließen beim
   Scrollen und mit offener Tastatur erreichbar bleibt. */
.feedback-kinds{border:0;padding:0;margin:0 0 15px;min-width:0}
.feedback-kinds legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.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}
.feedback-kinds input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.feedback-kinds label:has(input:checked){background:var(--lime);border-width:2px}
.feedback-kinds label:has(input:focus-visible){outline:3px solid currentColor;outline-offset:5px}
.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. */
.demo-dialog{overflow-y:auto}
/* T1b Tags (Codex 25.10.2026, tags/tags.css): Themen als Mint-Label unter der Kurzbeschreibung, getrennt vom Formatlabel;
   „+N“ ist ein Link zur Projektseite mit 44 px Zielfläche. */
.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;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(--violet);outline-offset:3px}

/* Kennzeichnung der Demofassung (Codex 26.10.2026, AN-CODEX-KENNZEICHNUNG): ruhige Textzeile, 14 px, vorhandene
   Textfarbe, keine Pille. Projektseite direkt unter dem Bedienhinweis, Laufzeitdialog unmittelbar über der Demo. */
.project-detail p.demo-label {
  margin-top: 8px;
  font-size: 14px;
}
.demo-dialog > p.demo-label {
  font-size: 14px;
  margin: -6px 0 12px;
  max-width: 650px;
}

/* V1 Vorschaubild dominiert (Codex 26.10.2026, Go 1 Tom): die echte Aufnahme bekommt die größte Fläche, Titel und
   Startaktion kompakt daneben oder darunter, Farbflächen werden Rahmen oder Akzent. start.css bleibt unverändert
   (byte-gleich mit Codex’ Paket), darum stehen die Regeln hier; gleiche Spezifität, spätere Datei gewinnt. */
/* Bühne der Startseite: Bild in voller Breite, Farbwelt als Rahmen, Frucht klein in der oberen Ecke. */
.lp-hero { grid-template-columns: 1fr 1.3fr; }
.lp-art.gruvi-art { flex-direction: column; align-items: stretch; justify-content: center; padding: 72px 40px 36px; }
.gruvi-art .gruvi-cover { width: 100%; max-width: none; border-radius: 18px; box-shadow: none; border: 2px solid var(--ink); }
.gruvi-art .gruvi-cover > img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.gruvi-art .lp-fruit { width: 80px; top: 16px; right: 24px; bottom: auto; }
/* Unterschrift im Fluss unter dem Bild statt absolut darüber: Bedienhinweis und Startaktion kompakt in einer Zeile. */
.gruvi-art .art-caption { position: static; margin-top: 18px; align-items: center; gap: 16px; }
.gruvi-art .art-caption > div { min-width: 0; }
.gruvi-art .art-caption strong { font-size: 17px; line-height: 1.2; }
.gruvi-art .art-caption span { font-size: 11px; margin-top: 6px; max-width: 460px; }
.gruvi-art .art-caption .button { flex-shrink: 0; }
/* Karten im Feed: Bild volle Kartenbreite 16:10, Startaktion über dem Bild, Titel kompakt darunter. */
.feed-card .feed-image { position: relative; padding: 0; display: block; min-height: 0; }
.feed-card .feed-image > img { width: 100%; max-width: none; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 0; display: block; }
.feed-card .feed-image > .button { position: absolute; right: 14px; bottom: 14px; }
.feed-card .feed-body { padding: 18px 20px 20px; }
.feed-card .feed-body h3 { margin: 10px 0 8px; font-size: 28px; }
.feed-card .feed-body > p { font-size: 14px; margin-bottom: 12px; }
/* Weitere Projekte auf der Werkseite: Bild zuerst, Titel kompakt. */
.profile-work { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
.profile-work > img { width: 100%; max-height: none; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 10px; border: 1px solid var(--ink); }
.profile-work h3 { font-size: clamp(26px, 3vw, 36px); margin: 6px 0; }
@media (max-width: 720px) {
  .lp-hero { grid-template-columns: 1fr; }
  .lp-art.gruvi-art { padding: 64px 20px 28px; min-height: 0; }
  .gruvi-art .art-caption { flex-direction: column; align-items: start; gap: 12px; }
  .gruvi-art .lp-fruit { width: 64px; top: 12px; right: 16px; bottom: auto; }
  .feed-card .feed-body h3 { font-size: 26px; }
  .profile-work { padding: 12px; }
  .profile-work > img { height: auto; }
}

/* V3 Plattform-Claim (Tom 26.10.2026: BUILD ON PURPOSE) kompakt bei der Marke: Versalien 11 px wie die Dachzeilen,
   Paper auf Tinte, ohne Pille; die erklärende Überschrift bleibt. Unter 720 px in eigener Zeile unter der Marke, damit
   Knopf und Navigation ihren Platz behalten. */
.site-header .claim { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--paper); white-space: nowrap; padding-top: 7px; }
@media (max-width: 720px) {
  .site-header { flex-wrap: wrap; }
  .site-header .claim { order: 1; flex-basis: 100%; font-size: 10px; padding-top: 0; margin-top: -8px; }
  .site-header nav { order: 2; }
  .site-header > .button { order: 0; }
}