/* ════════════════════════════════════════════════════════════════════════
   app_menu.css — Website-Umbau „Menü nach Adresse" (Handoff 2026-08-09)
   Additiv, scoped auf body.app. Landing (index.html) bleibt UNBERÜHRT.
   Teil 1: exakte P6-Warm-Tokens (designcenter_v2) — hebt die Delta-1-Näherung
   auf die pixelgenauen Werte. Teil 2 (Menü-Grid/Preiskarten) folgt mit dem
   app.html-Umbau. NICHT in app.html verlinkt, solange nicht live geschaltet.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Exakte P6-Tokens (Quelle: designcenter_v2.html, Inhaber-abgesegnet) ── */
body.app{
  --bg:#ECDFC0; --surface:#FBF4E6; --p6-ink:#242424; --p6-muted:#7B6A52; --accent:#D5814A;
  /* auf die bestehenden App-Token-Namen mappen → alle Komponenten erben automatisch */
  --gold:#D5814A;                 /* Akzent (nur Messwert + Hauptaktion) */
  --gold-soft:#7E461E;            /* Wert-Lesefarbe: gemessen 6,9:1 auf surface / 5,7:1 auf bg (war #9a5a28=4,96 → AA-fail) */
  --offwhite:#242424;             /* Primärtext = P6-ink (11,7:1 auf bg — AAA) */
  --mist:#584a38;                 /* Sekundärtext 7,8:1 auf surface */
  --muted:#635337;                /* Labels/tertiär: gemessen 5,6:1 auf bg / 6,8:1 auf surface (war #7B6A52=3,95 → AA-fail) */
  --card-bg:#FBF4E6;              /* Karten = P6-surface */
  --bar-bg:rgba(251,244,230,.92);
  --hairline:rgba(40,30,18,.12); --hairline-2:rgba(40,30,18,.18);
  --ink:#F3E9D6;                  /* Input-BG hell */
  --charcoal:#FBF4E6;            /* Overlay-Box */
  --navy:#ECDFC0;
  color:#242424;
  background:
    radial-gradient(120% 80% at 6% -8%, #F4E7D0 0%, transparent 55%),
    radial-gradient(120% 90% at 100% 0%, #EAD9BC 0%, transparent 48%),
    #ECDFC0 !important;
  background-attachment:fixed;
}

/* ── Terrakotta-Hauptknopf: exakter Gradient + weiße Schrift + Schatten ── */
body.app .kalk-bar__btn, body.app .kalk-man__ok, body.app .bt-mng__ok, body.app #ag-pdf{
  background:linear-gradient(180deg,#DB8B55 0%,#CD7841 100%) !important;
  color:#fff !important; border:0 !important;
  text-shadow:0 1px 1px rgba(120,55,20,.30);
}
body.app .kalk-bar__btn:hover, body.app #ag-pdf:hover{ filter:brightness(1.04); }

/* ── Aktive Zustände (Tabs/Segmente/Vorlagen) = Terrakotta, ruhig ── */
body.app .tab.is-active{ color:#CD7841; border-bottom-color:#D5814A; }
body.app .agseg.is-on, body.app .agmodb.is-on{ background:#D5814A !important; color:#fff !important; border-color:#D5814A !important; }
body.app .vcard.is-active, body.app .dt.is-open, body.app .opt.is-active, body.app .ogz.is-active{
  border-color:#D5814A !important; background:#F6E7D3 !important; color:#7E461E !important;
}

/* ── Premium-Schatten (mehrschichtig, gegen „billig"-Wirkung) ── */
body.app .kkarte, body.app .aggroup, body.app .dt, body.app .khinw, body.app .kalk-bar,
body.app .chip, body.app .fcard, body.app .gr-hero, body.app .gr-side{
  box-shadow:0 1px 2px rgba(50,38,26,.06), 0 12px 30px -14px rgba(50,38,26,.30) !important;
}

/* ── Fokus-Ring exakt (sichtbar, ≥2px, Offset) ── */
body.app :focus-visible{ outline:2px solid #D5814A !important; outline-offset:2px; }

/* ── Barrierefreiheit: Bewegung respektieren (Gruppen-Standard „motion aus") ──
   Deckt alle CSS-Transitions/Animationen ab; die 3D-Auto-Rotation ist JS und wird
   in Phase D zusätzlich per matchMedia gestoppt. ── */
@media (prefers-reduced-motion: reduce){
  body.app *, body.app *::before, body.app *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Teil 2 — messwert-abgeleitete Produktschicht (entkoppelt vom 3D-Handover)
   Preiskarten: aus den Maßen wird Kalkulation/Kostenvoranschlag. Preise
   entschieden (4,99 / 7,49 EMPFOHLEN / 9,99, Einmalpreis, Testphase gratis).
   Karten-TEXTE sind Entwurf → Inhaber-Freigabe. Als Spalte (1/3-Rail) UND als
   Reihe (Standalone) tragfähig; mobil gestapelt.
   ════════════════════════════════════════════════════════════════════════ */
body.app .pricecards{ display:flex; flex-direction:column; gap:14px; margin-top:14px; }
body.app .pc-lead{ font-size:13px; color:var(--muted); letter-spacing:.02em; margin:0 2px 2px; }

body.app .pricecard{
  position:relative; background:var(--card-bg); border:1px solid var(--hairline-2);
  border-radius:16px; padding:18px 18px 16px; display:flex; flex-direction:column; gap:10px;
  box-shadow:0 1px 2px rgba(50,38,26,.06), 0 12px 30px -14px rgba(50,38,26,.30);
}
body.app .pricecard--reco{ border:2px solid var(--accent); box-shadow:0 2px 4px rgba(50,38,26,.08), 0 18px 42px -16px rgba(160,90,40,.42); }
body.app .pc-badge{
  position:absolute; top:-11px; left:18px; background:linear-gradient(180deg,#DB8B55,#CD7841);
  color:#fff; font-size:11px; font-weight:800; letter-spacing:.06em; padding:4px 10px; border-radius:999px;
  text-shadow:0 1px 1px rgba(120,55,20,.30);
}
body.app .pc-top{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; }
body.app .pc-title{ font-size:14.5px; font-weight:800; color:var(--offwhite); letter-spacing:-.01em; }
body.app .pc-price{ font-size:28px; font-weight:800; color:var(--gold-soft); letter-spacing:-.02em; white-space:nowrap; line-height:1.05; }
body.app .pc-price small{ font-size:12px; font-weight:600; color:var(--muted); margin-left:3px; }
body.app .pc-sub{ font-size:12.5px; color:var(--muted); margin-top:-2px; }
body.app .pc-list{ list-style:none; margin:2px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; }
body.app .pc-list li{ position:relative; padding-left:22px; font-size:13.5px; line-height:1.35; color:var(--mist); }
body.app .pc-list li::before{
  content:""; position:absolute; left:0; top:3px; width:14px; height:14px; border-radius:50%;
  background:var(--accent); /* Häkchen als Icon, nicht als Text (Kontrast-Regel gilt nur für Text) */
  -webkit-mask:no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
          mask:no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}
body.app .pc-cta{
  margin-top:4px; min-height:44px; border-radius:12px; border:1px solid var(--accent);
  background:transparent; color:var(--gold-soft); font-size:14px; font-weight:800; cursor:pointer;
  padding:11px 14px; text-align:center;
}
body.app .pricecard--reco .pc-cta{
  background:linear-gradient(180deg,#DB8B55,#CD7841); color:#fff; border:0; text-shadow:0 1px 1px rgba(120,55,20,.30);
}
body.app .pc-cta:hover{ filter:brightness(1.03); }
body.app .pc-trust{ font-size:12px; color:var(--muted); text-align:center; margin-top:4px; }
body.app .pc-testnote{ font-size:11.5px; color:var(--gold-soft); font-weight:700; }

/* Als Reihe, sobald Platz (Standalone/breit); im 1/3-Rail bleibt es die Spalte oben. */
@media (min-width:900px){
  body.app .pricecards--row{ flex-direction:row; align-items:stretch; }
  body.app .pricecards--row .pricecard{ flex:1; }
}

/* Dachteil-Detail (Positionen + Auswahlmenü) inline direkt unter dem geöffneten Gewerk
   (statt am Ende unter allen) — dezenter Terrakotta-Nest-Indikator. */
body.app .dt-detail{ margin:1px 0 10px; padding:4px 0 4px 12px; border-left:3px solid var(--accent); }

/* ── Phase-E BFSG/SOTA-Feinschliff (gemessen 2026-08-09) ── */
/* Kontrast: aktiver Tab #CD7841=2,5:1 → dunkler ~5,9:1 (Aktiv-Zustand bleibt über Unterstrich klar) */
body.app .tab.is-active{ color:#7A431C !important; }
/* Kontrast: „Angenommen (bitte prüfen)"-Zeile 3,58:1 → --mist 7,8:1 */
body.app .kkarte__ann{ color:var(--mist) !important; }
/* Tap-Ziele ≥44px (WCAG 2.5.5): Vorlagen, Bar-Buttons, Reveal, Export-Link, Position, Back */
body.app .vcard, body.app .kalk-bar__btn, body.app .kalk-bar__profi,
body.app .drawer__exp, body.app .kalk-more, body.app .appbar__back{
  min-height:44px; display:inline-flex; align-items:center; justify-content:center;
}
body.app .kalk-more{ width:100%; }
body.app .pos__head{ min-height:44px; }
/* Pilot-Block + manuelle Maß-Eingaben ≥44px */
body.app #abw input, body.app #abw button, body.app .kalk-man input, body.app .kalk-man__ok,
body.app .bt-mng__in, body.app .bt-mng__ok, body.app .agsl__num{ min-height:44px; }
/* Positions-Checkboxen größer + Marken-Akzent (native 16px → 20px; Zeile bleibt großer Klickbereich) */
body.app input[type=checkbox]{ width:20px; height:20px; accent-color:var(--accent); cursor:pointer; }

/* ══ §3 Menü-Seite (nach Adresse): 2/3 Kanten-Modell + 3 maßfreie Prompts | 1/3 Preiskarten ══ */
body.app .view-menu{ display:grid; grid-template-columns:2fr 1fr; gap:18px; align-items:start; margin-top:6px; }
@media(max-width:820px){ body.app .view-menu{ grid-template-columns:1fr; } }
body.app .vm-main{ display:flex; flex-direction:column; gap:12px; min-width:0; }
body.app .vm-model{ width:100%; min-height:360px; border-radius:16px; background:var(--card-bg);
  border:1px solid var(--hairline-2); box-shadow:0 1px 2px rgba(50,38,26,.06),0 12px 30px -14px rgba(50,38,26,.3);
  display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:none; }
@media(max-width:820px){ body.app .vm-model{ min-height:300px; } }
body.app .vm-disc{ font-size:12.5px; color:var(--muted); text-align:center; margin:-4px 0 2px; }
body.app .prompt3{ display:flex; flex-direction:column; gap:10px; }
body.app .prompt3 .p3{ min-height:48px; display:flex; align-items:center; gap:10px; text-align:left;
  padding:12px 16px; border-radius:12px; border:1px solid var(--hairline-2); background:var(--card-bg);
  color:var(--offwhite); font-size:14.5px; font-weight:600; cursor:pointer; box-shadow:0 1px 2px rgba(50,38,26,.05); }
body.app .prompt3 .p3:hover{ border-color:var(--accent); }
body.app .prompt3 .p3ic{ color:var(--accent); font-weight:800; font-size:16px; }
body.app .vm-side{ display:flex; flex-direction:column; }

/* §2.3 Maß-Ampel je Kachel: grün = verlässlich (hoch/amtlich) · gelb = Schätzung (mittel/grob).
   Farben aus der bestehenden App-Ampel (abw ok/warn) — konsistent, keine neue Palette. */
body.app .mtile__dot{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; vertical-align:1px; flex:none; }
body.app .mtile__dot--hoch{ background:#3E9B63; }      /* verlässlich (z. B. amtlicher Grundriss) */
body.app .mtile__dot--mittel{ background:#D19A2E; }    /* mittlere Schätzung */
body.app .mtile__dot--niedrig{ background:#D19A2E; }   /* grobe Schätzung (Steil = gelb) */

/* §3 3D-Labor-Zwischenseite: volles Modell (links) + Maße prüfen (rechts) + annehmen */
body.app .labor{ max-width:1120px; margin:0 auto; padding:6px 0 4px; }
body.app .labor__h{ font-size:22px; font-weight:800; color:var(--offwhite); margin:2px 0 14px; }
body.app .labor__grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:22px; align-items:start; }
body.app .labor__modelwrap{ display:flex; flex-direction:column; }
body.app .labor__modelslot{ min-height:360px; display:flex; }
body.app .labor__modelslot > .model3d{ flex:1; width:100%; }
body.app .labor__masse .masse__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }  /* schmale Spalte: 2 statt 6–7 (keine abgeschnittenen Überschriften) */
body.app .labor__masse .masse__h{ margin-top:0; }
body.app .labor__disc{ font-size:12.5px; color:var(--muted); text-align:center; margin:8px 0 0; }
body.app .labor__act{ display:flex; justify-content:space-between; align-items:center; gap:14px; margin:22px 0 4px; }
body.app .labor__back{ background:none; border:none; color:var(--muted); font-size:14px; font-weight:600; cursor:pointer; padding:10px 6px; min-height:44px; }
body.app .labor__back:hover{ color:var(--offwhite); }
body.app .labor__go{ background:var(--accent); color:#fff; border:none; border-radius:12px; padding:14px 24px; font-size:15px; font-weight:700; cursor:pointer; min-height:48px; box-shadow:0 2px 6px rgba(122,67,28,.20); }
body.app .labor__go:hover{ filter:brightness(1.06); }
@media (max-width:820px){ body.app .labor__grid{ grid-template-columns:1fr; gap:14px; } body.app .labor__act{ flex-direction:row; } }