/*
 * css/clickro-ui.css
 *
 * DAS GEMEINSAME DESIGNSYSTEM DER GESAMTEN WEBSITE.
 *
 * WARUM DIESE DATEI EXISTIERT
 * Die Website steht auf einem gekauften ThemeForest-Restaurant-Theme ("Crafto /
 * pizza-parlor"). Dessen CSS-Kette (vendors.min.css + icon.min.css + style.css +
 * responsive.css + pizza-parlor.css) ist zusammen ueber 1,4 MB gross und bringt eine
 * visuelle Sprache aus der Theme-Generation um 2019 mit: rechteckige Buttons
 * (border-radius: 0), Flaechenschrift in Versalien mit Sperrung, Eingabefelder ohne
 * Radius, deren Text in --medium-gray steht, und ein Hover-Zustand fuer den
 * Haupt-Button, der ihn transparent macht. Genau das erzeugt den Eindruck
 * "altmodisch, farblos, nicht hochwertig".
 *
 * Diese Datei ist die Antwort darauf. Sie laedt auf JEDER Seite als LETZTES
 * Stylesheet und ist damit die hoechste Autoritaet. Sie tut zwei Dinge:
 *
 *   1. Sie definiert ein vollstaendiges Token-System (Farbe, Typografie, Abstand,
 *      Radius, Schatten, Bewegung) unter dem Praefix --ck-*. Alles, was danach
 *      gestaltet wird - auch order/css/order.css - greift ausschliesslich auf diese
 *      Tokens zu. Dadurch ist "konsistent" keine Absicht mehr, sondern eine
 *      Eigenschaft der Codebasis.
 *
 *   2. Sie ueberschreibt die veralteten Theme-Komponenten (Button, Formularfeld,
 *      Karte, Badge, Fokusring) an EINER Stelle. Eine Regel hier verbessert
 *      Startseite, ueber-uns, Kontakt und Bestellstrecke gleichzeitig - deshalb war
 *      das der einzige Weg, ein "konsistentes Gesamtsystem" zu bekommen, ohne
 *      100 KB Theme-Markup neu zu schreiben.
 *
 * WARUM DAS THEME NICHT ENTFERNT WIRD
 * Es liefert das Bootstrap-Grid (.container/.row/.col-*), die Navigationsmechanik
 * (.navbar-collapse) und die Icon-Schrift, die das Markup aller Seiten benutzt. Es
 * herauszuziehen waere ein Komplettneubau der Marketingseiten mit hohem
 * Regressionsrisiko und ohne sichtbaren Mehrwert - das Theme ist unter dieser Datei
 * nur noch Layout-Infrastruktur, nicht mehr die Optik.
 *
 * SCHRIFT-ENTSCHEIDUNG (bewusst zweigeteilt)
 * Marketing-Chrome (Logo, Navigation, Hero-Schlagzeilen) behaelt 'Antonio' - das ist
 * Markencharakter, kein Theme-Rest. Alles TRANSAKTIONALE (Bestellstrecke,
 * Formulare, Buttons, Preise, Warenkorb) laeuft auf dem System-Font-Stack. Auf
 * iPhone/Mac ist das echtes SF Pro, also exakt die Typografie, die der Nutzer aus
 * seinen Apps kennt - das ist der groesste Einzelbeitrag zum iOS-Gefuehl und kostet
 * keinen einzigen Byte Webfont. Zahlen laufen zusaetzlich auf Tabellenziffern, damit
 * Preisspalten nicht zappeln.
 */

