/* =====================================================================
   verkauf.css  —  DAS DESIGN-SYSTEM DER .com-VERKAUFSKETTE
   =====================================================================
   Angelegt 22.07.2026 auf Max' Ansage: „Ich will ein neues System, also
   nicht ans Alte anschliessen." Es erbt bewusst NICHTS von basis.css /
   plattform.css — das Rechnungsprogramm und die Verkaufsseiten sind zwei
   Welten und sollen sich unabhaengig voneinander entwickeln koennen.

   ENTSCHIEDEN wurde es an der Entwurfstafel `designmuster-easydino-com.html`
   (Entwurf A „Werkstatt"). Alle Werte hier stammen von dort und sind dort
   in hell und dunkel, als Schreibtisch und als Handy, nachgemessen.

   WER ES LAEDT: startseite-com.html — und spaeter die alte Produktseite (Archiv),
   link-in-bio.html sowie die beiden Baukaesten. Das Muster lebt an EINER
   Stelle; wer es aendert, aendert es ueberall.

   ---------------------------------------------------------------------
   DIE FUENF REGELN, DIE HIER DRINSTECKEN (alle aus Max' Rueckmeldungen,
   jede war einmal ein Fehler):

   1. SCHRIFT IST DEUTLICH. Hell = echtes Schwarz, dunkel = echtes Weiss.
      Flieszext laeuft auf --vk-tinte, NIE auf --vk-leise — genau das hatte
      ihn grau wirken lassen.

   2. AKZENT ALS FLAECHE IST NICHT AKZENT ALS SCHRIFT.
      --vk-orange ist die FLAECHE (Marken-Orange, traegt weisse Schrift).
      --vk-orange-text ist die SCHRIFT. Gemessen: das Marken-Orange
      erreicht als Schrift auf hellem Grund nur 2.77:1 und ist unlesbar;
      --vk-orange-text kommt auf 5.69:1.

   3. ALLES, WORAUF MAN KLICKT, TRAEGT ORANGE. Hauptknoepfe gefuellt,
      alles andere mit orangem Rand und oranger Schrift. Ein Knopf, der
      aussieht wie Text, ist keiner.

   4. WERKZEUG-FARBE IST NICHT KUNDENSEITEN-FARBE. Der Hell/Dunkel-Schalter
      stellt NUR die Verkaufsseite bzw. die Bedienoberflaeche um. Eine
      Seite, die ein Kunde im Konfigurator baut, hat ihre eigene Farbe —
      dieses System fasst sie NIE an. Darum gibt es hier bewusst keine
      Regel, die auf die Kundenseiten-Klassen zielt.

   5. KEINE BETREIBERHINWEISE im Ergebnis. Erklaerungen ueber den Bau
      gehoeren in Kommentare wie diesen, nicht auf die Seite.
   ---------------------------------------------------------------------

   HELL UND DUNKEL: die Werte haengen an `:root` bzw. an
   `:root[data-theme="dark"]`. Gesetzt wird das Attribut vom Umschalter der
   Seite. Ohne jede Wahl entscheidet das Betriebssystem
   (prefers-color-scheme) — aber eine getroffene Wahl schlaegt es, in BEIDE
   Richtungen; darum steht [data-theme="light"] ausdruecklich da.
   ===================================================================== */

/* ---- Schriften: nur lokale Dateien, nichts von aussen ---- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-500.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-600.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-700.woff2) format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/space-grotesk-500.woff2) format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/space-grotesk-700.woff2) format('woff2');}

:root{
  color-scheme:light;

  /* Flaechen — warme Neutrale, das ist die Handschrift von Entwurf A */
  --vk-grund:#faf8f6;         /* die Seite */
  --vk-flaeche:#ffffff;       /* Karten, Kacheln, erhabene Felder */
  --vk-flaeche-2:#f2ede7;     /* zart abgesetzt */

  /* Schrift */
  --vk-tinte:#000000;         /* Ueberschriften UND Flieszext (Regel 1) */
  --vk-leise:#4a4440;         /* NUR Nebensachen: Fusszeile, Kleingedrucktes */

  /* Kanten — sichtbar, das ist Absicht */
  --vk-kante:#e0dad3;
  --vk-kante-stark:#000000;   /* die kraeftige Kante unter dem Kopf */

  /* Akzent (Regel 2) */
  --vk-orange:#ef7327;        /* FLAECHE */
  --vk-orange-tief:#c9560f;   /* Flaeche beim Ueberfahren */
  --vk-orange-text:#a4470c;   /* SCHRIFT, 5.69:1 auf hellem Grund */
  --vk-orange-zart:#fdeada;   /* zarte Flaeche hinter Symbolen */

  /* Form — kantig, kaum Rundung */
  --vk-radius:3px;
  --vk-radius-gross:4px;
  --vk-linie:1.5px;

  /* Schrift-Familien */
  --vk-schrift:'Inter','Segoe UI',system-ui,sans-serif;
  --vk-schrift-titel:'Space Grotesk','Inter','Segoe UI',system-ui,sans-serif;

  /* Grundmass: eine Breite fuer alle Seiten der Kette */
  --vk-mass:1180px;
}

