@import url("../../assets/fonts/fonts.css");

/* Shared visualizer components. Brand overrides are defined in layeron.css. */
:root { color-scheme: dark; }
body[data-theme], body[data-theme] .sheet-dialog {
  --grund:#0d0c0f; --flaeche:#17171a; --flaeche-2:#202124;
  --linie:#34373a; --text:#ffffff; --text-2:#b5b6bb;
  --akzent:#307074; --akzent-hover:#3a8186; --akzent-text:#ffffff;
  --akzent-ink:#79c4c9; --fokus:#79c4c9; --eingabe:#101113;
  --navy:#79c4c9; --navy-2:#307074; --blau:#79c4c9; --gold:#79c4c9;
  --leiste:rgba(13,12,15,.98); --radius:4px;
  --schatten:none; --akzent-schatten:transparent;
  color-scheme:dark;
}
body { font-family:"DM Sans",sans-serif; }
body[data-theme] .kopf {
  background:#0d0c0f; border-bottom:1px solid var(--linie); box-shadow:none;
  padding:20px max(24px,calc((100% - 928px) / 2)); gap:24px;
}
.kopf .logo { width:163px; height:60px; max-width:none; object-fit:contain; border-radius:0; }
.kopf-titel { font-family:"Barlow Semi Condensed",sans-serif; font-size:16px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:#d6d6d8; }
.bigha-contact { margin-left:auto; flex-shrink:0; padding:12px 18px; background:var(--akzent); color:#fff; text-decoration:none; font-family:"Barlow Semi Condensed",sans-serif; font-size:14px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; transition:background .15s; }
.bigha-contact:hover { background:var(--akzent-hover); }
.bigha-contact:focus-visible { outline:2px solid var(--fokus); outline-offset:4px; }
.intro { padding:22px 0 25px; }
.intro .bigha-eyebrow { color:var(--akzent-ink); font-family:"Barlow Semi Condensed",sans-serif; font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; margin:0 0 10px; }
.intro h1 { font-family:"Barlow Semi Condensed",sans-serif; font-size:clamp(34px,5.3vw,52px); font-weight:700; line-height:1.05; letter-spacing:0; text-transform:uppercase; text-wrap:initial; }
.intro p { margin-top:12px; font-size:15px; max-width:70ch; }
h2, .text h2 { font-family:"Barlow Condensed",sans-serif; font-size:23px; font-weight:600; text-transform:uppercase; letter-spacing:.025em; }
.nr { width:29px; height:29px; border-radius:2px; font-family:"Barlow Semi Condensed",sans-serif; font-size:18px; }
.schritt { padding:20px; }
.schritt-kopf { margin-bottom:16px; }
.ablage, .filter input, .filter select, .folie, .folie .bild, .option-knopf,
.optionen-zeile button, .knopf, .knopf-leise, .serie-hinweis, .aktion,
.sheet-dialog .paket-start, .ergebnis-innen, .einwilligung { border-radius:3px; }
.chip, .wahl-chip, .zuletzt-knopf { border-radius:3px; }
.ablage { padding:22px; border-width:1px; }
.ablage-leer svg { color:var(--akzent-ink); }
.knopf, .bigha-contact { box-shadow:none; }
.knopf { font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; font-weight:600; letter-spacing:.06em; }
.knopf[disabled], .sheet-dialog .knopf[disabled] { background:#263638; color:#b0bfc0; box-shadow:none; }
.folie[aria-pressed="true"] { border-color:var(--fokus); box-shadow:inset 0 0 0 1px var(--fokus); }
.folie:hover { border-color:#79c4c9; }
.filter input:focus, .filter select:focus { outline-color:var(--fokus); }
.gewaehlt-lupe span { color:#0d0c0f; }
.leiste { box-shadow:0 -8px 28px rgba(0,0,0,.25); }
body[data-theme] .sheet-dialog { border-radius:5px 5px 0 0; }
.lupe-innen img.ist-detail { background:#0d0c0f; }
.fuss { border-top:1px solid var(--linie); margin-top:16px; }
.fuss a:hover { color:var(--akzent-ink); }
.text { max-width:800px; margin:0 auto; padding:32px 20px; }
.text h1 { font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; font-size:clamp(30px,4vw,42px); }
.text h2 { margin:28px 0 8px; }
.text p, .text li { color:var(--text-2); }
.text a { color:var(--akzent-ink); }
.text .stand { margin:12px 0 28px; font-size:13px; }
body.bigha-notes, body.bigha-share { padding-bottom:0; }
.bigha-share main { max-width:1100px; margin:0 auto; padding:32px 20px; }
.bigha-share h1 { font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; font-size:clamp(30px,5vw,48px); }
.bigha-share .result-photo { width:100%; margin:20px 0; border:1px solid var(--linie); border-radius:3px; }
.bigha-share .share-actions { display:flex; flex-wrap:wrap; gap:12px; margin:20px 0; }
.bigha-share .share-actions .knopf { width:auto; }
@media(min-width:700px) { body[data-theme] .sheet-dialog { border-radius:5px; } }
@media(max-width:640px) {
  body[data-theme] .kopf { padding:16px; gap:12px; }
  .kopf .logo { width:136px; height:50px; }
  .kopf-titel { display:none; }
  .bigha-contact { padding:11px 12px; font-size:12px; letter-spacing:.055em; }
  .intro { padding:16px 0 20px; }
  .intro h1 { font-size:36px; }
  .intro p { font-size:14px; }
  .schritt { padding:14px; }
  .ablage { padding:20px 12px; }
  .leiste .knopf { padding:12px 10px; font-size:13px; letter-spacing:.02em; }
}
@media(max-width:360px) {
  .kopf .logo { width:118px; height:44px; }
  .bigha-contact { font-size:11px; padding:10px; }
  .intro h1 { font-size:32px; }
}

/* BIGHA Studio: compare, save and request an offer in the same workspace. */
.seite,.fuss,.leiste-zeile,.leiste .fortschritt,.leiste .fehler,.leiste-hinweis,.einwilligung-status {max-width:1240px}
body[data-theme] .kopf {padding:16px max(24px,calc((100% - 1208px)/2))}
.intro {padding:16px 0 18px}
.intro h1 {font-size:clamp(28px,3.5vw,40px)}
.intro .bigha-eyebrow {margin-bottom:8px}
.intro p {margin-top:8px}
.studio-tools {display:flex;flex-wrap:wrap;gap:8px}
.studio-tools .knopf,.studio-tools .knopf-leise {width:auto;min-height:44px;font-size:15px;padding:10px 15px}
.studio-tools>.knopf {margin-left:auto}
.filter #effect-filter {grid-column:1/-1;max-width:100%;font-size:14px}
.catalog-preview-note {margin:12px 0;color:var(--text-2);line-height:1.5}
.bild.is-car-preview,.bild-zweit.is-car-preview,.folie2-bild.is-car-preview {background-size:contain!important;background-color:#151619}
img.is-car-preview {object-fit:contain!important;background:#151619}
.lupe-innen img.is-car-preview {aspect-ratio:1.675}
.studio-comparison .is-car-preview {aspect-ratio:1.5}
.studio-quote-layout {display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:start}
.studio-quote-visual {min-width:0}
.studio-quote-visual h3 {font:600 26px/1.15 "Barlow Semi Condensed",sans-serif;margin:6px 0 18px}
.studio-quote-figure {margin:0 0 18px;background:#0d0c0f;border:1px solid var(--linie);border-radius:4px;overflow:hidden}
.studio-quote-figure img {width:100%;height:300px;object-fit:contain;display:block}
.studio-quote-figure figcaption {padding:10px 12px;font-size:12px;color:var(--akzent-ink);border-top:1px solid var(--linie)}
.studio-quote-facts {display:grid;grid-template-columns:90px minmax(0,1fr);gap:8px;font-size:14px;line-height:1.5}
.studio-quote-facts dt {color:var(--text-2)}
.studio-quote-facts dd {margin:0;overflow-wrap:anywhere}
.studio-quote-form {display:grid;grid-template-columns:1fr 1fr;gap:14px}
.studio-quote-form h3 {font-size:19px;margin:0}
.studio-quote-form>h3,.studio-quote-form>p,.studio-quote-form>.studio-field:first-of-type,.studio-quote-form>.studio-field:last-child {grid-column:1/-1}
.studio-quote-form>p {margin:0}
.studio-quote-choice {padding:14px;background:#233b3d;border-left:3px solid var(--fokus)}
.studio-quote-choice p {margin:0 0 10px}
.studio-quote-details {border-top:1px solid var(--linie);padding-top:16px}
.studio-quote-details summary {cursor:pointer;font-size:14px;color:var(--text-2);padding:8px 0}
.studio-quote-details textarea {width:100%;margin-top:12px;background:var(--eingabe);color:var(--text);border:1px solid var(--linie);padding:14px;resize:vertical}
.studio-quote-actions a {text-align:center;display:flex;align-items:center;justify-content:center}
#studio-compare-count,#studio-favorites-count {font-variant-numeric:tabular-nums;color:var(--akzent-ink);font-size:13px}
.studio-notice {display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:14px;min-height:28px;margin:6px 0 12px;color:var(--text-2)}
.studio-error {color:#ffb9b9!important}
.studio-filters {display:flex;align-items:center;flex-wrap:wrap;gap:8px;grid-column:1/-1}
.studio-filters select {width:auto;flex:1;min-width:160px;font-size:14px}
.studio-filters button {font-size:14px;min-height:40px}
.studio-filters [aria-pressed=true] {border-color:var(--fokus);background:#233b3d}
.studio-sidebar {display:grid;gap:14px;margin-top:18px}
.studio-field {display:grid;gap:7px;font-size:14px;color:var(--text-2);min-width:0}
.studio-field input,.studio-field textarea,.studio-field select,.studio-project-form input {width:100%;max-width:100%;min-width:0;padding:11px 12px;color:var(--text);background:var(--eingabe);border:1px solid var(--linie);border-radius:3px;font:16px/1.45 "DM Sans",sans-serif}
.studio-field textarea {resize:vertical}
.studio-field input:focus,.studio-field textarea:focus {outline:2px solid var(--fokus);outline-offset:1px}
.studio-project-state {font-size:13px;color:var(--akzent-ink);margin:0;overflow-wrap:anywhere}
.studio-sidebar>.knopf-leise {width:100%;font-size:14px}
.studio-presets {display:grid;gap:7px;border-top:1px solid var(--linie);padding-top:14px}
.studio-presets h3 {font:600 18px "Barlow Semi Condensed",sans-serif;text-transform:uppercase;letter-spacing:.04em;margin:0 0 3px}
.studio-preset {background:var(--flaeche-2);border:1px solid var(--linie);border-radius:3px;padding:10px 12px;color:var(--text);font:600 14px "DM Sans",sans-serif;text-align:left;cursor:pointer}
.studio-preset small {display:block;font-size:12px;font-weight:400;color:var(--text-2);margin-top:3px}
.studio-preset:hover {border-color:var(--fokus)}
.folie-huelle {display:flex;flex-direction:column;border:1px solid var(--linie);border-radius:4px;background:var(--flaeche-2);min-width:0;overflow:hidden}
.folie-huelle>.folie {flex:1;width:100%;height:auto;border-radius:3px 3px 0 0;min-width:0}
.folie .name {font-size:14px;line-height:1.35}
.folie .meta {font-size:12px;flex-wrap:wrap}
.studio-card-actions {display:flex;align-items:stretch;border-top:1px solid var(--linie);min-height:40px}
.studio-card-actions button {color:var(--text-2);background:transparent;border:0;font:500 12px "DM Sans",sans-serif;cursor:pointer}
.studio-card-actions button:hover,.studio-card-actions [aria-pressed=true] {color:var(--akzent-ink);background:#223536}
.studio-card-actions .studio-heart {font-family:Arial,sans-serif;font-size:23px;flex:0 0 38px;border-right:1px solid var(--linie)}
.studio-card-compare {flex:1;min-width:0;padding:6px 2px}
.studio-dialog {background:var(--flaeche);color:var(--text);border:1px solid var(--linie);border-radius:5px;width:min(1150px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:22px;overflow:auto}
.studio-dialog::backdrop {background:rgba(0,0,0,.8);backdrop-filter:blur(4px)}
.studio-dialog-head {display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}
.studio-dialog-head h2 {font-size:30px;outline:none}
.studio-dialog .schliessen {flex-shrink:0;min-width:44px;min-height:44px}
.studio-dialog .knopf-leise,.studio-dialog .knopf {font-size:15px;min-height:44px}
.studio-dialog p {font-size:15px;line-height:1.6}
.studio-dialog .klein {font-size:14px}
#studio-dialog-body {display:grid;gap:18px;min-width:0}
#studio-dialog-status {font-size:14px;color:var(--akzent-ink);margin:14px 0 0;overflow-wrap:anywhere}
#studio-dialog-status:empty {display:none}
.studio-inline {display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.studio-inline .knopf {width:auto}
.studio-inline [aria-pressed=true] {border-color:var(--fokus);background:#233b3d}
.studio-comparison {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.studio-comparison[data-count="1"] {grid-template-columns:minmax(0,400px)}
.studio-comparison[data-count="2"] {grid-template-columns:repeat(2,minmax(0,1fr))}
.studio-comparison[data-count="3"] {grid-template-columns:repeat(3,minmax(0,1fr))}
.studio-compare-card {display:flex;flex-direction:column;gap:12px;background:var(--flaeche-2);padding:12px;border:1px solid var(--linie);border-radius:4px;min-width:0}
.studio-compare-card>img {aspect-ratio:1;width:100%;object-fit:cover;border-radius:3px}
.studio-compare-card h3 {font-size:17px;line-height:1.35;margin:0;overflow-wrap:anywhere}
.studio-compare-card p {margin:0}
.studio-brand {color:var(--akzent-ink)}
.studio-compare-card dl {margin:0 0 auto;display:grid;gap:5px;font-size:14px}
.studio-compare-card dt {color:var(--text-2);font-size:12px;margin-top:5px}
.studio-compare-card dd {margin:0;overflow-wrap:anywhere}
.studio-compare-card .link-knopf {font-size:13px;min-height:35px}
.studio-project-form {display:grid;gap:15px;max-width:700px}
.studio-section-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--linie);padding-top:18px}
.studio-section-heading h3 {font-size:18px;margin:0}
.studio-empty {padding:25px;background:var(--flaeche-2);border:1px dashed var(--linie);color:var(--text-2)}
.studio-project-list {display:grid;grid-template-columns:1fr 1fr;gap:12px}
.studio-project-card {display:grid;grid-template-columns:100px minmax(0,1fr);gap:14px;padding:14px;border:1px solid var(--linie);border-radius:4px;background:var(--flaeche-2)}
.studio-project-card>img {width:100%;height:100px;object-fit:cover;border-radius:3px}
.studio-project-info:only-child {grid-column:1/-1}
.studio-project-info {display:grid;gap:7px;min-width:0}
.studio-project-info h4 {font-size:16px;margin:0;overflow-wrap:anywhere}
.studio-project-info p {font-size:14px;color:var(--text-2);margin:0;overflow-wrap:anywhere}
.studio-project-info small {font-size:12px;color:var(--text-2)}
.studio-delete-confirm {grid-column:1/-1;border:1px solid #925959;background:#302020;padding:12px;display:flex;flex-wrap:wrap;gap:10px}
.studio-delete-confirm p {flex:1 0 100%}
.studio-quote-actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#studio-quote-text {font-size:15px;min-height:300px}
.studio-vehicle-details summary {font-size:14px;color:var(--text-2);cursor:pointer;min-height:32px}
.studio-vehicle-details[open] {display:grid}
.studio-vehicle-details .studio-field {margin-top:12px}
#studio-print {display:none}
@media(min-width:1000px) {
  .ablauf {grid-template-columns:285px minmax(0,1fr);align-items:start;gap:20px}
  .ablauf>* {grid-column:1/-1}
  #schritt-foto {grid-column:1;grid-row:1;position:sticky;top:16px;max-height:calc(100dvh - 185px);overflow:auto}
  #schritt-folie {grid-column:2;grid-row:1}
  #schritt-foto .ablage {padding:20px 10px}
  #schritt-foto .ablage-leer span {font-size:13px}
  #schritt-foto .ablage-leer strong {font-size:15px}
  .folien {grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:10px}
}
@media(max-width:999px) and (min-width:641px) {
  #schritt-foto {display:grid;grid-template-columns:1fr 1fr;gap:16px}
  #schritt-foto .schritt-kopf {grid-column:1/-1;margin-bottom:0}
  #schritt-foto .studio-sidebar {margin-top:0}
}
@media(max-width:640px) {
  body[data-theme] .kopf {padding:12px 16px}
  .kopf .logo {height:45px;width:125px}
  .intro h1 {font-size:30px}
  .intro .bigha-eyebrow {font-size:12px}
  .studio-tools {display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .studio-tools .knopf,.studio-tools .knopf-leise {margin:0;width:100%;font-size:14px;padding:10px 7px}
  .studio-notice {font-size:13px;margin-bottom:8px;min-height:20px}
  .studio-sidebar {gap:10px;margin-top:14px}
  .studio-presets {grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .studio-presets h3 {grid-column:1/-1}
  .studio-preset {padding:9px 6px;font-size:13px}
  .studio-preset small {font-size:12px;line-height:1.3}
  .studio-filters {gap:7px}
  .studio-filters select {min-width:140px}
  .studio-filters>.link-knopf {width:100%;text-align:left}
  .folien {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .studio-dialog {width:100%;max-height:100dvh;height:100dvh;margin:0;border:0;border-radius:0;padding:16px 14px max(24px,env(safe-area-inset-bottom))}
  .studio-dialog-head {position:sticky;top:-16px;background:var(--flaeche);padding:12px 0;z-index:2;margin-bottom:10px}
  .studio-dialog-head h2 {font-size:27px}
  .studio-comparison,.studio-comparison[data-count="3"],.studio-comparison[data-count="2"] {grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .studio-compare-card {padding:8px;gap:8px}
  .studio-compare-card h3 {font-size:15px}
  .studio-compare-card .knopf {font-size:13px;padding:10px 6px}
  .studio-project-list {grid-template-columns:1fr}
  .studio-project-card {grid-template-columns:78px minmax(0,1fr);padding:10px;gap:10px}
  .studio-project-card>img {height:78px}
  .studio-quote-actions {grid-template-columns:1fr}
  .studio-quote-actions button,.studio-quote-actions a {width:100%}
  .studio-quote-layout {grid-template-columns:1fr;gap:20px}
  .studio-quote-figure img {height:230px}
  .studio-quote-form {grid-template-columns:1fr}
  .studio-quote-visual h3 {font-size:24px}
}
@media print {
  body>* {display:none!important}
  body>#studio-print {display:block!important;color:#111;background:white;font:10pt/1.4 Arial,sans-serif;padding:0;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  html,body {padding:0!important;background:white!important;overflow:visible!important;height:auto!important;color-scheme:light}
  .studio-print-head {display:flex;align-items:center;gap:8mm;border-bottom:1.5pt solid #307074;padding-bottom:5mm;margin-bottom:5mm;break-inside:avoid}
  .studio-print-logo {width:34mm;height:auto;background:#0d0c0f;padding:3mm}
  #studio-print h1 {font:700 21pt Arial,sans-serif;margin:2mm 0}
  #studio-print .studio-print-eyebrow {font-size:8pt;letter-spacing:.08em;color:#307074;margin:0}
  #studio-print p {white-space:pre-line;margin:2mm 0}
  .studio-print-figure {margin:0 0 5mm;break-inside:avoid;text-align:center;background:#f1f1f1}
  .studio-print-photo {display:block;width:100%;max-height:88mm;object-fit:contain;margin:0}
  .studio-print-figure figcaption {padding:2mm 3mm;font-size:8pt;text-align:left}
  .studio-print-product {display:flex;align-items:center;gap:4mm;padding:3mm;border:1px solid #ddd;margin-bottom:4mm;break-inside:avoid}
  .studio-print-product img {width:20mm;height:20mm;object-fit:contain}
  .studio-print-product div {white-space:pre-line;font-size:9pt}
  #studio-print pre {white-space:pre-wrap;overflow-wrap:anywhere;font:10pt/1.45 Arial,sans-serif;margin:3mm 0;orphans:3;widows:3}
  #studio-print .studio-print-note {font-size:8pt;color:#555;border-top:1px solid #ddd;padding-top:3mm}
  #studio-print footer {white-space:pre-line;color:#333;font-size:8pt;margin-top:4mm;break-inside:avoid}
  @page {size:A4;margin:12mm}
}
@media(min-width:1000px) {
  .intro .bigha-eyebrow {display:none}
  .intro {padding:6px 0 12px}
  .intro h1 {font-size:32px}
  body[data-theme] .kopf {padding-top:10px;padding-bottom:10px}
  .kopf .logo {height:52px;width:142px}
}