/* =====================================================================================
   1. TOKENS
   Eine einzige Quelle fuer jede visuelle Entscheidung.
===================================================================================== */
:root {
  /* --- Marke -----------------------------------------------------------------
     Das Rot bleibt das Rot des Betriebs. Es ist gegenueber dem Theme-Wert
     (#bd1f17) nur minimal angehoben, damit es auf Weiss satter sitzt und den
     AA-Kontrast fuer Text sicher erreicht - das ist Feinschliff, KEIN Rebranding.
     Neu ist nicht die Farbe, sondern dass es endlich eine Skala dazu gibt: ohne
     Tint- und Shade-Stufen muss jede Hervorhebung die Vollfarbe nehmen, und genau
     daran wirken Oberflaechen schnell schreiend statt hochwertig. */
  --ck-brand: #c0211a;
  --ck-brand-hover: #a91c16;
  --ck-brand-active: #8f1712;
  --ck-brand-soft: #fdf2f1;
  --ck-brand-soft-2: #fae4e2;
  --ck-brand-border: #f0d3d0;
  --ck-brand-ink: #7c1410;

  /* --- Neutrale Toene -------------------------------------------------------
     Warm gehalten (leicht ins Gelbliche verschoben) statt neutralgrau. Warme
     Neutraltoene lassen Speisen appetitlicher wirken und harmonieren mit dem Rot;
     ein kaltes Blaugrau wuerde daneben schmutzig aussehen. */
  --ck-ink: #17161a;
  --ck-ink-2: #55524e;
  --ck-ink-3: #85807a;
  --ck-ink-4: #a8a29b;
  --ck-line: #e7e4de;
  --ck-line-soft: #f1efeb;
  --ck-surface: #ffffff;
  --ck-surface-2: #faf9f7;
  --ck-surface-3: #f2f0ec;
  --ck-bg: #f6f5f2;

  /* --- Semantik -------------------------------------------------------------
     Fehlerrot ist bewusst dunkler und entsaettigter als das Markenrot. Bei einer
     roten Marke ist das der einzige Weg, "Aktion" und "Problem" auseinander zu
     halten, ohne die Marke zu verlassen: Fehler erscheinen immer als Text auf
     weicher Flaeche mit Randakzent, Aktionen immer als gefuellte Flaeche. */
  --ck-success: #0f8a5f;
  --ck-success-soft: #e9f7f1;
  --ck-success-border: #c8ead9;
  --ck-warn: #a76a10;
  --ck-warn-soft: #fdf5e8;
  --ck-warn-border: #f2e0bd;
  --ck-danger: #a3211b;
  --ck-danger-soft: #fdf1f0;
  --ck-danger-border: #f2d2cf;

  /* --- Typografie -----------------------------------------------------------  */
  --ck-font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Inter", "Schibsted Grotesk", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ck-font-brand: "Antonio", var(--ck-font-ui);

  /* Negative Sperrung auf grossen Graden ist der Trick, der Fliesstext-Schrift
     wie eine Display-Schrift aussehen laesst - iOS macht genau das. */
  --ck-tracking-tight: -0.022em;
  --ck-tracking-snug: -0.014em;
  --ck-tracking-normal: 0;

  /* --- Abstand (4-px-Raster) ------------------------------------------------- */
  --ck-1: 4px;
  --ck-2: 8px;
  --ck-3: 12px;
  --ck-4: 16px;
  --ck-5: 20px;
  --ck-6: 24px;
  --ck-7: 28px;
  --ck-8: 32px;
  --ck-10: 40px;
  --ck-12: 48px;
  --ck-14: 56px;
  --ck-16: 64px;
  --ck-20: 80px;
  --ck-24: 96px;

  /* --- Radien ---------------------------------------------------------------
     iOS-Staerken: gross genug um weich zu wirken, klein genug um nicht kindlich
     zu werden. Der Sprung von 0 (Theme) auf diese Werte ist die sichtbarste
     Einzelaenderung des ganzen Redesigns. */
  --ck-r-xs: 8px;
  --ck-r-sm: 10px;
  --ck-r-md: 14px;
  --ck-r-lg: 18px;
  --ck-r-xl: 22px;
  --ck-r-2xl: 28px;
  --ck-r-pill: 999px;

  /* --- Schatten -------------------------------------------------------------
     Immer mehrschichtig: eine harte, fast unsichtbare Kontaktkante plus ein
     weiter, sehr schwacher Streuschatten. Ein einzelner grosser Schatten ist
     genau das, was billig aussieht. */
  --ck-shadow-xs: 0 1px 2px rgba(23, 22, 26, 0.05);
  --ck-shadow-sm: 0 1px 2px rgba(23, 22, 26, 0.04), 0 2px 6px rgba(23, 22, 26, 0.05);
  --ck-shadow-md: 0 1px 2px rgba(23, 22, 26, 0.04), 0 8px 20px rgba(23, 22, 26, 0.07);
  --ck-shadow-lg: 0 2px 6px rgba(23, 22, 26, 0.05), 0 18px 40px rgba(23, 22, 26, 0.1);
  --ck-shadow-sheet: 0 -20px 50px rgba(23, 22, 26, 0.18);
  --ck-shadow-brand: 0 1px 2px rgba(143, 23, 18, 0.2), 0 8px 20px rgba(143, 23, 18, 0.22);

  /* --- Bewegung -------------------------------------------------------------
     --ck-ease ist eine iOS-typische Kurve: sehr schneller Anlauf, langes,
     weiches Ausschwingen. Sie ist der Unterschied zwischen "reagiert" und
     "fuehlt sich an". */
  --ck-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ck-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ck-dur-1: 120ms;
  --ck-dur-2: 200ms;
  --ck-dur-3: 320ms;

  /* --- Bruecke ins Theme ----------------------------------------------------
     Das Theme verwendet diese beiden Variablen an hunderten Stellen. Sie hier
     auf die neuen Tokens zu legen, zieht die Bestandsseiten in einem Schritt in
     die neue Farbwelt, ohne ihr Markup anzufassen. */
  --base-color: var(--ck-brand);
  --very-light-gray: var(--ck-bg);
}

/* =====================================================================================
   2. BASIS
===================================================================================== */

/* Randlose Kantenglaettung. Ohne -webkit-font-smoothing wirkt SF Pro auf dunklen
   Flaechen fett und ausgefressen. */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--ck-bg);
  color: var(--ck-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Verhindert den grauen Blitz beim Antippen auf iOS - eine der Kleinigkeiten,
     an denen man Web sofort von App unterscheidet. */
  -webkit-tap-highlight-color: transparent;
}

/* Zahlen mit fester Laufweite. Preise stehen ueberall in Spalten (Karte, Warenkorb,
   Summen); mit Proportionalziffern wandert das Komma zwischen den Zeilen. */
.ck-num,
.product-card__price,
.cart-panel__line-total,
.cart-bar__total,
.cart-panel__totals dd {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- Fokus: der wichtigste Accessibility-Fix ---------------------------------
   Das Theme setzt `outline: none` auf jedes Eingabefeld (style.css:1265) und
   `box-shadow: none` auf .btn:focus - danach ist mit der Tastatur nicht mehr
   erkennbar, wo man steht. Das hier ist ein sichtbarer, aber ruhiger Ring, und er
   erscheint nur bei :focus-visible, also nicht nach einem Mausklick.

   WARUM MIT `!important` UND OHNE `:where()`
   Erster Versuch war `:where(a, button, …):focus-visible`. `:where()` setzt die
   Spezifitaet bewusst auf null - genau deshalb hat die Regel gegen die
   `outline: none`-Vorgaben des Themes verloren, messbar: der fokussierte Knopf
   meldete `outline-style: none`. Ein Fokusring, der sich wegargumentieren laesst, ist
   kein Fokusring. Hier ist Durchsetzung wichtiger als eine niedrige Spezifitaet. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--ck-brand) !important;
  outline-offset: 2px !important;
}

/* Auf dunklem Grund (Kopfbereich) waere Markenrot zu schwach - dort weiss. */
header a:focus-visible,
header button:focus-visible,
footer a:focus-visible {
  outline-color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================================
   3. BUTTON-SYSTEM
   Ersetzt den Theme-Button vollstaendig. Das Theme liefert:
   border-radius: 0, text-transform: uppercase, letter-spacing: .5px,
   font-family: Antonio, border: 2px solid transparent - und einen Hover, der die
   Vollfarbe gegen "transparent + Rahmen" tauscht. Jede dieser fuenf Eigenschaften
   arbeitet gegen ein hochwertiges Erscheinungsbild, deshalb werden alle ersetzt.
===================================================================================== */
.btn {
  font-family: var(--ck-font-ui);
  font-weight: 590; /* SF Pro kennt echte 590er-Achse; Fallbacks runden auf 600 */
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: var(--ck-tracking-snug);
  text-transform: none;
  border: 1px solid transparent;
  border-radius: var(--ck-r-md);
  padding: 14px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ck-2);
  min-height: 50px;
  cursor: pointer;
  /* Nur die Eigenschaften animieren, die sich wirklich aendern. `transition: all`
     (Theme) zieht Layout-Eigenschaften mit und ruckelt auf schwachen Geraeten. */
  transition: background-color var(--ck-dur-1) var(--ck-ease-out),
    border-color var(--ck-dur-1) var(--ck-ease-out),
    color var(--ck-dur-1) var(--ck-ease-out),
    box-shadow var(--ck-dur-2) var(--ck-ease-out),
    transform var(--ck-dur-1) var(--ck-ease-out);
}

