/* stil.css — Verwaltungsbereich R.S. Automobile.
   Dieselben Farben, dieselbe Schriftlogik und dieselbe Kantigkeit wie die Website —
   damit sich der Bereich nicht wie ein fremdes Programm anfuehlt, sondern wie die
   Rueckseite derselben Seite. Grosse Flaechen, grosse Schrift, wenig auf einmal:
   Roberto soll hier nichts suchen muessen. */

:root {
  --karmin: #BA3E52;
  --karmin-tief: #98303F;
  --azur: #0E80B7;
  --azur-tief: #0B6C99;
  --gruen: #1FA855;
  --gruen-tief: #17853F;
  --nacht: #14171A;
  --nacht-weich: #3D444B;
  --papier: #FBFAF9;
  --papier-tief: #F2EFEC;
  --linie: #E2DDD8;
  --weiss: #FFFFFF;
  --radius: 4px;
  --schatten: 0 2px 10px rgba(20, 23, 26, .07);
  --grotesk: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--grotesk); background: var(--papier);
  color: var(--nacht); font-size: 16px; line-height: 1.5; }
h1, h2, h3 { margin: 0; line-height: 1.15; }

/* ---------------------------------------------------------------- Kopf */
.kopf { background: var(--nacht); color: #fff; padding: .9rem 1.2rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 20; }
.marke { display: flex; align-items: center; gap: 2px; }
.marke b { background: var(--karmin); color: #fff; font-weight: 800;
  padding: .18em .38em; border-radius: 2px; font-size: .95rem; }
.marke b + b { background: var(--azur); }
.kopf__titel { font-weight: 700; letter-spacing: .02em; margin-right: auto; }
.kopf__titel small { display: block; font-weight: 500; opacity: .7; font-size: .78rem; }

/* ---------------------------------------------------------------- Reiter */
.reiter { display: flex; gap: .3rem; padding: 0 1.2rem; background: var(--nacht);
  overflow-x: auto; position: sticky; top: 60px; z-index: 19; }
.reiter button { appearance: none; border: 0; background: none; color: #B9B2AB;
  font: inherit; font-weight: 700; padding: .8rem 1.1rem; cursor: pointer;
  border-bottom: 3px solid transparent; white-space: nowrap; min-height: 48px; }
.reiter button:hover { color: #fff; }
.reiter button[aria-selected="true"] { color: #fff; border-bottom-color: var(--karmin); }

/* ---------------------------------------------------------------- Flaeche */
.blatt { max-width: 980px; margin: 0 auto; padding: 1.6rem 1.2rem 5rem; }
.kasten { background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.3rem; margin-bottom: 1.1rem; }
.kasten > h2 { font-size: 1.15rem; margin-bottom: .3rem; }
.kasten > p.hinweis { color: var(--nacht-weich); font-size: .92rem; margin: .2rem 0 1rem; }

label { display: block; font-weight: 700; font-size: .86rem; margin: 0 0 .3rem; }
input[type=text], input[type=number], input[type=password], textarea {
  width: 100%; font: inherit; padding: .7rem .8rem; border: 1px solid var(--linie);
  border-radius: var(--radius); background: var(--weiss); color: var(--nacht); }
input:focus, textarea:focus { outline: 2px solid var(--azur); outline-offset: 1px; border-color: var(--azur); }
textarea { min-height: 5.2rem; resize: vertical; line-height: 1.45; }
.feld { margin-bottom: 1.1rem; }
.feld small { display: block; color: var(--nacht-weich); font-size: .8rem; margin-top: .3rem; }

button.knopf { appearance: none; font: inherit; font-weight: 700; cursor: pointer;
  border: 1px solid var(--karmin); background: var(--karmin); color: #fff;
  padding: .7rem 1.2rem; border-radius: var(--radius); min-height: 46px; }
button.knopf:hover { background: var(--karmin-tief); border-color: var(--karmin-tief); }
button.knopf--zweit { background: var(--weiss); color: var(--nacht); border-color: var(--linie); }
button.knopf--zweit:hover { background: var(--papier-tief); }
button.knopf--gruen { background: var(--gruen); border-color: var(--gruen); }
button.knopf--gruen:hover { background: var(--gruen-tief); border-color: var(--gruen-tief); }
button.knopf:disabled { opacity: .5; cursor: default; }

/* ---------------------------------------------------------------- Fahrzeuge */
.suche { margin-bottom: 1rem; }
.auto { display: grid; grid-template-columns: 132px 1fr auto; gap: 1rem;
  align-items: center; padding: .85rem 0; border-top: 1px solid var(--linie); }
.auto:first-child { border-top: 0; }
.auto img { width: 132px; aspect-ratio: 2.33; object-fit: contain;
  background: var(--papier-tief); border-radius: 3px; display: block; }
/* Platz fuer Fahrzeuge ohne Foto: nimmt dieselbe Flaeche ein, damit die Zeile nicht
   springt, und sieht bewusst nach „hier ist nichts" aus statt nach kaputtem Bild. */
.auto__platz { width: 132px; aspect-ratio: 2.33; background: var(--papier-tief);
  border: 1px dashed var(--linie); border-radius: 3px; display: block; }
.auto__name { font-weight: 700; }
.auto__unter { color: var(--nacht-weich); font-size: .86rem; }
.auto__preis { display: flex; align-items: center; gap: .4rem; margin-top: .4rem; }
.auto__preis input { width: 8.5rem; }
.auto--aus { opacity: .5; }
.auto--aus .auto__name::after { content: " — nicht auf der Seite"; color: var(--karmin); font-weight: 700; }

/* Grosser Schalter statt Kaestchen: mit dem Finger und mit den Augen eindeutig. */
.schalter { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer;
  font-weight: 700; font-size: .9rem; user-select: none; }
.schalter input { position: absolute; opacity: 0; width: 0; height: 0; }
.schalter span.bahn { width: 54px; height: 30px; border-radius: 999px; background: #C9C3BD;
  position: relative; transition: background .15s ease; flex: none; }
.schalter span.bahn::after { content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  transition: transform .15s ease; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.schalter input:checked + span.bahn { background: var(--gruen); }
.schalter input:checked + span.bahn::after { transform: translateX(24px); }
.schalter input:focus-visible + span.bahn { outline: 2px solid var(--azur); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .schalter span.bahn, .schalter span.bahn::after { transition: none; } }

/* ---------------------------------------------------------------- Farben */
.farbreihe { display: grid; grid-template-columns: 1fr auto auto; gap: .8rem;
  align-items: center; padding: .7rem 0; border-top: 1px solid var(--linie); }
.farbreihe:first-of-type { border-top: 0; }
.farbreihe input[type=color] { width: 62px; height: 44px; padding: 2px; border: 1px solid var(--linie);
  border-radius: var(--radius); background: var(--weiss); cursor: pointer; }
.farbreihe code { font-size: .86rem; color: var(--nacht-weich); }

/* ---------------------------------------------------------------- Meldungen */
.meldung { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  background: var(--nacht); color: #fff; padding: .8rem 1.2rem; border-radius: var(--radius);
  box-shadow: var(--schatten); font-weight: 700; z-index: 50; max-width: 90vw; }
.meldung--fehler { background: var(--karmin); }
.meldung[hidden] { display: none; }

.streifen { position: sticky; bottom: 0; background: var(--weiss);
  border-top: 1px solid var(--linie); padding: .8rem 1.2rem; display: flex;
  gap: .7rem; align-items: center; flex-wrap: wrap; z-index: 18; }
.streifen p { margin: 0; color: var(--nacht-weich); font-size: .88rem; margin-right: auto; }

pre.ausgabe { background: var(--papier-tief); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: .8rem; font-size: .82rem; overflow-x: auto;
  white-space: pre-wrap; margin: .8rem 0 0; }

/* ---------------------------------------------------------------- Anmeldung */
.tor { max-width: 380px; margin: 12vh auto; }
.tor .kasten { text-align: center; }
.tor .marke { justify-content: center; margin-bottom: 1rem; }

[hidden] { display: none !important; }

@media (max-width: 640px) {
  .auto { grid-template-columns: 84px 1fr; gap: .7rem 1rem; padding: 1rem 0; }
  .auto img, .auto__platz { width: 84px; }
  /* Preis und Schalter in eine eigene Zeile unter Bild und Namen. */
  .auto > div:last-child { grid-column: 1 / -1; }
  .auto__preis { flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
  .auto__preis input { width: 7.5rem; }
  /* Der lange Hinweis darf die Zeile nicht in eine Spalte pressen. */
  .auto__preis .auto__unter { flex: 1 1 100%; margin-top: -.2rem; }
  .auto__standardpreis { font-style: normal; }
  /* Kopfzeile kompakter: der Abmelden-Knopf braucht keine eigene Zeile. */
  .kopf { padding: .7rem 1rem; gap: .6rem; }
  .kopf__titel { font-size: .95rem; }
  .kopf__titel small { font-size: .72rem; }
  .kopf .knopf { padding: .55rem .9rem; min-height: 44px; }
  .reiter { top: 60px; padding: 0 .6rem; }
  .reiter button { padding: .7rem .8rem; }
  .blatt { padding: 1rem .8rem 6rem; }
  .kasten { padding: 1rem; }
  .streifen { padding: .7rem 1rem; }
  .streifen p { flex: 1 1 100%; margin-bottom: .2rem; }
  .streifen .knopf { flex: 1 1 auto; }
}

/* Zugeklappte Gruppen im Reiter „Texte". Gestufte Offenlegung: erst die Seite wählen,
   dann deren Texte sehen — statt dreizehn Feldern auf einmal. */
.gruppe { border: 1px solid var(--linie); border-radius: var(--radius); margin-bottom: .7rem;
  background: var(--weiss); }
.gruppe summary { cursor: pointer; padding: .9rem 1rem; display: flex; align-items: center;
  gap: .8rem; min-height: 48px; list-style: none; }
.gruppe summary::-webkit-details-marker { display: none; }
.gruppe summary::before { content: "▸"; color: var(--nacht-weich); font-size: .9rem;
  transition: transform .12s ease; }
.gruppe[open] summary::before { transform: rotate(90deg); }
.gruppe summary b { font-size: 1rem; }
.gruppe summary span { margin-left: auto; color: var(--nacht-weich); font-size: .84rem; }
.gruppe summary:hover { background: var(--papier-tief); }
.gruppe__in { padding: 0 1rem 1rem; border-top: 1px solid var(--linie); }
.gruppe__in .feld:first-child { margin-top: 1rem; }
@media (prefers-reduced-motion: reduce) { .gruppe summary::before { transition: none; } }

/* ============================================================================
   Fahrzeug anlegen und bearbeiten, Bildvorschau, offene Änderungen.
   ============================================================================ */

/* Formular in zwei Spalten: dreizehn Felder untereinander wären eine Rolle ohne Ende. */
.raster2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0 1.1rem; margin-top: 1rem; }

.knopf--klein { padding: .45rem .8rem; min-height: 38px; font-size: .86rem; margin-top: .5rem; }
/* Löschen sieht anders aus als alles andere — es ist das einzige, was nicht umkehrbar ist. */
.knopf--gefahr { background: var(--weiss); color: var(--karmin); border-color: var(--karmin);
  margin-top: 1.2rem; }
.knopf--gefahr:hover { background: var(--karmin); color: #fff; }
/* Der Veröffentlichen-Knopf zeigt, dass etwas aussteht — ohne zu blinken. */
.knopf--pocht { box-shadow: 0 0 0 3px rgba(31, 168, 85, .28); }

.auto { align-items: start; }
.auto__mehr { grid-column: 1 / -1; }
.mehr__in { border-top: 1px solid var(--linie); margin-top: .8rem; padding-top: 1rem; }
.mehr__in > .hinweis:first-child { margin-top: 0; }

/* „von Hand" am Namen: sofort erkennbar, welches Fahrzeug nicht aus einem Portal kommt. */
.kennzeichen { display: inline-block; margin-left: .5rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; background: var(--papier-tief);
  color: var(--nacht-weich); border: 1px solid var(--linie); border-radius: 999px;
  padding: .1rem .5rem; vertical-align: middle; }

.fotoreihe { display: flex; gap: .5rem; flex-wrap: wrap; margin: .3rem 0 .6rem; }
.fotoreihe img { width: 108px; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 3px; border: 1px solid var(--linie); display: block; }

/* Bildplatz: das aktuelle Bild links, die Auswahl rechts. Vorher stand hier eine
   Auswahlliste mit Begriffen wie „portraet" — man musste raten, was gemeint ist. */
/* Das Bild gross genug, um es auf einen Blick zu erkennen: wer tauschen soll, muss
   sehen, WAS er tauscht. Bei 190 px war es eine Briefmarke. */
.bildplatz { display: grid; grid-template-columns: 300px 1fr; gap: 1.4rem;
  align-items: start; padding: 1.4rem 0; border-top: 1px solid var(--linie); }
.bildplatz:first-child { border-top: 0; padding-top: 0; }
.bildplatz img { width: 300px; aspect-ratio: 3/2; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--linie); display: block; }
.bildplatz strong { display: block; margin-bottom: .3rem; font-size: 1.05rem; }
.bildplatz__wo { margin: 0 0 .5rem; }
.bildplatz__link { margin: 0 0 .9rem; font-size: .9rem; }
.bildplatz__link a { color: var(--azur-tief); }
/* Die Dateiauswahl steckt IM Knopf: ein „Durchsuchen…"-Feld sieht nach Formular aus,
   ein Knopf sieht nach Handlung aus. Der Kasten bleibt tastaturbedienbar, weil das
   Feld nur visuell verborgen ist und das Label es anspricht. */
.bildplatz__waehlen { display: inline-block; margin: 0 .5rem .4rem 0; cursor: pointer; }
.bildplatz__zurueck { margin-bottom: .4rem; }
.bildplatz small { display: block; }

/* Offene Änderungen unten: die Zahl steht da, wo der Knopf steht. */
.streifen p.offen { color: var(--karmin); font-weight: 700; }

@media (max-width: 640px) {
  .raster2 { grid-template-columns: 1fr; }
  .bildplatz { grid-template-columns: 1fr; }
  .bildplatz img { width: 100%; }
  .bildplatz__waehlen, .bildplatz__zurueck { display: block; width: 100%;
    text-align: center; margin-right: 0; }
  .auto__mehr { grid-column: 1 / -1; }
}


/* ---------------------------------------------------------------- Kaufblatt-Knopf
   Zwei Knoepfe nebeneinander, nicht drei untereinander: „Bearbeiten" ist das Taegliche,
   „Kaufblatt generieren" das Zweitwichtigste, und alles Seltene liegt hinter dem
   Zahnrad. Wer die Liste ueberfliegt, soll nicht zwischen gleich aussehenden Knoepfen
   suchen muessen. */
.auto__knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .55rem; }
.kb { position: relative; display: inline-flex; align-items: stretch; }
/* AUSGESCHRIEBEN, NICHT GEERBT. Die Knopfregeln des Bereichs stehen als `button.knopf` —
   ein `<a class="knopf">` erbt davon NICHTS und sah prompt aus wie ein blauer Link neben
   einem roten Kasten. Ein `<a>` ist hier trotzdem richtig: es fuehrt zu einer Seite und
   soll sich in einem neuen Reiter oeffnen lassen, wie jeder andere Verweis auch. */
.kb__auf { display: inline-flex; align-items: center; font: inherit; font-weight: 700;
  cursor: pointer; text-decoration: none; border: 1px solid var(--karmin);
  background: var(--karmin); color: #fff; padding: .45rem .8rem; font-size: .86rem;
  min-height: 38px; border-radius: var(--radius) 0 0 var(--radius); }
.kb__auf:hover { background: var(--karmin-tief); border-color: var(--karmin-tief); color: #fff; }
.kb__zahnrad { display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--karmin); border-left: 1px solid rgba(255,255,255,.34);
  cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .7rem; min-height: 38px;
  background: var(--karmin-tief); color: #fff; border-radius: 0 var(--radius) var(--radius) 0; }
.kb__zahnrad:hover { filter: brightness(1.12); }
.kb__zahnrad:focus-visible, .kb__auf:focus-visible { outline: 2px solid #0B6C99; outline-offset: 2px; }
.kb__menu { position: absolute; top: calc(100% + .4rem); right: 0; z-index: 20; width: 17rem;
  background: #fff; border: 1px solid #E2DDD8; border-radius: 6px; padding: .7rem .8rem;
  box-shadow: 0 8px 26px rgba(20,23,26,.14); }
.kb__menu a { display: block; font-weight: 600; color: #0B6C99; }
.kb__menu small { display: block; margin-top: .35rem; color: #5A6169; line-height: 1.35; }

/* ---------------------------------------------------------------- Fotos
   Die Fotoverwaltung eines Fahrzeugs. Absichtlich grossflaechig: Roberto sortiert
   hier Bilder auf einem Telefon, mit einer Hand, im Stehen auf dem Hof. Knoepfe
   unter jedem Bild statt beim Ueberfahren — Ueberfahren gibt es auf dem Telefon
   nicht, und ein Knopf, den man nicht sieht, ist keiner. */
.fotos { margin-top: 1.1rem; border-top: 1px solid var(--linie); padding-top: .9rem; }
.fotos__kopf { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .55rem; }
.fotos__zahl { color: var(--nacht-weich); font-size: .86rem; }
.fotos__leer { margin: 0; color: var(--nacht-weich); font-size: .9rem; }

.fotos__gitter { display: grid; gap: .6rem; margin-bottom: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }

.foto { position: relative; margin: 0; background: var(--papier-tief);
  border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.foto img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
/* Das Titelbild ist das eine Bild, das auf der Fahrzeugkarte und im Kaufblatt steht.
   Ein Rahmen in Markenfarbe sagt das schneller als jede Beschriftung. */
.foto--titel { border-color: var(--karmin); box-shadow: inset 0 0 0 2px var(--karmin); }
.foto--aus img { opacity: .38; filter: grayscale(1); }

.foto__marke { position: absolute; top: .35rem; left: .35rem; background: var(--karmin);
  color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; padding: .12rem .38rem; border-radius: 2px; }
.foto__marke--aus { background: var(--nacht-weich); }

.foto__knoepfe { display: flex; gap: .3rem; padding: .35rem; flex-wrap: wrap; }
.foto__knopf { flex: 1 1 auto; font: inherit; font-size: .76rem; font-weight: 600;
  padding: .3rem .35rem; border: 1px solid var(--linie); border-radius: 3px;
  background: var(--weiss); color: var(--nacht-weich); cursor: pointer; }
.foto__knopf:hover { border-color: var(--karmin); color: var(--karmin); }
.foto__knopf:focus-visible { outline: 2px solid var(--azur); outline-offset: 1px; }

.fotos__ablage { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  border: 2px dashed var(--linie); border-radius: var(--radius);
  padding: .75rem .9rem; background: var(--papier); }
.fotos__ablage--an { border-color: var(--karmin); background: #FCF4F5; }
.fotos__wink { color: var(--nacht-weich); font-size: .84rem; }
.fotos__fortschritt { color: var(--karmin); font-weight: 600; font-size: .86rem; }
/* Der Platzhalter auf der Titelkachel: sieht aus wie ein Knopf, ist keiner. */
.foto__knopf--fest { text-align: center; cursor: default; color: var(--karmin);
  border-color: transparent; background: transparent; font-weight: 700; }