/* Ideenwerk · App-Ebene: ordnet Bausteine nur an (Lage und Größe), gestaltet nichts.
   Werte nur über die Namen des Gestaltungsvertrags (gestaltung/grundlagen/vertrag.json, lesbar als VERTRAG.md im Werkzeugkasten). */

/* --- Gerüst: Seitenleiste ab mittel, Reiterleiste unten bei kompakt --- */
.iw-schale {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 100dvh;
}
.iw-navi {
  position: sticky;
  top: 0;
  height: 100dvh;
}
.iw-navi-marke { margin: var(--wk-abstand-2) var(--wk-abstand-3) var(--wk-abstand-4); }
.iw-navi-ende { margin-top: auto; }
.iw-unten { display: none; }
.iw-schale[data-angemeldet="nein"] { grid-template-columns: minmax(0, 1fr); }
.iw-schale[data-angemeldet="nein"] :is(.iw-navi, .iw-unten) { display: none; }

.iw-haupt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.iw-kopf { gap: var(--wk-abstand-3); }
.iw-titel { min-width: 0; overflow-wrap: anywhere; }
.iw-zurueck { flex: none; }
.iw-ansicht {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--wk-spalte);
  margin-inline: auto;
  padding: var(--wk-abstand-4) var(--wk-abstand-5) var(--wk-abstand-8);
}

@media (max-width: 700px), (orientation: landscape) and (max-height: 520px) {
  .iw-schale { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .iw-navi { display: none; }
  .iw-unten { display: flex; grid-column: 1; }
  .iw-schale[data-angemeldet="nein"] .iw-unten { display: none; }
  .iw-ansicht { padding: var(--wk-abstand-3) var(--wk-abstand-4) var(--wk-abstand-6); }
}

/* --- Anordnung --- */
.iw-stapel { display: flex; flex-direction: column; gap: var(--wk-abstand-4); min-width: 0; margin: 0; }
.iw-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wk-abstand-2); min-width: 0; }
.iw-zwischen { justify-content: space-between; }
.iw-eingabe { align-items: flex-end; }
.iw-wachsen { flex: 1 1 16rem; min-width: 0; }
.iw-schmal { width: 100%; max-width: 26rem; margin: var(--wk-abstand-6) auto 0; box-sizing: border-box; }
.iw-mitte { display: grid; place-items: center; min-height: 30vh; }
.iw-segment { max-width: 100%; overflow-x: auto; }
.iw-segment > .wk-segment-wahl { flex: none; }
/* Erfassen: Kopf (Name links, Beschreibung rechts), darunter Titel und Festhalten in einer Zeile; wird es zu eng,
   rutscht Festhalten unter den Titel. Die Beschreibung klappt unter beiden auf. */
.iw-erfassen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wk-abstand-3); }
.iw-erfassen-kopf { flex: 1 1 100%; }
.iw-erfassen-titel { flex: 1 1 8rem; min-width: 0; }
.iw-erfassen-senden { flex: 0 0 auto; }
.iw-erfassen-mehr { flex: 1 1 100%; order: 1; }
/* Filter: ein Segment nur aus Symbolen (Name über aria-label und title), rechts die Suche als Symbol; darunter leise
   der gewählte Filter mit Anzahl; das Suchfeld klappt erst bei Bedarf auf. Eine Zeile, auch bei 320 px. */
.iw-filter { display: flex; align-items: center; gap: var(--wk-abstand-2); min-width: 0; }
.iw-filter-segment { flex: none; }
.iw-filter-wahl { flex: none; min-width: var(--wk-knopf); padding-inline: 0; }
.iw-filter-suche { margin-inline-start: auto; }
.iw-filter-name { margin: 0; }
.iw-zustand:empty { display: none; }
@media (max-width: 700px), (orientation: landscape) and (max-height: 520px) {
  /* Liste am Telefon: Titel über die volle Breite, Status und Werte darunter in einer Zeile */
  .iw-ideen-zeile .iw-zeile-link { flex-direction: column; align-items: stretch; gap: var(--wk-abstand-2); }
  .iw-ideen-zeile .iw-zeile-neben { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--wk-abstand-2); }
  .iw-ideen-zeile + .iw-ideen-zeile { margin-top: var(--wk-abstand-2); }
}
.iw-status { max-width: 16rem; }
.iw-lang { min-height: 12rem; }
.iw-umbruch { overflow-wrap: anywhere; min-width: 0; }