/* Taktiles Drucken statt Farbwechsel. Das ist der iOS-Griff: die Flaeche gibt
   minimal nach und federt zurueck. */
.btn:active {
  transform: scale(0.975);
}

.btn:disabled,
.btn.disabled {
  opacity: 1; /* Theme dimmt pauschal - stattdessen echte, ruhige Deaktiv-Farben */
  background-color: var(--ck-surface-3);
  border-color: transparent;
  color: var(--ck-ink-4);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* Die Theme-Groessenklassen bleiben im Markup gueltig, bekommen aber neue Werte. */
.btn.btn-very-small { min-height: 36px; padding: 8px 14px; font-size: 14px; border-radius: var(--ck-r-sm); }
.btn.btn-small      { min-height: 42px; padding: 10px 18px; font-size: 15px; border-radius: var(--ck-r-sm); }
.btn.btn-medium     { min-height: 46px; padding: 12px 20px; font-size: 15px; }
.btn.btn-large      { min-height: 52px; padding: 15px 26px; font-size: 16px; }
.btn.btn-extra-large{ min-height: 58px; padding: 18px 32px; font-size: 17px; }

/* Radius-Varianten des Themes auf das neue Radius-System umgelegt. */
.btn.btn-round-edge,
.btn.btn-round-edge-small { border-radius: var(--ck-r-md); }
.btn.btn-rounded,
.btn.btn-rounded.btn-medium,
.btn.btn-rounded.btn-large,
.btn.btn-rounded.btn-small,
.btn.btn-rounded.btn-very-small,
.btn.btn-rounded.btn-extra-large { border-radius: var(--ck-r-pill); }

/* --- Primaer -------------------------------------------------------------- */
.btn.btn-base-color {
  background-color: var(--ck-brand);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--ck-shadow-brand);
}
/* Der Theme-Hover machte den wichtigsten Button der Seite transparent - also
   optisch schwaecher, genau im Moment der Absicht. Jetzt wird er dunkler und hebt
   sich leicht an. */
.btn.btn-base-color:hover,
.btn.btn-base-color:focus {
  background-color: var(--ck-brand-hover);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--ck-shadow-brand), 0 0 0 1px rgba(143, 23, 18, 0.06);
}
.btn.btn-base-color:active {
  background-color: var(--ck-brand-active);
  border-color: transparent;
  color: #fff;
}
.btn.btn-base-color:disabled,
.btn.btn-base-color.disabled {
  background-color: var(--ck-surface-3);
  color: var(--ck-ink-4);
  box-shadow: none;
}

/* --- Sekundaer / dunkel --------------------------------------------------- */
.btn.btn-dark-gray {
  background-color: var(--ck-ink);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--ck-shadow-sm);
}
.btn.btn-dark-gray:hover,
.btn.btn-dark-gray:active {
  background-color: #000;
  border-color: transparent;
  color: #fff;
}

/* --- Umriss --------------------------------------------------------------- */
.btn.btn-transparent-base-color,
.btn.btn-border-base-color {
  background-color: transparent;
  border-color: var(--ck-brand-border);
  color: var(--ck-brand);
}
.btn.btn-transparent-base-color:hover,
.btn.btn-border-base-color:hover {
  background-color: var(--ck-brand-soft);
  border-color: var(--ck-brand-border);
  color: var(--ck-brand-hover);
}

/* --- Auf dunklem Grund (Header) ------------------------------------------- */
.btn.btn-black-transparent-light {
  background-color: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
  /* Glasfläche statt Grauschleier - das ist der Header-Button-Look von iOS. */
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}
.btn.btn-black-transparent-light:hover,
.btn.btn-black-transparent-light:active {
  background-color: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

/* Theme-Buttons kapseln ihren Text in .btn-text/.btn-icon fuer eine
   Hover-Animation. Das Flex-Layout oben zerlegt diese Verschachtelung, deshalb
   hier wieder zusammenfuehren. */
.btn .btn-text,
.btn .btn-icon {
  display: inline-flex;
  align-items: center;
}
.btn i {
  margin-left: 0;
  font-size: 1.05em;
}

/* =====================================================================================
   4. FORMULAR-SYSTEM
   Zwei echte Defekte des Themes werden hier behoben:
   (a) getippter Text erscheint in --medium-gray, also ausgegraut wie ein
       Platzhalter - der Nutzer sieht seine eigene Eingabe schwaecher als sie ist;
   (b) der Fokus aendert nur die Randfarbe um eine Nuance, was auf einem Handy
       praktisch unsichtbar ist.
===================================================================================== */
input,
select,
textarea,
.form-control,
.form-select {
  font-family: var(--ck-font-ui);
  font-size: 16px; /* unter 16px zoomt iOS beim Fokus in das Feld hinein */
  line-height: 1.4;
  color: var(--ck-ink);
  background-color: var(--ck-surface);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-r-md);
  padding: 14px 16px;
  min-height: 52px;
  box-shadow: none;
  transition: border-color var(--ck-dur-1) var(--ck-ease-out),
    box-shadow var(--ck-dur-1) var(--ck-ease-out),
    background-color var(--ck-dur-1) var(--ck-ease-out);
}

textarea,
textarea.form-control {
  min-height: 104px;
  padding-top: 13px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
  color: var(--ck-ink);
  border-color: var(--ck-brand);
  background-color: var(--ck-surface);
  /* Weicher Markenhalo statt Systemring: deutlich sichtbar, aber nicht laut. */
  box-shadow: 0 0 0 3.5px var(--ck-brand-soft-2) !important;
}