/* Ohne getroffene Wahl folgt die Seite dem Betriebssystem. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --vk-grund:#17150f;
    --vk-flaeche:#211e18;
    --vk-flaeche-2:#2b271f;
    --vk-tinte:#ffffff;
    --vk-leise:#ddd6cd;
    --vk-kante:#3a352c;
    --vk-kante-stark:#ffffff;
    --vk-orange:#ff8b3d;
    --vk-orange-tief:#ef7327;
    --vk-orange-text:#ff8b3d;
    --vk-orange-zart:#33240f;
  }
}

/* Die getroffene Wahl schlaegt das Betriebssystem — in beide Richtungen. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --vk-grund:#17150f;
  --vk-flaeche:#211e18;
  --vk-flaeche-2:#2b271f;
  --vk-tinte:#ffffff;
  --vk-leise:#ddd6cd;
  --vk-kante:#3a352c;
  --vk-kante-stark:#ffffff;
  --vk-orange:#ff8b3d;
  --vk-orange-tief:#ef7327;
  --vk-orange-text:#ff8b3d;
  --vk-orange-zart:#33240f;
}
:root[data-theme="light"]{
  color-scheme:light;
  --vk-grund:#faf8f6;
  --vk-flaeche:#ffffff;
  --vk-flaeche-2:#f2ede7;
  --vk-tinte:#000000;
  --vk-leise:#4a4440;
  --vk-kante:#e0dad3;
  --vk-kante-stark:#000000;
  --vk-orange:#ef7327;
  --vk-orange-tief:#c9560f;
  --vk-orange-text:#a4470c;
  --vk-orange-zart:#fdeada;
}

/* =====================================================================
   GRUNDLAGEN
   ===================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--vk-grund);
  color:var(--vk-tinte);
  font-family:var(--vk-schrift);
  font-size:16px; line-height:1.6;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--vk-schrift-titel); letter-spacing:-.02em; text-wrap:balance; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--vk-orange); outline-offset:2px; }

/* =====================================================================
   DER HELL/DUNKEL-SCHALTER
   Max' Vorgabe von Anfang an: „Grundsaetzlich hell, aber es muss einen
   Dunkel-Umschalter geben." Er traegt Orange wie jedes andere Klickziel
   (Regel 3) und ist mindestens 44px HOCH — sonst trifft man ihn am Handy
   nicht. Das gilt nur fuer die Hoehe (Trefferflaeche); die Breite darf
   knapper sein als ein normaler Knopf (22.07.2026 nachts, Max: „muss
   kleiner sein, ein bisschen" — er wirkte neben den Nav-Knoepfen zu breit).
   ===================================================================== */
.vk-theme{
  display:inline-flex; align-items:center; gap:.3rem;
  min-height:44px; padding:.35rem .65rem;
  font:inherit; font-size:.85rem; font-weight:700; cursor:pointer;
  background:transparent; color:var(--vk-orange-text);
  border:var(--vk-linie) solid var(--vk-orange);
  border-radius:var(--vk-radius);
}
.vk-theme:hover{ background:var(--vk-orange-zart); }
.vk-theme__i{ font-size:.95rem; line-height:1; }

/* =====================================================================
   KNOEPFE  (Regel 3: alles Klickbare traegt Orange)
   ===================================================================== */
.vk-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  min-height:44px; padding:.65rem 1.15rem;
  font:inherit; font-size:.95rem; font-weight:700; text-decoration:none;
  border-radius:var(--vk-radius); cursor:pointer;
  border:var(--vk-linie) solid var(--vk-orange);
}
/* Der Hauptweg: gefuellt. Weisse Schrift auf Orange ist Max' ausdrueckliche
   Festlegung und bleibt so, auch wenn der Messwert dagegen spricht. */