/* Zeilen, die ganz Link oder Knopf sind */
.iw-zeile-link {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--wk-abstand-3);
  min-width: 0;
  padding: var(--wk-abstand-2) 0;
}
/* vertrag-ausnahme N5: Zeile als Link oder Knopf erbt Schrift und Farbe der Listenzeile (im Vertrag fehlt das für a/button
   in wk-zeile; Rückgabe an design-grundlagen vorgeschlagen) */
.iw-zeile-link { color: inherit; font: inherit; text-align: start; text-decoration: none; background: none; border: 0; cursor: pointer; }
.iw-zeile-text { display: flex; flex-direction: column; gap: var(--wk-abstand-1); min-width: 0; }
.iw-zeile-neben { display: flex; flex-direction: column; align-items: flex-end; gap: var(--wk-abstand-1); }
/* Kriterium: Text nimmt den Platz, die Werte bleiben ganz; ist es zu eng, rutschen sie darunter. Vorschlag von Claude
   als eigene flache Fläche über die ganze Breite (Glas: Vorschlag = Fläche, Kreis-Symbol und Wort). */
.iw-kriterium { flex-wrap: wrap; padding-block: var(--wk-abstand-3); }
.iw-kriterium-text { flex: 1 1 16rem; }
.iw-kriterium-werte { flex: 0 0 auto; }
.iw-kriterium-vorschlag { flex: 1 1 100%; display: flex; flex-direction: column; gap: var(--wk-abstand-2); }
.iw-kriterium + .iw-kriterium { margin-top: var(--wk-abstand-2); }
.iw-kriterium-vorschlag > p { margin: 0; }
@media (max-width: 700px), (orientation: landscape) and (max-height: 520px) {
  .iw-kriterium { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--wk-abstand-2); }
  .iw-kriterium-text, .iw-kriterium-vorschlag { flex: none; }
}
.iw-wert { flex: 2; min-width: 0; overflow-wrap: anywhere; }
.iw-eckdatum { align-items: baseline; padding-block: var(--wk-abstand-2); }
.iw-eckdatum-name { flex: 0 0 11rem; min-width: 0; overflow-wrap: anywhere; }
/* Telefon: Bezeichnung über dem Wert, Einträge mit Abstand getrennt (Glas trennt über Fläche und Raum, nicht über Linien) */
@media (max-width: 700px), (orientation: landscape) and (max-height: 520px) {
  .iw-eckdatum { flex-direction: column; align-items: stretch; gap: var(--wk-abstand-1); padding-block: var(--wk-abstand-3); }
  .iw-eckdatum-name { flex: none; }
  .iw-eckdatum + .iw-eckdatum { margin-top: var(--wk-abstand-2); }
}

/* Durchlauf */
/* Frameworks im Ergebnis: Raster 2×2 (SWOT, TOWS), Zeilen mit Etiketten, Risikomatrix 5×5.
   vertrag-ausnahme A18: Diese Klassen setzt js/analyse.js beim Aufbau aus den Eckdaten (keine Vorlage möglich, die Zahl der Felder
   hängt an den Daten). */