::-webkit-input-placeholder { color: var(--ck-ink-4) !important; }
::-moz-placeholder { color: var(--ck-ink-4) !important; opacity: 1; }
:-ms-input-placeholder { color: var(--ck-ink-4) !important; }
::placeholder { color: var(--ck-ink-4) !important; }

.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--ck-danger) !important;
  box-shadow: 0 0 0 3.5px var(--ck-danger-soft) !important;
}

/* Eigener Pfeil fuer <select>. Der Theme-Pfeil ist ein Hintergrundbild mit
   `background-position: right 20px center !important` und passt nicht zum neuen
   Innenabstand. */
select,
.form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2385807a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 14px 9px !important;
  padding-right: 44px;
}

/* =====================================================================================
   5. KARTEN, BADGES, TRENNER
   Wiederverwendbare Bausteine, die sowohl die Marketingseiten als auch die
   Bestellstrecke nutzen. Ohne sie wuerde jede Seite ihre eigene Karte erfinden -
   das ist die Ursache der Rueckmeldung "nicht konsistent".
===================================================================================== */
.ck-card {
  background-color: var(--ck-surface);
  border: 1px solid var(--ck-line-soft);
  border-radius: var(--ck-r-lg);
  box-shadow: var(--ck-shadow-sm);
}

.ck-card--flat {
  box-shadow: none;
  border-color: var(--ck-line);
}

.ck-card--interactive {
  transition: box-shadow var(--ck-dur-2) var(--ck-ease-out),
    transform var(--ck-dur-2) var(--ck-ease-out),
    border-color var(--ck-dur-2) var(--ck-ease-out);
}
.ck-card--interactive:hover {
  box-shadow: var(--ck-shadow-md);
  border-color: var(--ck-line);
  transform: translateY(-2px);
}

.ck-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ck-font-ui);
  font-size: 13px;
  font-weight: 590;
  line-height: 1;
  letter-spacing: var(--ck-tracking-normal);
  padding: 7px 11px;
  border-radius: var(--ck-r-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}
.ck-badge--brand   { background: var(--ck-brand-soft);   color: var(--ck-brand-ink); border-color: var(--ck-brand-border); }
.ck-badge--success { background: var(--ck-success-soft);  color: var(--ck-success);   border-color: var(--ck-success-border); }
.ck-badge--warn    { background: var(--ck-warn-soft);     color: var(--ck-warn);      border-color: var(--ck-warn-border); }
.ck-badge--neutral { background: var(--ck-surface-3);     color: var(--ck-ink-2);     border-color: var(--ck-line); }

.ck-hairline {
  height: 1px;
  background: var(--ck-line-soft);
  border: 0;
  margin: 0;
}

/* =====================================================================================
   6. MARKETINGSEITEN: gezielter Feinschliff
   Kein Neubau - nur die Stellen, die den "altes Theme"-Eindruck tragen.
===================================================================================== */

/* Fliesstext bekommt die UI-Schrift und eine ruhigere Farbe. Die Hero-Schlagzeilen
   auf .alt-font (Antonio) bleiben absichtlich unberuehrt - das ist Markencharakter. */
body,
p,
li,
td,
label,
.fs-17,
.fs-18,
.fs-19 {
  font-family: var(--ck-font-ui);
}

p {
  color: var(--ck-ink-2);
  letter-spacing: var(--ck-tracking-normal);
}

/* Grosse Schlagzeilen: Sperrung enger ziehen. Das Theme setzt .ls-minus-1px als
   festen Pixelwert, der auf kleinen Graden zu eng und auf grossen zu weit ist -
   ein relativer Wert skaliert korrekt mit. */
h1, h2, h3, h4, h5, h6 {
  color: var(--ck-ink);
  letter-spacing: var(--ck-tracking-tight);
}

/* Theme-Karten (Speisen, Kategorien, Bewertungen) auf das neue Karten-Gefuehl. */
.box-shadow,
.box-shadow-large,
.box-shadow-extra-large,
.box-shadow-double-large {
  box-shadow: var(--ck-shadow-md) !important;
}

.border-radius-4px  { border-radius: var(--ck-r-sm) !important; }
.border-radius-6px  { border-radius: var(--ck-r-md) !important; }
.border-radius-8px  { border-radius: var(--ck-r-md) !important; }

/* Der Footer war reines Dunkelgrau ohne Struktur. Eine feine Oberkante trennt ihn
   vom Inhalt, ohne eine harte Linie zu ziehen. */
footer {
  background-color: var(--ck-ink);
  color: var(--ck-ink-4);
}
footer a {
  transition: color var(--ck-dur-1) var(--ck-ease-out);
}
footer a:hover {
  color: #fff;
}

/* Navigation: etwas weniger Sperrung, damit die Versalien nicht auseinanderfallen. */
.center-logo .navbar-nav .nav-link {
  font-size: 17px;
  letter-spacing: 0.2px;
}

/* Der aktive Navigationspunkt war optisch SCHWAECHER als die inaktiven (das Theme
   dimmt .active), also genau umgekehrt zur Erwartung. Er bekommt jetzt volle
   Deckkraft und einen Markenstrich darunter - so ist auf einen Blick erkennbar, wo
   man sich befindet. */
header .navbar-nav .nav-link.active {
  position: relative;
  color: #fff !important;
  opacity: 1 !important;
  font-weight: 600;
}
header .navbar-nav .nav-link.active::after {
  content: "";
  position: absolute;
  /* Innerhalb des Linkkastens, dicht unter der Schrift. Der Navigationslink hat
     kraeftigen Innenabstand nach unten - ein negativer Wert setzte den Strich rund
     35 px unter den Text und liess ihn frei schweben. */
  left: 0;
  right: 0;
  bottom: 6px;
  height: 2px;
  border-radius: var(--ck-r-pill);
  background: var(--ck-brand);
}

/* Die Telefonnummer im Kopfbereich brach in zwei Zeilen um ("07153" / "9297300") und
   machte den Kopf dadurch 79 px hoch. Eine Rufnummer darf nie umbrechen - halb
   gelesen ist sie wertlos. */
header .menu-logo .widget-text {
  white-space: nowrap;
}
header .menu-logo .widget-text a {
  white-space: nowrap;
}


