/* ── tool.css — Charakter „Seitenverhältnis“ (Lauf 2, 27.10.) ──────────────────────────────────────────
   WAS:   Akzentfarben (Koralle · Violett · Bernstein), Zwei-Spalten-Raster (links Maße/Verhältnis/8 Formate, rechts Ergebnisblock + kleine
          Vorschau), Ketten-Knopf, Format-Chips mit Mini-Rechteck, eingeklappte Kästen darunter, Tool-Profil.
   WARUM: Das Ergebnis (Verhältnis) ist die größte Fläche; die Vorschau illustriert nur und ist klein (Lauf 2).
   WIE ÄNDERN: Farben nur über --a1/--a2/--a3 unten; Grundbausteine (Kästen .fb-*, Chips, Felder) stehen in ../_werk/werk.css (gemeinsam für alle Tools).
   LAYOUT: Desktop (≥ 901 px) zwei gleich breite Spalten; Handy/Tablet (≤ 900 px) eine Spalte in Quellreihenfolge:
          Maße → Verhältnis → Formate → Ergebnis → Vorschau → Kästen → Über dieses Tool → Hilfe. Desktop- und Handy-Feinschliff in getrennten
          Medienblöcken am Ende. Entfallene Regeln stehen auskommentiert ganz unten. */
