/* Layout und Komponenten von Miarto Criticum */
body { font-family: system-ui, sans-serif; margin: 0; background: #f5f5f7; color: #222; line-height: 1.45; }
/* Kopfbereich mit Logo: heller, leicht bläulicher Verlauf, damit der dunkle Schriftzug „Miarto“ und die Zeile darunter
   gut lesbar sind; ein Hauch Blau links und Orange rechts greift die Logofarben auf, darunter die Akzentlinie */
.site-header {
  background:
    radial-gradient(ellipse 40% 100% at 12% 60%, rgba(46, 111, 181, .10), transparent 70%),
    radial-gradient(ellipse 40% 100% at 88% 60%, rgba(232, 120, 30, .10), transparent 70%),
    linear-gradient(180deg, #f8fafd 0%, #e2e8f1 100%);
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, #2e6fb5, #e8781e) 1;
  padding: .5rem 1rem 0;
  text-align: center;
}
.site-header__logo { display: block; margin: 0 auto; width: auto; height: clamp(130px, 24vw, 250px); max-width: 100%; object-fit: contain; }
.page { max-width: 1200px; margin: 0 auto; padding: 1rem; }
.page__title { font-size: 1.6rem; margin-top: 0; }

/* Vier Bereiche (FA-22): Smartphone/Tablet untereinander in DOM-Reihenfolge, Desktop 2 x 2 */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.panel { background: #fff; border-radius: 8px; padding: 1rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.panel__title { margin: 0 0 .5rem; font-size: 1.2rem; }
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.btn { background: #1f4e79; color: #fff; border: 0; border-radius: 6px; padding: .6rem 1.1rem; font-size: 1rem; cursor: pointer; }
.btn--accent { background: #2e7d32; }
.btn--secondary { background: #666; }
/* Hauptschaltfläche im Miarto-Rot */
.btn--primary { background: #df111d; }
.btn--primary:hover:not(:disabled) { background: #b80e18; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.message { margin: .75rem 0 0; padding: .6rem .8rem; border-radius: 6px; }
.message--error { background: #fde8e8; color: #8a1c1c; }
.message[hidden], .preview[hidden], .spinner[hidden] { display: none; }

/* Vorschau: nie in voller Größe, Seitenverhältnis bleibt erhalten */
.preview { margin: 1rem 0 0; }
.preview__frame { position: relative; display: inline-block; max-width: min(100%, 600px); line-height: 0; }
.preview__img { display: block; max-width: 100%; height: auto; border-radius: 4px; }
/* Rahmen um den Bildbereich eines Vorschlags (FA-26); Lage über CSS-Variablen (0–1) */
.preview__rect { --x: 0; --y: 0; --w: 0; --h: 0; position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: calc(var(--w) * 100%); height: calc(var(--h) * 100%); border: 3px solid #ffb300; box-shadow: 0 0 0 2px rgba(0, 0, 0, .55); box-sizing: border-box; pointer-events: none; }
.preview__rect[hidden] { display: none; }

/* Ladeanzeige */
.spinner { width: 1.4rem; height: 1.4rem; border: 3px solid #cfd8e3; border-top-color: #1f4e79; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Ausgabebereich mit fester Höhe und Scrollbalken (FA-07) */
.output { height: 65vh; min-height: 320px; overflow-y: auto; border: 1px solid #ddd; border-radius: 6px; padding: .75rem 1rem; }
.output__hint { color: #777; }
.result__lead { margin-top: 0; }
.result__title { font-style: italic; color: #444; }
.card { border-top: 1px solid #e5e5e5; padding-top: .5rem; margin-top: .75rem; }
.card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.card__title { font-size: 1.05rem; margin: 0 0 .25rem; color: #1f4e79; }
.card__reason { margin: 0 0 .4rem; font-style: italic; color: #444; }
.rating .card:first-of-type { border-top: 0; margin-top: 0; }
.card__label { font-weight: 600; margin: .4rem 0 0; }
.card__list { margin: .2rem 0 0; padding-left: 1.2rem; }

/* Optionen: Provider, Tonalität, Intention, Detailausschnitt */
.options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.field { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; }
.field--wide { grid-column: 1 / -1; }
.field[hidden] { display: none; }
.field__input { font-size: 1rem; padding: .45rem; border: 1px solid #bbb; border-radius: 6px; }
.field__note { font-size: .85rem; color: #555; margin-top: .25rem; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Datenschutzhinweis */
.notice { background: #fff8e1; border-left: 4px solid #f0b400; padding: .6rem .8rem; border-radius: 4px; font-size: .9rem; }

/* Punktanzeige (FA-18): Wert rechts neben der Überschrift, darunter Skalenstreifen mit zehn Abschnitten */
.score { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; flex: none; }
.score__value { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.score__value--none { font-weight: 400; font-style: italic; color: #666; }
.meter { --fill: 0%; --track: #e3e6ea; --color: #1f4e79; position: relative; width: 10rem; height: .6rem; border-radius: 3px; background: var(--track); overflow: hidden; }
.meter__fill { width: var(--fill); height: 100%; background: var(--color); }
/* Trennlinien über dem Streifen: zehn gleich große Abschnitte */
.meter::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to right, transparent 0, transparent calc(10% - 1px), #fff calc(10% - 1px), #fff 10%); }
.meter--low { --color: #b3261e; }
.meter--mid { --color: #b26a00; }
.meter--high { --color: #2e7d32; }
/* Füllstand in halben Punkten (0 bis 20 → 0 bis 100 %) */
.meter--p0 { --fill: 0%; }
.meter--p1 { --fill: 5%; }
.meter--p2 { --fill: 10%; }
.meter--p3 { --fill: 15%; }
.meter--p4 { --fill: 20%; }
.meter--p5 { --fill: 25%; }
.meter--p6 { --fill: 30%; }
.meter--p7 { --fill: 35%; }
.meter--p8 { --fill: 40%; }
.meter--p9 { --fill: 45%; }
.meter--p10 { --fill: 50%; }
.meter--p11 { --fill: 55%; }
.meter--p12 { --fill: 60%; }
.meter--p13 { --fill: 65%; }
.meter--p14 { --fill: 70%; }
.meter--p15 { --fill: 75%; }
.meter--p16 { --fill: 80%; }
.meter--p17 { --fill: 85%; }
.meter--p18 { --fill: 90%; }
.meter--p19 { --fill: 95%; }
.meter--p20 { --fill: 100%; }

/* Netzdiagramm (FA-19) */
.radar { display: block; width: 100%; max-width: 440px; margin: .5rem auto; }
.radar__ring { fill: none; stroke: #d5d9de; stroke-width: 1; }
.radar__ring--outer { stroke: #9aa3ad; }
.radar__axis { stroke: #d5d9de; stroke-width: 1; }
.radar__area { fill: rgba(31, 78, 121, .25); stroke: #1f4e79; stroke-width: 2; }
.radar__dot { fill: #1f4e79; }
.radar__label { font-size: 11px; fill: #333; }

/* Verbesserungsvorschläge (FA-21), Werkzeugfilter (FA-25) */
.toolbar--filter { margin-bottom: .5rem; }
.toolbar--filter[hidden] { display: none; }
.chip { border: 1px solid #1f4e79; background: #fff; color: #1f4e79; border-radius: 999px; padding: .3rem .9rem; font-size: .9rem; cursor: pointer; }
.chip.is-active, .chip[aria-pressed="true"] { background: #1f4e79; color: #fff; }
.suggest-note { font-size: .85rem; color: #555; background: #f1f4f8; border-radius: 6px; padding: .5rem .7rem; margin: 0 0 .5rem; }
.suggestion { border: 1px solid #e0e0e0; border-radius: 8px; padding: .6rem .8rem; margin-bottom: .6rem; }
.suggestion[hidden] { display: none; }
.suggestion.is-selected { border-color: #ffb300; box-shadow: 0 0 0 2px #ffb300; }
.suggestion__head { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.suggestion__title { font-size: 1rem; margin: 0; flex: 1 1 12rem; }
.badge { font-size: .75rem; border-radius: 4px; padding: .1rem .45rem; border: 1px solid #999; color: #333; background: #f5f5f5; white-space: nowrap; }
.badge--lightroom { border-color: #1f4e79; color: #1f4e79; }
.badge--photoshop { border-color: #6a1b9a; color: #6a1b9a; }
.badge--beides { border-color: #00695c; color: #00695c; }
/* Priorität: Farbe ist nur Zugabe, der Text „Priorität: …“ trägt die Information */
.badge--prio-hoch { border-color: #b3261e; color: #b3261e; font-weight: 700; }
.badge--prio-niedrig { color: #666; }
.suggestion__why { margin: .4rem 0 0; }
.suggestion__path { margin: .25rem 0 0; font-size: .9rem; color: #444; }
.suggestion__note { margin: .4rem 0 0; padding: .35rem .6rem; font-size: .9rem; background: #fff8e1; border-left: 4px solid #ffb300; border-radius: 0 4px 4px 0; }
.suggestion__steps { margin: .4rem 0 0; }
.suggestion__steps summary { cursor: pointer; color: #1f4e79; }
.suggestion__steps ol { margin: .4rem 0 0; padding-left: 1.3rem; }
.suggestion__mark { margin-top: .4rem; font-size: .85rem; }
.retry { margin-top: .75rem; }
.retry[hidden] { display: none; }

/* Fazit (FA-28): volle Breite unter den vier Bereichen */
.fazit { margin-top: 1rem; }
.fazit[hidden] { display: none; }
.fazit__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.fazit__text { margin: .25rem 0 0; font-size: 1.05rem; }

/* Nur für den Druck gedacht (FA-29, FA-30): auf dem Bildschirm verborgen, Gestaltung in print.css */
.print-header, .print-footer { display: none; }
.fazit .btn { margin-top: .75rem; }

/* Entwicklung (Phase 2 der Kalibrierung): getrennt von Radar und Punkten, Aussage immer als Text im Kennzeichen */
.entwicklung { margin: .5rem 0 .75rem; padding: .6rem .8rem; border-left: 4px solid #1f4e79; background: #f1f4f8; border-radius: 4px; }
.entwicklung[hidden], .entwicklung__item[hidden] { display: none; }
.entwicklung__title { font-size: 1rem; margin: 0 0 .35rem; color: #1f4e79; }
.entwicklung__list { margin: 0; }
.entwicklung__item { display: grid; grid-template-columns: 11rem 1fr; gap: .5rem; margin: .2rem 0; }
.entwicklung__item dt { font-weight: 600; }
.entwicklung__item dd { margin: 0; }
.badge--pot-hoch, .badge--emp-empfohlen { border-color: #2e7d32; color: #2e7d32; font-weight: 700; }
.badge--pot-gering, .badge--emp-nicht_empfohlen { border-color: #8a1c1c; color: #8a1c1c; font-weight: 700; }
.badge--pot-mittel, .badge--emp-bedingt_empfohlen { border-color: #b26a00; color: #b26a00; font-weight: 700; }
@media (max-width: 600px) { .entwicklung__item { grid-template-columns: 1fr; gap: .1rem; } }

/* Anlass und Kartenauswahl (AP12) */
.cardpick { border: 1px solid #ddd; border-radius: 6px; padding: .4rem .8rem .6rem; margin: 0; }
.cardpick__legend { padding: 0 .3rem; font-size: .9rem; }
.cardpick__item { display: inline-flex; align-items: center; gap: .35rem; margin: .15rem 1rem .15rem 0; font-size: .9rem; }

/* Einordnung und Intentionsabgleich in der Beurteilung */
.result__einordnung { margin: 0 0 .4rem; font-size: .9rem; color: #444; }
.abgleich { border: 1px solid #cfd8e3; border-radius: 8px; padding: .5rem .8rem; margin: .75rem 0; background: #f7f9fc; }
.abgleich__title { font-size: 1.05rem; margin: 0 0 .25rem; color: #1f4e79; }
.abgleich__label { font-weight: 600; margin: .4rem 0 0; }

/* Zweistufige Eingabe (AP13) */
.wizard { margin-top: 1rem; }
.wizard__step[hidden] { display: none; }
.wizard__head { margin: 0 0 .5rem; font-size: 1.05rem; outline: none; }
.wizard__sub { display: block; font-size: .85rem; font-weight: 400; color: #555; }
.wizard .options { margin-top: .5rem; }
.wizard__nav { display: flex; justify-content: space-between; gap: .5rem; margin-top: 1rem; }
.wizard__nav .btn { min-width: 7rem; }
textarea.field__input { resize: vertical; font-family: inherit; }
/* Smartphone: einspaltig, nichts läuft waagerecht über */
@media (max-width: 600px) {
  .options { grid-template-columns: minmax(0, 1fr); }
  .wizard__nav { flex-wrap: wrap; }
  .wizard__nav .btn { flex: 1 1 8rem; }
}

/* Lerngedanke „Zum Mitnehmen“ (AP14) */
.mitnehmen { margin: 1rem 0 0; padding: .6rem .9rem; border-left: 5px solid #df111d; background: #fdecee; border-radius: 0 6px 6px 0; }
.mitnehmen[hidden] { display: none; }
.mitnehmen__title { margin: 0 0 .2rem; font-size: .95rem; color: #b80e18; text-transform: uppercase; letter-spacing: .04em; }
.mitnehmen__text { margin: 0; font-size: 1.05rem; font-weight: 600; }

/* Themenvorschläge in der Intention (AP15): eingeklappt, Chips brechen in mehrere Zeilen um */
.themen__toggle { align-self: flex-start; background: none; border: 0; padding: .2rem 0; font-size: .9rem; color: #1f4e79; cursor: pointer; text-decoration: underline; }
.themen__toggle::before { content: "▸ "; text-decoration: none; display: inline-block; }
.themen__toggle[aria-expanded="true"]::before { content: "▾ "; }
.themen__liste { display: flex; flex-wrap: wrap; gap: .4rem; }
.themen__liste[hidden] { display: none; }