/* =====================================================================================
   7. WORTMARKE
   Ersetzt das bisherige Kopf- und Fussbereich-Logo auf ALLEN Seiten.

   WARUM UEBERHAUPT
   Unter dem Dateinamen `images/demo-pizza-parlor-logo-white.png` lag nicht das
   Theme-Demo-Logo, sondern das Wappen eines ANDEREN Betriebs: ein Stierkopf-Emblem
   mit den Schriftzuegen "Pizza Pasta" und "Haus des Fildern". Dieses Bild stand im
   Kopfbereich und im Fussbereich jeder einzelnen Seite - also die fremde Marke an der
   prominentesten Stelle der eigenen Website. Das ist kein Stilproblem, sondern eine
   falsche Absenderangabe, und es war der Grund, hier einzugreifen.

   WARUM TYPOGRAFIE UND KEIN BILDLOGO
   Es liegt kein echtes Schlemmer-Logo vor. Ein Emblem zu zeichnen hiesse, eine
   Bildmarke zu erfinden, die der Betrieb nie beschlossen hat - und die er auf
   Speisekarte, Karton und Schild nicht einloesen kann. Eine reine Wortmarke behauptet
   nichts: sie nennt den Namen. Sie ist ausserdem scharf auf jedem Display, skaliert
   ohne zweite Bilddatei fuer Retina und kostet 0 Byte Netzwerklast (das PNG waren
   436 KB pro Seitenaufruf, plus 1,1 MB fuer die @2x-Variante).

   AUFBAU
   Gewichtskontrast statt Dekoration: "SCHLEMMER" traegt in 700, "PIZZA" laeuft in 300
   nach. Das ist der Kunstgriff, der eine Zeile Text wie ein gesetztes Logo aussehen
   laesst, und er kommt ohne Effekt, Schatten oder Rahmen aus.

   VERWORFEN: MARKEN-PUNKT
   Zwischenstand war ein roter Schlusspunkt hinter "PIZZA". Im Browser gemessen war er
   unbrauchbar: der Kopfbereich der Startseite liegt ueber einem roten Buehnenbild
   (#b92c1e), und ein 5 px grosser Punkt in Markenrot (#c0211a) verschwindet darauf
   restlos - er las sich als Staubkorn auf dem Bildschirm, nicht als Akzent. Ein
   Markenzeichen, das genau auf der eigenen Hausfarbe unsichtbar wird, ist keins.
   Weiss statt Rot haette funktioniert, waere aber nur noch Satzzeichen ohne
   Markenbezug gewesen. Deshalb ersatzlos gestrichen: der Gewichtskontrast traegt die
   Zeile allein, und die Wortmarke funktioniert damit auf JEDEM Untergrund.
===================================================================================== */
.ck-wordmark {
  /* Das Theme setzt `font-size: 0` auf .navbar-brand, um den Zwischenraum zwischen
     den drei Logo-Bildern zu schlucken. Ohne diesen Reset ist die Wortmarke
     buchstaeblich 0 Pixel gross und damit unsichtbar. */
  font-family: var(--ck-font-brand);
  font-size: 25px;
  line-height: 1;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
  white-space: nowrap; /* Ein umbrechender Markenname ist kein Markenname. */
  display: inline-flex;
  align-items: baseline;
  gap: 0.26em;
  /* Optischer Ausgleich: Versalien in Antonio sitzen hoch im Kasten, wodurch die
     Zeile gegenueber der Navigation zu hoch wirkte. */
  padding-top: 2px;
}

.ck-wordmark__strong {
  font-weight: 700;
  letter-spacing: -0.2px;
}

/* Kopfbereich: das Theme staffelt drei Bildvarianten (default/alt/mobile) ueber
   visibility und width. Die Wortmarke braucht diese Staffelung nicht - eine
   Textzeile ist auf jedem Grund dieselbe. Deshalb steht im Markup nur noch EIN
   Element, und die Umschaltregeln des Themes laufen ins Leere. */
header .navbar-brand .ck-wordmark {
  font-size: 26px;
}

/* --- Platz in der Mitte der Navigation --------------------------------------
   Das Theme-Layout `center-logo` setzt die Marke mit `position: absolute; left: 50%`
   in die MITTE der Navigationsleiste und laesst die Menuepunkte links und rechts
   daran vorbeilaufen (.navbar-left/.navbar-right, je `width: 42%`). Bei einem
   quadratischen Logo von 46 px Breite ging das auf.

   Die Wortmarke ist rund 215 px breit - gemessen im Browser, nicht geschaetzt. Damit
   lief sie unter "MENÜ" und "ÜBER UNS" hindurch: die Schriftzuege lagen sichtbar
   uebereinander. Absolut positionierte Elemente belegen keinen Platz im Fluss, also
   kann das Layout diesen Konflikt nicht selbst loesen - die Luecke muss reserviert
   werden.

   Die Reserve entsteht hier ueber die Breite der beiden Menuespalten, nicht ueber
   Innenabstand: schmalere Spalten ziehen ihre rechts- bzw. linksbuendigen Punkte von
   der Mitte weg, ohne die Ausrichtung der Punkte untereinander zu aendern. */
@media (min-width: 992px) {
  header .center-logo .navbar-nav.navbar-left,
  header .center-logo .navbar-nav.navbar-right {
    width: 35%;
  }
}

/* Zwischen 992 und 1199 px ist die Leiste schmaler, die Menuepunkte laufen aber in
   fast gleicher Groesse - hier ist die Mitte der Engpass. Eine Stufe kleiner setzen
   statt die Punkte weiter zu draengen. */
@media (min-width: 992px) and (max-width: 1199px) {
  header .navbar-brand .ck-wordmark {
    font-size: 21px;
    letter-spacing: 0.2px;
  }
  header .center-logo .navbar-nav.navbar-left,
  header .center-logo .navbar-nav.navbar-right {
    width: 33%;
  }
}

/* Fussbereich: etwas grosszuegiger, hier ist die Wortmarke Absender und nicht
   Navigationsanker. */
footer .footer-logo .ck-wordmark {
  font-size: 30px;
}
footer .footer-logo {
  display: inline-block;
  text-decoration: none;
}