.iw-analyse { min-width: 0; }
.iw-analyse-kopf { margin: 0; }
.iw-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wk-abstand-3); }
.iw-raster-feld { min-width: 0; gap: var(--wk-abstand-2); }
.iw-raster-liste { display: flex; flex-direction: column; gap: var(--wk-abstand-1); margin: 0; padding-inline-start: var(--wk-abstand-5); }
.iw-analyse-zeile { flex-wrap: wrap; align-items: flex-start; padding-block: var(--wk-abstand-2); }
.iw-analyse-neben { flex: 0 1 auto; justify-content: flex-end; }
.iw-matrix { border-collapse: separate; border-spacing: var(--wk-abstand-1); margin-inline: auto; }
.iw-matrix :is(th, td) { min-width: 2.75rem; height: 2.5rem; padding: 0; text-align: center; vertical-align: middle; }
.iw-matrix caption { caption-side: bottom; padding-top: var(--wk-abstand-2); text-align: start; }
@media (max-width: 700px), (orientation: landscape) and (max-height: 520px) {
  .iw-raster { grid-template-columns: minmax(0, 1fr); }
  .iw-analyse-zeile { flex-direction: column; align-items: stretch; gap: var(--wk-abstand-1); }
  .iw-analyse-neben { justify-content: flex-start; }
  .iw-matrix { border-spacing: 2px; }
  .iw-matrix :is(th, td) { min-width: 2rem; height: 2.25rem; }
}
/* Navigation auf langen Seiten: Stufen-Leiste bleibt oben stehen, Inhalt je Ergebnis, „Nach oben“ */
/* Die Leiste ist die eingeklappte Kopfzeile des Durchlaufs: dichtes Glas mit Unschärfe (Stil), hier nur Lage und Abstand */
.iw-leiste { top: var(--wk-abstand-2); flex-wrap: wrap; gap: var(--wk-abstand-1) var(--wk-abstand-3); }
.iw-leiste-navi { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.iw-leiste-name { flex: 1 1 10rem; min-width: 0; }
.iw-leiste-wahl { min-width: var(--wk-knopf); }
.iw-stufe, .iw-text-heading { scroll-margin-top: 7.5rem; }
.iw-inhalt { gap: var(--wk-abstand-1); }
.iw-nach-oben { position: fixed; right: var(--wk-abstand-5); bottom: var(--wk-abstand-5); z-index: 3; }
@media (max-width: 700px), (orientation: landscape) and (max-height: 520px) {
  .iw-leiste { top: 0; }
  .iw-leiste-name { flex-basis: 100%; }
  .iw-stufe, .iw-text-heading { scroll-margin-top: 9rem; }
  .iw-nach-oben { right: var(--wk-abstand-4); bottom: calc(env(safe-area-inset-bottom) + 6rem); }
}
/* Stufen als Akkordeon: zu zeigt Name, Status und Kernaussage (zwei Zeilen), offen alles Weitere */
.iw-stufe-titel { flex: 1 1 14rem; min-width: 0; margin: 0; }
.iw-stufe-titel > .iw-zeile-link { gap: var(--wk-abstand-2); padding: 0; }
.iw-stufe-titel svg { flex: none; width: var(--wk-symbol-m); height: var(--wk-symbol-m); }
.iw-stufe-kurz { margin: 0; max-width: var(--wk-lesebreite); }
.iw-stufe:not([data-zustand="offen"]) .iw-stufe-kurz { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Kennzahlen als Kacheln: kurze Werte nebeneinander, lange als Zeilen darunter */
.iw-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--wk-abstand-2); }
.iw-kachel { display: flex; flex-direction: column; gap: var(--wk-abstand-1); min-width: 0; padding: var(--wk-abstand-3); overflow-wrap: anywhere; }
/* Balken (wk-fortschritt): Bezeichnung, Balken, Zahl in festen Spalten (Glas R9); Hinweis darunter */
.iw-balken-gruppe { display: flex; flex-direction: column; gap: var(--wk-abstand-2); min-width: 0; }
.iw-balken { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(4rem, 1fr) minmax(6rem, auto); align-items: center;
  gap: var(--wk-abstand-1) var(--wk-abstand-3); min-width: 0; }