:root { --a1: #ff7a59; --a2: #a78bfa; --a3: #fbbf24; --a1-tinte: #22110b; }
@media (prefers-color-scheme: light) { :root:not([data-thema="dunkel"]) { --a1: #e4532c; --a2: #7a5af0; --a3: #c98a06; } }
:root[data-thema="hell"] { --a1: #e4532c; --a2: #7a5af0; --a3: #c98a06; }

/* Kopf-Icon: Original-Icon (transparent PNG) auf neutralem Grund, damit es in hell und dunkel erkennbar bleibt */
.kopf-glyphe { width: 74px; background: var(--flaeche-3); box-shadow: inset 0 0 0 1px var(--linie), 0 10px 30px -14px var(--a1); }
.kopf-glyphe img { display: block; width: auto; max-width: 62px; height: auto; max-height: 46px; object-fit: contain; }

/* Raster: zwei gleich breite Spalten */
.ar-raster { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.spalte { display: grid; gap: 14px; min-width: 0; }
.ar-kaesten { display: grid; gap: 14px; margin-top: 14px; }
.fb-faltbar .fb-inhalt { margin-top: 14px; }

/* Maße: Breite ⛓ Höhe */
.ar-kanten { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; }
.ar-kette { height: 66px; min-width: 72px; border-radius: var(--r); border: 1.5px dashed var(--linie-stark); background: transparent; color: var(--sehr-leise);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px 6px; transition: color .2s, border-color .2s, background .2s; }
.ar-kette svg { width: 24px; height: 24px; }
.ar-kette .ik-zu { display: none; }
.ar-kette[aria-pressed="true"] { border-style: solid; border-color: color-mix(in srgb, var(--a1) 60%, transparent); color: var(--a1); background: color-mix(in srgb, var(--a1) 10%, transparent); }
.ar-kette[aria-pressed="true"] .ik-zu { display: block; } .ar-kette[aria-pressed="true"] .ik-auf { display: none; }
.ar-kette-text { font-size: 12px; font-weight: 700; white-space: nowrap; }   /* Klartext "gekoppelt/frei" bleibt auch am Handy sichtbar (wie im Original) */
.feld-label .ar-marke { margin-left: 8px; font-size: 12.5px; font-weight: 700; color: var(--a2); opacity: 0; transition: opacity .2s; }
.feld-label .ar-marke::before { content: "· "; }
.feld.berechnet .ar-marke { opacity: 1; }
.feld-rahmen.berechnet { border-color: color-mix(in srgb, var(--a2) 55%, transparent); }
.feld-rahmen.berechnet input { color: color-mix(in srgb, var(--a2) 70%, var(--text)); }

/* Verhältnis: a : b + Drehen, darunter die 8 Formate */
.ar-verh-block { margin-top: 16px; }
.ar-unterkopf { margin: 0 0 6px; justify-content: flex-start; }
.ar-unterkopf .feld-label { margin: 0; }
.ar-verh-felder { display: flex; align-items: stretch; gap: 6px; }
.ar-verh-felder .feld-rahmen { width: 92px; }
.ar-verh-felder input { font-size: 22px; text-align: center; padding: 9px 6px; }
.ar-doppelpunkt { align-self: center; font: 700 26px var(--mono); color: var(--sehr-leise); }
.ar-drehen { height: auto; min-height: 48px; margin-left: 8px; }
.ar-drehen svg { width: 22px; height: 22px; }

/* Formate: kompakte Zeile, 4 × 2 gleich breite Chips (Mini-Rechteck über dem Kurznamen) */
.ar-vorlagen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.ar-chip { padding: 6px 12px 6px 8px; }
.ar-chip-k { flex-direction: column; justify-content: center; gap: 3px; min-height: 66px; padding: 8px 4px 7px; }
.ar-chip-k strong { font: 700 15px var(--schrift); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ar-mini { width: 26px; height: 26px; flex: none; }
.ar-mini rect { fill: color-mix(in srgb, var(--a1) 22%, transparent); stroke: var(--a1); stroke-width: 1.6; }
.ar-chip.an .ar-mini rect { fill: var(--a1); }
.ar-chip-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.ar-chip-text strong { font: 700 16px var(--schrift); font-variant-numeric: tabular-nums; }
.ar-chip-text small { font-size: 12.5px; }
/* Kasten "Weitere Formate": gleich breite Kacheln, drei Gruppen */
.ar-gruppe + .ar-gruppe { margin-top: 16px; }
.ar-gruppe-titel { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--leise); }
.ar-gruppe .chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

/* Ergebnisblock: das Verhältnis groß, darunter Pixelmaß, Standardformat, Dezimalzahl */
.ar-erg { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ar-erg-text { min-width: 0; }
.ar-erg-verh { display: block; font: 700 clamp(52px, 7vw, 88px)/1 var(--titel); letter-spacing: -0.02em; white-space: nowrap;
  background: linear-gradient(120deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 4px; }
.ar-erg-px { margin: 10px 0 0; font: 700 clamp(22px, 2.4vw, 28px)/1.2 var(--mono); }
.ar-erg-std { margin: 8px 0 0; font-size: 16px; font-weight: 700; color: var(--hinweis); }
.ar-erg-std.exakt { color: var(--ok); }
.ar-erg-dez { margin: 4px 0 0; font: 500 15px var(--mono); color: var(--leise); }
.ar-erg-kopie { flex: none; }

/* Vorschau: klein, Punktraster, Rechteck mit Maßlinien (wie eine technische Zeichnung) */
.ar-buehne { position: relative; height: clamp(200px, 26vh, 250px); border-radius: 16px; overflow: hidden;
  background-color: var(--flaeche-2);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--text) 13%, transparent) 1px, transparent 1.3px);
  background-size: 22px 22px; background-position: 11px 11px; border: 1px solid var(--linie); }
.ar-rechteck { position: absolute; transition: left var(--dauer) var(--kurve), top var(--dauer) var(--kurve), width var(--dauer) var(--kurve), height var(--dauer) var(--kurve);
  border-radius: 6px; border: 2px solid var(--a1);
  background: linear-gradient(135deg, color-mix(in srgb, var(--a1) 30%, transparent), color-mix(in srgb, var(--a2) 26%, transparent));
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .06); }
/* Maßlinien: Linie mit Endstrichen, Zahl mittig */
.ar-mass { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--leise); }
.ar-mass span { position: relative; z-index: 1; background: var(--flaeche-2); padding: 0 8px; font: 500 15px var(--mono); color: var(--text); white-space: nowrap; }
.ar-mass-w { left: 0; right: 0; top: -32px; height: 18px; border-left: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
.ar-mass-w::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid currentColor; }
.ar-mass-h { top: 0; bottom: 0; right: -40px; width: 18px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
.ar-mass-h::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1.5px solid currentColor; }
.ar-mass-h span { padding: 6px 2px; }   /* waagrecht lesbar, liegt mittig auf der Maßlinie */

/* Kasten Skalieren */
.ar-skala { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 14px; }
.ar-skala .feld-label { margin: 0; }
.ar-skala-wert { font: 700 20px var(--mono); min-width: 74px; text-align: right; }
.ar-skala-chips { grid-column: 1 / -1; }
.ar-skala-chips .chip { min-height: 38px; padding: 5px 12px; font-family: var(--mono); justify-content: center; }
.ar-skala .schieber { --a1: var(--a2); }
.ar-skala-erg { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.ar-skala-mass { font: 700 20px var(--mono); color: var(--a2); overflow-wrap: anywhere; }

/* Kasten Technische Werte: Liste statt Kacheln */
.ar-liste { display: grid; grid-template-columns: minmax(150px, max-content) minmax(0, 1fr); gap: 10px 20px; margin: 0; }
.ar-liste dt { font-size: 14px; font-weight: 700; color: var(--leise); padding-top: 2px; }
.ar-liste dd { margin: 0; font: 500 16px/1.4 var(--mono); overflow-wrap: anywhere; }

/* Kasten Druckgröße */
.ar-druck-zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ar-druck-zeile .feld-label { margin: 0; }
.ar-dpi button { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; padding: 4px 12px; min-height: 40px; font: 700 15px var(--mono); }
.ar-dpi small { font: 500 11.5px var(--schrift); color: var(--leise); }
.ar-druck-erg { margin: 14px 0 6px; font: 700 20px/1.35 var(--mono); overflow-wrap: anywhere; }
.ar-leise { margin: 0 0 10px; color: var(--sehr-leise); font-size: 14.5px; line-height: 1.5; }
.fb-inhalt > .ar-leise:last-child { margin-bottom: 0; }
.ar-groesse { font-family: var(--mono); font-weight: 500; }
.ar-groesse.rund { color: var(--leise); border-style: dashed; }

/* ── Über dieses Tool (Tool-Profil, SEO/GEO) ── */
.tool-profil { margin-top: 18px; padding: 20px; border-radius: var(--r-gross); background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten); min-width: 0; }
.tool-profil-titel { margin: 0 0 10px; font: 700 15px/1.2 var(--schrift); letter-spacing: 0.08em; text-transform: uppercase; color: var(--leise); display: flex; align-items: center; gap: 9px; }
.tool-profil-titel::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--a1); }
.tool-profil h3 { margin: 18px 0 8px; font: 700 16px/1.3 var(--schrift); color: var(--text); }
.tool-profil p { margin: 0 0 10px; color: var(--leise); line-height: 1.6; }
.tool-profil-einl { color: var(--text); }
.tool-profil-liste { margin: 0; padding: 0 0 0 20px; color: var(--leise); line-height: 1.55; display: grid; gap: 4px; }
.tool-profil-faq { display: grid; gap: 8px; margin-top: 8px; }
.tool-profil-faq details { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: var(--r); padding: 0 16px; }
.tool-profil-faq summary { list-style: none; cursor: pointer; padding: 13px 0; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.tool-profil-faq summary::-webkit-details-marker { display: none; }
.tool-profil-faq summary::after { content: "+"; margin-left: auto; font: 500 22px/1 var(--mono); color: var(--sehr-leise); transition: transform 0.25s var(--kurve); }
.tool-profil-faq details[open] summary::after { transform: rotate(45deg); }
.tool-profil-faq details p { margin: 0 0 14px; }
.wissen-raster { grid-template-columns: minmax(0, 1fr); }   /* eine Spalte wie das Profil darüber: keine Lücke in der letzten Reihe */
.wissen details p + p { margin-top: -6px; }

/* ── Desktop (≥ 901 px) ── */
@media (min-width: 901px) {
  .ar-erg-kopie { margin-top: 4px; }
}

/* ── Tablet/Handy (≤ 900 px): eine Spalte in Quellreihenfolge ── */
@media (max-width: 900px) {
  .ar-raster { grid-template-columns: minmax(0, 1fr); }
  .ar-buehne { height: 210px; }
}

/* ── Handy (≤ 640 px): Eingabe zuerst, Formate direkt unter den Feldern ── */
@media (max-width: 640px) {
  .ar-raster, .spalte, .ar-kaesten { gap: 10px; }
  .kopf-glyphe { width: 60px; }
  .kopf-glyphe img { max-width: 48px; max-height: 36px; }
  .ar-kanten { gap: 8px; }
  .ar-kette { min-width: 66px; height: 54px; padding: 4px 4px; }
  .ar-kette-text { font-size: 11.5px; }
  .feld-rahmen.gross input { font-size: 22px; padding: 12px 10px; }
  .feld-einheit { padding-right: 10px; font-size: 14px; }
  .ar-verh-felder .feld-rahmen { width: 76px; }
  .ar-vorlagen { gap: 6px; }
  .ar-chip-k { min-height: 62px; }
  .ar-chip { min-height: 46px; }
  .ar-buehne { height: 180px; }
  .ar-mass span { font-size: 13px; }
  .ar-mass-w { top: -28px; }
  .ar-mass-h { right: -34px; }
  .ar-erg-verh { font-size: clamp(48px, 17vw, 72px); }
  .ar-skala { grid-template-columns: 1fr auto; }
  .ar-skala .schieber { grid-column: 1 / -1; grid-row: 2; }
  .ar-skala-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .ar-skala-chips .chip { padding: 4px 6px; font-size: 14px; }
  .ar-liste { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ar-liste dd { margin-bottom: 10px; }
  .ar-gruppe .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-profil { padding: 16px; border-radius: 18px; }
}

/* ── Lauf 2 entfallen (Bühne-Zubehör, Kachel-Ergebnis) — auskommentiert, nicht gelöscht ── */
/* .ar-std-marke { font: 700 14px var(--mono); padding: 5px 11px; border-radius: 99px; background: color-mix(in srgb, var(--hinweis) 15%, transparent); color: var(--hinweis); white-space: nowrap; } */
/* .ar-std-marke.exakt { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); } */
/* .ar-rechteck.flach .ar-drittel, .ar-rechteck.duenn .ar-drittel { display: none; } */
/* .ar-geist { border: 2px dashed color-mix(in srgb, var(--hinweis) 75%, transparent); border-radius: 6px; pointer-events: none; } */
/* .ar-skala-rahmen { border: 2px dashed var(--a2); border-radius: 6px; background: color-mix(in srgb, var(--a2) 9%, transparent); pointer-events: none; } */
/* .ar-skala-rahmen { display: grid; place-items: center; } */
/* .ar-skala-rahmen span { font: 700 14px var(--mono); color: var(--a2); white-space: nowrap; background: color-mix(in srgb, var(--flaeche) 85%, transparent); padding: 3px 8px; border-radius: 8px; } */
/* .ar-skala-rahmen.klein span { position: absolute; top: calc(100% + 6px); left: 0; } */
/* .ar-buehne.skaliert .ar-mitte { opacity: 0; } */
/* .ar-geist.aus, .ar-skala-rahmen.aus { opacity: 0; } */
/* .ar-mitte span { font: 500 15px var(--mono); color: var(--leise); white-space: nowrap; } */
/* .ar-skala-chips { grid-column: 1 / -2; } */
/* .ar-skala-mass { grid-column: -2; justify-self: end; font: 700 16px var(--mono); color: var(--a2); white-space: nowrap; } */
/* .ar-skala-chips .chip { min-height: 38px; padding: 5px 12px; font-family: var(--mono); } */
/* .ar-dpi { grid-column: 1; margin-top: 6px; justify-self: start; } */
/* .ar-dpi button { padding: 4px 10px; min-height: 30px; font: 700 13px var(--mono); } */