/* Mobil (das Theme schaltet bei 767px auf die Mobilvariante um).

   WAS HIER SCHIEFGING
   Das alte Logo war ein quadratisches Bild von rund 46 px Breite. Die Kopfzeile ist
   eine Flex-Zeile mit `flex-wrap: wrap` und drei Kindern: Marke, Menuetaste,
   Bestellknopf. Mit 46 px passten alle drei bequem in eine Zeile. Die Wortmarke ist
   142 px breit - damit ueberschritt die Summe die 360 px Inhaltsbreite eines iPhone,
   und die Menuetaste ist in eine ZWEITE Zeile umgebrochen. Ergebnis: ein rund 300 px
   hoher Kopfbereich mit einer freistehenden Menuetaste unter der Marke. Das war ein
   von dieser Aenderung verursachter Defekt, kein Alt-Zustand.

   WIE ES GELOEST IST
   Drei Eingriffe, alle nur unter 767px:
   1. Umbruch verboten - die Kopfzeile ist eine Zeile, oder sie ist kaputt.
   2. Die Wortmarke eine Stufe kleiner (20px = 129px Breite).
   3. Der Bestellknopf kompakter gesetzt. Sein Text bleibt vollstaendig
      ("Online bestellen"); nur Schriftgrad und Innenabstand geben nach. Den
      wichtigsten Knopf der Seite zu kuerzen waere der falsche Sparposten.
   4. Die Menuetaste per `order` an das Zeilenende. Zwischen Marke und Bestellknopf
      eingeklemmt sah sie wie ein Versehen aus; rechts aussen ist die Stelle, an der
      sie auf jedem Handy erwartet wird.
   Gemessen bleiben danach rund 38 px Luft - siehe .scratch/measure-header.mjs. */
@media (max-width: 767px) {
  header .navbar > .container-fluid {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: var(--ck-2);
  }
  header .navbar > .container-fluid > .menu-logo {
    flex: 0 1 auto;
    min-width: 0;
  }
  /* Die Spalte mit der Menuetaste darf nicht mitwachsen - sie enthaelt zusaetzlich
     das eingeklappte Navigationsmenue, das sonst Breite beansprucht. */
  header .navbar > .container-fluid > .menu-order {
    flex: 0 0 auto;
    order: 3;
  }
  header .navbar > .container-fluid > .text-end {
    flex: 0 0 auto;
    order: 2;
    margin-left: auto;
  }
  header .navbar-toggler {
    float: none !important;
    margin: 0;
  }

  header .navbar-brand .ck-wordmark {
    font-size: 20px;
  }
  footer .footer-logo .ck-wordmark {
    font-size: 26px;
  }

  header .header-button .btn {
    font-size: 14px;
    padding: 10px 16px;
    min-height: 44px;
  }
}

/* Sehr schmale Geraete. Unter 400 px reicht die Zeile auch kompakt gesetzt nicht:
   gemessen ueberlappte der Bestellknopf die Wortmarke bei 360 px um 2 px und bei
   320 px um 28 px. Gestrichen wird das Beiwerk, nicht die Aussage - das
   Einkaufstaschen-Symbol entfaellt, der Text "Online bestellen" bleibt. Ein Knopf,
   der nur noch ein Symbol zeigt, ist auf der wichtigsten Handlung der Seite ein
   schlechter Tausch. */
@media (max-width: 400px) {
  header .header-button .btn {
    font-size: 13px;
    padding: 9px 13px;
    /* 44 px ist das Mindestmass fuer sicher treffbare Tippziele. Beim Kompaktsetzen
       war der Knopf auf 40 px gerutscht - gemessen, und beim wichtigsten Knopf der
       Seite die falsche Stelle zum Sparen. Die Breite gibt stattdessen ueber den
       Innenabstand nach. */
    min-height: 44px;
  }
  header .header-button .btn .btn-icon {
    display: none;
  }
  header .header-button .btn {
    gap: 0;
  }
}

@media (max-width: 359px) {
  header .navbar-brand .ck-wordmark {
    font-size: 17px;
    letter-spacing: 0.2px;
  }
}

/* =====================================================================================
   8. BILDFLAECHEN (Portraits und Sachaufnahmen auf den Marketingseiten)

   Zweck: eine EINZIGE Bildkomponente fuer ueber-uns und Kontakt, damit nicht jede
   Seite ihren eigenen Rahmen, Radius und Schatten erfindet. Das Theme loeste
   Bildflaechen mit frei positionierten, ueberlappenden Kaesten (`position: absolute`
   plus `bottom-minus-20px`) - auf 390 px Breite rutschten die dabei uebereinander.
   Diese Komponente ist stattdessen ein normaler Flusskasten mit festem
   Seitenverhaeltnis.
===================================================================================== */
.ck-figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--ck-r-2xl);
  background: var(--ck-surface-3);
  box-shadow: var(--ck-shadow-lg);
  margin: 0;
}

.ck-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bei Portraits entscheidet die Position darueber, ob ein Gesicht angeschnitten
     wird. `center top` haelt den Kopf im Bild, wenn die Flaeche niedriger wird als
     das Bild hoch ist - der haeufigste Fall auf dem Handy. */
  object-position: center top;
}

/* Sachaufnahmen von oben (Speisen) sollen mittig beschnitten werden - bei ihnen gibt
   es keinen Kopf, der oben bleiben muss, und der Teller sitzt in der Bildmitte. */
.ck-figure--landscape img {
  object-position: center center;
}

/* Portraet: hochkant im native Seitenverhaeltnis der gelieferten Aufnahmen.
   Die drei Chef-Aufnahmen sind 1122x1402 Pixel, also exakt 4:5. Der Rahmen bekommt
   dasselbe Verhaeltnis, damit `object-fit: cover` NICHTS abschneiden muss - das ist
   der einzige Zuschnitt, der bei diesen Bildern ohne Verlust funktioniert. */
.ck-figure--portrait {
  aspect-ratio: 4 / 5;
}

/* Sachaufnahme/Handwerk: liegend, ruhiger im Seitenfluss. */
.ck-figure--landscape {
  aspect-ratio: 4 / 3;
}