.iw-balken-name { min-width: 0; overflow-wrap: anywhere; }
.iw-balken-wert { text-align: end; }
.iw-balken-hinweis { grid-column: 1 / -1; }
.iw-zeitleiste-phase { flex-direction: column; align-items: stretch; gap: var(--wk-abstand-2); padding-block: var(--wk-abstand-2); }
.iw-zeitleiste-phase .iw-balken { grid-template-columns: minmax(4rem, 1fr) minmax(6rem, auto); }
.iw-zeitleiste-phase .iw-balken-name { display: none; }
@media (max-width: 700px), (orientation: landscape) and (max-height: 520px) {
  .iw-balken { grid-template-columns: minmax(0, 1fr) auto; }
  .iw-balken-name { grid-column: 1 / -1; }
}
/* Volltext in Abschnitten: Kopf klappt, Inhalt in Lesebreite */
.iw-abschnitt { gap: var(--wk-abstand-2); }
.iw-abschnitt > .iw-text-heading { margin: 0; }
.iw-abschnitt-inhalt { padding-inline-start: var(--wk-abstand-5); }
.iw-stufen { display: flex; flex-direction: column; gap: var(--wk-abstand-4); margin: 0; padding: 0; }
.iw-stufe { list-style-position: inside; }
.iw-quellen { display: flex; flex-direction: column; gap: var(--wk-abstand-1); margin: 0; padding-inline-start: var(--wk-abstand-5); }
.iw-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--wk-abstand-2); margin: 0; padding: 0; }
.iw-qr { width: 12rem; max-width: 100%; }

