/* Design angelehnt an www.guterate.eu: Grün #22A868, Schriften Fredoka (Überschriften) + Figtree (Text),
   runde Buttons, weiche Karten. Schriften liegen lokal in assets/fonts/ (keine Anfragen an Dritte). */
@font-face{font-family:'Fredoka Variable';font-style:normal;font-display:swap;font-weight:300 700;
  src:url(fonts/fredoka-latin-ext-wght-normal.woff2) format('woff2-variations'),url(fonts/fredoka-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fredoka Variable';font-style:normal;font-display:swap;font-weight:300 700;
  src:url(fonts/fredoka-latin-wght-normal.woff2) format('woff2-variations'),url(fonts/fredoka-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree Variable';font-style:normal;font-display:swap;font-weight:300 900;
  src:url(fonts/figtree-latin-ext-wght-normal.woff2) format('woff2-variations'),url(fonts/figtree-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree Variable';font-style:normal;font-display:swap;font-weight:300 900;
  src:url(fonts/figtree-latin-wght-normal.woff2) format('woff2-variations'),url(fonts/figtree-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* Markenfarben (wie guterate.eu) */
  --brand-50:#F1FBF6; --brand-100:#DFF6EA; --brand-200:#BCEBD2; --brand-400:#57C08C;
  --brand-500:#22A868; --brand-600:#178A54; --brand-700:#136D44; --brand-800:#0F5636;
  --ink-900:#1B211D; --ink-700:#38423C; --ink-600:#54605A; --ink-500:#6B766F; --ink-400:#8A968F;
  --bg:#FBFDFC; --white:#FFFFFF; --line:#E3ECE7;
  --amber-500:#E8912C; --amber-600:#B96A12;
  /* Bisherige Variablennamen bleiben bestehen (Templates verwenden sie) und zeigen auf die neue Palette */
  --green-900:var(--brand-800); --green-700:var(--brand-700); --green-600:var(--brand-600); --green-500:var(--brand-500);
  --olive-400:var(--brand-400);
  --sand-50:var(--bg); --sand-100:var(--brand-50); --sand-200:var(--brand-100);
  --border:var(--line); --radius-s:10px; --radius-m:16px; --radius-l:24px;
  --shadow:0 1px 2px rgba(27,33,29,.04),0 8px 24px -10px rgba(27,33,29,.10);
  --font:'Figtree Variable','Figtree',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Fredoka Variable','Fredoka',ui-rounded,system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink-900);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--brand-600);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--font-display);font-weight:600;color:var(--ink-900);margin:0 0 12px;letter-spacing:-.005em}
h1{font-size:28px;line-height:1.2}
h2{font-size:22px}
h3{font-size:18px}
.app-shell{display:flex;min-height:100vh}
.sidebar{width:228px;flex:0 0 228px;background:#fff;color:var(--ink-700);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:22px 0;position:sticky;top:0;align-self:flex-start;min-height:100vh}
.sidebar .brand{padding:0 22px 24px}
.sidebar .brand-logo{display:inline-flex}
.sidebar .brand-sub{display:block;font-weight:600;font-size:12px;color:var(--brand-600);margin-top:8px;letter-spacing:.02em}
.sidebar-links{padding:0 12px;display:flex;flex-direction:column;gap:2px}
.sidebar a{display:block;padding:10px 14px;color:var(--ink-700);border-radius:999px;font-weight:500}
.sidebar a:hover{background:var(--brand-50);color:var(--brand-700);text-decoration:none}
.sidebar a.on{background:var(--brand-100);color:var(--brand-800);font-weight:700}
.sidebar-user{margin-top:auto;padding:16px 22px 0;border-top:1px solid var(--line)}
.sidebar-user .name{font-weight:700;color:var(--ink-900)}
.sidebar-user .rolle{font-size:12px;color:var(--ink-500);margin-bottom:8px}
.link-button{background:none;border:none;color:var(--brand-600);cursor:pointer;padding:0;font-size:13px;font-weight:600;font-family:inherit}
.table-link-btn{background:none;border:none;color:var(--green-700);cursor:pointer;padding:0;font:inherit;text-decoration:none}
.table-link-btn:hover{text-decoration:underline}
.table-link-btn-danger{color:#a13232}
table th .sort-link{color:inherit;text-decoration:none;white-space:nowrap}
table th .sort-link:hover{color:var(--green-700);text-decoration:underline}
/* Breite Tabellen (viele Spalten) scrollen innerhalb ihrer eigenen Karte
   horizontal, statt die ganze Seite in die Breite zu drücken. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll table{min-width:640px}
.nav-toggle{display:none}
.content{flex:1;padding:30px 32px;max-width:1280px;min-width:0}
.content-plain{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.content-plain .flash{width:100%;max-width:380px;box-sizing:border-box}
.flash{padding:12px 16px;border-radius:var(--radius-s);margin-bottom:18px;font-size:14px}
.flash-erfolg{background:var(--brand-50);color:var(--brand-800);border:1px solid var(--brand-200)}
.flash-fehler{background:#fbeaea;color:#a13232;border:1px solid #f2c6c6}
.flash-hinweis{background:#fff7e8;color:var(--amber-600);border:1px solid #f3ddb0}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-m);padding:24px;margin-bottom:22px;box-shadow:var(--shadow)}
.card:has(> .table-scroll),.card:has(> table){padding:16px 14px}
.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;background:var(--brand-500);color:#fff;border:1px solid var(--brand-500);padding:10px 20px;border-radius:999px;font-weight:700;cursor:pointer;font-size:14px;font-family:inherit;line-height:1.3;transition:background .15s ease,box-shadow .15s ease,transform .05s ease}
.btn:hover{background:var(--brand-600);border-color:var(--brand-600);text-decoration:none;color:#fff;box-shadow:0 6px 16px -6px rgba(34,168,104,.55)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--brand-200);outline-offset:2px}
.btn.secondary{background:#fff;color:var(--brand-700);border:1px solid var(--brand-400)}
.btn.secondary:hover{background:var(--brand-50);color:var(--brand-800);box-shadow:none}
.btn.amber{background:var(--amber-500)}
.btn.amber:hover{background:var(--amber-600)}
.btn.small{padding:6px 14px;font-size:13px}
table{width:100%;border-collapse:collapse;background:#fff}
table th,table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);font-size:14px}
table th{color:var(--ink-500);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em;background:var(--bg)}
table tbody tr:hover td,table tr:hover > td{background:var(--brand-50)}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600}
.badge.aktiv{background:var(--brand-100);color:var(--brand-800)}
.badge.inaktiv{background:#eee;color:#777}
.badge.export{background:#fff2e2;color:var(--amber-600)}
.badge.import{background:#e3ecff;color:#3452c4}
label{display:block;font-weight:600;font-size:13px;margin:14px 0 4px;color:var(--ink-700)}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  width:100%;padding:10px 14px;border:1px solid #CFDBD4;border-radius:var(--radius-s);font-size:14px;font-family:var(--font);background:#fff;color:var(--ink-900);transition:border-color .15s ease,box-shadow .15s ease}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-100)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.filter-bar{padding:18px 24px}
.filter-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:0 16px;align-items:end}
.filter-row label{margin:0 0 4px}
.filter-actions{display:flex;gap:8px;padding-bottom:1px}
.filter-summary{margin:-6px 0 12px}
@media (max-width: 900px){.filter-row{grid-template-columns:1fr 1fr}}
@media (max-width: 560px){.filter-row,.form-row{grid-template-columns:1fr}}
.description{font-size:12px;color:var(--ink-500);margin-top:4px}
.description code{background:var(--sand-100);border-radius:4px;padding:1px 5px;font-size:11.5px;color:var(--ink-700)}
.login-box{background:#fff;padding:40px;border-radius:var(--radius-l);border:1px solid var(--line);box-shadow:0 2px 4px rgba(27,33,29,.04),0 24px 48px -16px rgba(27,33,29,.14);width:400px;max-width:100%}
.login-box .login-logo{display:flex;justify-content:center;margin:0 0 22px}
.login-box .gr-logo{font-size:30px}
.login-box .gr-logo svg{width:44px;height:44px}
.login-box h1{font-size:22px;text-align:center}
.empty-state{text-align:center;padding:50px 20px;color:var(--ink-500)}
.empty-state .btn{margin-top:14px}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
@media (max-width: 700px){.stat-grid{grid-template-columns:1fr 1fr}}
.stat-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-m);padding:18px;box-shadow:var(--shadow)}
.stat-card .num{font-family:var(--font-display);font-size:30px;font-weight:600;color:var(--brand-700)}
.stat-card .label{font-size:13px;color:var(--ink-500)}
.wizard-steps{display:flex;gap:8px;margin-bottom:24px}
.wizard-steps span{flex:1;text-align:center;padding:8px;border-radius:var(--radius-s);background:var(--sand-100);font-size:13px;font-weight:600;color:var(--ink-500)}
.wizard-steps span.on{background:var(--brand-500);color:#fff}
.check-list{list-style:none;padding:0;margin:0}
.check-list li{padding:8px 0;border-bottom:1px solid var(--border);display:flex;justify-content:space-between}
.check-list li .ok{color:var(--green-600);font-weight:600}
.check-list li .fehlt{color:#a13232;font-weight:600}
.log-box{background:var(--sand-100);border-radius:var(--radius-s);padding:12px;font-size:12.5px;font-family:'Consolas',monospace;white-space:pre-wrap;max-height:220px;overflow:auto}
.pill-row{display:flex;gap:8px;margin-bottom:14px}
.pill-row a{padding:6px 14px;border-radius:999px;border:1px solid var(--border);color:var(--ink-700);font-size:13px}
.pill-row a.on{background:var(--brand-500);color:#fff;border-color:var(--brand-500)}
.offer-list{list-style:none;padding:0;margin:0}
.offer-list li{padding:8px 0;border-bottom:1px dashed var(--border);font-size:13px;display:flex;justify-content:space-between}
.gallery-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.gallery-row img{width:90px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}

/* Fortschrittsanzeige (Import/Export) */
.progress-wrap{margin:10px 0}
.progress-track{background:var(--sand-100);border-radius:999px;height:10px;overflow:hidden;border:1px solid var(--border)}
.progress-fill{background:var(--brand-500);height:100%;width:0%;transition:width .5s ease;border-radius:999px}
.progress-fill.fehler{background:#c1453f}
.progress-text{font-size:12.5px;color:var(--ink-500);margin-top:6px;display:flex;justify-content:space-between}
.progress-text .prozent{font-weight:700;color:var(--green-700)}

/* Bearbeitungsformular Fahrzeug - echte "Karteikarten"-Reiter: jeder Button
   ist eine eigene, oben abgerundete Box mit Rahmen; der aktive Reiter hebt
   sich per weißem Hintergrund von der (etwas dunkleren) Reiterleiste ab und
   "verschmilzt" unten mit dem darunterliegenden Inhalt (die Reiterleiste
   selbst zieht die untere Trennlinie, der aktive Button überdeckt sie exakt
   um 1px) - anders als vorher (reine Unterstreichung) jetzt klar als
   anklickbare Tabs erkennbar, nicht nur als Linkliste. */
.tab-row{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--border);margin-bottom:20px;padding:0 0 0 2px}
.tab-row button{
  position:relative;top:1px;
  background:var(--sand-100);border:1px solid var(--border);border-bottom:none;
  border-radius:var(--radius-s) var(--radius-s) 0 0;
  padding:9px 16px;font-size:13px;font-weight:600;color:var(--ink-500);cursor:pointer;
  transition:background .15s ease,color .15s ease}
.tab-row button:hover{background:var(--sand-200);color:var(--ink-700)}
.tab-row button.on{background:#fff;color:var(--green-700);box-shadow:0 -1px 3px rgba(21,51,39,.06)}
.tab-panel{display:none}
.tab-panel.on{display:block}

/* WYSIWYG-Editor für "Bemerkung/Ausstattungstext" (mobile.de-eigene, sehr
   eingeschränkte Formatierungssyntax - siehe templates/fahrzeug_formular.php):
   sieht wie ein normales Textfeld aus, zeigt Fett/Zeilenumbruch/Trennlinie
   aber schon beim Tippen formatiert an statt der rohen "**"/"\\"/"----"-
   Zeichenketten. */
.wysiwyg-toolbar{display:flex;align-items:center;gap:6px;margin:6px 0 0}
.wysiwyg-btn{background:var(--sand-100);border:1px solid var(--border);border-radius:var(--radius-s);padding:5px 10px;font-size:12.5px;font-weight:600;color:var(--ink-700);cursor:pointer}
.wysiwyg-btn:hover{background:var(--sand-200)}
.wysiwyg-btn:disabled{opacity:.4;cursor:default}
.wysiwyg-btn:disabled:hover{background:var(--sand-100)}
.wysiwyg-toolbar-spacer{flex:1}
.wysiwyg-editor{
  min-height:110px;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-s);
  background:#fff;font-size:14px;font-family:var(--font);line-height:1.5;margin-top:6px}
.wysiwyg-editor:focus{outline:2px solid var(--green-500);outline-offset:-1px}
.wysiwyg-editor hr{border:none;border-top:1px solid var(--ink-500);margin:8px 0}
.field-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 20px}

/* Auf-/zuklappbare Abschnitte im Tab "Fahrzeugdaten" (ehem. "Stammdaten",
   09/2026 auf Kundenwunsch in Abschnitte gegliedert) - bewusst natives
   <details>/<summary> statt eigener JS-Logik: funktioniert ohne JavaScript,
   ist von Haus aus per Tastatur bedienbar/screenreader-tauglich. */
.abschnitt-liste{margin-bottom:22px}
.abschnitt{border:1px solid var(--border);border-radius:var(--radius-s);margin-bottom:10px;overflow:hidden}
.abschnitt summary{cursor:pointer;padding:12px 16px;font-weight:600;font-size:14px;color:var(--green-900);list-style:none;display:flex;justify-content:space-between;align-items:center;background:var(--sand-50);user-select:none}
.abschnitt summary::-webkit-details-marker{display:none}
.abschnitt summary::after{content:'▸';color:var(--ink-500);transition:transform .15s ease;flex:0 0 auto;margin-left:10px}
.abschnitt[open] summary::after{transform:rotate(90deg)}
.abschnitt[open] summary{border-bottom:1px solid var(--border)}
.abschnitt .abschnitt-inhalt{padding:16px}
.abschnitt .abschnitt-inhalt .field-grid{margin:0}
.check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 16px;margin-top:6px}
.check-grid label{display:flex;align-items:center;gap:6px;font-weight:400;font-size:13.5px;margin:6px 0}
.check-grid input[type=checkbox]{width:auto}
.img-manage{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.img-manage .img-card{width:140px;background:var(--sand-50);border:1px solid var(--border);border-radius:var(--radius-s);padding:6px;text-align:center}
.img-manage .img-card img{width:100%;height:90px;object-fit:cover;border-radius:6px}
.img-manage .img-card .row{display:flex;justify-content:center;gap:4px;margin-top:6px}
.img-manage .img-card button,.img-manage .img-card .btn{font-size:11px;padding:3px 8px}
.offer-card{border:1px solid var(--border);border-radius:var(--radius-s);padding:14px;margin-bottom:12px;background:var(--sand-50)}
.offer-card .form-row{grid-template-columns:repeat(3,1fr)}
.matrix-table{max-width:640px;margin-top:6px}
.matrix-table td,.matrix-table th{padding:6px 8px}
.matrix-table input[type=text]{width:100%;margin:0}
@media (max-width: 900px){.field-grid,.check-grid,.offer-card .form-row{grid-template-columns:1fr 1fr}}
@media (max-width: 560px){.field-grid,.check-grid,.offer-card .form-row{grid-template-columns:1fr}}

.pagination{display:flex;align-items:center;gap:6px;margin-top:14px;flex-wrap:wrap}
.pagination .btn.disabled{opacity:.4;pointer-events:none}
.page-nr{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 6px;border-radius:8px;color:var(--ink-700);font-size:13px;font-weight:600}
.page-nr:hover{background:var(--sand-100);text-decoration:none}
.page-nr.on{background:var(--brand-500);color:#fff}
.page-ellipsis{color:var(--ink-500);padding:0 2px}
.thumb-cell{width:64px}
.thumb-img{width:56px;height:42px;object-fit:cover;border-radius:6px;display:block}
.thumb-placeholder{width:56px;height:42px;border-radius:6px;background:var(--sand-50);border:1px solid var(--border)}
.lightbox-img{cursor:zoom-in}
#lightbox-overlay{display:none;position:fixed;inset:0;background:rgba(10,16,13,.88);z-index:1000;align-items:center;justify-content:center;padding:48px;cursor:zoom-out}
#lightbox-overlay.on{display:flex}
#lightbox-overlay img{max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 12px 44px rgba(0,0,0,.5);cursor:default}
#lightbox-overlay .lightbox-close{position:absolute;top:18px;right:26px;color:#fff;font-size:34px;line-height:1;cursor:pointer;background:none;border:none;padding:4px 10px}

/* -------------------------------------------------------------------
 * Responsive: unterhalb von 860px wird aus der festen Seitenleiste eine
 * schmale, obenliegende Leiste mit Logo + Menü-Button. Die Navigations-
 * Links und der Benutzerbereich klappen darunter auf/zu (siehe
 * _fuss.php für den kleinen Klick-Handler) statt permanent 230px Breite
 * zu belegen, die auf einem Telefon/Tablet sonst allein schon jede
 * Tabelle in die Breite drücken würde.
 * ---------------------------------------------------------------- */
@media (max-width: 860px){
  .app-shell{flex-direction:column;min-height:0}
  .sidebar{width:100%;flex:0 0 auto;padding:0;position:static;min-height:0;border-right:none;border-bottom:1px solid var(--line)}
  .sidebar .brand{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;gap:12px}
  .sidebar .brand-sub{display:none}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto;
    border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink-700);font-size:18px;cursor:pointer}
  .sidebar-links{display:none;flex-direction:column;padding:0 12px 10px}
  .sidebar.nav-open .sidebar-links{display:flex}
  .sidebar-user{display:none;margin-top:0;padding-bottom:14px}
  .sidebar.nav-open .sidebar-user{display:block}
  .content,.content-plain{padding:16px}
  .login-box{padding:28px}
}
@media (max-width: 480px){
  .stat-grid{grid-template-columns:1fr}
}

/* Logo (wie guterate.eu): grünes Häkchen-Quadrat + Wortmarke "guteRate" */
.gr-logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--ink-900);line-height:1;text-decoration:none}
.gr-logo:hover{text-decoration:none}
.gr-logo svg{width:34px;height:34px;flex:0 0 auto;display:block}
.gr-logo .rate{color:var(--brand-600)}
.sidebar a.gr-logo{display:inline-flex;padding:0;border-radius:0;background:none;color:var(--ink-900);font-weight:600}
.sidebar a.gr-logo:hover{background:none;color:var(--ink-900)}

/* Fahrzeugformular: Hinweis auf nicht gespeicherte Änderungen (10/2026) */
.ungespeichert-hinweis{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 14px;padding:12px 16px;background:#fff3d6;color:#7a4a00;border:2px solid var(--amber-500);border-radius:var(--radius-s);font-size:14px;box-shadow:0 6px 16px -8px rgba(0,0,0,.35)}
.ungespeichert-hinweis[hidden]{display:none}
.ungespeichert-hinweis .btn{margin:0;flex:0 0 auto}