@media (max-width: 767px) {
  .ck-figure {
    border-radius: var(--ck-r-xl);
  }
  /* VERWORFEN: Portraets auf dem Handy auf 1:1 stauchen.
     Der Gedanke war, den Aufruf zum Bestellen hoeher auf die Seite zu holen. Mit den
     echten Aufnahmen ist das falsch: bei allen drei reicht das Motiv ueber die GANZE
     Bildhoehe - Gesicht oben, Pizza unten. Ein 1:1-Zuschnitt haette bei 20 % Verlust
     genau den unteren Rand gekappt, also die Pizza aus "Chef mit Pizza" und die Hand
     mit dem Basilikum aus "Zubereitung". Damit waere vom Bildinhalt die Haelfte der
     Aussage weg. Das Portraet behaelt deshalb auf jeder Breite 4:5.
     Bei 358 px Inhaltsbreite ergibt das 448 px Hoehe - etwa die halbe Hoehe eines
     iPhone-Bildschirms, also weder angeschnitten noch zwei Bildschirme hoch. */
  .ck-figure--landscape {
    aspect-ratio: 3 / 2;
  }
}

/* Bildunterschrift-Zeile fuer Name und Rolle. Bewusst KEINE Overlay-Schrift im Bild:
   Text auf Foto ist auf kleinen Displays der erste Kandidat fuer Kontrastprobleme. */
.ck-person__name {
  font-family: var(--ck-font-brand);
  font-size: 30px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: var(--ck-tracking-tight);
  color: var(--ck-ink);
  margin: 0;
}

.ck-person__role {
  display: block;
  font-family: var(--ck-font-ui);
  font-size: 15px;
  font-weight: 590;
  letter-spacing: var(--ck-tracking-normal);
  color: var(--ck-brand);
  margin-top: 6px;
}

/* Benefit-Zeile: drei kurze, belegbare Punkte. Keine Kacheln mit Icons - auf dieser
   Textmenge wirken Kacheln wie Platzhalter. Eine Liste mit Haken ist ehrlicher. */
.ck-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--ck-3);
}

.ck-benefits li {
  display: flex;
  align-items: center;
  gap: var(--ck-3);
  font-family: var(--ck-font-ui);
  font-size: 17px;
  font-weight: 500;
  color: var(--ck-ink);
  letter-spacing: var(--ck-tracking-snug);
}

.ck-benefits li::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ck-brand-soft) center / 12px 9px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.6L4.3 8 11 1' fill='none' stroke='%23c0211a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  border: 1px solid var(--ck-brand-border);
}

/* Kontaktzeilen: Adresse, Telefon, E-Mail als antippbare Reihen statt als
   Fliesstext. Auf dem Handy ist eine 52 px hohe Reihe der Unterschied zwischen
   "anrufbar" und "abtippen". */
.ck-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--ck-2);
}

.ck-contact-row {
  display: flex;
  align-items: flex-start;
  gap: var(--ck-4);
  padding: var(--ck-4) 0;
  border-bottom: 1px solid var(--ck-line-soft);
}
.ck-contact-list li:last-child .ck-contact-row {
  border-bottom: 0;
}

.ck-contact-row__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--ck-r-md);
  background: var(--ck-brand-soft);
  border: 1px solid var(--ck-brand-border);
  color: var(--ck-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
}

.ck-contact-row__label {
  display: block;
  font-size: 13px;
  font-weight: 590;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ck-ink-3);
  margin-bottom: 2px;
}

.ck-contact-row__value {
  display: block;
  font-size: 18px;
  font-weight: 500;
  color: var(--ck-ink);
  letter-spacing: var(--ck-tracking-snug);
  /* Lange E-Mail-Adressen sind der einzige Grund, warum diese Spalte auf 390 px
     ueberlaufen kann. */
  overflow-wrap: anywhere;
}
a.ck-contact-row__value {
  text-decoration: none;
}
a.ck-contact-row__value:hover {
  color: var(--ck-brand);
}

/* Seitentitel der Unterseiten. Das Theme legte dafuer ein Demo-Foto
   (demo-pizza-parlor-about-title-bg.jpg) als Hintergrund unter eine 170 px hohe
   Leiste. Statt eines fremden Fotos hier eine ruhige Markenflaeche - sie ordnet die
   Seite ein, ohne mit dem Inhalt darunter um Aufmerksamkeit zu konkurrieren.

   WICHTIG - FREIRAUM FUER DIE KOPFZEILE
   Das <header>-Element ist 0 px hoch: die Navigationsleiste ist absolut positioniert
   und LIEGT UEBER dem ersten Abschnitt (so entsteht auf der Startseite der
   transparente Kopf ueber dem Buehnenbild). Der Titelbereich muss diesen Platz
   deshalb selbst freihalten.

   Das war bereits im Ausgangszustand defekt: die Theme-Klasse
   `page-title-separate-breadcrumbs` ist in KEINER Stilvorlage des Projekts definiert -
   ein toter Klassenname. Die Ueberschrift "Über uns" lag damit hinter der
   Navigation, auf ueber-uns und Kontakt gleichermassen. Die Werte unten entsprechen
   der gemessenen Leistenhoehe (98 px Desktop, 87 px Tablet, 81 px Handy). */
.ck-pagehead {
  background: linear-gradient(180deg, #201d1c 0%, var(--ck-ink) 100%);
  position: relative;
  overflow: hidden;
  /* Vollstaendige Angabe (nicht nur padding-top), damit der grosszuegige
     Standard-Innenabstand des Themes fuer <section> hier nicht durchschlaegt.
     Eine Klasse gewinnt gegen einen Elementselektor - deshalb ist dafuer kein
     !important notwendig. Die Bootstrap-Hilfsklasse `p-0` DARF an diesem Abschnitt
     nicht stehen: sie setzt `padding: 0 !important` und wuerde den Freiraum fuer die
     Navigationsleiste wieder einreissen. */
  padding: 98px 0 0;
}
.ck-pagehead__inner {
  min-height: 124px;
}
@media (max-width: 991px) {
  .ck-pagehead {
    padding-top: 87px;
  }
}
@media (max-width: 767px) {
  .ck-pagehead {
    padding-top: 81px;
  }
  .ck-pagehead__inner {
    min-height: 92px;
  }
}
.ck-pagehead::after {
  /* Sehr schwacher warmer Lichtkegel hinter der Ueberschrift. Ohne ihn ist die
     Flaeche flaches Dunkelgrau und wirkt wie ein Platzhalter. */
  content: "";
  position: absolute;
  left: 50%;
  top: -60%;
  width: 720px;
  height: 320px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(192, 33, 26, 0.28) 0%, rgba(192, 33, 26, 0) 70%);
  pointer-events: none;
}
.ck-pagehead > * {
  position: relative;
  z-index: 1;
}