/* Ergebnistext (Markdown) */
.iw-text { display: flex; flex-direction: column; gap: var(--wk-abstand-3); min-width: 0; max-width: var(--wk-lesebreite); }
.iw-text :is(p, ul, ol, blockquote) { margin: 0; }
.iw-text :is(ul, ol) { padding-inline-start: var(--wk-abstand-5); }
.iw-text-heading { margin-top: var(--wk-abstand-3); }
.iw-tabelle-rahmen { max-width: 100%; overflow-x: auto; }
.iw-tabelle { min-width: 100%; }
.iw-tabelle :is(th, td) { padding: var(--wk-abstand-1) var(--wk-abstand-2); vertical-align: top; }
.iw-roh { max-height: 24rem; overflow: auto; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* „hidden“ gilt immer, auch gegen display aus Bausteinen und Anordnung (die ID in :not hebt die Spezifität, ohne !important) */
[hidden]:not(#iw-nie) { display: none; }

/* Sonar: Signale als Karten je Horizont; Chancen als Zeilen mit „Als Idee festhalten“ rechts, am Telefon darunter */
.iw-sonar-kopf { margin: 0; }
.iw-sonar-lage, .iw-signal-text { margin: 0; max-width: var(--wk-lesebreite); }
.iw-sonar-felder { gap: var(--wk-abstand-2); }
.iw-signale { display: flex; flex-direction: column; gap: var(--wk-abstand-3); margin: 0; padding: 0; list-style: none; }
.iw-signal-titel { margin: 0; overflow-wrap: anywhere; }
.iw-signal-aktionen { margin-inline-start: auto; }
.iw-sonar-kacheln { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); }
.iw-chance { align-items: center; gap: var(--wk-abstand-3); padding-block: var(--wk-abstand-2); }
.iw-chance-neben { flex: none; }
@media (max-width: 700px), (orientation: landscape) and (max-height: 520px) {
  .iw-chance { flex-wrap: wrap; align-items: flex-start; }
  .iw-chance > .iw-zeile-text { flex: 1 1 12rem; }
  .iw-chance-neben { flex: 1 1 100%; align-items: flex-start; }
}
/* Sonar-Grafik (js/sonar-grafik.js): rund ab mittel, Fächer am Telefon; Legende daneben bzw. darunter.
   vertrag-ausnahme N5: Die Grafik ist kein Baustein des Vertrags (Kandidat „radar“, nach E6 erst mit einer zweiten
   App); ihre Klassen setzen deshalb Farben, aber nur über Rollen (R1), keine festen Werte. Glas: Ringe als Flächen,
   Sektoren durch Lücken, Werte immer auch in der Liste (stil-glas L5). */
.iw-sonar-bild { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wk-abstand-4); }
.iw-sonar-flaeche { flex: 1 1 18rem; max-width: 27.5rem; min-width: 0; }
.iw-sonar-legende { flex: 1 1 11rem; min-width: 0; gap: var(--wk-abstand-3); }
.iw-sonar-legende > p { margin: 0; }
.iw-sonar-legende-felder { display: flex; flex-direction: column; align-items: flex-start; gap: var(--wk-abstand-2); margin: 0; padding: 0; list-style: none; }
/* Symbole des Glas-Satzes sind Striche: ohne Baustein drumherum setzt die Grafik das selbst (Felder am Rand) */
.iw-sonar-feld { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.iw-sonar-grafik { display: block; width: 100%; height: auto; overflow: visible; }
.iw-sonar-ring { fill: var(--wk-text); fill-opacity: .1; }
.iw-sonar-ring[data-ring="1"] { fill-opacity: .06; }
.iw-sonar-ring[data-ring="2"] { fill-opacity: .035; }
.iw-sonar-luecke { stroke: var(--wk-flaeche); stroke-width: 4; }
.iw-sonar-strahl { fill: var(--wk-info); fill-opacity: .14; transform-box: view-box; transform-origin: var(--iw-sonar-mitte, 50% 50%); }
.iw-sonar-grafik[aria-busy="true"] .iw-sonar-strahl { animation: iw-sonar-drehen 6s linear infinite; }
.iw-sonar-grafik[data-form="faecher"][aria-busy="true"] .iw-sonar-strahl { animation: iw-sonar-schwenken 3s ease-in-out infinite alternate; }
@keyframes iw-sonar-drehen { to { transform: rotate(360deg); } }
@keyframes iw-sonar-schwenken { from { transform: rotate(-75deg); } to { transform: rotate(75deg); } }
@media (prefers-reduced-motion: reduce) {
  .iw-sonar-grafik[aria-busy="true"] .iw-sonar-strahl { animation: none; }
}
.iw-sonar-ringname { fill: var(--wk-text-leise); font-size: var(--wk-groesse-klein); }
.iw-sonar-feld { color: var(--wk-text); overflow: visible; }
.iw-sonar-standort { fill: var(--wk-text); }
.iw-sonar-punkt { cursor: pointer; }
.iw-sonar-punkt[data-leise="true"] { opacity: .3; }
.iw-sonar-sektor { fill: var(--wk-info); fill-opacity: .1; }
.iw-sonar-punkt > circle { fill: var(--wk-text); fill-opacity: .45; stroke: var(--wk-text); stroke-width: 2; }
.iw-sonar-punkt[data-reife="schwach"] > circle { fill: var(--wk-flaeche); fill-opacity: 1; }
.iw-sonar-punkt[data-reife="etabliert"] > circle { fill-opacity: 1; }
.iw-sonar-punkt:hover > circle, .iw-sonar-punkt[aria-current="true"] > circle { stroke: var(--wk-info); stroke-width: 4; }
.iw-sonar-nummer { fill: var(--wk-text); font-size: var(--wk-groesse-klein); font-weight: 600; }
.iw-signale > [data-zustand="gewaehlt"] { scroll-margin-top: var(--wk-abstand-8); }
@media (max-width: 700px), (orientation: landscape) and (max-height: 520px) {
  .iw-sonar-flaeche { flex-basis: 100%; max-width: none; }
  .iw-sonar-legende-felder { flex-direction: row; flex-wrap: wrap; gap: var(--wk-abstand-2) var(--wk-abstand-4); }
}