.vk-btn--haupt{ background:var(--vk-orange); color:#ffffff; }
.vk-btn--haupt:hover{ background:var(--vk-orange-tief); border-color:var(--vk-orange-tief); }
/* Alles Weitere: Umriss, aber eindeutig als Knopf erkennbar. */
.vk-btn--zweit{ background:transparent; color:var(--vk-orange-text); }
.vk-btn--zweit:hover{ background:var(--vk-orange-zart); }

/* =====================================================================
   TEXTLINKS  (Regel 3 — alles Klickbare traegt Orange)
   22.07.2026, Max an der Startseite: „Es gibt auf dieser Seite keine
   Verlinkung." Gemessen stimmte das optisch: 14 von 16 Links waren
   schwarz, ohne Unterstreichung und ohne Orange — von normalem Text
   nicht zu unterscheiden.

   ZWEI ARTEN, je nach Ort:
     .vk-link      Ein Link MITTEN im Text oder darunter. Orange Schrift
                   plus eine kraeftige Unterstreichung — die Farbe allein
                   reicht nicht, wer sie nicht unterscheiden kann, sieht
                   sonst nichts.
     .vk-flaeche   Eine ganze Kachel oder Karte, die klickbar ist. Nur
                   der Rand wird orange; der Text darin bleibt schwarz,
                   sonst waeren ganze Absaetze in Orange.
   ===================================================================== */
.vk-link{
  display:inline-flex; align-items:center; gap:.35rem;
  min-height:44px;
  color:var(--vk-orange-text); font-weight:700; text-decoration:none;
  box-shadow:inset 0 -2px 0 var(--vk-orange);
}
.vk-link:hover{ box-shadow:inset 0 -3px 0 var(--vk-orange); }
.vk-link::after{ content:"\2192"; }          /* Pfeil: „es geht weiter" */

.vk-flaeche{
  border:var(--vk-linie) solid var(--vk-orange);
  border-radius:var(--vk-radius);
  text-decoration:none;
}
.vk-flaeche:hover{ background:var(--vk-orange-zart); }

/* =====================================================================
   KOPFZEILE  (generisch fuer jede Seite der Kette: Marke + Umschalter)
   Nicht sticky (Dauerregel). Der Umschalter traegt .vk-theme, siehe oben.
   ===================================================================== */
.vk-kopf{ border-bottom:2px solid var(--vk-kante-stark); }
.vk-kopf-innen{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.5rem;
  padding-block:.9rem;
}
.vk-marke{
  font-family:var(--vk-schrift-titel); font-weight:700; font-size:1.15rem;
  letter-spacing:-.02em; margin-right:auto; text-decoration:none; color:inherit;
}

/* =====================================================================
   GRUNDMASS + ABSCHNITT  (eine Breite/ein Rhythmus fuer alle Seiten)
   ===================================================================== */
.vk-mass{ width:100%; max-width:var(--vk-mass); margin:0 auto; padding-inline:clamp(1rem,4vw,2.25rem); }
.vk-abschnitt{ padding-block:clamp(1.8rem,4vw,3rem); }

/* =====================================================================
   PLATZHALTER-KACHEL  (Vorlagen-Raster, BEVOR es echte Vorlagen/Links gibt)
   Bewusst OHNE orangen Rand: Regel 3 gilt auch umgekehrt — was nicht
   klickbar ist, darf nicht wie ein Klickziel aussehen (kein href, kein
   cursor:pointer). Sobald echte Vorlagen samt Verlinkung existieren, wird
   daraus eine .vk-flaeche/.sf-kachel — diese Klasse faellt dann weg.
   ===================================================================== */
.vk-galerie{
  display:grid; gap:12px; list-style:none; margin:0; padding:0;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,138px),1fr));
}
.vk-galerie>li{ display:flex; }
.vk-platzkachel{
  flex:1; display:flex; flex-direction:column; gap:.6rem;
  padding:8px 8px 12px;
  border:var(--vk-linie) solid var(--vk-kante);
  border-radius:var(--vk-radius);
  background:var(--vk-flaeche);
}
.vk-platzkachel__vs{
  display:block; height:96px; border-radius:var(--vk-radius);
  background:var(--vk-flaeche-2);
}
.vk-platzkachel__name{ font-size:.84rem; font-weight:600; }