/* Unterzeile des Seitentitels (z. B. "Anbieterkennzeichnung" unter "Impressum").
   Das Theme setzte sie als zweite <h2> in Gelb neben die Ueberschrift, mit einem
   senkrechten Trennstrich. Zwei Ueberschriften gleicher Groesse nebeneinander sind
   weder inhaltlich eine Hierarchie noch auf dem Handy umbruchfest - hier steht sie
   als ruhige Zeile darunter. */
.ck-pagehead__sub {
  display: block;
  font-family: var(--ck-font-ui);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: var(--ck-tracking-normal);
  color: rgba(255, 255, 255, 0.62);
  margin: var(--ck-2) 0 0;
}


/* =====================================================================================
   9. OPTIONALE BILDFLAECHEN (vom Betrieb zu lieferndes Material)

   DAS PROBLEM
   Die Abschnitte auf ueber-uns und Kontakt sind auf Portraets des Inhabers hin
   gebaut. Diese Dateien liegen dem Projekt NICHT bei - der zugesagte Ordner
   `Schlemmer_Pizza_Chef_Bilder/` ist im Arbeitsverzeichnis nicht vorhanden. Ein
   `<img>` auf eine fehlende Datei zeigt im Browser ein kaputtes Bildsymbol; das ist
   schlechter als gar kein Bild und waere auf einer veroeffentlichten Seite ein
   sichtbarer Defekt.

   DIE LOESUNG
   Die Bildspalte ist als OPTIONAL markiert (`data-ck-optional` am img). Laedt die
   Datei nicht, setzt js/optional-media.js die Klasse `ck-media-missing` auf den
   Abschnitt; die Bildspalte verschwindet dann vollstaendig und die Textspalte
   uebernimmt die volle Breite mit begrenztem Satzspiegel. Der Abschnitt bleibt in
   beiden Zustaenden ein fertiger Abschnitt - er sieht nicht aus wie ein Platzhalter,
   dem etwas fehlt.

   Sobald die Bilddateien unter images/chef/ liegen, greift ohne jede weitere
   Aenderung der gestaltete Zustand MIT Bild. Es ist kein Nachbau erforderlich,
   nur das Ablegen der Dateien.
===================================================================================== */
.ck-media-missing .ck-media-col {
  display: none !important;
}

/* Ohne Bild wird der Abschnitt EINSPALTIG UND ZENTRIERT - nicht einfach "die
   Textspalte auf volle Breite". Der erste Versuch liess den Text linksbuendig an
   seiner alten Stelle stehen; die rechte Haelfte blieb leer und der Abschnitt sah
   aus, als sei das Bild verloren gegangen. Ein zentrierter Satzspiegel liest sich
   dagegen als gewollte Gestaltung.

   Die Zeilenlaenge ist auf 62 Zeichen begrenzt: darueber verliert das Auge beim
   Zeilenwechsel den Anschluss. Der Text selbst bleibt linksbuendig - zentrierter
   Fliesstext ueber mehrere Zeilen ist schwer zu lesen, weil jede Zeile an einer
   anderen Stelle beginnt.

   `margin-left: auto` braucht !important, weil `offset-lg-1` am selben Element ein
   `margin-left: 8.33%` setzt und die Spalte sonst aus der Mitte rutscht. */
.ck-media-missing .ck-text-col {
  flex: 0 0 100% !important;
  max-width: 64ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left;
}

/* =====================================================================================
   10. ABSCHNITTS-BAUSTEINE DER MARKETINGSEITEN
===================================================================================== */

/* Kleine Ueberzeile ueber einer Ueberschrift. Das Theme loeste das mit
   `fs-22 text-uppercase` plus einem 40-px-Strich als leerem <span> - hier eine
   Komponente, damit ueber-uns und Kontakt dieselbe Ueberzeile benutzen. */
.ck-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ck-3);
  font-family: var(--ck-font-ui);
  font-size: 14px;
  font-weight: 590;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ck-brand);
  margin-bottom: var(--ck-4);
}
.ck-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: var(--ck-r-pill);
  background: var(--ck-brand);
  flex: 0 0 auto;
}

/* Abschnittsueberschrift. Antonio in Versalien, aber mit deutlich weniger Sperrung
   als im Theme - dort standen Versalien mit +0.5px Sperrung, was auf grossen Graden
   auseinanderfaellt. */
.ck-h2 {
  font-family: var(--ck-font-brand);
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.06;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ck-tracking-tight);
  color: var(--ck-ink);
  margin: 0 0 var(--ck-4);
}

/* Fliesstext im Abschnitt: eine Stufe groesser als Standard, damit die kurzen Texte
   auf ueber-uns nicht verloren wirken. */
.ck-lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ck-ink-2);
  margin: 0 0 var(--ck-5);
}
.ck-lead:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .ck-lead {
    font-size: 17px;
  }
  .ck-person__name {
    font-size: 26px;
  }
}


/* -----------------------------------------------------------------------------------
   FOOTER-CREDIT (Clickro-Branding)

   Zweite, bewusst kleinere Zeile unter dem Copyright-Hinweis im Footer. Eine eigene,
   niedrigere Schriftgroesse statt der Footer-Standardgroesse (fs-16) haelt den Hinweis
   dezent: er soll als technisches Kleingedrucktes lesbar sein, nicht als zweiter
   Werbe-Claim neben dem Betriebsnamen wirken. Der Linktext "Clickro" nutzt die
   bestehende Markenfarbe (--ck-brand) statt der umgebenden Weiss/Grau-Footerfarbe -
   eine sehr leichte, einzelne Hervorhebung, kein Button, kein Badge, keine Flaeche. */
.ck-footer-credit {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ck-ink-4);
}
.ck-footer-credit a {
  color: var(--ck-brand);
  text-decoration: none;
}
.ck-footer-credit a:hover,
.ck-footer-credit a:focus {
  text-decoration: underline;
}