/** Shopify CDN: Minification failed

Line 7601:0 Unexpected "}"

**/
/* Eigene Anpassungen für Kaffee Service Celano.
   Wird nach dem Theme-CSS geladen und überschreibt es dadurch.
   Änderungen bitte hier statt in main.css – die ist eine Build-Datei des
   Theme-Herstellers und wird bei einem Theme-Update überschrieben. */

:root {
  /* Hauptbraun – derselbe Ton wie der Footer-Hintergrund.
     Der frühere hellere Ton (#6f4a2f / #4a3020) ist abgelöst. */
  --celano-braun: #291f19;
  /* dunklere Stufe für Flächen im Hover-Zustand */
  --celano-braun-dunkel: #15100d;
  /* Highlight-Farbe für Signal-Buttons wie den Reparaturservice */
  /* Signalfarbe – am 07.10.2026 kräftiger gestellt (vorher #b55e39/#9a4f30) */
  --celano-highlight: #cf5420;
  /* Espressotasse für die Plakette im Reparaturablauf. */
  --ksc-tasse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8h13v5a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5V8Zm13 1h2.2a2.3 2.3 0 0 1 0 4.6H17V9ZM3 20.5h15v1.6H3v-1.6Z'/%3E%3C/svg%3E");
  /* Sternform für halbe Sterne im Google-Abzeichen. Als Maske, damit
     sich die Füllung per Verlauf halbieren lässt. */
  --ksc-stern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.26 6.85.72-5.1 4.6 1.44 6.72L12 16.9l-6.09 3.4 1.44-6.72-5.1-4.6 6.85-.72z'/%3E%3C/svg%3E");
  --celano-highlight-dunkel: #ad4215;
  /* Aufgehellte Variante für dunkle Flächen: auf einem Foto oder im dunklen
     Footer ist #cf5420 zu wenig abgesetzt und schlecht zu lesen. */
  --celano-highlight-hell: #ff9254;
  /* sehr dunkles Braun, z. B. Footer-Hintergrund */
  --celano-dunkel: #291f19;
  /* warmer heller Ton für hervorgehobene Kästen */
  --celano-creme: #f1ebe3;
  /* YouTube-Rot für die Abspielen-Knöpfe. Bewusst die Fremdfarbe und nicht
     das Celano-Orange: der rote Knopf wird als „hier läuft ein Video"
     gelesen, bevor irgendjemand die Beschriftung liest. */
  --celano-youtube: #ff0033;
  --celano-youtube-dunkel: #cc0029;
}

/* Hauptnavigation: etwas größere Schrift und mehr Luft.
   Ausgangswerte des Themes: Schrift 16px, Innenabstand 36px/25px,
   Header-Höhe 9.5rem (95px, ab 1200px Fensterbreite, siehe main.css). */
.header-v14__navigation-desktop > .xo-menu-horizontal > .xo-menu-horizontal__item > .xo-menu-horizontal__link {
  font-size: 1.8rem;
}

@media (min-width: 1200px) {
  .header-v14__navigation-desktop > .xo-menu-horizontal > .xo-menu-horizontal__item {
    padding: 4rem 2.8rem;
  }

  /* Logo nach links, Navigation daneben, Symbole rechts.

     Das Theme stellt dafür keine Einstellung bereit: der Kopf ist fest auf
     drei gleich breite Spalten gebaut (Navigation, Logo, Symbole), das
     Logo stand damit in der Mitte. Hier bekommt das Raster stattdessen
     „so breit wie nötig / Rest / so breit wie nötig“ und die Reihenfolge
     wird umgestellt. Die Reihenfolge im Quelltext bleibt unangetastet,
     damit ein Theme-Update nichts kaputtmacht.

     Nur ab 1200px: darunter zeigt der Kopf das Hamburger-Menü links und
     das Logo mittig, und das ist dort richtig so. */
  /* Logo und Symbole nur so breit wie ihr Inhalt, der Rest gehört der
     Navigation.

     Das `!important` ist hier Absicht und kein Schnellschuss. Das Theme
     setzt die Spalten über
     `xo-grid:not([style*="--col-width"])[style*="--xs"]`, und diese Regel
     steht sechsmal in `main.min.css`, einmal je Breakpoint. Ein Selektor,
     der alle sechs schlägt, wäre länger als die Regel selbst und beim
     nächsten Theme-Update wieder falsch. */
  .header-v14__sticky xo-grid[style] {
    grid-template-columns: max-content minmax(0, 1fr) max-content !important;
    align-items: center;
  }

  /* Die Reihenfolge läuft über die Variable des Themes, nicht über
     `order` oder `grid-column` direkt. Grund: `xo-grid > *` setzt beides
     selbst (`order: var(--order-xs)`) und gewinnt mit höherer
     Spezifität. Gegen diese Regel kommt `.header-v14__logo` nicht an,
     über ihre eigene Variable dagegen schon. */
  .header-v14__logo {
    --order-xs: -1;
    justify-content: flex-start;
  }

  /* Abstand zwischen Logo und erstem Menüpunkt. Vorher stand der Punkt
     bündig am Seitenrand, jetzt steht links davon das Logo. */
  .header-v14__navigation-desktop > .xo-menu-horizontal > .xo-menu-horizontal__item:first-child {
    padding-left: 3.6rem;
  }

  /* Muss zur neuen Innenhöhe passen, sonst ragt die Navigation heraus:
     2 x 4rem Abstand + Zeilenhöhe. */
  .header-v14__sticky {
    height: 10.4rem;
  }
}

/* Zwischen 1200 und 1320px die seitlichen Abstände etwas zurücknehmen,
   damit längere Menüs nicht umbrechen. */
@media (min-width: 1200px) and (max-width: 1320px) {
  .header-v14__navigation-desktop > .xo-menu-horizontal > .xo-menu-horizontal__item {
    padding: 4rem 2.2rem;
  }
}

/* Shopname im Footer-Copyright: statt Standard-Linkfarbe ein Kaffeebraun */
.footer-v14__copyright a.footer__shop-name,
.footer__shop-name {
  color: var(--celano-braun);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-v14__copyright a.footer__shop-name:hover,
.footer-v14__copyright a.footer__shop-name:focus-visible,
.footer__shop-name:hover,
.footer__shop-name:focus-visible {
  color: var(--celano-highlight);
  text-decoration: underline;
}

/* Instagram-Abschnitt: Titel und Profil-Link erben sonst die blaue bzw.
   violette Standard-Linkfarbe des Browsers, weil das Theme hier keine
   Farbe setzt. */
.instagram-v3__title a,
.instagram-v3__icon a,
.instagram-v3__title a:visited,
.instagram-v3__icon a:visited {
  color: var(--celano-braun);
  text-decoration: none;
  transition: color 0.2s ease;
}

.instagram-v3__title a:hover,
.instagram-v3__title a:focus-visible,
.instagram-v3__icon a:hover,
.instagram-v3__icon a:focus-visible {
  color: var(--celano-highlight);
}

/* Instagram-Streifen: Bilder quadratisch beschneiden statt verzerren.
   Die Bilder sind unterschiedlich groß; das Theme zwingt sie sonst in ein
   festes Seitenverhältnis. */
.instagram-v3__item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.instagram-v3__item img.instagram-v3__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ---------------------------------------------------------------
   Megamenü aus dem normalen Shopify-Menü
   Das Theme zeigt Unterpunkte als 20rem schmale Liste und Enkelpunkte
   als Flyout nach rechts. Ab Desktop-Breite wird daraus ein breites
   Panel: jede zweite Ebene eine Spalte, die dritte Ebene darunter.
   Vorteil: kein separates Megamenü pflegen – es folgt dem Menü im Admin.
   --------------------------------------------------------------- */
@media (min-width: 1200px) {
  .header-v14__navigation-desktop
    > .xo-menu-horizontal
    > .xo-menu-horizontal__item
    > .xo-menu-horizontal__sub-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.6rem 4.5rem;
    width: max-content;
    max-width: 90vw;
    padding: 2.6rem 3.2rem 2.8rem;
  }

  /* Dritte Ebene nicht mehr ausklappen, sondern unter der Spalte zeigen.
     pointer-events wird vom Panel geerbt – mit festem 'auto' bliebe die
     unsichtbare Liste mausempfindlich und würde das Menü aufklappen,
     sobald man unter dem Header darüberfährt. */
  .header-v14__navigation-desktop .xo-menu-horizontal__sub-menu--grandchild {
    position: static;
    display: block;
    width: auto;
    opacity: 1;
    pointer-events: inherit;
    transform: none;
    box-shadow: none;
    border-radius: 0;
    background: none;
    padding: 0.4rem 0 0;
  }

  /* Zweite Absicherung: geschlossenes Panel komplett aus dem Zugriff nehmen.
     Nur durchsichtig zu sein reicht nicht – es bliebe als Hover-Fläche liegen. */
  .header-v14__navigation-desktop
    > .xo-menu-horizontal
    > .xo-menu-horizontal__item
    > .xo-menu-horizontal__sub-menu {
    visibility: hidden;
  }

  .header-v14__navigation-desktop
    > .xo-menu-horizontal
    > .xo-menu-horizontal__item--hover:hover
    > .xo-menu-horizontal__sub-menu,
  .header-v14__navigation-desktop
    > .xo-menu-horizontal
    > .xo-menu-horizontal__item--open
    > .xo-menu-horizontal__sub-menu {
    visibility: visible;
  }

  /* Spaltenüberschrift hervorheben, Pfeil entfällt */
  .header-v14__navigation-desktop
    > .xo-menu-horizontal
    > .xo-menu-horizontal__item
    > .xo-menu-horizontal__sub-menu
    > .xo-menu-horizontal__item--child
    > .xo-menu-horizontal__link {
    font-weight: 600;
  }

  .header-v14__navigation-desktop .xo-menu-horizontal__child-arrow {
    display: none;
  }
}

/* Einträge im Megamenü kompakt halten – sie erben sonst die Abstände
   der obersten Navigationsebene. */
@media (min-width: 1200px) {
  .header-v14__navigation-desktop .xo-menu-horizontal__sub-menu .xo-menu-horizontal__item--child {
    padding: 0.5rem 0;
  }

  .header-v14__navigation-desktop .xo-menu-horizontal__sub-menu .xo-menu-horizontal__link {
    font-size: 1.5rem;
    padding: 0;
  }

  .header-v14__navigation-desktop
    > .xo-menu-horizontal
    > .xo-menu-horizontal__item
    > .xo-menu-horizontal__sub-menu
    > .xo-menu-horizontal__item--child
    > .xo-menu-horizontal__link {
    font-size: 1.6rem;
  }
}

/* Rechtstexte (Vorlage "rechtstext"): angenehme Lesebreite und Gliederung.
   Lange Fließtexte über die volle Seitenbreite sind kaum lesbar. */
.template-suffix-rechtstext .rte,
.template-suffix-rechtstext .main-page__content {
  max-width: 75ch;
  margin-inline: auto;
}

.template-suffix-rechtstext .rte h2 {
  margin-top: 3.2rem;
  margin-bottom: 0.8rem;
}

.template-suffix-rechtstext .rte h3 {
  margin-top: 2.4rem;
  margin-bottom: 0.6rem;
}

.template-suffix-rechtstext .rte p,
.template-suffix-rechtstext .rte li {
  line-height: 1.7;
}

.template-suffix-rechtstext .rte a {
  text-decoration: underline;
}

/* Megamenü: Einträge sollen beim Überfahren stehen bleiben.
   Das Theme schiebt sie um 0.5rem nach rechts (main.css, translateX).
   Die Rückmeldung beim Hover kommt weiterhin über die Deckkraft
   (0.5 -> 1), nur eben ohne Wandern. */
@media (min-width: 1200px) {
  .header-v14__navigation-desktop .xo-menu-horizontal__item--child:hover .xo-menu-horizontal__child-label,
  .header-v14__navigation-desktop
    .xo-menu-horizontal__item--child.xo-menu-horizontal__item--open
    .xo-menu-horizontal__child-label,
  .header-v14__navigation-desktop
    .xo-menu-horizontal__item--grandchild:hover
    .xo-menu-horizontal__grandchild-label {
    transform: none;
  }
}

/* Footer-Links sollen beim Überfahren stehen bleiben.
   Das Theme rückt sie um 1rem ein (padding-inline-start in main.css).
   Die Farbänderung von 50 % auf volle Deckkraft bleibt als Rückmeldung. */
.footer-v14__list-item:hover a {
  padding-inline-start: 0;
}

/* ---------------------------------------------------------------
   Rechtstexte (Shopify-Richtlinien unter /policies/…)
   Shopify liefert diese Seiten in eigener Struktur
   (.shopify-policy__container), die das Theme nicht gestaltet:
   Links in Browser-Blau, Absätze ohne Abstand, kein Luftraum
   zwischen Header, Text und Footer.
   --------------------------------------------------------------- */
.shopify-policy__container {
  max-width: 78ch;
  padding: 7rem 2rem 9rem;
}

.shopify-policy__title h1 {
  margin-bottom: 3.6rem;
  line-height: 1.2;
}

.shopify-policy__body .rte > * + * {
  margin-top: 1.6rem;
}

.shopify-policy__body .rte p,
.shopify-policy__body .rte li {
  line-height: 1.75;
}

.shopify-policy__body .rte h2 {
  margin-top: 4.4rem;
  margin-bottom: 1.2rem;
  line-height: 1.3;
}

.shopify-policy__body .rte h3,
.shopify-policy__body .rte h4 {
  margin-top: 3.2rem;
  margin-bottom: 0.8rem;
  line-height: 1.35;
}

.shopify-policy__body .rte ul,
.shopify-policy__body .rte ol {
  padding-inline-start: 2.4rem;
}

.shopify-policy__body .rte li + li {
  margin-top: 0.6rem;
}

.shopify-policy__body .rte hr {
  margin: 4rem 0;
  border: 0;
  border-top: 1px solid rgba(var(--color-foreground), 0.12);
}

/* Links in Kaffeebraun statt Browser-Blau, unterstrichen beim Überfahren */
.shopify-policy__body .rte a,
.template-suffix-rechtstext .rte a,
.main-page .rte a {
  color: var(--celano-braun);
  text-decoration: none;
  transition: color 0.2s ease;
}

.shopify-policy__body .rte a:hover,
.shopify-policy__body .rte a:focus-visible,
.template-suffix-rechtstext .rte a:hover,
.template-suffix-rechtstext .rte a:focus-visible,
.main-page .rte a:hover,
.main-page .rte a:focus-visible {
  color: var(--celano-highlight);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Texte müssen markierbar sein.
   Das Theme sperrt Markieren auf <xo-carousel> – die Sperre vererbt sich auf
   alles darin, also auch auf Produktnamen, Preise und Fließtext. */
xo-carousel,
xo-carousel-slide,
xo-carousel-slide * {
  -webkit-user-select: text;
  user-select: text;
}

/* Bedienelemente bleiben unmarkierbar, damit Klicken und Ziehen sauber bleibt. */
xo-carousel-prev,
xo-carousel-next,
xo-carousel-thumbnail,
xo-carousel-slide .xo-btn,
xo-carousel-slide .xo-btn *,
xo-carousel-slide button,
xo-carousel-slide button *,
xo-carousel-slide svg,
xo-carousel-slide svg * {
  -webkit-user-select: none;
  user-select: none;
}

/* Kontaktzeilen im Footer: Symbol und Text nebeneinander */
.footer-v14__kontakt-zeile {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.footer-v14__kontakt-icon {
  flex: 0 0 auto;
  margin-top: 0.35rem;
  opacity: 0.55;
}

.footer-v14__kontakt-zeile a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-v14__kontakt-zeile a:hover,
.footer-v14__kontakt-zeile a:focus-visible {
  color: var(--celano-braun);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Verlinkte Spaltenüberschrift soll wie eine Überschrift aussehen */
.footer-v14__heading a {
  color: inherit;
  text-decoration: none;
}

.footer-v14__heading a:hover,
.footer-v14__heading a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Cookie-Einstellungen unten rechts, gegenüber dem Copyright –
   gleiche Schriftgröße und Farbe wie die Copyright-Zeile. */
.footer-v14__payment {
  text-align: right;
}

.footer-v14__cookie-link {
  font-size: 1.4rem;
  color: rgba(var(--color-foreground), 0.75);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-v14__cookie-link:hover,
.footer-v14__cookie-link:focus-visible {
  color: var(--celano-braun);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Über Links soll man Text markieren können.
   Browser starten beim Ziehen über einen Link sonst einen Link-Transport
   ("drag and drop") statt einer Markierung – und weil im Shop fast jeder Text
   ein Link ist (Produktnamen, Menü, Footer), wirkt das wie eine Sperre. */
a,
a img {
  -webkit-user-drag: none;
}

/* Sichtbare Markierung.
   Das Theme setzt ::selection auf color-mix(... rgba(var(--color-primary)) 40% ...),
   aber --color-primary ist nirgends definiert. Das ergibt rgba(0,0,0,0), also
   vollständig durchsichtig: Markierter Text bleibt unsichtbar. */
::selection {
  background: rgba(41, 31, 25, 0.25);
  color: inherit;
}

::-moz-selection {
  background: rgba(41, 31, 25, 0.25);
  color: inherit;
}

/* Shopify Forms in der Theme-Schrift.
   Die Formulare stecken in einem Shadow DOM, an das normales CSS nicht
   herankommt. CSS-Variablen dringen als einzige durch – Shopify Forms bietet
   genau dafür --forms-body-font und --forms-heading-font an. */
shopify-forms-embed {
  --forms-body-font: 'Jost', sans-serif;
  --forms-heading-font: 'Jost', sans-serif;
  --forms-base-font-size: 16px;
}

/* Hinweiskasten in den Rechtstexten, z. B. für den Online-Widerruf. */
.ksc-hinweis {
  margin: 0 0 3.2rem;
  padding: 2.4rem 2.8rem;
  border: 1px solid rgba(41, 31, 25, 0.25);
  border-radius: 8px;
  background: rgba(41, 31, 25, 0.04);
}

.ksc-hinweis > *:first-child {
  margin-top: 0;
}

.ksc-hinweis > *:last-child {
  margin-bottom: 0;
}

.ksc-hinweis__titel {
  font-weight: 600;
  margin-bottom: 0.8rem;
}

.ksc-hinweis__button {
  display: inline-block;
  margin: 1.2rem 0;
  padding: 1.1rem 2.4rem;
  border-radius: 8px;
  background: var(--celano-braun);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 500;
  transition: background 0.2s ease;
}

.ksc-hinweis__button:hover,
.ksc-hinweis__button:focus-visible {
  background: var(--celano-braun-dunkel);
}

.ksc-hinweis__fussnote {
  font-size: 1.4rem;
  opacity: 0.75;
}

/* ---------------------------------------------------------------
   EU-Mitteilung zur gesetzlichen Gewährleistung
   Dezente Zeile, die das offizielle Label aufklappt. Gleicher Baustein
   auf Produktseite, im Warenkorb-Drawer und auf der Warenkorb-Seite.
   --------------------------------------------------------------- */
.ksc-gewaehr {
  margin: 1.6rem 0;
}

.ksc-gewaehr__zeile {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.2rem 1.6rem;
  border: 1px solid rgba(41, 31, 25, 0.25);
  border-radius: 8px;
  background: rgba(41, 31, 25, 0.04);
  color: rgb(var(--color-foreground));
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.ksc-gewaehr__zeile:hover,
.ksc-gewaehr__zeile:focus-visible {
  background: rgba(41, 31, 25, 0.08);
  border-color: rgba(41, 31, 25, 0.4);
}

.ksc-gewaehr__schild {
  flex: 0 0 auto;
  color: var(--celano-braun);
}

.ksc-gewaehr__text {
  flex: 1 1 auto;
}

.ksc-gewaehr__pfeil {
  flex: 0 0 auto;
  opacity: 0.6;
  transition: transform 0.2s ease;
}

.ksc-gewaehr--offen .ksc-gewaehr__pfeil {
  transform: rotate(180deg);
}

.ksc-gewaehr__panel {
  margin-top: 1rem;
  padding: 1.6rem;
  border: 1px solid rgba(var(--color-foreground), 0.1);
  border-radius: 8px;
}

.ksc-gewaehr__bild {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-out;
}

.ksc-gewaehr__link {
  display: inline-block;
  margin-top: 1.2rem;
  font-size: 1.4rem;
  color: var(--celano-braun);
  text-decoration: none;
}

.ksc-gewaehr__link:hover,
.ksc-gewaehr__link:focus-visible {
  color: var(--celano-highlight);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Im Warenkorb etwas kompakter, dort ist wenig Platz */
.ksc-gewaehr--drawer .ksc-gewaehr__zeile,
.ksc-gewaehr--cart .ksc-gewaehr__zeile {
  font-size: 1.3rem;
  padding: 1rem 1.4rem;
}

.ksc-gewaehr--drawer {
  margin: 1.2rem 0 0;
}

/* Seite "Vertrag widerrufen" im selben Aufbau wie die Richtlinienseiten:
   mittige Spalte von 78 Zeichen, zentrierte Überschrift, gleiche Abstände.
   Referenzwerte gemessen an /policies/legal-notice. */
.template-suffix-vertrag-widerrufen main xo-container {
  max-width: 78ch;
  margin-inline: auto;
  padding-inline: 2rem;
}

.template-suffix-vertrag-widerrufen main h1 {
  text-align: center;
  margin-bottom: 3.6rem;
}

.template-suffix-vertrag-widerrufen .rte p,
.template-suffix-vertrag-widerrufen .rte li {
  line-height: 1.75;
}

.template-suffix-vertrag-widerrufen .rte > * + * {
  margin-top: 1.6rem;
}

.template-suffix-vertrag-widerrufen shopify-forms-embed {
  display: block;
  max-width: 52rem;
  margin: 2.4rem auto 0;
}

/* Einleitungssatz mittig zur Überschrift und zum Formular */
.template-suffix-vertrag-widerrufen main .rte {
  text-align: center;
}

/* Anschrift dreizeilig – Symbol bleibt oben neben der ersten Zeile */
.footer-v14__kontakt-zeile--adresse span {
  display: block;
  line-height: 1.6;
}

/* WhatsApp steht als Kontaktzeile in der Liste; nur das Symbol behält
   die Markenfarbe, damit es sich von Mail und Telefon abhebt. */
.footer-v14__kontakt-zeile a[href^='https://wa.me'] {
  color: inherit;
}

.footer-v14__kontakt-zeile:has(a[href^='https://wa.me']) .footer-v14__kontakt-icon {
  color: #25d366;
  opacity: 1;
}

/* ---------------------------------------------------------------
   Service & Reparatur (sections/service-reparatur.liquid)
   --------------------------------------------------------------- */
.ksc-service__kopf {
  max-width: 68ch;
  margin: 0 auto 4rem;
  text-align: center;
}

.ksc-service__kicker {
  margin-bottom: 0.8rem;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--celano-highlight);
}

.ksc-service__titel {
  margin-bottom: 1.6rem;
  line-height: 1.2;
}

.ksc-service__intro p {
  line-height: 1.75;
}

.ksc-service__intro p + p {
  margin-top: 1.2rem;
}

/* Hochformatige Werkstattfotos wurden sonst über 900 px hoch und schoben
   den Rest der Seite weit nach unten. Feste Bildhöhe, mittig beschnitten. */
.ksc-service__bild {
  margin: 0 auto 4rem;
  max-width: 100rem;
  border-radius: 12px;
  overflow: hidden;
}

/* Das Theme hält das Seitenverhältnis über padding-top des Rahmens.
   Für den Seitenkopf wird daraus eine feste Höhe. */
.ksc-service__bild .xo-image:not(.xo-image--svg) {
  padding-top: 0;
  height: 42rem;
}

.ksc-service__bild .xo-image img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 767px) {
  .ksc-service__bild .xo-image:not(.xo-image--svg) {
    height: 24rem;
  }
}

.ksc-service__leistungen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
  gap: 3rem;
  margin-bottom: 6rem;
}

.ksc-service__leistung h3 {
  margin-bottom: 0.8rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid rgba(41, 31, 25, 0.25);
}

.ksc-service__leistung p {
  line-height: 1.7;
}

.ksc-service__ablauf,
.ksc-service__marken,
.ksc-service__formular {
  max-width: 78ch;
  margin: 0 auto 6rem;
}

.ksc-service__ablauf h2,
.ksc-service__marken h2,
.ksc-service__formular h2 {
  margin-bottom: 2.4rem;
  text-align: center;
}

.ksc-service__schritte {
  counter-reset: schritt;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ksc-service__schritte li {
  counter-increment: schritt;
  position: relative;
  padding: 0 0 2.4rem 5.6rem;
}

.ksc-service__schritte li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: 0;
  width: 3.6rem;
  height: 3.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--celano-braun);
  color: #fff;
  font-weight: 600;
}

.ksc-service__schritte li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 1.75rem;
  top: 4rem;
  bottom: 0.8rem;
  width: 1px;
  background: rgba(41, 31, 25, 0.25);
}

.ksc-service__schritte strong {
  display: block;
  margin-bottom: 0.4rem;
}

.ksc-service__marken-text p {
  line-height: 1.8;
}

.ksc-service__pdf {
  margin-top: 2rem;
  font-size: 1.5rem;
}

.ksc-service__pdf a,
.ksc-service__telefon a {
  color: var(--celano-braun);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Anreißer auf der Startseite */
.ksc-service--teaser .ksc-service__teaser {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 900px) {
  .ksc-service--teaser .ksc-service__teaser {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
  }
}

/* Teaserbild auf feste Höhe begrenzen – ein hochformatiges Foto hat die
   Sektion sonst auf das Dreifache aufgeblasen. */
.ksc-service__teaser-bild {
  border-radius: 12px;
  overflow: hidden;
}

.ksc-service__teaser-bild .xo-image:not(.xo-image--svg) {
  padding-top: 0;
  height: 40rem;
}

.ksc-service__teaser-bild .xo-image img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 899px) {
  .ksc-service__teaser-bild .xo-image:not(.xo-image--svg) {
    height: 26rem;
  }
}

/* Hauptaktion des Servicebereichs in der Signalfarbe – wie die übrigen
   Wege zum Reparaturauftrag. */
.ksc-service__button {
  display: inline-block;
  margin-top: 0;
  padding: 1.4rem 2.8rem;
  border-radius: 10rem;
  background: var(--celano-highlight);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.2s ease;
}

.ksc-service__button:hover,
.ksc-service__button:focus-visible {
  background: var(--celano-highlight-dunkel);
  color: #fff;
}

.ksc-service__telefon {
  margin-top: 1.6rem;
  font-size: 1.5rem;
}

/* --- Reparaturformular --- */
.ksc-reparatur__gruppe {
  margin: 0 0 3.2rem;
  padding: 0;
  border: 0;
}

.ksc-reparatur__legende {
  padding: 0;
  margin-bottom: 1.6rem;
  font-size: 1.8rem;
  font-weight: 600;
}

.ksc-reparatur__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  gap: 1.6rem;
}

.ksc-feld {
  display: block;
}

.ksc-feld--breit {
  grid-column: 1 / -1;
}

.ksc-feld__label {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 1.4rem;
}

.ksc-feld__eingabe {
  width: 100%;
  padding: 1.2rem 1.4rem;
  border: 1px solid rgba(var(--color-foreground), 0.2);
  border-radius: 8px;
  background: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  font-family: inherit;
  font-size: 1.6rem;
}

.ksc-feld__eingabe:focus {
  outline: 2px solid var(--celano-braun);
  outline-offset: 1px;
}

textarea.ksc-feld__eingabe {
  resize: vertical;
}

.ksc-feld__hinweis {
  margin-top: 0.8rem;
  font-size: 1.4rem;
  opacity: 0.7;
}

.ksc-reparatur__auswahl {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 3rem;
}

.ksc-radio,
.ksc-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-size: 1.5rem;
  line-height: 1.6;
}

.ksc-checkbox {
  margin: 0 0 2.4rem;
}

/* Kästchen auf Höhe der ersten Textzeile, in Celano-Braun statt
   Browser-Blau (seit 20.10.2026). Die Höhe der ersten Zeile ist
   1,5 rem × 1,6 = 2,4 rem; das Kästchen (1,8 rem) sitzt mittig darin. */
.ksc-checkbox input[type='checkbox'] {
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  margin: 0.3rem 0 0;
  accent-color: var(--celano-braun);
  cursor: pointer;
}

.ksc-checkbox {
  gap: 1.2rem;
  cursor: pointer;
}

.ksc-checkbox a {
  color: var(--celano-braun);
  text-decoration: underline;
}

.ksc-reparatur__absenden {
  padding: 1.4rem 3.2rem;
  border: 0;
  border-radius: 8px;
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.ksc-reparatur__absenden:hover,
.ksc-reparatur__absenden:focus-visible {
  opacity: 0.85;
}

.ksc-reparatur__erfolg,
.ksc-reparatur__fehler {
  margin-bottom: 2.4rem;
  padding: 1.6rem 2rem;
  border-radius: 8px;
}

.ksc-reparatur__erfolg {
  border: 1px solid rgba(37, 211, 102, 0.45);
  background: rgba(37, 211, 102, 0.08);
}

.ksc-reparatur__fehler {
  border: 1px solid rgba(200, 60, 40, 0.45);
  background: rgba(200, 60, 40, 0.07);
}

/* Nach dem Absenden: nur die Bestätigung. Überschrift „Ihre Angaben“,
   Einleitung, Espresso-Plakette und PDF-Hinweis gehören zum leeren
   Formular und entfallen. */
.ksc-service__formular:has(.ksc-reparatur--fertig) > h2,
.ksc-service__formular:has(.ksc-reparatur--fertig) > .ksc-service__intro,
.ksc-service__formular:has(.ksc-reparatur--fertig) > .ksc-service__gratis,
.ksc-service__formular:has(.ksc-reparatur--fertig) > .ksc-service__pdf {
  display: none;
}

.ksc-reparatur--fertig {
  margin-bottom: 0;
  padding: 2.4rem 2.8rem;
  text-align: left;
}

.ksc-reparatur--fertig p {
  margin: 0 0 1rem;
}

.ksc-reparatur__erfolg-titel {
  margin: 0 0 1.2rem;
  font-size: 2.2rem;
}

.ksc-reparatur__erfolg-weiter {
  margin-top: 1.6rem !important;
  margin-bottom: 0 !important;
  font-weight: 500;
}

/* ---------------------------------------------------------------
   Über uns (sections/ueber-uns.liquid)
   --------------------------------------------------------------- */
.ksc-ueber__kopf {
  max-width: 68ch;
  margin: 0 auto 4rem;
  text-align: center;
}

.ksc-ueber__kicker {
  margin-bottom: 0.8rem;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--celano-highlight);
}

.ksc-ueber__titel {
  margin-bottom: 1.6rem;
  line-height: 1.2;
}

.ksc-ueber__intro p,
.ksc-ueber__abschnitt-text p {
  line-height: 1.75;
}

.ksc-ueber__intro p + p,
.ksc-ueber__abschnitt-text p + p {
  margin-top: 1.2rem;
}

.ksc-ueber__grossbild {
  margin: 0 auto 6rem;
  max-width: 110rem;
  border-radius: 12px;
  overflow: hidden;
}

.ksc-ueber__abschnitt {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
  align-items: center;
  margin-bottom: 6rem;
}

@media (min-width: 900px) {
  .ksc-ueber__abschnitt {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
  }

  .ksc-ueber__abschnitt--gedreht .ksc-ueber__abschnitt-bild {
    order: 2;
  }
}

.ksc-ueber__abschnitt--ohne-bild {
  grid-template-columns: 1fr;
  max-width: 78ch;
  margin-inline: auto;
}

.ksc-ueber__abschnitt-bild {
  border-radius: 12px;
  overflow: hidden;
}

.ksc-ueber__abschnitt-text h2 {
  margin-bottom: 1.2rem;
  line-height: 1.25;
}

.ksc-ueber__qualifikation {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
  margin-bottom: 5rem;
  padding: 3.2rem;
  border: 1px solid rgba(41, 31, 25, 0.25);
  border-radius: 12px;
  background: rgba(41, 31, 25, 0.04);
}

@media (min-width: 900px) {
  .ksc-ueber__qualifikation {
    grid-template-columns: 1.4fr 1fr;
    gap: 4rem;
  }
}

.ksc-ueber__qualifikation h2 {
  margin-bottom: 1.2rem;
}

.ksc-ueber__qualifikation p {
  line-height: 1.75;
}

.ksc-ueber__qualifikation p + p {
  margin-top: 1.2rem;
}

.ksc-ueber__urkunde {
  margin: 0;
}

.ksc-ueber__urkunde img {
  border-radius: 8px;
  border: 1px solid rgba(var(--color-foreground), 0.1);
}

.ksc-ueber__urkunde figcaption {
  margin-top: 0.8rem;
  font-size: 1.4rem;
  opacity: 0.7;
  text-align: center;
}

.ksc-ueber__zitat {
  max-width: 68ch;
  margin: 0 auto 6rem;
  padding: 0 0 0 2.4rem;
  border-left: 3px solid var(--celano-braun);
}

.ksc-ueber__zitat p {
  font-size: 2rem;
  line-height: 1.6;
}

.ksc-ueber__zitat cite {
  display: block;
  margin-top: 1rem;
  font-size: 1.5rem;
  font-style: normal;
  opacity: 0.7;
}

.ksc-ueber__abschluss {
  text-align: center;
}

/* ---------------------------------------------------------------
   Marken-Slider (sections/marken.liquid)
   Ohne Logo erscheint der Markenname als Schriftzug – so wirkt der
   Slider auch schon, bevor alle Logos hochgeladen sind.
   --------------------------------------------------------------- */
.ksc-marken__kopf {
  margin-bottom: 3rem;
  text-align: center;
}

.ksc-marken__titel {
  margin-bottom: 0.6rem;
}

.ksc-marken__untertitel {
  opacity: 0.7;
}

.ksc-marken__eintrag {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 9rem;
  padding: 1.6rem;
  border: 1px solid rgba(var(--color-foreground), 0.1);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.ksc-marken__eintrag:hover {
  border-color: rgba(41, 31, 25, 0.4);
  transform: translateY(-2px);
}

.ksc-marken__logo {
  max-width: 100%;
  max-height: 5.6rem;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.ksc-marken__eintrag:hover .ksc-marken__logo {
  filter: grayscale(0);
  opacity: 1;
}

.ksc-marken__name {
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  opacity: 0.8;
}

.ksc-marken__hinweis {
  margin-top: 2.4rem;
  text-align: center;
  font-size: 1.5rem;
  opacity: 0.7;
}

/* Hervorgehobener Link im Footer (Reparaturauftrag) */
.footer-v14__aktion {
  display: inline-block;
  margin-top: 1.8rem;
  padding: 1.1rem 2rem;
  border-radius: 8px;
  background: var(--celano-braun);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease;
}

.footer-v14__aktion:hover,
.footer-v14__aktion:focus-visible {
  background: var(--celano-braun-dunkel);
  color: #fff;
}

/* Sprungziel Reparaturauftrag: Platz für den mitlaufenden Header lassen,
   sonst verschwindet die Überschrift darunter. */
#reparaturauftrag {
  scroll-margin-top: 13rem;
}

/* Pfeile am Marken-Slider */
.ksc-marken .ksc-marken__pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: 1px solid rgba(var(--color-foreground), 0.15);
  background: rgb(var(--color-background));
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.ksc-marken .ksc-marken__pfeil:hover {
  border-color: rgba(41, 31, 25, 0.5);
  background: rgba(41, 31, 25, 0.06);
}

.ksc-marken__pfeil--zurueck {
  left: -1.6rem;
}

.ksc-marken__pfeil--vor {
  right: -1.6rem;
}

.ksc-marken__slider {
  position: relative;
}

@media (max-width: 767px) {
  .ksc-marken .ksc-marken__pfeil {
    display: none;
  }
}

/* ---------------------------------------------------------------
   Inhaltsbreite und Schriftgrößen
   Das Theme steuert die Breite über eine Variable mit 1400px als
   Vorgabe. 1600px gilt dadurch überall, ohne jede Sektion anzufassen.
   --------------------------------------------------------------- */
:root {
  --xo-container-width: 1600px;
}

/* Grundschriftgröße des Dokuments von 10px auf 11px.
   Das Theme rechnet fast alle Größen in rem, dadurch wachsen Texte,
   Buttons und Abstände gleichmäßig um 10 Prozent mit – statt an
   Dutzenden Einzelstellen zu schrauben. */
html {
  font-size: 68.75%;
}

/* Hauptnavigation zusätzlich etwas kräftiger */
.header-v14__navigation-desktop > .xo-menu-horizontal > .xo-menu-horizontal__item > .xo-menu-horizontal__link {
  font-size: 1.9rem;
}

@media (min-width: 1200px) {
  .header-v14__navigation-desktop .xo-menu-horizontal__sub-menu .xo-menu-horizontal__link {
    font-size: 1.6rem;
  }

  .header-v14__navigation-desktop
    > .xo-menu-horizontal
    > .xo-menu-horizontal__item
    > .xo-menu-horizontal__sub-menu
    > .xo-menu-horizontal__item--child
    > .xo-menu-horizontal__link {
    font-size: 1.7rem;
  }
}

/* Footer etwas größer, er wirkte im Verhältnis klein */
.footer-v14__list-item a,
.footer-v14__information li,
.footer-v14__description {
  font-size: 1.6rem;
}

.footer-v14__heading {
  font-size: 1.8rem;
}

/* ===============================================================
   Kopfleiste über dem Header – Hinweise wie im alten Shop
   =============================================================== */
.ksc-kopfleiste {
  background-color: var(--ksc-kopfleiste-bg, var(--celano-braun-dunkel));
  color: var(--ksc-kopfleiste-fg, #f3e9e1);
  font-size: var(--ksc-kopfleiste-size, 1.4rem);
  line-height: 1.3;
}

.ksc-kopfleiste__inhalt {
  display: flex;
  align-items: center;
  gap: 2rem 4rem;
  min-height: 3.8rem;
  padding: 0.6rem 0;
}

.ksc-kopfleiste__inhalt--verteilt {
  justify-content: space-between;
}

.ksc-kopfleiste__inhalt--mitte {
  justify-content: center;
}

.ksc-kopfleiste__punkt {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: inherit;
  text-decoration: none;
  letter-spacing: 0.02em;
}

a.ksc-kopfleiste__punkt:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.ksc-kopfleiste__symbol {
  display: inline-flex;
  line-height: 0;
  opacity: 0.85;
}

.ksc-kopfleiste__symbol svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: currentColor;
  stroke: currentColor;
}

/* Auf schmalen Bildschirmen bleibt nur, was ausdrücklich fürs Handy
   markiert ist – sonst bricht die Leiste mehrzeilig um. */
@media (max-width: 767px) {
  .ksc-kopfleiste__punkt--nur-desktop {
    display: none;
  }

  .ksc-kopfleiste__inhalt {
    justify-content: center;
    min-height: 3.4rem;
    font-size: 1.3rem;
  }
}

/* ===============================================================
   Suche als offenes Feld im Kopfbereich
   =============================================================== */

/* Lupe unterhalb von 1360px.

   Vorher lag die Schwelle bei 1200px, also auf der Desktop-Schwelle des
   Themes. Das offene Suchfeld brauchte dort aber mehr Platz, als die
   Navigation übrig ließ: Bei 1240px lief „Kontakt" 58 Pixel in das
   Suchfeld hinein. Gemessen wird es ab etwa 1300px frei; 1360px lässt
   Luft, auch wenn ein Menüpunkt dazukommt. Darunter greift die Lupe mit
   dem Such-Dialog, die dort ohnehin vorgesehen ist. */
.header-v14__icon-wrap--mobil {
  display: none;
}

@media (max-width: 1359px) {
  .header-v14__icon-wrap--mobil {
    display: block;
  }

  .ksc-suche {
    display: none;
  }
}

.ksc-suche {
  position: relative;
  flex: 0 1 26rem;
  min-width: 18rem;
  margin-right: 0.6rem;
}

.ksc-suche__form {
  position: relative;
  display: flex;
  align-items: center;
}

.ksc-suche__feld {
  width: 100%;
  height: 4.2rem;
  margin: 0;
  padding: 0 4rem 0 1.6rem;
  border: 0.1rem solid rgba(var(--color-foreground), 0.25);
  border-radius: 10rem;
  background-color: transparent;
  font-family: inherit;
  font-size: 1.5rem;
  color: rgb(var(--color-foreground));
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ksc-suche__feld::placeholder {
  color: rgba(var(--color-foreground), 0.55);
}

.ksc-suche__feld:focus {
  outline: none;
  border-color: var(--celano-braun);
  box-shadow: 0 0 0 0.2rem rgba(41, 31, 25, 0.15);
}

/* Das eigene Kreuz des Browsers ausblenden, wir haben ein eigenes */
.ksc-suche__feld::-webkit-search-cancel-button,
.ksc-suche__feld::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.ksc-suche__knopf {
  position: absolute;
  right: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: rgb(var(--color-foreground));
  cursor: pointer;
}

.ksc-suche__knopf:hover {
  background-color: rgba(var(--color-foreground), 0.06);
}

.ksc-suche__leeren {
  position: absolute;
  right: 3.8rem;
  display: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: rgba(var(--color-foreground), 0.08);
  cursor: pointer;
  line-height: 0;
}

.ksc-suche__feld:not(:placeholder-shown) ~ .ksc-suche__leeren {
  display: inline-flex;
}

/* Trefferliste hängt unter dem Feld, nicht über die volle Kopfbreite */
.ksc-suche .ksc-suche__treffer {
  left: auto;
  right: 0;
  width: 42rem;
  max-width: calc(100vw - 4rem);
  max-height: 70vh;
  overflow-y: auto;
  margin-top: 0.8rem;
  border-radius: 1.2rem;
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.12);
}

/* Die Trefferliste stammt aus dem Such-Dialog und ist dort seitenbreit.
   Im schmalen Kasten unter dem Feld wird daraus eine einfache Liste. */
.ksc-suche__treffer .xo-predictive-search__inner {
  padding: 1.6rem 2rem 2rem;
}

.ksc-suche__treffer xo-container {
  width: 100%;
  max-width: none;
  padding: 0;
}

.ksc-suche__treffer xo-grid > * {
  --xs: 12 !important;
  --sm: 12 !important;
  --md: 12 !important;
  --lg: 12 !important;
}

.ksc-suche__treffer h3 {
  margin: 1.2rem 0 0.6rem;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

.ksc-suche__treffer xo-grid > *:first-child h3:first-child {
  margin-top: 0;
}

/* Eintraege als einfache Zeilen, nicht als Kacheln */
.ksc-suche__treffer .xo-predictive-search__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.2rem;
  padding: 0.7rem 0;
  text-align: left;
  font-size: 1.5rem;
}

.ksc-suche__treffer .xo-predictive-search__item:hover {
  color: var(--celano-braun);
}

/* Produkte untereinander mit kleinem Vorschaubild statt als Kachelraster */
.ksc-suche__treffer xo-grid.xo-predictive-search__item-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  --col-width: auto;
}

.ksc-suche__treffer .xo-predictive-search__item .xo-predictive-search__item-image,
.ksc-suche__treffer .xo-predictive-search__item img {
  flex: 0 0 auto;
  width: 5rem;
  min-width: 5rem;
  height: 5rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0.6rem;
}

/* Titel und Preis stehen rechts neben dem Bild */
.ksc-suche__treffer .xo-predictive-search__item > div {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

/* Artikelname, Hersteller und Preis linksbündig. Das Theme zentriert sie
   (`.xo-predictive-search__product-title` u. a. in main.css). Bis
   19.10.2026 stand hier `__item-title` – eine Klasse, die das Theme gar
   nicht vergibt, deshalb blieb der Name zentriert. Gilt auch für das
   Suchfenster auf dem Handy. */
.xo-predictive-search__result .xo-predictive-search__product-title,
.xo-predictive-search__result .xo-predictive-search__product-vendor,
.xo-predictive-search__result .xo-predictive-search__article-title {
  text-align: left;
}

.xo-predictive-search__result .xo-predictive-search__product-price {
  justify-content: flex-start;
}

.xo-predictive-search__result .xo-predictive-search__product-title {
  font-size: 1.4rem;
  line-height: 1.35;
}

/* Handy-Suchfenster: dieselben Zeilen mit kleinem Bild wie im Kopfbereich,
   statt großer Kacheln, unter denen der Name erst nach dem Scrollen kommt. */
.xo-predictive-search__result xo-grid.xo-predictive-search__item-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.xo-predictive-search__result .xo-predictive-search__item {
  flex-direction: row;
  align-items: center;
  gap: 1.2rem;
  padding: 0.7rem 0;
  text-align: left;
}

.xo-predictive-search__result .xo-predictive-search__item img {
  flex: 0 0 auto;
  width: 5rem;
  min-width: 5rem;
  height: 5rem;
  object-fit: cover;
  border-radius: 0.6rem;
}

.xo-predictive-search__result .xo-predictive-search__item > div {
  flex: 1 1 auto;
  min-width: 0;
}

/* ===============================================================
   Links ohne eigene Theme-Klasse
   Das Theme färbt Links über Komponentenklassen. Fließtext-Links
   (Rechtstexte, Hinweis unter dem Preis, Beschreibungen) haben keine
   und blieben deshalb im Browser-Blau bzw. nach dem Besuch in Violett.
   =============================================================== */
a:not([class]),
a:not([class]):visited,
.rte a:not([class]),
.rte a:not([class]):visited {
  color: var(--celano-braun);
  text-underline-offset: 0.25em;
}

a:not([class]):hover,
a:not([class]):focus-visible,
.rte a:not([class]):hover,
.rte a:not([class]):focus-visible {
  color: var(--celano-highlight);
}

/* ===============================================================
   Megamenü lesbarer und kompakter
   Das Theme setzt Unterpunkte auf opacity 0.5 – auf Weiß ergibt das ein
   blasses Grau. Stattdessen volle Deckkraft, Rückmeldung über die Farbe.
   =============================================================== */
@media (min-width: 1200px) {
  .header-v14__navigation-desktop .xo-menu-horizontal__child-label,
  .header-v14__navigation-desktop .xo-menu-horizontal__grandchild-label {
    opacity: 1;
  }

  /* Oberste Ebene im Panel: Spaltenüberschrift */
  .header-v14__navigation-desktop
    > .xo-menu-horizontal
    > .xo-menu-horizontal__item
    > .xo-menu-horizontal__sub-menu
    > .xo-menu-horizontal__item--child
    > .xo-menu-horizontal__link
    .xo-menu-horizontal__child-label {
    color: var(--celano-braun-dunkel);
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  /* Unterpunkte: dunkel genug zum Lesen, Braun beim Überfahren */
  .header-v14__navigation-desktop .xo-menu-horizontal__grandchild-label {
    color: rgba(var(--color-foreground), 0.82);
  }

  /* Hover im Aufklappmenü in der Signalfarbe – das frühere Braun liegt zu
     nah am normalen Textton und war faktisch nicht zu sehen. */
  .header-v14__navigation-desktop
    .xo-menu-horizontal__item--grandchild:hover
    .xo-menu-horizontal__grandchild-label,
  .header-v14__navigation-desktop
    .xo-menu-horizontal__item--child:hover
    > .xo-menu-horizontal__link
    .xo-menu-horizontal__child-label {
    color: var(--celano-highlight);
  }

  /* Spalten nur so breit wie ihr Inhalt: Punkte ohne Unterpunkte
     ("Neuheiten", "Bestseller") belegen sonst eine ganze leere Spalte. */
  .header-v14__navigation-desktop
    > .xo-menu-horizontal
    > .xo-menu-horizontal__item
    > .xo-menu-horizontal__sub-menu {
    border-radius: 0 0 1.2rem 1.2rem;
  }

  /* Jede Spalte so breit wie ihr Inhalt, mindestens lesbar */
  .header-v14__navigation-desktop
    > .xo-menu-horizontal
    > .xo-menu-horizontal__item
    > .xo-menu-horizontal__sub-menu
    > .xo-menu-horizontal__item--child {
    flex: 0 0 auto;
  }

  /* Trennlinie unter der Spaltenüberschrift fasst die Gruppe zusammen */
  .header-v14__navigation-desktop
    > .xo-menu-horizontal
    > .xo-menu-horizontal__item
    > .xo-menu-horizontal__sub-menu
    > .xo-menu-horizontal__item--child
    > .xo-menu-horizontal__link {
    padding-bottom: 0.6rem;
    border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.12);
    margin-bottom: 0.4rem;
  }

  /* Zwei Arten von Aufklappmenüs, je nach Inhalt:

     a) Gemischt (Produkte): Spalten mit Überschrift und Unterpunkten.
        Einträge ohne Unterpunkte ("Neuheiten", "Bestseller") belegten darin
        eine leere Spalte – sie stehen jetzt als Schnelllinks am Ende der Reihe.

     b) Nur einzelne Punkte (Service): dann sind Spalten sinnlos. Daraus wird
        eine schlichte, schmale Liste, wie man ein Aufklappmenü erwartet. */
  .header-v14__navigation-desktop
    > .xo-menu-horizontal
    > .xo-menu-horizontal__item
    > .xo-menu-horizontal__sub-menu:has(.xo-menu-horizontal__sub-menu--grandchild)
    > .xo-menu-horizontal__item--child:not(:has(.xo-menu-horizontal__sub-menu--grandchild)) {
    order: 2;
    padding: 0;
  }

  .header-v14__navigation-desktop
    > .xo-menu-horizontal
    > .xo-menu-horizontal__item
    > .xo-menu-horizontal__sub-menu:has(.xo-menu-horizontal__sub-menu--grandchild)
    > .xo-menu-horizontal__item--child:not(:has(.xo-menu-horizontal__sub-menu--grandchild))
    > .xo-menu-horizontal__link {
    display: inline-flex;
    align-items: center;
    border: 0.1rem solid rgba(var(--color-foreground), 0.18);
    border-radius: 10rem;
    margin-bottom: 0;
    padding: 0.7rem 1.6rem;
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .header-v14__navigation-desktop
    > .xo-menu-horizontal
    > .xo-menu-horizontal__item
    > .xo-menu-horizontal__sub-menu:has(.xo-menu-horizontal__sub-menu--grandchild)
    > .xo-menu-horizontal__item--child:not(:has(.xo-menu-horizontal__sub-menu--grandchild))
    > .xo-menu-horizontal__link
    .xo-menu-horizontal__child-label {
    font-weight: 600;
  }

  .header-v14__navigation-desktop
    > .xo-menu-horizontal
    > .xo-menu-horizontal__item
    > .xo-menu-horizontal__sub-menu:has(.xo-menu-horizontal__sub-menu--grandchild)
    > .xo-menu-horizontal__item--child:not(:has(.xo-menu-horizontal__sub-menu--grandchild)):hover
    > .xo-menu-horizontal__link {
    border-color: var(--celano-braun);
    background-color: rgba(41, 31, 25, 0.06);
  }

  /* b) Aufklappmenü ohne jede Unterebene: schmale Liste statt Spalten */
  .header-v14__navigation-desktop
    > .xo-menu-horizontal
    > .xo-menu-horizontal__item
    > .xo-menu-horizontal__sub-menu:not(:has(.xo-menu-horizontal__sub-menu--grandchild)) {
    display: block;
    width: 28rem;
    padding: 1rem 0;
    border-radius: 0 0 1.2rem 1.2rem;
  }

  .header-v14__navigation-desktop
    > .xo-menu-horizontal
    > .xo-menu-horizontal__item
    > .xo-menu-horizontal__sub-menu:not(:has(.xo-menu-horizontal__sub-menu--grandchild))
    > .xo-menu-horizontal__item--child {
    padding: 0;
  }

  .header-v14__navigation-desktop
    > .xo-menu-horizontal
    > .xo-menu-horizontal__item
    > .xo-menu-horizontal__sub-menu:not(:has(.xo-menu-horizontal__sub-menu--grandchild))
    > .xo-menu-horizontal__item--child
    > .xo-menu-horizontal__link {
    display: block;
    margin: 0;
    padding: 1.1rem 2.4rem;
    border: 0;
    border-left: 0.3rem solid transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .header-v14__navigation-desktop
    > .xo-menu-horizontal
    > .xo-menu-horizontal__item
    > .xo-menu-horizontal__sub-menu:not(:has(.xo-menu-horizontal__sub-menu--grandchild))
    > .xo-menu-horizontal__item--child
    > .xo-menu-horizontal__link
    .xo-menu-horizontal__child-label {
    font-weight: 500;
    color: rgba(var(--color-foreground), 0.9);
  }

  .header-v14__navigation-desktop
    > .xo-menu-horizontal
    > .xo-menu-horizontal__item
    > .xo-menu-horizontal__sub-menu:not(:has(.xo-menu-horizontal__sub-menu--grandchild))
    > .xo-menu-horizontal__item--child:hover
    > .xo-menu-horizontal__link {
    background-color: rgba(41, 31, 25, 0.06);
    border-left-color: var(--celano-braun);
  }

  .header-v14__navigation-desktop .xo-menu-horizontal__sub-menu .xo-menu-horizontal__item--child {
    padding: 0.3rem 0;
  }

  .header-v14__navigation-desktop .xo-menu-horizontal__sub-menu--grandchild {
    padding-top: 0.2rem;
  }

  .header-v14__navigation-desktop
    .xo-menu-horizontal__sub-menu--grandchild
    .xo-menu-horizontal__item--grandchild {
    padding: 0.25rem 0;
  }
}

/* ===============================================================
   Produktseite
   =============================================================== */

/* Grundpreis als beschriftete Zeile statt nackter Zahl */
.xo-unit-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 1.3rem;
  color: rgba(var(--color-foreground), 0.65);
}

.xo-unit-price--hidden {
  display: none;
}

.xo-unit-price__value {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}

/* Beratungskasten statt des Demo-Bausteins „Sonderangebot“ */
.ksc-beratung {
  display: flex;
  align-items: flex-start;
  gap: 1.6rem;
  padding: 2rem;
  border: 0.1rem solid rgba(var(--color-foreground), 0.12);
  border-radius: 1.2rem;
  background-color: rgba(41, 31, 25, 0.04);
}

.ksc-beratung__bild {
  flex: 0 0 auto;
  width: 8rem;
  height: 8rem;
  object-fit: cover;
  border-radius: 50%;
}

.ksc-beratung__titel {
  margin: 0 0 0.4rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--celano-braun-dunkel);
}

.ksc-beratung__intro {
  margin: 0 0 1rem;
  font-size: 1.4rem;
  line-height: 1.55;
  color: rgba(var(--color-foreground), 0.8);
}

.ksc-beratung__wege {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 2rem;
}

.ksc-beratung__telefon,
.ksc-beratung__email {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--celano-braun);
  text-decoration: none;
}

.ksc-beratung__telefon {
  font-size: 1.7rem;
  font-weight: 700;
}

.ksc-beratung__email {
  font-size: 1.5rem;
  font-weight: 500;
}

.ksc-beratung__telefon:hover,
.ksc-beratung__email:hover {
  color: var(--celano-highlight);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.ksc-beratung__telefon svg,
.ksc-beratung__email svg {
  width: 1.8rem;
  height: 1.8rem;
  flex: 0 0 auto;
}

.ksc-beratung__zeiten {
  margin: 0.4rem 0 0;
  font-size: 1.3rem;
  color: rgba(var(--color-foreground), 0.6);
}

@media (max-width: 575px) {
  .ksc-beratung {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* Zahlarten statt Platzhalterbild im Vertrauens-Baustein der Produktseite */
.trustbadge__zahlarten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trustbadge__zahlarten li {
  display: inline-flex;
}

.trustbadge__zahlart {
  width: 3.8rem;
  height: 2.4rem;
}

/* Kaufbereich: Mengenwahl und Button nebeneinander wurde dem Button auf
   schmalen Bildschirmen zu eng – die Beschriftung lief über zwei Zeilen und
   überlagerte sich mit der zweiten Textebene des Theme-Buttons.
   Unter 576px stehen Mengenwahl und Button deshalb untereinander. */
@media (max-width: 575px) {
  .buy-button {
    flex-wrap: wrap;
  }

  .buy-button > .terms-binding,
  .buy-button > .buy-button__add {
    flex: 1 0 100%;
  }
}

/* Auch auf breiteren Schirmen darf die Beschriftung nicht umbrechen */
.buy-button .xo-btn--block .xo-btn__text {
  white-space: nowrap;
}

/* „In den Warenkorb“ grün (seit 20.10.2026), ein frisches Grün
   (#2e9e52) – das dunkle der Plakette „Sofort lieferbar“ war als Fläche
   zu schwer. Das Theme färbt Knöpfe über diese Variablen, also reicht es,
   sie nur hier umzustellen: weiß auf Grün, beim Überfahren etwas
   dunkler. Ausverkauft (xo-disabled) bleibt der Knopf, wie das Theme ihn
   zeigt. */
.buy-button__add:not([xo-disabled]) .xo-btn {
  --color-light-button: 46, 158, 82;
  --color-light-button-text: 255, 255, 255;
  --color-dark-button: 36, 133, 68;
  --color-dark-button-text: 255, 255, 255;
}

/* Rand in der Farbe der Fläche, damit keine dunklere Kante entsteht.
   Das Theme nimmt für den Rand sonst die Überfahr-Farbe. */
.buy-button__add:not([xo-disabled]) .xo-btn {
  border-color: rgb(46, 158, 82);
}

.buy-button__add:not([xo-disabled]) .xo-btn:hover {
  border-color: rgb(36, 133, 68);
}

/* ===============================================================
   Hauptnavigation: ganze Höhe klickbar
   Das Theme legt den Abstand oben und unten auf den Listenpunkt, der Link
   selbst ist nur so hoch wie das Wort. Beim Überfahren reagierte der Punkt
   also auf der ganzen Fläche, klicken ließ sich aber nur die Schrift.
   =============================================================== */
@media (min-width: 1200px) {
  .header-v14__navigation-desktop > .xo-menu-horizontal > .xo-menu-horizontal__item {
    padding-top: 0;
    padding-bottom: 0;
  }

  .header-v14__navigation-desktop
    > .xo-menu-horizontal
    > .xo-menu-horizontal__item
    > .xo-menu-horizontal__link {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

/* Kein Trennstrich zwischen Kopfbereich und aufgeklapptem Menü.
   Neben der feinen Linie des Themes blieb ein knapper Spalt von gut einem
   Pixel zwischen Kopfbereich und Panel – darin schimmerte der Seiteninhalt
   als dunkler Strich durch. Das Panel rückt deshalb minimal nach oben. */
.header-v14__sticky {
  border-bottom: 0;
}

@media (min-width: 1200px) {
  .header-v14__navigation-desktop
    > .xo-menu-horizontal
    > .xo-menu-horizontal__item
    > .xo-menu-horizontal__sub-menu {
    margin-top: -0.2rem;
  }
}

/* Papierkorb statt „Entfernen“ im Warenkorb */
.ksc-entfernen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: rgba(var(--color-foreground), 0.55);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.ksc-entfernen:hover,
.ksc-entfernen:focus-visible {
  color: var(--celano-highlight);
  background-color: rgba(var(--color-foreground), 0.06);
}

/* Widerrufs-Button mittig in der Fußzeile, auf Höhe der Copyright-Zeile */
.footer-v14__bottom {
  position: relative;
}

/* Mittig über die ganze Fußzeile, unabhängig von Copyright und Cookie-Link.
   So steht er ungefähr unter der Spalte „Produkte“ und wirkt gesetzt statt
   an den Rand gedrängt. */
.footer-v14__widerruf {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
}

.footer-v14__widerruf-button {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 2rem;
  border: 0.1rem solid rgba(var(--color-foreground), 0.25);
  border-radius: 10rem;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgb(var(--color-foreground));
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.footer-v14__widerruf-button:hover,
.footer-v14__widerruf-button:focus-visible {
  border-color: var(--celano-braun);
  background-color: var(--celano-braun);
  color: #fff;
}

@media (max-width: 991px) {
  .footer-v14__widerruf {
    position: static;
    transform: none;
    width: 100%;
    margin-bottom: 1.6rem;
    order: -1;
  }
}

/* ===============================================================
   Reparatur-Box (sections/reparatur-box.liquid)
   Kompakter Kasten statt des halbseitigen Teasers.
   Aufbau (07.10.2026): oben ein warm hinterlegter Kasten mit Foto, Text,
   Button und Telefon; die Markenleiste steht darunter frei auf der Seite.
   Signalfarbe für Kicker, Button und Markenzeile: --celano-highlight.
   =============================================================== */
.ksc-rbox__kopf {
  display: flex;
  align-items: center;
  gap: 3.2rem;
  padding: 2.8rem 3.6rem;
  border-radius: 1.6rem;
  background-color: var(--celano-creme);
}

.ksc-rbox__bild {
  flex: 0 0 auto;
  width: 13rem;
  height: 13rem;
  object-fit: cover;
  border-radius: 50%;
  border: 0.3rem solid #fff;
  box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.08);
}

.ksc-rbox__text {
  flex: 1 1 auto;
  min-width: 0;
}

.ksc-rbox__kicker {
  margin: 0 0 0.6rem;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--celano-highlight);
}

.ksc-rbox__titel {
  margin: 0 0 0.6rem;
  font-size: 2.6rem;
  line-height: 1.2;
}

.ksc-rbox__intro {
  margin: 0;
  max-width: 60ch;
  font-size: 1.6rem;
  line-height: 1.55;
  color: rgba(var(--color-foreground), 0.8);
}

.ksc-rbox__aktion {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

.ksc-rbox__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: 1.5rem 2.8rem;
  border-radius: 0.6rem;
  background-color: var(--celano-highlight);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.ksc-rbox__button::after {
  content: '→';
  font-size: 1.6rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.ksc-rbox__button:hover,
.ksc-rbox__button:focus-visible {
  background-color: var(--celano-highlight-dunkel);
  color: #fff;
}

.ksc-rbox__button:hover::after,
.ksc-rbox__button:focus-visible::after {
  transform: translateX(0.3rem);
}

.ksc-rbox__telefon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  font-size: 1.6rem;
  font-weight: 600;
  color: rgb(var(--color-foreground));
  text-decoration: none;
  white-space: nowrap;
}

.ksc-rbox__telefon:hover,
.ksc-rbox__telefon:focus-visible {
  color: var(--celano-highlight);
}

.ksc-rbox__telefon svg {
  width: 1.7rem;
  height: 1.7rem;
}

/* Markenleiste im unteren Teil des Kastens.
   Zwei Reihen à sechs Logos statt einer gedrängten Zeile – die Logos dürfen
   dadurch deutlich größer werden und bleiben trotzdem im Kasten. */
.ksc-rbox__marken {
  margin-top: 3.2rem;
  padding: 0 1.2rem;
}

.ksc-rbox__marken-titel {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin: 0 0 1.8rem;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--celano-highlight);
}

.ksc-rbox__marken-titel::after {
  content: '';
  width: 6rem;
  height: 0.1rem;
  background-color: var(--celano-highlight);
}

.ksc-rbox__logos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  gap: 2rem 2.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ksc-rbox__logos li {
  display: flex;
  justify-content: center;
}

.ksc-rbox__logos a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Höhe statt Breite vorgeben: quadratische Logos (Gaggia, La Marzocco,
   Astoria) werden dadurch groß genug, breite Schriftzüge (Cimbali, Bezzera,
   La San Marco) begrenzt anschließend die Spaltenbreite. */
.ksc-rbox__logos img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 4.2rem;
  object-fit: contain;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

.ksc-rbox--grau .ksc-rbox__logos img {
  filter: grayscale(1);
  opacity: 0.85;
}

/* Breite Bildschirme: alle Marken in einer Reihe */
@media (min-width: 1200px) {
  .ksc-rbox__logos {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.6rem;
  }

  .ksc-rbox__logos img {
    height: 3.6rem;
  }
}

.ksc-rbox--grau .ksc-rbox__logos a:hover img {
  filter: none;
  opacity: 1;
}

/* Slider der Markenlogos (seit 19.10.2026), siehe
   snippets/logo-slider.liquid. Eine seitlich scrollbare Reihe mit
   Einrasten, Pfeile links und rechts. Vorher lief hier ein automatisches
   Laufband, das beim Nachladen der Logos sprang. Die Scrollleiste ist
   ausgeblendet, Wischen und Trackpad gehen trotzdem. */
.ksc-logoslider {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.ksc-logoslider__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.ksc-logoslider__liste::-webkit-scrollbar {
  display: none;
}

/* Ziehen mit der Maus: Hand als Zeiger, während des Ziehens kein
   Einrasten und kein weiches Scrollen, sonst hinkt die Reihe hinterher. */
@media (hover: hover) and (pointer: fine) {
  .ksc-logoslider__liste {
    cursor: grab;
  }
}

.ksc-logoslider--ziehen .ksc-logoslider__liste {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}

.ksc-logoslider--ziehen .ksc-logoslider__liste a {
  pointer-events: none;
}

/* Weicher Verlauf an den Rändern der Reihe, wie beim früheren Laufband
   (seit 20.10.2026): die Logos laufen aus, statt hart abgeschnitten zu
   werden. Eine Maske statt eines weißen Verlaufs darüber – so passt es
   auf jedem Hintergrund und Klicks auf die Logos bleiben möglich. */
.ksc-logoslider__liste {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.ksc-logoslider--passt .ksc-logoslider__liste {
  -webkit-mask-image: none;
  mask-image: none;
}

.ksc-logoslider__liste li {
  flex: 0 0 auto;
  padding: 0.6rem 2.2rem;
  scroll-snap-align: start;
}

.ksc-logoslider__liste li {
  display: flex;
  justify-content: center;
}

.ksc-logoslider__liste a,
.ksc-logoslider__eintrag {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ksc-logoslider__name {
  font-size: 1.5rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Feste Kiste je Logo: quadratische Zeichen (Gaggia, Rocket) nutzen die
   Höhe, breite Schriftzüge (La San Marco, Bezzera) die Breite. Mit dem
   Regler „Größe im Slider“ am Block lässt sich ein einzelnes Logo
   anpassen. */
.ksc-logoslider__liste img {
  display: block;
  width: auto;
  object-fit: contain;
  transition: filter 0.25s ease;
  /* Ähnliche Wirkung je Logo: Höhe = Grundmaß ÷ Seitenverhältnis^0,35.
     Mit der reinen Wurzel (gleiche Fläche) wurden lange Wortzeichen wie
     Faema oder Astoria zu flach. So wird ein Logo im Verhältnis 2,5 : 1
     4,1 rem hoch, ein quadratisches höchstens 5 rem, ein Wortzeichen um
     2,7 rem bei höchstens 20 rem Breite. Die erste Höhe ist der Rückfall
     für Browser ohne pow(). */
  height: calc(4.2rem * var(--ksc-logo-skala, 1));
  height: calc(var(--ksc-logo-basis, 5.6rem) / pow(var(--ksc-logo-r, 2.5), 0.35) * var(--ksc-logo-skala, 1));
  max-height: calc(5rem * var(--ksc-logo-skala, 1));
  max-width: calc(20rem * var(--ksc-logo-skala, 1));
}

.ksc-logoslider__pfeil {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: 0.1rem solid rgba(41, 31, 25, 0.2);
  border-radius: 50%;
  background: #fff;
  color: var(--celano-braun);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.ksc-logoslider__pfeil span {
  width: 0.9rem;
  height: 0.9rem;
  border-top: 0.2rem solid currentColor;
  border-right: 0.2rem solid currentColor;
  transform: rotate(45deg);
  margin-right: 0.3rem;
}

.ksc-logoslider__pfeil--zurueck span {
  transform: rotate(-135deg);
  margin-right: 0;
  margin-left: 0.3rem;
}

.ksc-logoslider__pfeil:hover:not(:disabled),
.ksc-logoslider__pfeil:focus-visible {
  border-color: var(--celano-highlight);
  color: var(--celano-highlight);
}

.ksc-logoslider__pfeil:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Passt alles in eine Zeile, braucht es keine Pfeile. */
.ksc-logoslider--passt .ksc-logoslider__pfeil {
  display: none;
}

/* Auf dem Handy wischt man; die Pfeile bleiben, aber kleiner. */
@media (max-width: 749px) {
  .ksc-logoslider {
    gap: 0.6rem;
  }

  .ksc-logoslider__pfeil {
    width: 3.2rem;
    height: 3.2rem;
  }

  .ksc-logoslider__liste li {
    padding: 0.6rem 1.6rem;
  }

  .ksc-logoslider__liste {
    --ksc-logo-basis: 4.4rem;
  }

  .ksc-logoslider__liste img {
    max-height: calc(4rem * var(--ksc-logo-skala, 1));
    max-width: calc(15rem * var(--ksc-logo-skala, 1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ksc-logoslider__liste {
    scroll-behavior: auto;
  }
}

/* Schwarz statt grau, beim Überfahren in Farbe. Kontrast hebt die
   entfärbten Logos auf Schwarz und Weiß; `multiply` lässt den weißen
   Grund der JPG-Logos (ECM, Rocket) im Hintergrund verschwinden. Sehr
   helle Logos würden dabei weiß – derzeit ist keins darunter. */
.ksc-rbox--grau .ksc-rbox__logos img {
  filter: grayscale(1) contrast(3);
  opacity: 1;
  mix-blend-mode: multiply;
}

.ksc-logoslider--schwarz img {
  filter: grayscale(1) contrast(3);
  mix-blend-mode: multiply;
}

.ksc-logoslider--schwarz a:hover img,
.ksc-logoslider--schwarz a:focus-visible img {
  filter: none;
}

.ksc-rbox__marke-name {
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  color: rgba(var(--color-foreground), 0.6);
}

@media (max-width: 991px) {
  .ksc-rbox__kopf {
    flex-wrap: wrap;
    gap: 1.8rem;
  }

  .ksc-rbox__logos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ksc-rbox__aktion {
    flex: 1 0 100%;
    flex-direction: row;
    align-items: center;
    gap: 1.6rem;
  }
}

@media (max-width: 575px) {
  .ksc-rbox__kopf {
    padding: 2.2rem 1.8rem;
  }

  .ksc-rbox__bild {
    width: 9rem;
    height: 9rem;
  }

  .ksc-rbox__titel {
    font-size: 2.2rem;
  }

  .ksc-rbox__aktion {
    flex-direction: column;
    align-items: stretch;
  }

  .ksc-rbox__logos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem 1.4rem;
  }

  .ksc-rbox__logos img {
    height: 3.4rem;
  }
}

/* ===============================================================
   „Ausverkauft“ in Produktlisten
   Das Theme setzt einen 5,4 rem großen weißen Kreis mitten aufs Bild;
   das deutsche Wort passt dort nicht hinein und lief über den Rand.
   Stattdessen eine Fahne oben links und ein leicht zurückgenommenes Bild,
   damit der Zustand auf einen Blick erkennbar ist.
   =============================================================== */
.xo-badge-sold-out {
  top: 1.2rem;
  left: 1.2rem;
  transform: none;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0.6rem 1.2rem;
  border-radius: 10rem;
  background-color: var(--celano-braun-dunkel);
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.15);
}

.xo-badge-sold-out__title {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  white-space: nowrap;
  color: #fff;
}

/* Bild zurücknehmen, damit vergriffene Artikel sich abheben */
.xo-product-card__header:has(.xo-badge-sold-out) img {
  opacity: 0.6;
  filter: saturate(0.7);
}

.xo-product-card:has(.xo-badge-sold-out):hover .xo-product-card__header img {
  opacity: 0.75;
}

/* Titel und Preis ebenfalls etwas zurücknehmen */
.xo-product-card:has(.xo-badge-sold-out) .xo-product-card__title,
.xo-product-card:has(.xo-badge-sold-out) [class*='price'] {
  color: rgba(var(--color-foreground), 0.6);
}

/* ===============================================================
   Kacheln (sections/kacheln.liquid)
   =============================================================== */
.ksc-kacheln__kopf {
  max-width: 70ch;
  margin: 0 auto 3.2rem;
  text-align: center;
}

.ksc-kacheln__kicker {
  margin: 0 0 0.6rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--celano-highlight);
}

.ksc-kacheln__titel {
  margin: 0 0 1rem;
  font-size: 3.2rem;
  line-height: 1.2;
}

.ksc-kacheln__intro {
  font-size: 1.7rem;
  line-height: 1.6;
  color: rgba(var(--color-foreground), 0.8);
}

.ksc-kacheln__liste {
  display: grid;
  grid-template-columns: repeat(var(--ksc-spalten, 3), minmax(0, 1fr));
  gap: 2.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ksc-kachel__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 0.1rem solid rgba(var(--color-foreground), 0.12);
  border-radius: 1.4rem;
  overflow: hidden;
  background-color: rgb(var(--color-background));
  color: inherit;
  text-decoration: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.ksc-kachel__link:hover,
.ksc-kachel__link:focus-visible {
  border-color: rgba(41, 31, 25, 0.45);
  box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.08);
  transform: translateY(-0.3rem);
}

.ksc-kachel__bild {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: rgba(41, 31, 25, 0.06);
}

.ksc-kachel__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.ksc-kachel__link:hover .ksc-kachel__bild img {
  transform: scale(1.04);
}

.ksc-kachel__inhalt {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0.6rem;
  padding: 2.2rem 2.2rem 2.4rem;
}

.ksc-kachel__kicker {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--celano-highlight);
}

.ksc-kachel__titel {
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1.25;
}

.ksc-kachel__text {
  font-size: 1.5rem;
  line-height: 1.6;
  color: rgba(var(--color-foreground), 0.75);
}

.ksc-kachel__mehr {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 1.2rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--celano-highlight);
}

.ksc-kachel__mehr svg {
  transition: transform 0.25s ease;
}

.ksc-kachel__link:hover .ksc-kachel__mehr svg {
  transform: translateX(0.4rem);
}

@media (max-width: 991px) {
  .ksc-kacheln__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .ksc-kacheln__liste {
    grid-template-columns: minmax(0, 1fr);
  }

  .ksc-kacheln__titel {
    font-size: 2.6rem;
  }
}

/* Kachel ohne Ziel: kein Hover-Effekt, sie ist reine Information */
.ksc-kachel__link--statisch {
  background-color: rgba(41, 31, 25, 0.04);
}

.ksc-kachel__link--statisch:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(var(--color-foreground), 0.12);
}

/* Grundpreis im Warenkorb: beschriftet, eine Zeile */
.xo-cart-unit-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 1.3rem;
  color: rgba(var(--color-foreground), 0.6);
}

/* Staffelpreise: nur die Tabelle, ohne Werbezeile der App.
   Die Zeile („Mehr nehmen, weniger zahlen“) kommt aus Dealeasy und lässt
   sich dort nicht abschalten, ohne das Angebot zu ändern. */
.lb-vd-promotion-container,
#lb-vd-promotion-text {
  display: none !important;
}

/* ===============================================================
   Startseiten-Kopf (sections/startseite-hero.liquid)
   =============================================================== */
.ksc-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 5rem;
}

/* Alle Kicker-Zeilen (die kleine Zeile über einer Überschrift) tragen die
   Highlight-Farbe: Startseiten-Kopf, Reparatur-Box, Kacheln, Service- und
   Über-uns-Seiten. So taucht das Orange über die ganze Seite verteilt auf. */
.ksc-hero__kicker {
  margin: 0 0 1rem;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--celano-highlight);
}

.ksc-hero__titel {
  margin: 0 0 1.6rem;
  font-size: clamp(3.6rem, 3.4vw, 5.4rem);
  line-height: 1.08;
}

.ksc-hero__intro {
  max-width: 52ch;
  font-size: 1.8rem;
  line-height: 1.6;
  color: rgba(var(--color-foreground), 0.82);
}

.ksc-hero__intro p {
  margin: 0 0 1rem;
}

.ksc-hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 2.6rem;
}

.ksc-hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 2.8rem;
  border-radius: 10rem;
  border: 0.1rem solid transparent;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ksc-hero__button--haupt {
  background-color: var(--celano-braun-dunkel);
  color: #fff;
}

.ksc-hero__button--haupt:hover,
.ksc-hero__button--haupt:focus-visible {
  background-color: var(--celano-braun);
  color: #fff;
}

.ksc-hero__button--zweit {
  border-color: rgba(var(--color-foreground), 0.28);
  color: rgb(var(--color-foreground));
}

.ksc-hero__button--zweit:hover,
.ksc-hero__button--zweit:focus-visible {
  border-color: var(--celano-braun);
  color: var(--celano-braun);
}

.ksc-hero__punkte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2.4rem;
  margin: 2.6rem 0 0;
  padding: 0;
  list-style: none;
}

.ksc-hero__punkte li {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.45rem;
  color: rgba(var(--color-foreground), 0.72);
}

.ksc-hero__punkte svg {
  flex: 0 0 auto;
  color: var(--celano-braun);
}

/* Bildcollage: ein hohes Bild links, zwei kleine rechts darüber und darunter */
.ksc-hero__bilder {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
  height: 52rem;
}

.ksc-hero__bild {
  margin: 0;
  overflow: hidden;
  border-radius: 1.6rem;
  background-color: rgba(41, 31, 25, 0.06);
}

.ksc-hero__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.ksc-hero__bild:hover img {
  transform: scale(1.03);
}

.ksc-hero__bild--gross {
  grid-row: span 2;
}

@media (max-width: 1199px) {
  .ksc-hero {
    gap: 3.2rem;
  }

  .ksc-hero__bilder {
    height: 42rem;
  }
}

@media (max-width: 991px) {
  .ksc-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }

  .ksc-hero__bilder {
    height: 36rem;
  }

  .ksc-hero__intro {
    max-width: none;
  }
}

@media (max-width: 575px) {
  .ksc-hero__bilder {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 22rem 12rem;
    height: auto;
    gap: 1rem;
  }

  .ksc-hero__bild--gross {
    grid-row: span 1;
    grid-column: span 2;
  }

  .ksc-hero__button {
    flex: 1 1 100%;
  }
}

/* Grundpreis in Produktkacheln: kurz und unauffällig unter dem Preis */
.xo-unit-price--kurz {
  display: block;
  margin-top: 0.2rem;
  font-size: 1.3rem;
  font-weight: 400;
  color: rgba(var(--color-foreground), 0.55);
}

/* ===============================================================
   Footer-Links: schwarz statt braun, normale Strichstärke
   Die Links im Footer tragen keine Theme-Klasse und erbten deshalb das
   Braun aus der allgemeinen Regel für klassenlose Links. Im Footer stehen
   sie aber zu dicht beieinander – schwarz ist dort ruhiger.
   =============================================================== */
footer a:not([class]),
footer a:not([class]):visited,
footer .footer-v14__copyright a.footer__shop-name,
footer .footer__shop-name {
  color: rgb(var(--color-foreground));
}

footer a:not([class]):hover,
footer a:not([class]):focus-visible,
footer .footer-v14__copyright a.footer__shop-name:hover,
footer .footer__shop-name:hover {
  color: var(--celano-highlight);
}

footer .footer-v14__list-item a,
footer .footer-v14__kontakt-zeile a {
  font-weight: 400;
}

/* ===============================================================
   Footer dunkel: Hintergrund sehr dunkles Braun, alles weiß
   Der Hintergrund kommt aus den Footer-Einstellungen (Hintergrundfarbe
   #291F19 = --celano-dunkel). Das Theme färbt den Footer über
   --color-foreground/--color-background; beide werden hier für den Footer
   umgestellt, damit Überschriften, Linien, Social-Icons und das
   Newsletter-Feld mitziehen. Die Abschwächung der Texte auf 50 %
   entfällt – im Footer ist alles voll weiß.
   =============================================================== */
.section-footer footer {
  --color-foreground: 255, 255, 255;
  --color-background: 41, 31, 25;
  color: #fff;
}

.section-footer footer .footer-v14__heading,
.section-footer footer .footer-v14__description,
.section-footer footer .footer-v14__information li,
.section-footer footer .footer-v14__subtext,
.section-footer footer .footer-v14__copyright,
.section-footer footer .footer-v14__copyright-content,
.section-footer footer .footer-v14__cookie-link,
.section-footer footer .footer-v14__list-item a,
.section-footer footer .footer-v14__kontakt-zeile a,
.section-footer footer a:not([class]),
.section-footer footer a:not([class]):visited,
.section-footer footer .footer__shop-name,
.section-footer footer .footer-v14__copyright a.footer__shop-name {
  color: #fff;
  opacity: 1;
}

/* Überfahren: unterstreichen statt Farbwechsel (Braun wäre auf Braun unsichtbar) */
.section-footer footer .footer-v14__list-item:hover a,
.section-footer footer .footer-v14__list-item a:focus-visible,
.section-footer footer .footer-v14__kontakt-zeile a:hover,
.section-footer footer .footer-v14__kontakt-zeile a:focus-visible,
.section-footer footer .footer-v14__cookie-link:hover,
.section-footer footer .footer-v14__cookie-link:focus-visible,
.section-footer footer a:not([class]):hover,
.section-footer footer a:not([class]):focus-visible,
.section-footer footer .footer__shop-name:hover,
.section-footer footer .footer-v14__copyright a.footer__shop-name:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Symbole der Kontaktzeilen (auch WhatsApp) weiß und voll deckend */
.section-footer footer .footer-v14__kontakt-icon,
.section-footer footer .footer-v14__kontakt-zeile:has(a[href^='https://wa.me']) .footer-v14__kontakt-icon {
  color: #fff;
  opacity: 1;
}

/* Logo: schwarzes SVG weiß einfärben */
.section-footer footer .footer-v14__logo img {
  filter: brightness(0) invert(1);
}

/* Reparaturauftrag: Highlight-Farbe, damit er als wichtigster Button heraussticht */
.section-footer footer .footer-v14__aktion {
  background: var(--celano-highlight);
  border: 0.1rem solid var(--celano-highlight);
  color: #fff;
}

.section-footer footer .footer-v14__aktion:hover,
.section-footer footer .footer-v14__aktion:focus-visible {
  background: var(--celano-highlight-dunkel);
  border-color: var(--celano-highlight-dunkel);
  color: #fff;
}

/* Vertrag widerrufen: weiß umrandet, beim Überfahren weiß gefüllt mit braunem Text */
.section-footer footer .footer-v14__widerruf-button {
  background: transparent;
  border: 0.1rem solid #fff;
  color: #fff;
}

.section-footer footer .footer-v14__widerruf-button:hover,
.section-footer footer .footer-v14__widerruf-button:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--celano-highlight);
}

/* Newsletter-Feld: weiße Schrift, Platzhalter leicht gedämpft */
.section-footer footer .footer-v14__input-btn .xo-field-input__input {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}

.section-footer footer .footer-v14__input-btn .xo-field-input__input::placeholder {
  color: rgba(255, 255, 255, 0.75);
}

/* ===============================================================
   Aktiver Punkt in der Hauptnavigation
   Das Theme hebt den aktuellen Punkt nicht hervor. Jetzt bekommt er die
   Highlight-Farbe und einen Strich darunter – so ist erkennbar, wo man ist.
   `ksc-menu-aktiv` setzt snippets/menu-horizontal.liquid über `link.active`,
   gilt also auch auf Unterseiten des Punktes.
   =============================================================== */
.header-v14__navigation-desktop
  > .xo-menu-horizontal
  > .xo-menu-horizontal__item.ksc-menu-aktiv
  > .xo-menu-horizontal__link
  .xo-menu-horizontal__label {
  color: var(--celano-highlight);
}

.header-v14__navigation-desktop
  > .xo-menu-horizontal
  > .xo-menu-horizontal__item.ksc-menu-aktiv
  > .xo-menu-horizontal__link {
  position: relative;
}

.header-v14__navigation-desktop
  > .xo-menu-horizontal
  > .xo-menu-horizontal__item.ksc-menu-aktiv
  > .xo-menu-horizontal__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3.4rem;
  height: 0.2rem;
  border-radius: 0.2rem;
  background-color: var(--celano-highlight);
}

/* Im Aufklappmenü: der Unterpunkt der aufgerufenen Seite, etwa
   „Barista-Zubehör“ auf /collections/barista-zubehoer. Das Theme setzt
   dort `aria-current`, färbt ihn aber nicht. `!important`, weil die
   Regeln für die beiden Bauarten des Aufklappmenüs (Spalten bei
   „Produkte“, schmale Liste bei „Service“) spezifischer sind und die
   Farbe sonst wieder überschreiben. */
.xo-menu-horizontal__sub-menu .xo-menu-horizontal__link[aria-current='page'] .xo-menu-horizontal__child-label,
.xo-menu-horizontal__sub-menu .xo-menu-horizontal__link[aria-current='page'] .xo-menu-horizontal__grandchild-label {
  color: var(--celano-highlight) !important;
}

/* Im Hamburger-Menü auf schmalen Bildschirmen reicht die Farbe */
.header-v14__navigation-mobile .ksc-menu-aktiv > .xo-menu-horizontal__link .xo-menu-horizontal__label,
.xo-menu-vertical .ksc-menu-aktiv > a {
  color: var(--celano-highlight);
}

/* ===============================================================
   Brotkrumen unter dem Kategoriekopf
   Standen vorher weiß im Kopfbild und waren dort kaum lesbar.
   =============================================================== */
.ksc-brotkrumen {
  background-color: #f3f3f3;
}

.ksc-brotkrumen .breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  /* Oben und unten gleich viel Luft: die Leiste ist eine eigene Fläche
     zwischen Kopfbild und Inhalt. Mit weniger Platz unten klebten die
     Kategorienkacheln an der Unterkante. */
  padding: 2.2rem 0;
  margin: 0;
  font-size: 1.4rem;
  color: rgba(var(--color-foreground), 0.6);
}

.ksc-brotkrumen .breadcrumb a,
.ksc-brotkrumen .breadcrumb a:visited {
  color: rgba(var(--color-foreground), 0.75);
  text-decoration: none;
}

.ksc-brotkrumen .breadcrumb a:hover,
.ksc-brotkrumen .breadcrumb a:focus-visible {
  color: var(--celano-highlight);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Lange Filterlisten (Hersteller, Produktart) scrollen statt die Spalte
   endlos zu strecken. Greift erst, wenn es wirklich viele Einträge gibt. */
.fieldset-block__content--column {
  max-height: 30rem;
  overflow-y: auto;
  padding-right: 0.6rem;
}

.fieldset-block__content--column::-webkit-scrollbar {
  width: 0.4rem;
}

.fieldset-block__content--column::-webkit-scrollbar-thumb {
  border-radius: 0.2rem;
  background-color: rgba(var(--color-foreground), 0.18);
}

/* Etwas Luft zwischen der WhatsApp-Zeile und der Anschrift darunter –
   die Anschrift ist dreizeilig und klebte sonst an der Zeile davor. */
.footer-v14__kontakt-zeile--adresse {
  margin-top: 1.2rem;
}

/* „Vertrag widerrufen“ sitzt in der schmalen Fußzeile und wirkte dort
   zu wuchtig: weniger Innenabstand, etwas kleinere Schrift. */
.footer-v14__widerruf-button {
  padding: 0.55rem 1.5rem;
  font-size: 1.3rem;
  font-weight: 500;
}

/* ===============================================================
   Kategorien in der Seitenleiste der Produktlisten
   =============================================================== */
.ksc-kategorien {
  margin-top: 1rem;
  padding-top: 2.4rem;
  border-top: 0.1rem solid rgba(var(--color-foreground), 0.12);
}

.ksc-kategorien__titel {
  margin: 0 0 1.4rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ksc-kategorien__liste,
.ksc-kategorien__unterliste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ksc-kategorien__punkt > a,
.ksc-kategorien__unterpunkt > a {
  display: block;
  padding: 0.6rem 0;
  font-size: 1.5rem;
  line-height: 1.4;
  color: rgba(var(--color-foreground), 0.8);
  text-decoration: none;
  transition: color 0.2s ease;
}

.ksc-kategorien__punkt > a:hover,
.ksc-kategorien__unterpunkt > a:hover {
  color: var(--celano-highlight);
}

/* Aktueller Zweig und aktuelle Kategorie hervorheben */
.ksc-kategorien__punkt--aktiv > a {
  font-weight: 700;
  color: rgb(var(--color-foreground));
}

.ksc-kategorien__punkt > a[aria-current='page'],
.ksc-kategorien__unterpunkt > a[aria-current='page'] {
  color: var(--celano-highlight);
  font-weight: 700;
}

/* Zweite Ebene eingerückt mit Führungslinie */
.ksc-kategorien__unterliste {
  margin: 0.2rem 0 0.8rem;
  padding-left: 1.2rem;
  border-left: 0.2rem solid rgba(var(--color-foreground), 0.12);
}

.ksc-kategorien__unterpunkt > a {
  padding: 0.45rem 0;
  font-size: 1.4rem;
  color: rgba(var(--color-foreground), 0.65);
}

/* Linktext in Großbuchstaben (Kategorie-Kacheln auf der Startseite) */
.ksc-kacheln--versal .ksc-kachel__mehr {
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Zwei Kachelreihen direkt untereinander: die zweite braucht oben weniger Luft */
.section-kacheln + .section-kacheln .ksc-kacheln__liste {
  margin-top: 0;
}

/* Die Markenleiste endet knapp über den Service-Kacheln – dazwischen
   braucht es Luft, sonst wirken beide wie ein Block. */
.section-reparatur-box + .section-kacheln {
  padding-top: 5rem;
}

/* ===============================================================
   Reparaturauftrag in drei Schritten
   Siebzehn Felder auf einmal schrecken ab. Technisch bleibt es ein
   Formular – die Schritte werden nur ein- und ausgeblendet.
   =============================================================== */
.ksc-reparatur__fortschritt {
  display: none;
  margin: 0 0 2.4rem;
  padding: 0;
  list-style: none;
  gap: 0.8rem;
}

.ksc-reparatur--schritte .ksc-reparatur__fortschritt {
  display: flex;
  flex-wrap: wrap;
}

.ksc-reparatur__fortschritt li {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  flex: 1 1 0;
  min-width: 12rem;
  padding: 0.9rem 1.2rem;
  border-radius: 0.8rem;
  background-color: rgba(var(--color-foreground), 0.04);
  font-size: 1.4rem;
  color: rgba(var(--color-foreground), 0.55);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.ksc-reparatur__fortschritt li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: rgba(var(--color-foreground), 0.12);
  font-size: 1.3rem;
  font-weight: 700;
  color: rgb(var(--color-foreground));
}

.ksc-reparatur__fortschritt li.ist-erledigt {
  color: rgb(var(--color-foreground));
}

.ksc-reparatur__fortschritt li.ist-erledigt span {
  background-color: var(--celano-braun);
  color: #fff;
}

.ksc-reparatur__fortschritt li.ist-aktiv {
  background-color: rgba(181, 94, 57, 0.1);
  color: var(--celano-highlight);
  font-weight: 600;
}

.ksc-reparatur__fortschritt li.ist-aktiv span {
  background-color: var(--celano-highlight);
  color: #fff;
}

/* Das Theme-CSS gibt den Knöpfen display:inline-flex; ohne diese Regel
   bliebe „Weiter“ im letzten Schritt trotz hidden-Attribut sichtbar. */
.ksc-reparatur [hidden] {
  display: none !important;
}

.ksc-reparatur__navigation {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  margin-top: 2rem;
}

.ksc-reparatur__zurueck,
.ksc-reparatur__weiter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.3rem 2.6rem;
  border-radius: 10rem;
  border: 0.1rem solid transparent;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ksc-reparatur__zurueck {
  background: none;
  border-color: rgba(var(--color-foreground), 0.25);
  color: rgb(var(--color-foreground));
}

.ksc-reparatur__zurueck:hover {
  border-color: var(--celano-highlight);
  color: var(--celano-highlight);
}

.ksc-reparatur__weiter {
  margin-left: auto;
  background-color: var(--celano-highlight);
  color: #fff;
}

.ksc-reparatur__weiter:hover {
  background-color: var(--celano-highlight-dunkel);
}

/* Im Schrittbetrieb sitzt der Absenden-Knopf im letzten Schritt */
.ksc-reparatur--schritte .ksc-reparatur__absenden {
  width: 100%;
}

@media (max-width: 575px) {
  .ksc-reparatur__fortschritt li {
    min-width: 0;
    padding: 0.7rem 0.9rem;
    font-size: 1.3rem;
  }

  .ksc-reparatur__navigation {
    flex-direction: column-reverse;
  }

  .ksc-reparatur__weiter {
    margin-left: 0;
  }
}

/* Filterüberschriften in der Seitenleiste: die Schreibschrift des Themes
   (Rancho) ist für eine Funktionsleiste schlecht lesbar – hier die
   Grundschrift wie bei den Kategorien darunter. */
.fieldset-block__title,
.xo-fieldset-popover__label,
.collection-sidebar__title {
  font-family: var(--font-body-family, Jost, sans-serif);
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* ===============================================================
   Suchseite
   Überschrift, Suchfeld und Meldung standen unterschiedlich ausgerichtet
   über die volle Breite. Jetzt ein zentrierter, ruhiger Kopfbereich.
   =============================================================== */
.main-search__header {
  max-width: 68rem;
  margin: 0 auto 3.2rem;
  text-align: center;
}

.main-search__title {
  margin-bottom: 2rem;
  font-size: clamp(3rem, 3vw, 4.2rem);
}

/* Das Theme setzt über dem Feld eine schwebende Beschriftung
   („Suchergebnisse“), die links aus dem Feld herausragte. Nur den Text
   ausblenden – das umschließende Element ist selbst ein <label> und
   enthält das Eingabefeld. */
.main-search__search .xo-field-input__label,
.main-search__search .xo-field-input__placeholder {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.main-search__search .xo-field-input__input {
  height: 5.4rem;
  padding: 0 5.4rem 0 2.2rem;
  border-radius: 10rem;
  border-color: rgba(var(--color-foreground), 0.25);
  font-size: 1.6rem;
}

.main-search__search .xo-field-input__input:focus {
  border-color: var(--celano-highlight);
  box-shadow: 0 0 0 0.2rem rgba(181, 94, 57, 0.15);
}

.main-search__status {
  margin-top: 1.8rem;
  font-size: 1.6rem;
  color: rgba(var(--color-foreground), 0.7);
}

/* Weiterweg, wenn die Suche nichts findet */
.ksc-suche-leer {
  margin-top: 3.2rem;
  padding-top: 2.8rem;
  border-top: 0.1rem solid rgba(var(--color-foreground), 0.12);
}

.ksc-suche-leer__titel {
  margin: 0 0 1.4rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--celano-highlight);
}

.ksc-suche-leer__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 0 0 2.4rem;
  padding: 0;
  list-style: none;
}

.ksc-suche-leer__liste a {
  display: inline-flex;
  padding: 0.9rem 1.8rem;
  border: 0.1rem solid rgba(var(--color-foreground), 0.2);
  border-radius: 10rem;
  font-size: 1.5rem;
  color: rgb(var(--color-foreground));
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.ksc-suche-leer__liste a:hover {
  border-color: var(--celano-highlight);
  background-color: rgba(181, 94, 57, 0.08);
  color: var(--celano-highlight);
}

.ksc-suche-leer__hilfe {
  margin: 0;
  font-size: 1.5rem;
  color: rgba(var(--color-foreground), 0.7);
}

/* ===============================================================
   Bildkopf (sections/bildkopf.liquid)
   Ganzflächiges Foto, der Kopfbereich liegt durchsichtig darüber.
   =============================================================== */
:root {
  /* Höhe des Kopfbereichs ohne die Hinweisleiste darüber.
     Das Bild wird genau um diesen Betrag nach oben gezogen – ist der Wert
     zu groß, schiebt es sich unter die braune Hinweisleiste. */
  --ksc-kopf-hoehe: 10.4rem;
}

/* Die Hinweisleiste muss über dem hochgezogenen Bild liegen, sonst
   verdeckt das Foto sie teilweise. */
.ksc-kopfleiste {
  position: relative;
  z-index: 20;
}

.ksc-bildkopf {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: var(--ksc-bildkopf-hoehe, 52rem);
  margin-top: calc(-1 * var(--ksc-kopf-hoehe));
  padding: calc(var(--ksc-kopf-hoehe) + 4rem) 2rem 5rem;
  overflow: hidden;
  background-color: var(--celano-dunkel);
}

.ksc-bildkopf__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center var(--ksc-bildkopf-ausschnitt, 50%);
  z-index: 0;
}

/* Dunkler Verlauf am oberen Rand, damit Logo, Menüsymbol und
   Warenkorb lesbar bleiben.

   Der Kopfbereich liegt durchsichtig über dem Foto und ist weiß. Wo das
   Foto an dieser Stelle hell ist, verschwand er darin – auf „Über uns"
   genau im Fenster hinter Antonino, auf dem Handy war das Logo kaum noch
   zu erkennen. Ein gleichmäßig dunklerer Schleier über dem ganzen Bild
   wäre der falsche Weg: Er nimmt dem Foto überall Licht, obwohl nur die
   oberen Zentimeter kritisch sind. Der Verlauf läuft nach unten aus und
   ist im Motiv nicht zu bemerken. */
.ksc-bildkopf::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--ksc-kopf-hoehe) + 9rem);
  z-index: 1;
  /* Die Deckkraft haelt bis 60 Prozent und laeuft erst dann aus: Der
     Kopfbereich reicht weiter herunter, als der erste Entwurf annahm,
     und auf der Kontaktseite sitzt das Logo genau dort, wo das Foto am
     hellsten ist. */
  background-image: linear-gradient(
    to bottom,
    rgba(26, 18, 13, 0.62),
    rgba(26, 18, 13, 0.45) 60%,
    rgba(26, 18, 13, 0)
  );
  pointer-events: none;
}

.ksc-bildkopf::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--ksc-bildkopf-schleier, rgba(26, 18, 13, 0.5));
}

.ksc-bildkopf__inhalt {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--xo-container-width, 1600px);
  margin: 0 auto;
  color: #fff;
  text-align: center;
}

.ksc-bildkopf__kicker {
  margin: 0 0 1rem;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.85;
}

.ksc-bildkopf__titel {
  margin: 0;
  font-size: clamp(3.2rem, 4vw, 5.6rem);
  line-height: 1.1;
  color: #fff;
}

.ksc-bildkopf__text {
  max-width: 62ch;
  margin: 1.6rem auto 0;
  font-size: 1.8rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

/* --- Kopfbereich durchsichtig, solange die Seite oben steht ------------
   Nur auf Seiten mit Bildkopf und nur ganz oben – beim Scrollen bekommt
   der Kopfbereich wieder seinen Hintergrund, sonst stünde weiße Schrift
   auf weißem Inhalt. Die Klasse `ksc-oben` setzt das Skript des Abschnitts.
   --------------------------------------------------------------------- */
html.ksc-oben body:has(.ksc-bildkopf) .header-v14__sticky {
  background-color: transparent !important;
  /* Das Theme leitet Schrift- und Symbolfarben aus dieser Variablen ab –
     einmal umstellen färbt Menü, Symbole und Suchfeld auf einen Schlag. */
  --color-foreground: 255, 255, 255;
}

html.ksc-oben body:has(.ksc-bildkopf) .header-v14__logo img {
  /* Weiß einfärben UND Schatten in einer Deklaration – siehe Hinweis
     weiter unten bei den Symbolen. */
  filter: brightness(0) invert(1) drop-shadow(0 0.1rem 0.5rem rgba(0, 0, 0, 0.55));
}

html.ksc-oben body:has(.ksc-bildkopf) .ksc-suche__feld {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

html.ksc-oben body:has(.ksc-bildkopf) .ksc-suche__feld::placeholder {
  color: rgba(255, 255, 255, 0.75);
}

/* Die Trefferliste der Suche hängt im Kopfbereich und erbt dessen weiße
   Schrift – weiß auf dem weißen Kasten, die Artikelnamen waren auf Seiten
   mit Bildkopf unsichtbar (bis 19.10.2026). Hier wieder dunkel. */
html.ksc-oben body:has(.ksc-bildkopf) .ksc-suche__treffer {
  --color-foreground: 0, 0, 0;
  color: rgb(var(--color-foreground));
}

/* Aktiver Menüpunkt über dem Foto: aufgehellte Signalfarbe, sonst geht das
   kräftige Orange im Bild unter. Gilt auch für den Strich darunter.
   Bewusst ohne Schatten – ein Textschatten im Kopfbereich wirkt unsauber. */
html.ksc-oben
  body:has(.ksc-bildkopf)
  .header-v14__navigation-desktop
  > .xo-menu-horizontal
  > .xo-menu-horizontal__item.ksc-menu-aktiv
  > .xo-menu-horizontal__link
  .xo-menu-horizontal__label {
  color: var(--celano-highlight-hell);
}

html.ksc-oben
  body:has(.ksc-bildkopf)
  .header-v14__navigation-desktop
  > .xo-menu-horizontal
  > .xo-menu-horizontal__item.ksc-menu-aktiv
  > .xo-menu-horizontal__link::after {
  background-color: var(--celano-highlight-hell);
}

/* --- Aufgeklapptes Menü: Kopfbereich wieder deckend ---------------------
   Über einem Foto ist ein durchsichtiger Kopfbereich schön, sobald aber ein
   Menü aufklappt, braucht es eine ruhige Fläche – sonst steht die weiße
   Schrift des Menüs auf dem Panel und das Logo verschwindet im Bild. */
html.ksc-oben body:has(.ksc-bildkopf) .header-v14__sticky:has(.xo-menu-horizontal__item--hover:hover > .xo-menu-horizontal__sub-menu),
html.ksc-oben body:has(.ksc-bildkopf) .header-v14__sticky:has(.xo-menu-horizontal__item--open > .xo-menu-horizontal__sub-menu) {
  background-color: rgb(var(--color-background)) !important;
  --color-foreground: 0, 0, 0;
}

html.ksc-oben body:has(.ksc-bildkopf) .header-v14__sticky:has(.xo-menu-horizontal__item--hover:hover > .xo-menu-horizontal__sub-menu) .header-v14__logo img,
html.ksc-oben body:has(.ksc-bildkopf) .header-v14__sticky:has(.xo-menu-horizontal__item--open > .xo-menu-horizontal__sub-menu) .header-v14__logo img {
  filter: none;
}

html.ksc-oben body:has(.ksc-bildkopf) .header-v14__sticky:has(.xo-menu-horizontal__item--hover:hover > .xo-menu-horizontal__sub-menu) .ksc-suche__feld,
html.ksc-oben body:has(.ksc-bildkopf) .header-v14__sticky:has(.xo-menu-horizontal__item--open > .xo-menu-horizontal__sub-menu) .ksc-suche__feld {
  border-color: rgba(0, 0, 0, 0.25);
  color: rgb(0, 0, 0);
}

@media (max-width: 1199px) {
  :root {
    --ksc-kopf-hoehe: 8rem;
  }
}

@media (max-width: 767px) {
  .ksc-bildkopf {
    min-height: 34rem;
    padding-bottom: 3.5rem;
  }

  /* Auf dem Handy steht der Kopfbereich dichter am Motiv und das Foto
     ist stärker beschnitten – dort braucht der Verlauf etwas mehr. */
  .ksc-bildkopf::before {
    height: calc(var(--ksc-kopf-hoehe) + 7rem);
    background-image: linear-gradient(
      to bottom,
      rgba(26, 18, 13, 0.72),
      rgba(26, 18, 13, 0.5) 60%,
      rgba(26, 18, 13, 0)
    );
  }
}

/* ===============================================================
   Seitenleiste der Produktlisten: eine einheitliche, schlanke Optik
   Vorher: Filterüberschriften groß, mit dickem Balken links und viel
   Innenabstand – die Kategorien weiter unten rutschten aus dem Blick.
   Jetzt tragen Verfügbarkeit, Preis und Kategorien denselben Stil.
   =============================================================== */
.main-collection-style1__sidebar .fieldset-block__header,
.main-collection-mobile__modal .fieldset-block__header {
  padding: 0;
  border-left: 0;
  margin-bottom: 1rem;
}

.main-collection-style1__sidebar .fieldset-block__title,
.main-collection-mobile__modal .fieldset-block__title,
.ksc-kategorien__titel {
  font-family: var(--font-body-family, Jost, sans-serif);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-right: 0;
}

/* Deutlich weniger Luft zwischen den Gruppen */
.main-collection-style1__sidebar .fieldset-block__content,
.main-collection-mobile__modal .fieldset-block__content {
  padding-top: 0;
  padding-bottom: 2rem;
  row-gap: 0.6rem;
}

/* Trennlinie zwischen den Filtergruppen, gleiche Linie wie über den Kategorien */
.main-collection-style1__sidebar .fieldset-block__header,
.main-collection-mobile__modal .fieldset-block__header {
  padding-top: 2rem;
  border-top: 0.1rem solid rgba(var(--color-foreground), 0.12);
}

.main-collection-style1__sidebar > *:first-child .fieldset-block__header,
.main-collection-mobile__modal > *:first-child .fieldset-block__header {
  padding-top: 0;
  border-top: 0;
}

/* Kategorienblock in denselben Rhythmus bringen */
.ksc-kategorien {
  margin-top: 0;
  padding-top: 2rem;
}

.ksc-kategorien__titel {
  margin-bottom: 1rem;
}

.ksc-kategorien__punkt > a,
.ksc-kategorien__unterpunkt > a {
  padding: 0.45rem 0;
  font-size: 1.45rem;
}

.ksc-kategorien__unterpunkt > a {
  padding: 0.35rem 0;
  font-size: 1.35rem;
}

/* Kästchen und Preisregler kompakter */
.main-collection-style1__sidebar .xo-field-checkbox,
.main-collection-mobile__modal .xo-field-checkbox {
  font-size: 1.45rem;
}

.main-collection-style1__sidebar .xo-field-price,
.main-collection-mobile__modal .xo-field-price {
  font-size: 1.4rem;
}

/* ===============================================================
   Über uns als Geschichte statt als Reihe gleicher Kästen
   Kapitelnummer, mehr Luft zwischen den Abschnitten, größere Bilder,
   das Zitat als echtes Zwischenstück über die volle Breite.
   =============================================================== */
.ksc-ueber__kapitel {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin: 0 0 1.2rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--celano-highlight);
}

.ksc-ueber__kapitel span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  flex: 0 0 auto;
  border: 0.15rem solid var(--celano-highlight);
  border-radius: 50%;
  font-size: 1.4rem;
  letter-spacing: 0;
}

/* Mehr Abstand zwischen den Kapiteln, Text schmaler und ruhiger */
.ksc-ueber__abschnitt {
  margin-bottom: 9rem;
  gap: 4rem;
}

.ksc-ueber__abschnitt-text {
  max-width: 58ch;
}

.ksc-ueber__abschnitt-text h2 {
  margin-bottom: 1.6rem;
  font-size: clamp(2.6rem, 2.6vw, 3.6rem);
  line-height: 1.15;
}

.ksc-ueber__abschnitt-text p {
  font-size: 1.7rem;
}

/* Bilder größer und mit weichen Ecken, damit sie tragen */
.ksc-ueber__abschnitt-bild {
  border-radius: 1.6rem;
  overflow: hidden;
}

.ksc-ueber__abschnitt-bild .xo-image:not(.xo-image--svg) {
  padding-top: 0;
  height: 44rem;
}

.ksc-ueber__abschnitt-bild .xo-image img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Abschnitte ohne Bild als ruhiger Textblock in der Mitte */
.ksc-ueber__abschnitt--ohne-bild .ksc-ueber__abschnitt-text {
  max-width: 68ch;
  margin-inline: auto;
}

/* Zitat als Zwischenstück über die ganze Breite, nicht als Randnotiz */
.ksc-ueber__zitat {
  max-width: none;
  margin: 0 0 9rem;
  padding: 5rem 2rem;
  border-left: 0;
  border-top: 0.1rem solid rgba(var(--color-foreground), 0.12);
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.12);
  text-align: center;
}

.ksc-ueber__zitat p {
  max-width: 24ch;
  margin: 0 auto;
  font-size: clamp(2.4rem, 3vw, 3.6rem);
  line-height: 1.35;
  font-weight: 500;
}

.ksc-ueber__zitat p::before {
  content: '„';
  color: var(--celano-highlight);
}

.ksc-ueber__zitat p::after {
  content: '“';
  color: var(--celano-highlight);
}

.ksc-ueber__zitat cite {
  margin-top: 2rem;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 1;
  color: var(--celano-highlight);
}

@media (max-width: 899px) {
  .ksc-ueber__abschnitt {
    margin-bottom: 6rem;
  }

  .ksc-ueber__abschnitt-bild .xo-image:not(.xo-image--svg) {
    height: 28rem;
  }

  .ksc-ueber__zitat {
    padding: 3.5rem 0;
    margin-bottom: 6rem;
  }
}

/* ===============================================================
   Produktreihen auf der Startseite: gleicher Kopf wie bei den Kacheln
   Die Unterzeile steht über der Überschrift und trägt die Signalfarbe –
   so sieht „Beliebt bei unseren Kunden“ aus wie „Wonach suchen Sie?“.
   =============================================================== */
.product-v8__subtitle {
  order: -1;
  margin: 0 0 0.6rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--celano-highlight);
}

.product-v8__heading,
.product-v8__header {
  display: flex;
  flex-direction: column;
}

.product-v8__title {
  margin: 0 0 1rem;
  /* Das Theme setzt hier die Schriftstaerke des Fliesstextes – die
     Ueberschrift wirkt dadurch duenner als „Wonach suchen Sie?“, das als
     normales h2 die Ueberschriftenstaerke bekommt. Gleichgezogen. */
  font-weight: var(--font-heading-weight);
  font-size: 3.2rem;
  line-height: 1.2;
}

/* „Aus der Werkstatt“ ist dieselbe Art Zeilenueberschrift – gleiche Groesse */
.blog-v4__title {
  font-size: 3.2rem;
  line-height: 1.2;
}

/* Reiter auf der Produktseite in der Grundschrift statt der Schreibschrift */
.product-information-tabs__trigger {
  font-family: var(--font-body-family, Jost, sans-serif);
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* „Jetzt zum Checkout“ – Shopifys Sofortkauf-Knopf in der Signalfarbe */
.shopify-payment-button__button--unbranded {
  background-color: var(--celano-highlight) !important;
  color: #fff !important;
  border-radius: 10rem !important;
  transition: background-color 0.2s ease !important;
}

.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  background-color: var(--celano-highlight-dunkel) !important;
}

/* ===============================================================
   Keine Schreibschrift mehr
   Das Theme setzt für Schmuck-Überschriften eine eigene Schrift
   (--font-custom-family, ab Werk „Rancho"). Die Variable zeigt jetzt auf
   die Grundschrift; Rancho wird dadurch nirgends mehr geladen.
   =============================================================== */
:root {
  --font-custom-family: 'Jost', sans-serif;
}

/* ===============================================================
   Groß-/Kleinschreibung
   Das Theme setzt bei mehreren Überschriften „capitalize“ – im Deutschen
   wird daraus „Beliebt Bei Unseren Kunden“. Das ist schlicht falsch.
   =============================================================== */
.product-v8__title,
.banner-v155__title,
.blog-v4__title,
.about-v8__title,
.faq-v1__title,
.faq-v3__title,
.xo-product-card__title,
.xo-product-card__title a,
.product-information-tabs__trigger,
h1, h2, h3, h4, h5, h6 {
  text-transform: none;
}

/* Produktnamen in Listen und Zubehörlisten ebenfalls normal schreiben */
.xo-product-card a,
.xo-product-card__header + * a {
  text-transform: none;
}

/* „Jetzt zum Checkout“ ohne Rahmen */
.shopify-payment-button__button--unbranded {
  border: 0 !important;
  box-shadow: none !important;
}

/* ===============================================================
   Logo exakt in der Seitenmitte
   Das Theme teilt den Kopfbereich in drei gleich breite Spalten. Da die
   Navigation links aber breiter baut als die Symbole rechts, saß das Logo
   sichtbar rechts von der Mitte – die Überschriften darunter sind zur
   Seite zentriert, dadurch wirkte alles verschoben.
   Mit „1fr auto 1fr“ ist die mittlere Spalte so breit wie das Logo und
   sitzt dadurch genau mittig.
   =============================================================== */
@media (min-width: 1200px) {
  /* Die Theme-Regel hat drei Klassen Gewicht – der eigene Selektor muss
     mindestens genauso spezifisch sein, sonst greift er nicht. */
  .header-v14__sticky xo-grid:not([style*='--col-width'])[style*='--xs'] {
    grid-template-columns: 1fr auto 1fr;
  }

  .header-v14__utilities {
    justify-content: flex-end;
  }
}

/* Aktionszeile direkt unter der Einleitung der Serviceseite */
.ksc-service__kopf-aktion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.2rem 2.4rem;
  margin-top: 2.6rem;
}

.ksc-service__kopf-telefon {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--celano-highlight);
  text-decoration: none;
}

.ksc-service__kopf-telefon:hover {
  color: var(--celano-highlight-dunkel);
}

.ksc-service__kopf-telefon svg {
  width: 1.7rem;
  height: 1.7rem;
}

/* Aktion am Ende des Reparatur-Ablaufs */
.ksc-service__ablauf-aktion {
  display: flex;
  justify-content: center;
  margin-top: 3.5rem;
}

/* Bildkopf: Text wahlweise links, wenn in der Bildmitte etwas Wichtiges liegt */
.ksc-bildkopf__inhalt--links {
  text-align: left;
}

.ksc-bildkopf__inhalt--links .ksc-bildkopf__text {
  margin-left: 0;
}

/* ===============================================================
   Aufklappmenü nur einblenden, nicht hochschieben
   Das Theme schiebt das Panel um 1 rem nach oben (translate3d). Das wirkt
   unruhig, weil es direkt unter dem Kopfbereich sitzt – nur die Deckkraft
   reicht völlig.
   =============================================================== */
.header-v14__navigation-desktop .xo-menu-horizontal__sub-menu {
  transform: none;
}

/* ===============================================================
   Sanftes Springen zu Ankern (z. B. vom Footer zum Reparaturformular)
   =============================================================== */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Merkliste: Papierkorb neben „In den Warenkorb“ statt eines zweiten
   Buttons – die beiden gleich großen Schaltflächen konkurrierten sonst. */
.wishlist-table__action,
.wishlist-table__actions {
  align-items: center;
}

xo-products-fetcher-remove .ksc-entfernen {
  width: 4rem;
  height: 4rem;
}

xo-products-fetcher-remove .ksc-entfernen svg {
  width: 2rem;
  height: 2rem;
}

/* ===============================================================
   Blog: schmale Lesespalte wie bei den Rechtstexten
   Ohne Seitenleiste läuft der Text sonst über die volle Breite –
   bei 1600 px sind das weit über hundert Zeichen pro Zeile.
   =============================================================== */
.main-article__header,
.main-article__content,
.main-article__footer,
.main-article__navigation {
  max-width: 78ch;
  margin-inline: auto;
}

.main-article__image-wrap {
  max-width: 100rem;
  margin-inline: auto;
}

.main-article__content {
  font-size: 1.75rem;
  line-height: 1.75;
}

.main-article__content p + p,
.main-article__content ul,
.main-article__content ol {
  margin-top: 1.4rem;
}

.main-article__content h2 {
  margin-top: 3.6rem;
  margin-bottom: 1rem;
  font-size: clamp(2.4rem, 2.4vw, 3rem);
  line-height: 1.2;
}

.main-article__content h3 {
  margin-top: 2.6rem;
  margin-bottom: 0.8rem;
}

.main-article__content ul,
.main-article__content ol {
  padding-left: 2.2rem;
}

.main-article__content li + li {
  margin-top: 0.6rem;
}

.main-article__content a {
  color: var(--celano-highlight);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.main-article__content a:hover {
  color: var(--celano-highlight-dunkel);
}

/* Übersicht: etwas mehr Luft zwischen den Beitragskacheln */
.main-blog__grid-layout {
  row-gap: 4rem;
}

/* Name unter der Kundenstimme */
.ksc-stimme__name {
  margin: 1.6rem 0 0;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--celano-highlight);
}

/* ===============================================================
   Über uns: der Erzählfaden
   Eine gestrichelte Linie läuft mittig durch die Seite und wird beim
   Scrollen mitgezogen. Sie liegt hinter Text und Bildern und scheint in
   den Lücken durch – wie ein Faden, an dem die Kapitel aufgereiht sind.
   =============================================================== */
.ksc-ueber {
  position: relative;
}

/* Anfang und Hoehe setzt das Skript: erstes bis letztes Kapitel. Ohne
   JavaScript bleibt der Faden unsichtbar, statt quer durch die Seite zu
   laufen. */
.ksc-ueber__faden {
  position: absolute;
  top: var(--ksc-faden-oben, 0);
  left: 50%;
  width: 0.2rem;
  height: var(--ksc-faden-hoehe, 0);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}

.ksc-ueber__faden-spur,
.ksc-ueber__faden-weg {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    currentColor 0,
    currentColor 0.9rem,
    transparent 0.9rem,
    transparent 2rem
  );
}

/* Der ganze Weg, blass – damit man sieht, dass die Geschichte weitergeht */
.ksc-ueber__faden-spur {
  color: rgba(41, 31, 25, 0.16);
}

/* Das schon Gelesene, kräftig. Der Anteil kommt per JavaScript. */
.ksc-ueber__faden-weg {
  color: var(--celano-braun);
  clip-path: inset(0 0 calc(100% - var(--ksc-faden, 0%)) 0);
}

/* Inhalte liegen über dem Faden, sonst überdeckt er Bilder und Schrift */
.ksc-ueber__kopf,
.ksc-ueber__grossbild,
.ksc-ueber__abschnitt,
.ksc-ueber__zitat,
.ksc-ueber__qualifikation,
.ksc-ueber__abschluss {
  position: relative;
  z-index: 1;
}

/* Knoten im Faden: markiert den Anfang jedes Kapitels. Nur wenn das Skript
   den Faden auch wirklich gespannt hat. */
.ksc-ueber--faden .ksc-ueber__abschnitt::before {
  content: '';
  position: absolute;
  top: -1.4rem;
  left: 50%;
  width: 1.2rem;
  height: 1.2rem;
  margin-left: -0.6rem;
  border: 0.2rem solid var(--celano-braun);
  border-radius: 50%;
  background-color: rgb(var(--color-background));
}

/* Einspaltig läuft der Faden mitten durch die Zeilen – dort bleibt er weg */
@media (max-width: 899px) {
  .ksc-ueber__faden,
  .ksc-ueber--faden .ksc-ueber__abschnitt::before {
    display: none;
  }
}

/* ===============================================================
   Blogbeitrag: Datum über dem Bild statt darauf
   Das Theme legt den Kopf absolut auf das Beitragsbild. Der Titel ist
   dort entfallen – er steht schon im Seitenkopf –, das Datum rückt
   darüber und braucht deshalb die normale Textfarbe.
   =============================================================== */
.main-article__header--ueber {
  position: static;
  transform: none;
  width: auto;
  margin-bottom: 1.4rem;
}

.main-article__header--ueber .main-article__information span {
  color: rgba(var(--color-foreground), 0.6);
  font-size: 1.4rem;
  letter-spacing: 0.04em;
}

/* ===============================================================
   Über uns: mehr Luft
   Die Seite las sich gedrängt – zwischen den Kapiteln kaum Pause, der
   Einleitungstext so groß wie Fließtext. Alles eine Stufe großzügiger.
   =============================================================== */
.ksc-ueber__kopf {
  max-width: 62ch;
  margin-bottom: 7rem;
}

/* Die Einleitung trägt die Seite an – sie darf größer sein als der
   Text in den Kapiteln. */
.ksc-ueber__intro p {
  font-size: 2.1rem;
  line-height: 1.7;
}

.ksc-ueber__intro p + p {
  margin-top: 1.8rem;
}

.ksc-ueber__titel {
  margin-bottom: 2.2rem;
}

.ksc-ueber__grossbild {
  margin-bottom: 9rem;
}

.ksc-ueber__abschnitt {
  margin-bottom: 13rem;
}

.ksc-ueber__zitat {
  margin-bottom: 13rem;
  padding-block: 7rem;
}

.ksc-ueber__qualifikation {
  margin-bottom: 7rem;
  padding: 4.5rem;
}

@media (max-width: 899px) {
  .ksc-ueber__kopf {
    margin-bottom: 4.5rem;
  }

  .ksc-ueber__intro p {
    font-size: 1.8rem;
  }

  .ksc-ueber__grossbild {
    margin-bottom: 5rem;
  }

  .ksc-ueber__abschnitt,
  .ksc-ueber__zitat {
    margin-bottom: 7rem;
  }

  .ksc-ueber__zitat {
    padding-block: 4rem;
  }

  .ksc-ueber__qualifikation {
    padding: 2.8rem;
  }
}

/* ===============================================================
   Leistungen auf einen Blick (sections/leistungen.liquid)
   Kompakte Karten statt langer Abschnitte: Wer die Seite öffnet, soll
   ohne Scrollen sehen, was es alles gibt.
   =============================================================== */
.ksc-leistungen__kopf {
  max-width: 62ch;
  margin: 0 auto 4.5rem;
  text-align: center;
}

.ksc-leistungen__kicker {
  margin: 0 0 0.8rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--celano-highlight);
}

.ksc-leistungen__titel {
  margin: 0 0 1.6rem;
  font-size: clamp(2.8rem, 3.4vw, 4rem);
  line-height: 1.15;
}

.ksc-leistungen__intro p {
  font-size: 1.9rem;
  line-height: 1.7;
}

.ksc-leistungen__raster {
  display: grid;
  grid-template-columns: repeat(var(--ksc-leistungen-spalten, 3), minmax(0, 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ksc-leistung {
  display: flex;
}

.ksc-leistung__flaeche {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0.8rem;
  padding: 2.8rem 2.6rem 3rem;
  border: 1px solid rgba(41, 31, 25, 0.16);
  border-radius: 1.4rem;
  background-color: rgb(var(--color-background));
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

a.ksc-leistung__flaeche:hover {
  border-color: var(--celano-highlight);
  box-shadow: 0 1.2rem 2.8rem rgba(41, 31, 25, 0.1);
  transform: translateY(-0.3rem);
}

/* Die Nummer ordnet die Karten, ohne eine Rangfolge zu behaupten */
.ksc-leistung__nummer {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--celano-highlight);
}

.ksc-leistung__titel {
  font-size: 2.2rem;
  line-height: 1.2;
  font-weight: var(--font-heading-weight);
}

.ksc-leistung__text {
  font-size: 1.6rem;
  line-height: 1.6;
  color: rgba(var(--color-foreground), 0.78);
}

.ksc-leistung__punkte {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.ksc-leistung__punkt {
  position: relative;
  padding-left: 1.8rem;
  font-size: 1.5rem;
  line-height: 1.5;
}

.ksc-leistung__punkt::before {
  content: '';
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background-color: var(--celano-highlight);
}

/* Der Hinweis sitzt unten, damit die Karten trotz ungleicher Textlänge
   auf einer Linie abschließen. */
.ksc-leistung__mehr {
  margin-top: auto;
  padding-top: 1.6rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--celano-highlight);
}

.ksc-leistung__mehr::after {
  content: ' →';
}

@media (max-width: 1099px) {
  .ksc-leistungen__raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 749px) {
  .ksc-leistungen__raster {
    grid-template-columns: 1fr;
  }

  .ksc-leistungen__kopf {
    margin-bottom: 3rem;
  }

  .ksc-leistungen__intro p {
    font-size: 1.7rem;
  }

  .ksc-leistung__flaeche {
    padding: 2.2rem 2rem 2.4rem;
  }
}

/* ===============================================================
   Produktbeschreibung (sections/produktbeschreibung.liquid)
   Gleiche Lesebreite und Gliederung wie die Rechtstexte – die Reiter
   des Themes sind dafür entfallen.
   =============================================================== */
.ksc-beschreibung {
  max-width: 75ch;
  margin-inline: auto;
}

.ksc-beschreibung__titel {
  margin-bottom: 2rem;
  font-size: clamp(2.2rem, 2.4vw, 2.8rem);
  line-height: 1.2;
}

.ksc-beschreibung__text h2 {
  margin-top: 3.2rem;
  margin-bottom: 0.8rem;
  font-size: 2.2rem;
}

.ksc-beschreibung__text h3 {
  margin-top: 2.4rem;
  margin-bottom: 0.6rem;
  font-size: 1.9rem;
}

.ksc-beschreibung__text p,
.ksc-beschreibung__text li {
  font-size: 1.7rem;
  line-height: 1.7;
}

.ksc-beschreibung__text p + p,
.ksc-beschreibung__text ul,
.ksc-beschreibung__text ol {
  margin-top: 1.4rem;
}

.ksc-beschreibung__text ul,
.ksc-beschreibung__text ol {
  padding-left: 2.2rem;
}

.ksc-beschreibung__text li + li {
  margin-top: 0.5rem;
}

.ksc-beschreibung__text a {
  text-decoration: underline;
}

/* ===============================================================
   Zahlarten und Zusicherungen (snippets/zahlung-sicherheit.liquid)
   Unter den Kaufbuttons: womit bezahlt werden kann, dass die Zahlung
   verschlüsselt läuft, und drei Zusagen mit Verweis.
   =============================================================== */
.ksc-zahlung {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
}

.ksc-zahlung__arten {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ksc-zahlung__arten li {
  display: flex;
}

.ksc-zahlung__art {
  display: block;
  width: 4.6rem;
  height: 3rem;
  border-radius: 0.5rem;
}

.ksc-zahlung__ssl {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: 1.4rem;
  color: rgba(var(--color-foreground), 0.6);
}

.ksc-zahlung__ssl svg {
  width: 1.6rem;
  height: 1.6rem;
  flex: 0 0 auto;
}

/* Die drei Zusagen stehen in einem Rahmen, damit sie als Block gelesen
   werden und nicht als drei lose Zeilen: immer drei gleiche Spalten.

   Das Symbol steht über dem Text, nicht davor. Nebeneinander braucht eine
   Zeile wie „Versand aus Deutschland“ rund 180 px – in der Kaufspalte sind
   je Spalte nur gut 150 da. Übereinander darf der Text umbrechen und alle
   drei Spalten bleiben gleich hoch. */
.ksc-zahlung__zusicherungen {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  margin: 0.4rem 0 0;
  padding: 1.2rem 1.4rem;
  border: 1px solid rgba(41, 31, 25, 0.18);
  border-radius: 1rem;
  list-style: none;
}

/* Symbol links neben dem Text, eine Zeile je Zusage – so bleibt der Kasten
   flach. Die Spalten wachsen mit dem Text statt auf gleiche Breite. */
.ksc-zahlung__zusicherung a,
.ksc-zahlung__zusicherung span {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.3rem;
  line-height: 1.3;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}

.ksc-zahlung__zusicherung a:hover .ksc-zahlung__zusicherung-text {
  color: var(--celano-highlight);
  text-decoration: underline;
}

.ksc-zahlung__zusicherung svg {
  width: 1.8rem;
  height: 1.8rem;
  flex: 0 0 auto;
  color: rgba(var(--color-foreground), 0.65);
}

/* Unter dieser Breite wird die Kaufspalte zu schmal fuer eine Zeile –
   dann untereinander, Symbol weiterhin links. */
@media (max-width: 1199px) {
  .ksc-zahlung__zusicherungen {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.4rem 1.6rem;
  }

  .ksc-zahlung__zusicherung + .ksc-zahlung__zusicherung {
    border-top: 1px solid rgba(41, 31, 25, 0.1);
  }

  .ksc-zahlung__zusicherung a,
  .ksc-zahlung__zusicherung span {
    padding: 1.1rem 0;
    font-size: 1.45rem;
  }
}

@media (max-width: 749px) {
  .ksc-zahlung__art {
    width: 4.1rem;
    height: 2.7rem;
  }
}

/* Symbol statt Nummer auf den Leistungs-Karten */
.ksc-leistung__symbol {
  width: 3.2rem;
  height: 3.2rem;
  margin-bottom: 0.4rem;
  color: var(--celano-highlight);
}

/* Zahlarten ohne Symbol (Vorkasse) – als Beschriftung im Format der Symbole */
.ksc-zahlung__art--text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 4.6rem;
  padding: 0 0.9rem;
  border: 1px solid rgba(41, 31, 25, 0.2);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ===============================================================
   Schnellansicht abgeschaltet
   Die Lupe auf den Produktkacheln öffnete ein Modal mit einer verkürzten
   Produktseite. Zwei Wege zum selben Produkt verwirren mehr, als sie
   helfen – der Weg führt jetzt immer auf die Produktseite.

   Das Theme reicht die Einstellung `product_card_show_quick_view` durch
   rund vierzig Dateien; die Vorgabe im Schema steht auf „an“. Statt alle
   anzufassen – ein Theme-Update würde sie ohnehin zurücksetzen – wird der
   Auslöser hier ausgeblendet. `display: none` nimmt ihn auch aus der
   Tastaturreihenfolge, er ist also wirklich weg und nicht nur unsichtbar.
   =============================================================== */
.xo-product-card__icon:has(xo-product-quick-view-trigger) {
  display: none;
}

/* ===============================================================
   Produktseite: Spaltenverhältnis zwischen 7/5 und 6/6
   Das Raster des Themes kennt nur ganze Zwölftel – 7/5 lässt die
   Kaufspalte zu schmal, 6/6 macht sie zu breit. Deshalb bekommt genau
   dieses Raster zwei eigene Spuren; die Spannweiten der Kinder werden
   dafür zurückgesetzt. Erst ab 768px, darunter stehen die beiden
   Spalten ohnehin untereinander.
   =============================================================== */
@media (min-width: 768px) {
  xo-grid:has(> .main-product__right) {
    grid-template-columns: 56fr 44fr;
  }

  xo-grid:has(> .main-product__right) > * {
    grid-column: span 1;
  }
}

/* Das Produktfoto klein halten, ohne es zu beschneiden.

   Erster Versuch war eine Höhenbegrenzung am Bild. Das ging schief: der
   Bildkasten des Themes ist quadratisch (hier 767 x 767) und das Bild
   steht darin auf `object-fit: cover`. Die Begrenzung machte daraus
   767 x 418, und von einer hochformatigen Kaffeetüte fehlte unten die
   Hälfte.

   Jetzt wird stattdessen die Galerie schmaler und mittig gestellt. Der
   Kasten bleibt quadratisch, nur kleiner, und die Spalte bleibt breit
   genug für die Merkmalsleiste darunter. */
@media (min-width: 768px) {
  .xo-product-info-media-style3 > xo-gallery {
    display: block;
    max-width: 58rem;
    margin-inline: auto;
  }
}

/* Und grundsätzlich nichts mehr abschneiden: die Produktfotos sind teils
   hochformatig (Tüten), teils quadratisch. In einem quadratischen Kasten
   verliert ein 3:4-Foto mit `cover` ein Viertel. `contain` zeigt es ganz
   und lässt links und rechts Weiß stehen, was zum Rest der Seite passt. */
.xo-product-info-media-style3 .xo-media img {
  object-fit: contain;
}

/* ===============================================================
   Preis, Verfügbarkeit und Lieferzeit in einem Feld
   (snippets/lieferbox.liquid, Vorbild breeze.de)
   =============================================================== */
.ksc-lieferbox {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: flex-start;
}

.ksc-lieferbox__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.2rem;
}

.ksc-lieferbox__status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1.1rem;
  border-radius: 10rem;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.2;
}

/* Grün heißt lieferbar – dieselbe Aussage wie der Filter „Sofort lieferbar“ */
.ksc-lieferbox__status--da {
  background-color: #e8f3ea;
  color: #1f6b35;
}

.ksc-lieferbox__status--weg {
  background-color: rgba(41, 31, 25, 0.08);
  color: rgba(var(--color-foreground), 0.7);
}

.ksc-lieferbox__status svg {
  width: 1.8rem;
  height: 1.8rem;
  flex: 0 0 auto;
}

.ksc-lieferbox__zeit {
  font-size: 1.45rem;
  color: rgba(var(--color-foreground), 0.7);
}

/* Preis und Grundpreis nebeneinander statt untereinander – der
   Grundpreis liegt eine Ebene tiefer, deshalb der Container. */
.ksc-lieferbox__preis .xo-price__container {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.9rem;
}

.ksc-lieferbox__preis .xo-unit-price {
  color: rgba(var(--color-foreground), 0.6);
}

.ksc-lieferbox__versand {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.5;
  color: rgba(var(--color-foreground), 0.65);
}

.ksc-lieferbox__versand a {
  color: inherit;
  text-decoration: underline;
}

/* ===============================================================
   Markentabelle (sections/marken-tabelle.liquid)
   Welche Marke wird woran repariert – drei Gerätearten als Spalten.
   =============================================================== */
.ksc-markentabelle__kopf {
  max-width: 62ch;
  margin: 0 auto 3.2rem;
  text-align: center;
}

.ksc-markentabelle__kicker {
  margin: 0 0 0.8rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--celano-highlight);
}

.ksc-markentabelle__titel {
  margin: 0 0 1.4rem;
  font-size: clamp(2.4rem, 2.8vw, 3.2rem);
  line-height: 1.2;
}

.ksc-markentabelle__intro p {
  font-size: 1.7rem;
  line-height: 1.7;
}

.ksc-markentabelle__rahmen {
  overflow-x: auto;
  border: 1px solid rgba(41, 31, 25, 0.18);
  border-radius: 1.2rem;
}

/* Die scrollbare Fläche ist fokussierbar – ohne sichtbaren Rahmen wüsste
   niemand, wo der Fokus gerade steht. */
.ksc-markentabelle__rahmen:focus-visible {
  outline: 2px solid var(--celano-highlight);
  outline-offset: 2px;
}

.ksc-markentabelle__tabelle {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  font-size: 1.6rem;
}

.ksc-markentabelle__tabelle th,
.ksc-markentabelle__tabelle td {
  padding: 1.4rem 1.8rem;
  text-align: left;
  vertical-align: middle;
}

.ksc-markentabelle__tabelle thead th {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.65);
  border-bottom: 1px solid rgba(41, 31, 25, 0.18);
  white-space: nowrap;
}

.ksc-markentabelle__tabelle tbody tr + tr th,
.ksc-markentabelle__tabelle tbody tr + tr td {
  border-top: 1px solid rgba(41, 31, 25, 0.1);
}

.ksc-markentabelle__tabelle tbody th {
  font-weight: 600;
  white-space: nowrap;
}

/* Zebrastreifen helfen beim Verfolgen der Zeile über vier Spalten */
.ksc-markentabelle__tabelle tbody tr:nth-child(even) {
  background-color: rgba(41, 31, 25, 0.03);
}

.ksc-markentabelle__tabelle thead th + th,
.ksc-markentabelle__tabelle tbody td {
  text-align: center;
}

.ksc-markentabelle__haken {
  width: 2rem;
  height: 2rem;
  color: var(--celano-highlight);
}

.ksc-markentabelle__leer {
  color: rgba(var(--color-foreground), 0.35);
}

.ksc-markentabelle__hinweis {
  margin-top: 1.8rem;
  text-align: center;
}

.ksc-markentabelle__hinweis p {
  margin: 0;
  font-size: 1.5rem;
  color: rgba(var(--color-foreground), 0.7);
}

.ksc-markentabelle__hinweis a {
  color: var(--celano-highlight);
  text-decoration: underline;
}

@media (max-width: 749px) {
  .ksc-markentabelle__tabelle {
    font-size: 1.45rem;
  }

  .ksc-markentabelle__tabelle th,
  .ksc-markentabelle__tabelle td {
    padding: 1.1rem 1.2rem;
  }
}

/* ===============================================================
   Produktname: Luft bei zweizeiligen Titeln
   Das Theme setzt eine Zeilenhöhe von 1,11 und keinen Abstand nach
   unten. Bei einem Namen über zwei Zeilen klebten die Zeilen
   aneinander und die Lieferplakette direkt darunter.
   =============================================================== */
.main-product__right .xo-product-info-content__title {
  line-height: 1.28;
  margin-bottom: 1.4rem;
}

/* Hersteller darüber bekommt ebenfalls etwas Abstand */
.main-product__right .xo-product-info-content__vendor {
  margin-bottom: 0.6rem;
}

/* ===============================================================
   Megamenü: Einträge unter den Spaltenüberschriften normal setzen
   Das Theme gibt ihnen Stärke 500 – neben der Überschrift (700) sahen
   sie aus wie eine zweite Überschriftenebene statt wie Links.
   Die Spaltenüberschriften (Kaffee, Maschinen, Zubehör & Pflege)
   bleiben fett, sonst ginge die Gliederung verloren.
   =============================================================== */
.xo-menu-horizontal__grandchild-label {
  font-weight: 400;
}

/* ===============================================================
   SEO-Text am Seitenende (sections/seo-text.liquid)
   Linksbündig mit Überschrift je Bereich, auf breiten Schirmen zwei
   Spalten. Zentrierter Fließtext liest sich schlecht – der
   Zeilenanfang wandert bei jeder Zeile.
   =============================================================== */
.ksc-seo__kopf {
  margin-bottom: 3.6rem;
}

.ksc-seo__kicker {
  margin: 0 0 0.8rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--celano-highlight);
}

.ksc-seo__titel {
  margin: 0;
  max-width: 30ch;
  font-size: clamp(2.4rem, 2.8vw, 3.2rem);
  line-height: 1.2;
}

.ksc-seo__raster {
  display: grid;
  grid-template-columns: repeat(var(--ksc-seo-spalten, 2), minmax(0, 1fr));
  gap: 3.2rem 5rem;
  align-items: start;
}

.ksc-seo__block-titel {
  margin: 0 0 0.9rem;
  font-size: 1.9rem;
  line-height: 1.3;
}

.ksc-seo__text p {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.75;
  color: rgba(var(--color-foreground), 0.82);
}

.ksc-seo__text p + p {
  margin-top: 1rem;
}

.ksc-seo__text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.ksc-seo__text a:hover {
  color: var(--celano-highlight);
}

.ksc-seo__abschluss {
  margin-top: 3.6rem;
}

@media (max-width: 899px) {
  .ksc-seo__raster {
    grid-template-columns: 1fr;
    gap: 2.8rem;
  }

  .ksc-seo__kopf {
    margin-bottom: 2.6rem;
  }
}

/* ===============================================================
   Beratungsanfrage als Dialogfenster
   (snippets/beratung-anfrage.liquid)
   =============================================================== */
.ksc-anfrage {
  width: min(62rem, calc(100vw - 3.2rem));
  max-height: calc(100vh - 4rem);
  padding: 0;
  border: 0;
  border-radius: 1.4rem;
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  overflow: visible;
}

.ksc-anfrage::backdrop {
  background-color: rgba(21, 16, 13, 0.55);
}

.ksc-anfrage__inhalt {
  position: relative;
  max-height: calc(100vh - 4rem);
  padding: 3.2rem 3.2rem 3.4rem;
  overflow-y: auto;
}

.ksc-anfrage__schliessen {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(41, 31, 25, 0.06);
  color: inherit;
  cursor: pointer;
}

.ksc-anfrage__schliessen:hover {
  background-color: rgba(41, 31, 25, 0.12);
}

.ksc-anfrage__schliessen svg {
  width: 1.8rem;
  height: 1.8rem;
}

.ksc-anfrage__titel {
  margin: 0 4rem 0.8rem 0;
  font-size: 2.4rem;
  line-height: 1.2;
}

.ksc-anfrage__intro {
  margin: 0 0 2.4rem;
  font-size: 1.55rem;
  line-height: 1.6;
  color: rgba(var(--color-foreground), 0.75);
}

.ksc-anfrage__intro a {
  color: var(--celano-highlight);
  text-decoration: underline;
}

.ksc-anfrage__form {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.ksc-anfrage__raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
}

/* Die Anfrage-Schaltfläche im Beratungskasten der Produktseite */
.ksc-beratung__anfrage {
  align-self: flex-start;
  margin-top: 1.2rem;
  padding: 0.9rem 1.8rem;
  border: 1px solid var(--celano-highlight);
  border-radius: 10rem;
  background-color: transparent;
  color: var(--celano-highlight);
  font-size: 1.45rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.ksc-beratung__anfrage:hover {
  background-color: var(--celano-highlight);
  color: #fff;
}

@media (max-width: 599px) {
  .ksc-anfrage__inhalt {
    padding: 2.6rem 2rem 2.8rem;
  }

  .ksc-anfrage__raster {
    grid-template-columns: 1fr;
  }
}

/* Footer: die beiden Fließtexte (unter dem Logo, unter „Folgen Sie uns“)
   standen in Stärke 500 und wirkten wie Überschriften. */
.footer-v14__description,
.footer-v14__subtext {
  font-weight: 400;
}

/* ===============================================================
   Bildlaufleiste in der Signalfarbe
   `scrollbar-color` greift in Firefox und in Chrome ab Version 121,
   die ::-webkit-Regeln in älteren Chrome- und Safari-Fassungen.
   =============================================================== */
:root {
  scrollbar-color: var(--celano-highlight) rgba(41, 31, 25, 0.08);
}

::-webkit-scrollbar {
  width: 1.1rem;
  height: 1.1rem;
}

::-webkit-scrollbar-track {
  background-color: rgba(41, 31, 25, 0.08);
}

::-webkit-scrollbar-thumb {
  border: 0.3rem solid transparent;
  border-radius: 10rem;
  background-clip: content-box;
  background-color: var(--celano-highlight);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--celano-highlight-dunkel);
}

/* ===============================================================
   Handy: Einleitungstexte linksbündig
   Die Abschnittsköpfe sind zentriert. Bei Zeile und Überschrift passt
   das, bei einem Einleitungsabsatz über mehrere Zeilen nicht: Auf
   375 px wandert der Zeilenanfang bei jeder Zeile und das Auge
   verliert den Faden. Zeile und Überschrift bleiben mittig.
   =============================================================== */
@media (max-width: 749px) {
  .ksc-ueber__intro,
  .ksc-leistungen__intro,
  .ksc-markentabelle__intro,
  .ksc-kacheln__intro,
  .ksc-service__intro {
    text-align: left;
  }
}


/* ===============================================================
   Werkstatt-Videos (sections/youtube-werkstatt.liquid,
   sections/youtube-produkt.liquid, snippets/youtube-karte.liquid)

   Aufbau: eine große Karte, daneben die übrigen als schmale Zeilen mit
   kleinem Vorschaubild. Vier gleich große Kacheln hätten keine Mitte,
   und die Videos sind unterschiedlich wichtig.

   Die Bühne (.ksc-yt__buehne) hält vor und nach dem Klick dieselbe
   Fläche: erst das Vorschaubild, danach das iframe. Ohne feste
   Seitenverhältnisse würde die Seite beim Abspielen springen.
   =============================================================== */
.ksc-yt__kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.4rem 4rem;
  flex-wrap: wrap;
  margin-bottom: 3.6rem;
}

.ksc-yt__ueberschrift {
  margin: 0;
  font-size: 3.4rem;
  line-height: 1.15;
}

.ksc-yt__intro {
  margin: 1rem 0 0;
  max-width: 62ch;
  font-size: 1.7rem;
  line-height: 1.6;
  color: rgba(var(--color-foreground), 0.78);
}

/* Verweis auf den Kanal: kein Button, sondern eine Zeile mit Zeichen.
   Ein zweiter kräftiger Button neben dem Reparatur-Button darüber wäre
   zu viel Signal auf engem Raum. */
.ksc-yt__kanal {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  flex: 0 0 auto;
  padding-bottom: 0.4rem;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.25);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--celano-braun);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.ksc-yt__kanal:hover,
.ksc-yt__kanal:focus-visible {
  color: var(--celano-highlight);
  border-color: var(--celano-highlight);
}

.ksc-yt__gitter {
  display: grid;
  gap: 2.4rem;
}

@media (min-width: 900px) {
  .ksc-yt__gitter {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    align-content: start;
    gap: 2rem 3.2rem;
  }

  /* Die große Karte läuft über alle Zeilen der linken Spalte. Wie viele
     das sind, gibt die Sektion als --ksc-yt-zeilen mit: ein fester Wert
     würde leere Zeilen anlegen, deren Zwischenräume die Sektion in die
     Länge ziehen. */
  .ksc-yt__gitter > :first-child {
    grid-row: 1 / span var(--ksc-yt-zeilen, 1);
  }

  .ksc-yt__gitter--einzeln {
    grid-template-columns: minmax(0, 1fr);
    max-width: 78rem;
  }

  /* Zwei Videos nebeneinander, beide gleich groß. Mit der sonst üblichen
     Aufteilung groß/klein bliebe neben der einen kleinen Karte eine halbe
     Spalte leer, und das sieht nach Fehler aus, nicht nach Absicht. */
  .ksc-yt__gitter--paar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ksc-yt__gitter--einzeln > :first-child,
  .ksc-yt__gitter--paar > :first-child {
    grid-row: auto;
  }

  .ksc-yt__gitter--paar .ksc-yt__karte--gross .ksc-yt__titel {
    font-size: 2rem;
  }
}

/* --- die Karte selbst --- */
.ksc-yt__karte {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.ksc-yt__buehne {
  position: relative;
  overflow: hidden;
  border-radius: 1.2rem;
  background-color: var(--celano-braun);
  aspect-ratio: 16 / 9;
}

.ksc-yt__bild,
.ksc-yt__rahmen {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.ksc-yt__bild {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.ksc-yt__buehne:hover .ksc-yt__bild {
  transform: scale(1.03);
  filter: brightness(0.92);
}

/* Der Startknopf benennt seine Wirkung, statt nur ein Dreieck zu zeigen.
   Auf dem Vorschaubild liegt dafür eine Pille, die auch auf hellen
   Bildausschnitten lesbar bleibt. */
.ksc-yt__start {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: #fff;
}

.ksc-yt__pfeil {
  display: block;
  width: 0;
  height: 0;
  margin-left: 0.3rem;
  border-style: solid;
  border-width: 0.8rem 0 0.8rem 1.3rem;
  border-color: transparent transparent transparent #fff;
}

.ksc-yt__start-wort {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Pille als eigene Fläche hinter Pfeil und Wort, damit der ganze
   Bildbereich klickbar bleibt, die Farbfläche aber klein. */
.ksc-yt__start::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17rem;
  height: 5.4rem;
  transform: translate(-50%, -50%);
  border-radius: 3rem;
  background-color: var(--celano-youtube);
  box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.35);
  transition: background-color 0.2s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ksc-yt__pfeil,
.ksc-yt__start-wort {
  position: relative;
}

.ksc-yt__start:hover::before,
.ksc-yt__start:focus-visible::before {
  background-color: var(--celano-youtube-dunkel);
  transform: translate(-50%, -50%) scale(1.05);
}

.ksc-yt__start:focus-visible {
  outline: 0.3rem solid #fff;
  outline-offset: -0.6rem;
}

/* Datenschutzsatz unter dem Knopf. Steht auf dem Vorschaubild und damit
   über wechselnden Fotos: die abgedunkelte Fläche hält ihn lesbar, auch
   wenn darunter ein heller Bildausschnitt liegt. Klicks gehen hindurch,
   sonst wäre ein Teil der Bildfläche nicht mehr zum Starten da. */
.ksc-yt__datenschutz {
  position: absolute;
  left: 50%;
  top: calc(50% + 4.6rem);
  transform: translateX(-50%);
  width: calc(100% - 4rem);
  max-width: 46rem;
  margin: 0;
  padding: 0.8rem 1.4rem;
  border-radius: 0.8rem;
  background-color: rgba(21, 16, 13, 0.62);
  backdrop-filter: blur(0.4rem);
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.2rem;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
  pointer-events: none;
}

.ksc-yt__buehne--laeuft .ksc-yt__datenschutz {
  display: none;
}

/* Auf schmalen Bildschirmen ist die Bühne nur gut 200 Pixel hoch. Vom
   Knopf aus nach unten gerechnet ragt der Satz dort über den Bildrand
   hinaus und wird abgeschnitten. Deshalb hängt er hier am unteren Rand,
   was auf dieser Höhe ohnehin direkt unter dem Knopf liegt. */
@media (max-width: 899px) {
  .ksc-yt__datenschutz {
    top: auto;
    bottom: 1rem;
    width: calc(100% - 2.4rem);
    padding: 0.6rem 1rem;
    font-size: 1.1rem;
  }
}

.ksc-yt__dauer {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  padding: 0.3rem 0.8rem;
  border-radius: 0.4rem;
  background-color: rgba(21, 16, 13, 0.85);
  color: #fff;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.ksc-yt__buehne--laeuft .ksc-yt__dauer {
  display: none;
}

.ksc-yt__titel {
  margin: 0;
  font-size: 1.8rem;
  line-height: 1.3;
}

.ksc-yt__karte--gross .ksc-yt__titel {
  font-size: 2.4rem;
}

/* Die Überschrift führt zum Video bei YouTube. Sie bleibt optisch eine
   Überschrift: ein dauerhaft unterstrichener oder eingefärbter Titel
   würde neben dem roten Knopf um Aufmerksamkeit konkurrieren. */
.ksc-yt__titel-link {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.3rem;
  transition: color 0.2s ease;
}

.ksc-yt__titel-link:hover,
.ksc-yt__titel-link:focus-visible {
  color: var(--celano-youtube);
  text-decoration: underline;
}

.ksc-yt__notiz {
  margin: 0.6rem 0 0;
  max-width: 58ch;
  font-size: 1.5rem;
  line-height: 1.55;
  color: rgba(var(--color-foreground), 0.72);
}

/* --- die kleinen Karten: Bild und Text nebeneinander ---
   Gilt nur für die Aufteilung groß/klein. Bei einer einzelnen Karte und
   bei zwei gleich großen gibt es keine kleinen Karten. --- */
@media (min-width: 900px) {
  .ksc-yt__gitter:not(.ksc-yt__gitter--einzeln):not(.ksc-yt__gitter--paar) > :not(:first-child) .ksc-yt__karte {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.6rem;
  }

  .ksc-yt__gitter:not(.ksc-yt__gitter--einzeln):not(.ksc-yt__gitter--paar) > :not(:first-child) .ksc-yt__buehne {
    flex: 0 0 15rem;
    border-radius: 0.8rem;
  }

  .ksc-yt__gitter:not(.ksc-yt__gitter--einzeln):not(.ksc-yt__gitter--paar) > :not(:first-child) .ksc-yt__titel {
    font-size: 1.6rem;
  }

  .ksc-yt__gitter:not(.ksc-yt__gitter--einzeln):not(.ksc-yt__gitter--paar) > :not(:first-child) .ksc-yt__notiz {
    margin-top: 0.4rem;
    font-size: 1.4rem;
  }

  /* Auf der kleinen Fläche hat die Pille keinen Platz: dort bleibt nur
     der Pfeil in einem runden Feld. */
  .ksc-yt__gitter:not(.ksc-yt__gitter--einzeln):not(.ksc-yt__gitter--paar) > :not(:first-child) .ksc-yt__start-wort {
    display: none;
  }

  .ksc-yt__gitter:not(.ksc-yt__gitter--einzeln):not(.ksc-yt__gitter--paar) > :not(:first-child) .ksc-yt__start::before {
    width: 4.4rem;
    height: 4.4rem;
  }

  /* Läuft ein kleines Video, braucht es die volle Breite der Spalte,
     sonst ist das Bild briefmarkengroß. */
  .ksc-yt__gitter:not(.ksc-yt__gitter--einzeln):not(.ksc-yt__gitter--paar) > :not(:first-child) .ksc-yt__buehne--laeuft {
    flex-basis: 100%;
  }

  .ksc-yt__gitter:not(.ksc-yt__gitter--einzeln):not(.ksc-yt__gitter--paar) > :not(:first-child) .ksc-yt__karte:has(.ksc-yt__buehne--laeuft) {
    flex-direction: column;
  }
}

.ksc-yt--produkt .ksc-yt__ueberschrift {
  font-size: 2.8rem;
}

@media (prefers-reduced-motion: reduce) {
  .ksc-yt__bild,
  .ksc-yt__start::before {
    transition: none;
  }

  .ksc-yt__buehne:hover .ksc-yt__bild {
    transform: none;
  }

  .ksc-yt__start:hover::before {
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 899px) {
  .ksc-yt__kopf {
    align-items: flex-start;
    margin-bottom: 2.8rem;
  }

  .ksc-yt__ueberschrift {
    font-size: 2.6rem;
  }

  .ksc-yt__intro {
    font-size: 1.6rem;
  }

  .ksc-yt__karte--gross .ksc-yt__titel {
    font-size: 2rem;
  }

  .ksc-yt__start::before {
    width: 15rem;
    height: 4.8rem;
  }
}

/* ===============================================================
   Verweis auf die eigenen Kanäle im Startseiten-Kopf
   (sections/startseite-hero.liquid)
   Eine Satzzeile unter den Stichpunkten, keine weiteren Knöpfe: über
   ihr stehen bereits zwei Buttons, ein dritter und vierter würden sich
   gegenseitig entwerten.
   =============================================================== */
.ksc-hero__kanaele {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem 1.8rem;
  margin: 2.4rem 0 0;
  padding-top: 2rem;
  border-top: 0.1rem solid rgba(var(--color-foreground), 0.12);
  font-size: 1.5rem;
  color: rgba(var(--color-foreground), 0.75);
}

.ksc-hero__kanaele a {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 600;
  color: var(--celano-braun);
  text-decoration: none;
  transition: color 0.2s ease;
}

/* Beim Überfahren nur die Farbe, ohne Unterstrich (seit 20.10.2026). */
.ksc-hero__kanaele a:hover,
.ksc-hero__kanaele a:focus-visible {
  color: var(--celano-highlight);
  text-decoration: none;
}

/* ===============================================================
   Kanäle auf der Kontaktseite (sections/social-kanaele.liquid)
   Zwei Felder, bewusst ungleich: YouTube trägt ein Vorschaubild, weil
   dort Erklärungen liegen; Instagram trägt den Profilnamen, weil man
   ihn zum Suchen braucht.
   =============================================================== */
.ksc-kanaele__ueberschrift {
  margin: 0;
  font-size: 3rem;
  line-height: 1.2;
}

.ksc-kanaele__intro {
  margin: 1rem 0 0;
  max-width: 62ch;
  font-size: 1.7rem;
  line-height: 1.6;
  color: rgba(var(--color-foreground), 0.78);
}

.ksc-kanaele__paar {
  display: grid;
  gap: 2.4rem;
  margin-top: 3.2rem;
}

@media (min-width: 850px) {
  .ksc-kanaele__paar {
    /* Gleich breit, nicht 1.25 zu 1. Beide Bilder haben 16:9, in der
       breiteren Spalte wurde das eine dadurch höher als das andere und
       die Unterkante der Bilder bildete eine Stufe. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Gleich hoch, solange beide Felder ein Bild tragen. Fehlt eines,
       greift weiter unten die Ausnahme: ohne Bild würde das Feld sonst zu
       zwei Dritteln aus leerer Fläche bestehen. */
    align-items: stretch;
  }
}

.ksc-kanaele__feld {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.2rem;
  background-color: var(--celano-creme);
  color: inherit;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.ksc-kanaele__feld:hover,
.ksc-kanaele__feld:focus-visible {
  transform: translateY(-0.3rem);
  box-shadow: 0 1.2rem 2.8rem rgba(41, 31, 25, 0.16);
  color: inherit;
}

.ksc-kanaele__bild {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.ksc-kanaele__inhalt {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  flex: 1 1 auto;
  padding: 2.6rem 2.8rem 2.8rem;
}

.ksc-kanaele__marke {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--celano-highlight);
}

.ksc-kanaele__zeile {
  font-size: 2rem;
  font-weight: var(--font-heading-weight);
  line-height: 1.25;
}

.ksc-kanaele__satz {
  font-size: 1.5rem;
  line-height: 1.55;
  color: rgba(var(--color-foreground), 0.72);
}

/* Ausnahme für ein Feld ohne Bild: es richtet sich nach seinem Inhalt und
   schiebt ihn nach unten, damit neben dem Nachbarbild kein halbleerer
   Kasten steht. */
@media (min-width: 850px) {
  .ksc-kanaele__feld:not(:has(.ksc-kanaele__bild)) {
    align-self: start;
  }

  .ksc-kanaele__feld:not(:has(.ksc-kanaele__bild)) .ksc-kanaele__inhalt {
    padding: 3.2rem 3rem 3.4rem;
    gap: 1.2rem;
  }

  .ksc-kanaele__feld:not(:has(.ksc-kanaele__bild)) .ksc-kanaele__zeile {
    font-size: 2.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ksc-kanaele__feld {
    transition: box-shadow 0.3s ease;
  }

  .ksc-kanaele__feld:hover,
  .ksc-kanaele__feld:focus-visible {
    transform: none;
  }
}

@media (max-width: 849px) {
  .ksc-kanaele__ueberschrift {
    font-size: 2.4rem;
  }

  .ksc-kanaele__intro {
    font-size: 1.6rem;
  }

  .ksc-kanaele__inhalt {
    padding: 2.2rem 2.2rem 2.4rem;
  }
}

/* ===============================================================
   Startseite: Player mit Auswahlliste
   (sections/youtube-werkstatt.liquid)
   Links die Bühne, rechts die Liste. Ein Klick rechts tauscht das Video
   links aus. Vorher spielte jede Karte für sich – dann liefen mehrere
   Videos nebeneinander, und das kleine Bild rechts war zum Zusehen zu
   klein.
   =============================================================== */
.ksc-yt__player {
  display: grid;
  gap: 2.4rem;
}

@media (min-width: 900px) {
  .ksc-yt__player {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 3.2rem;
    align-items: start;
  }
}

.ksc-yt__haupt {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.ksc-yt__liste {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ksc-yt__wahl {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  align-items: center;
  gap: 1.4rem;
  padding: 0.8rem;
  border-radius: 0.8rem;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.ksc-yt__wahl:hover,
.ksc-yt__wahl:focus-visible {
  background-color: var(--celano-creme);
  color: inherit;
}

/* Der laufende Eintrag bekommt die Fläche dauerhaft, damit man beim
   Durchklicken sieht, was oben gerade läuft. */
.ksc-yt__wahl--aktiv {
  background-color: var(--celano-creme);
}

.ksc-yt__wahl-bild {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0.6rem;
  background-color: var(--celano-braun);
  aspect-ratio: 16 / 9;
}

.ksc-yt__wahl-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Kleines rotes Zeichen statt der ganzen Pille: auf 130 Pixel Breite
   wäre eine beschriftete Pille nicht mehr lesbar. */
.ksc-yt__wahl-bild::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 0.7rem 0 0.7rem 1.1rem;
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 0 0.6rem rgba(0, 0, 0, 0.6));
}

.ksc-yt__wahl-bild::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.4rem;
  height: 3.4rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: var(--celano-youtube);
  transition: background-color 0.2s ease;
}

.ksc-yt__wahl:hover .ksc-yt__wahl-bild::before,
.ksc-yt__wahl:focus-visible .ksc-yt__wahl-bild::before {
  background-color: var(--celano-youtube-dunkel);
}

.ksc-yt__wahl-dauer {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: 0.3rem;
  background-color: rgba(21, 16, 13, 0.85);
  color: #fff;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

.ksc-yt__wahl-text {
  display: block;
  min-width: 0;
}

.ksc-yt__wahl-titel {
  display: block;
  font-size: 1.5rem;
  font-weight: var(--font-heading-weight);
  line-height: 1.3;
}

.ksc-yt__wahl-notiz {
  display: block;
  margin-top: 0.3rem;
  font-size: 1.3rem;
  line-height: 1.45;
  color: rgba(var(--color-foreground), 0.68);
}

@media (max-width: 899px) {
  .ksc-yt__wahl {
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 1.2rem;
  }

  .ksc-yt__wahl-notiz {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ksc-yt__wahl,
  .ksc-yt__wahl-bild::before {
    transition: none;
  }
}

/* ===============================================================
   Standort: Karte und Kurzformular (sections/standort.liquid)

   Die Karte besteht aus OpenStreetMap-Kacheln, die als Theme-Assets im
   Shop liegen (snippets/karte-kacheln.liquid). Gestitcht wird nicht: die
   zwölf Kacheln stehen als Raster nebeneinander, der Rahmen schneidet ab.

   Die Nadel sitzt auf den Prozentwerten, die tools/karte-bauen.py aus den
   Koordinaten ausgerechnet hat, und wird über --ksc-karte-nadel-x/-y
   gesetzt.
   =============================================================== */
.ksc-standort__kopf {
  margin-bottom: 3.6rem;
}

.ksc-standort__ueberschrift {
  margin: 0;
  font-size: 3.4rem;
  line-height: 1.15;
}

.ksc-standort__intro {
  margin: 1rem 0 0;
  max-width: 62ch;
  font-size: 1.7rem;
  line-height: 1.6;
  color: rgba(var(--color-foreground), 0.78);
}

.ksc-standort__karte-form {
  display: grid;
  gap: 2.4rem;
}

@media (min-width: 1000px) {
  .ksc-standort__karte-form {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 3.2rem;
    align-items: stretch;
  }
}

/* --- die Karte --- */
.ksc-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.6rem;
  background-color: var(--celano-creme);
}

.ksc-karte__bild {
  position: relative;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 34rem;
  /* Raster nur, um den Kartenausschnitt zu zentrieren. Siehe unten:
     eine Zentrierung über `transform` machte das Logo unscharf. */
  display: grid;
}

/* Das Kachelraster behält sein eigenes Seitenverhältnis und deckt den
   Rahmen als Ganzes ab, wie ein Bild mit `object-fit: cover`.

   Vorher war es auf die Rahmengröße gezogen: bei einem hochformatigen
   Rahmen wurde jede Kachel einzeln verzerrt und beschnitten, und an den
   Kachelgrenzen passten die Straßen nicht mehr zusammen. `min-width` und
   `min-height` zusammen mit `aspect-ratio` lassen das Raster so weit
   wachsen, bis es beide Richtungen deckt; der Rahmen schneidet den Rest
   ab. Die Nadel liegt im Raster und wandert deshalb korrekt mit. */
.ksc-karte__kacheln {
  /* Zentriert vom Raster des Rahmens, nicht über `transform`. Eine
     Verschiebung mit Nachkommastelle (gemessen -549,477 px) zwingt den
     Browser, die Ebene zwischenzuspeichern und versetzt aufzutragen; das
     Logo auf der Nadel wurde dadurch unscharf, obwohl es eine
     Vektordatei ist. `margin: auto` half nicht: bei Überbreite fällt es
     auf 0 zurück und der Ausschnitt lag links an. `place-self: center`
     lässt den Ausschnitt dagegen nach beiden Seiten gleich überstehen.

     `position: relative` bleibt nötig, damit die Nadel ihre Prozentwerte
     auf den Kartenausschnitt bezieht. */
  position: relative;
  grid-area: 1 / 1;
  place-self: center;
  display: grid;
  grid-template-columns: repeat(var(--ksc-karte-spalten, 4), 1fr);
  aspect-ratio: var(--ksc-karte-verhaeltnis, 4 / 3);
  min-width: 100%;
  min-height: 100%;
  /* Die Standardfarben von OpenStreetMap sind kräftiger als alles andere
     auf der Seite. Leicht entsättigt und ins Warme gezogen ordnet sich
     die Karte ein, ohne dass Straßennamen unlesbar werden. */
  filter: grayscale(0.4) sepia(0.18) contrast(0.94) brightness(1.04);
}

.ksc-karte__kacheln img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Die Nadel: ein Schild mit dem Logo und darunter der genaue Punkt.
   Ein allgemeines Stecknadelsymbol fände man auf einer Karte voller
   Straßennamen schlechter wieder als die eigene Marke. */
.ksc-karte__nadel {
  position: absolute;
  left: var(--ksc-karte-nadel-x, 50%);
  top: var(--ksc-karte-nadel-y, 50%);
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.ksc-karte__schild {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.1rem 1.6rem;
  border-radius: 1rem;
  background-color: #fff;
  box-shadow: 0 0.8rem 2.4rem rgba(41, 31, 25, 0.28);
}

.ksc-karte__schild img {
  display: block;
  width: 13rem;
  height: auto;
}

.ksc-karte__schild-name {
  font-size: 1.5rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Spitze des Schilds und der eigentliche Punkt auf der Adresse. */
.ksc-karte__schild::after {
  content: '';
  position: absolute;
  bottom: -0.7rem;
  left: 50%;
  width: 1.4rem;
  height: 1.4rem;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 0.2rem;
  background-color: #fff;
}

.ksc-karte__punkt {
  position: relative;
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 1.4rem;
  border-radius: 50%;
  border: 0.3rem solid #fff;
  background-color: var(--celano-highlight);
  box-shadow: 0 0.2rem 0.8rem rgba(41, 31, 25, 0.4);
}

/* Ein einzelner, langsamer Ring. Das ist die einzige Bewegung in der
   Sektion und sagt: hier, genau an dieser Stelle. */
.ksc-karte__punkt::before {
  content: '';
  position: absolute;
  inset: -0.3rem;
  border-radius: 50%;
  border: 0.2rem solid var(--celano-highlight);
  animation: ksc-karte-ring 2.8s ease-out infinite;
}

@keyframes ksc-karte-ring {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70%,
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ksc-karte__punkt::before {
    animation: none;
  }
}

/* Lizenzhinweis: Pflicht bei OpenStreetMap, deshalb klein, aber lesbar
   und nicht wegzuklicken. */
.ksc-karte__lizenz {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0.3rem 0.8rem;
  border-top-left-radius: 0.6rem;
  background-color: rgba(255, 255, 255, 0.86);
  font-size: 1.1rem;
  color: rgba(var(--color-foreground), 0.7);
}

.ksc-karte__lizenz a {
  color: inherit;
}

/* --- Karteikarte mit Adresse und Zeiten --- */
.ksc-karte__infos {
  display: grid;
  gap: 2rem;
  padding: 2.4rem 2.6rem;
  background-color: #fff;
}

@media (min-width: 700px) {
  .ksc-karte__infos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* Ab Tabletbreite liegt die Karteikarte auf der Karte, so wie man es von
   Kartendiensten kennt. Darunter ist zu wenig Platz, dort steht sie als
   eigener Block unter dem Ausschnitt. */
@media (min-width: 1000px) {
  /* Liegt die Karteikarte auf der Karte, trägt der Ausschnitt die ganze
     Höhe allein. Er braucht dann genug davon, damit die Karte nicht nur
     aus Karteikarte besteht. */
  .ksc-karte__bild {
    min-height: 48rem;
  }

  .ksc-karte__infos {
    position: absolute;
    left: 2.4rem;
    bottom: 2.4rem;
    width: calc(100% - 4.8rem);
    max-width: 44rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 2.2rem 2.4rem;
    border-radius: 1.2rem;
    box-shadow: 0 1.2rem 3.2rem rgba(41, 31, 25, 0.22);
  }
}

.ksc-karte__label {
  margin: 0 0 0.8rem;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--celano-highlight);
}

.ksc-karte__adresse {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.5;
}

.ksc-karte__telefon {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1rem;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--celano-braun);
  text-decoration: none;
  border-bottom: 0.1rem solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.ksc-karte__telefon:hover,
.ksc-karte__telefon:focus-visible {
  color: var(--celano-highlight);
  border-bottom-color: currentColor;
}

.ksc-karte__telefon svg {
  width: 1.6rem;
  height: 1.6rem;
  flex: 0 0 auto;
}

.ksc-karte__zeiten {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.5;
}

.ksc-karte__zeiten div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.6rem;
}

.ksc-karte__zeiten dt {
  font-weight: 600;
}

.ksc-karte__zeiten dd {
  margin: 0;
  color: rgba(var(--color-foreground), 0.78);
  font-variant-numeric: tabular-nums;
}

.ksc-karte__zeiten-hinweis {
  margin: 0.8rem 0 0;
  font-size: 1.3rem;
  line-height: 1.45;
  color: rgba(var(--color-foreground), 0.62);
}

.ksc-karte__route {
  grid-column: 1 / -1;
  justify-self: start;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--celano-highlight);
  text-decoration: none;
  border-bottom: 0.1rem solid currentColor;
}

.ksc-karte__route:hover,
.ksc-karte__route:focus-visible {
  color: var(--celano-highlight-dunkel);
}

/* --- das Kurzformular --- */
.ksc-standort__form {
  padding: 3rem 3.2rem 3.4rem;
  border-radius: 1.6rem;
  background-color: var(--celano-creme);
}

.ksc-standort__form-titel {
  margin: 0;
  font-size: 2.4rem;
  line-height: 1.2;
}

.ksc-standort__form-intro {
  margin: 0.8rem 0 2.4rem;
  font-size: 1.5rem;
  line-height: 1.55;
  color: rgba(var(--color-foreground), 0.75);
}

.ksc-standort__felder {
  display: grid;
  gap: 1.6rem;
}

.ksc-standort__raster {
  display: grid;
  gap: 1.6rem;
}

@media (min-width: 560px) {
  .ksc-standort__raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ksc-standort__form .ksc-reparatur__absenden {
  width: 100%;
}

@media (max-width: 999px) {
  /* Auf der schmalen Karte nimmt das Schild sonst ein gutes Drittel der
     Breite ein und verdeckt mehr Umgebung, als es zeigt. */
  .ksc-karte__schild img {
    width: 10rem;
  }

  .ksc-karte__bild {
    min-height: 28rem;
  }

  .ksc-standort__ueberschrift {
    font-size: 2.6rem;
  }

  .ksc-standort__intro {
    font-size: 1.6rem;
  }

  .ksc-standort__form {
    padding: 2.4rem 2.2rem 2.8rem;
  }
}

/* ===============================================================
   Video als Folie in der Produktgalerie
   (snippets/produkt-video-galerie.liquid, eingehängt in
   snippets/product-info-media-style3.liquid)

   Die Produktfotos sind hochformatig, das Video ist 16:9. Statt es zu
   beschneiden steht es mittig auf einer ruhigen Fläche: beschneiden
   würde bei einem Video genau das wegnehmen, worauf es ankommt.
   =============================================================== */
.ksc-galerievideo {
  background-color: var(--celano-creme);
}

.ksc-galerievideo__rahmen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 2.4rem;
}

.ksc-galerievideo .ksc-yt__buehne {
  width: 100%;
}

.ksc-galerievideo__titel {
  margin: 0;
  max-width: 48ch;
  font-size: 1.5rem;
  line-height: 1.4;
  text-align: center;
}

.ksc-galerievideo__titel a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.3rem;
  transition: color 0.2s ease;
}

.ksc-galerievideo__titel a:hover,
.ksc-galerievideo__titel a:focus-visible {
  color: var(--celano-youtube);
  text-decoration: underline;
}

/* Das Vorschaubild unten in der Leiste. Das rote Zeichen unterscheidet es
   auf einen Blick von den Produktfotos daneben. */
.ksc-galerievideo__thumb {
  position: relative;
  overflow: hidden;
}

.ksc-galerievideo__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ksc-galerievideo__thumb-zeichen {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3rem;
  height: 3rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: var(--celano-youtube);
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.3);
}

.ksc-galerievideo__thumb-zeichen::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 0.55rem 0 0.55rem 0.9rem;
  border-color: transparent transparent transparent #fff;
}

@media (max-width: 749px) {
  .ksc-galerievideo__rahmen {
    padding: 1.6rem;
    gap: 1.2rem;
  }

  .ksc-galerievideo__titel {
    font-size: 1.4rem;
  }
}

/* ===============================================================
   Bewegliche Karte (snippets/karte-interaktiv.liquid)
   Zwei-Klick-Lösung wie bei den Videos: der feste Ausschnitt steht
   sofort da, erst der Knopf lädt Leaflet und Kacheln von
   OpenStreetMap nach.
   =============================================================== */
.ksc-karte__laden {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.9rem 1.4rem;
  border: 0;
  border-radius: 0.8rem;
  background-color: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0.4rem 1.6rem rgba(41, 31, 25, 0.22);
  color: var(--celano-braun);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.ksc-karte__laden:hover:not(:disabled),
.ksc-karte__laden:focus-visible {
  background-color: #fff;
  transform: translateY(-0.1rem);
}

.ksc-karte__laden:disabled {
  cursor: progress;
  opacity: 0.75;
}

.ksc-karte__laden-text {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.2;
}

/* Sagt an der Stelle, an der entschieden wird, was der Klick auslöst.
   Am Seitenende hätte das niemand gelesen. */
.ksc-karte__laden-hinweis {
  font-size: 1.1rem;
  line-height: 1.3;
  color: rgba(var(--color-foreground), 0.62);
}

.ksc-karte__leaflet {
  width: 100%;
  height: 100%;
}

/* Leaflet bringt eigene Schriftgrößen in Pixeln mit. Das Theme rechnet in
   rem bei 10px Grundgröße, deshalb wirken die Bedienelemente sonst
   winzig. */
.ksc-karte__leaflet .leaflet-control-zoom a {
  width: 3.2rem;
  height: 3.2rem;
  line-height: 3rem;
  font-size: 2rem;
  color: var(--celano-braun);
}

.ksc-karte__leaflet .leaflet-control-attribution {
  font-size: 1.1rem;
  background-color: rgba(255, 255, 255, 0.86);
}

.ksc-karte__leaflet .leaflet-control-attribution a {
  color: inherit;
}

/* Die Nadel übernimmt das Schild vom festen Ausschnitt. Größe und
   Verschiebung setzt snippets/karte-interaktiv.liquid beim Bauen als
   inline-Style: Leaflet bringt für Markierungen eigene Regeln mit, gegen
   die Angaben von hier nicht durchkommen. */
.ksc-karte__leaflet-nadel {
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Auf der beweglichen Karte liegt die Karteikarte nicht mehr obenauf:
   sie würde den Teil verdecken, den man gerade freiziehen will. */
.ksc-karte__bild--beweglich ~ .ksc-karte__infos {
  position: static;
  width: 100%;
  max-width: none;
  box-shadow: none;
}

/* Auf dem Handy ist die Karte nur gut 340 Pixel breit. Oben rechts stieße
   der Knopf mit dem Logo-Schild zusammen, das in der Bildmitte steht;
   unten links ist Platz, und die Lizenzzeile liegt rechts daneben. */
@media (max-width: 749px) {
  .ksc-karte__laden {
    top: auto;
    bottom: 1rem;
    right: auto;
    left: 1rem;
    padding: 0.7rem 1.1rem;
  }

  .ksc-karte__laden-text {
    font-size: 1.3rem;
  }

  .ksc-karte__laden-hinweis {
    font-size: 1rem;
  }
}

/* ===============================================================
   Geschmackstabelle bei Kaffee und Pads (sections/geschmack.liquid)
   Links die Eigenschaft, rechts der Wert. Die Skalen als Bohnen statt
   als Zahl: fünf von fünf Bohnen liest man im Vorbeigehen, „5/5“ muss
   man erst einordnen.
   =============================================================== */
/* Dieselbe Lesespalte wie die Artikelbeschreibung (.ksc-beschreibung):
   beide stehen untereinander, und zwei verschiedene Spaltenkanten
   nebeneinander sehen aus wie ein Fehler. */
.ksc-geschmack {
  max-width: 75ch;
  margin-inline: auto;
}

.ksc-geschmack__ueberschrift {
  margin: 0 0 1.8rem;
  font-size: 2.2rem;
  line-height: 1.2;
  color: var(--celano-highlight);
}

.ksc-geschmack__liste {
  margin: 0;
}

.ksc-geschmack__zeile {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: 1.6rem;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.1);
}

.ksc-geschmack__zeile:last-child {
  border-bottom: 0;
}

.ksc-geschmack__zeile dt {
  font-size: 1.5rem;
  font-weight: 600;
}

.ksc-geschmack__zeile dd {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.5;
  text-align: right;
  color: rgba(var(--color-foreground), 0.82);
}

/* Die Bohnen sitzen auf der Grundlinie der Zeile, nicht darüber. */
.ksc-geschmack__zeile--skala dd {
  align-self: center;
}

.ksc-geschmack__bohnen {
  display: inline-flex;
  gap: 0.4rem;
}

.ksc-bohne {
  display: block;
  width: 1.9rem;
  height: 1.9rem;
  fill: var(--celano-braun);
}

.ksc-bohne__furche {
  stroke: var(--celano-creme);
}

/* Die leere Bohne bleibt eine Bohne, nur blass: ein leerer Kreis oder ein
   Strich daneben sähe aus wie ein anderes Symbol. */
.ksc-bohne--leer {
  fill: rgba(var(--color-foreground), 0.16);
}

.ksc-bohne--leer .ksc-bohne__furche {
  stroke: #fff;
}

.ksc-geschmack__hinweis {
  margin: 1.8rem 0 0;
  font-size: 1.3rem;
  line-height: 1.5;
  color: rgba(var(--color-foreground), 0.6);
}

@media (max-width: 599px) {
  .ksc-geschmack__zeile {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
  }

  .ksc-geschmack__zeile dd {
    text-align: left;
  }

  .ksc-bohne {
    width: 1.7rem;
    height: 1.7rem;
  }
}

/* ===============================================================
   Merkmale auf einen Blick bei Kaffee (sections/kaffee-merkmale.liquid)
   Drei Felder je Reihe, Symbol links, Bezeichnung und Wert rechts.
   Die Trennlinien gliedern das Raster, ohne jedes Feld einzurahmen:
   sechs Kästchen nebeneinander wären unruhiger als die Angaben selbst.
   =============================================================== */
/* Die Leiste steht in der Bildspalte, direkt unter den Vorschaubildern.
   Keine eigene Breite und keine Zentrierung: sie nimmt die Spalte, in der
   sie liegt, und schließt damit bündig an die Bilder an. */
.ksc-merkmale {
  max-width: none;
  margin: 3.2rem 0 0;
}

.ksc-merkmale__ueberschrift {
  margin: 0 0 2rem;
  font-size: 2.2rem;
  line-height: 1.2;
}

.ksc-merkmale__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 2.4rem 0;
  border-top: 0.1rem solid rgba(var(--color-foreground), 0.12);
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.12);
  list-style: none;
}

@media (min-width: 600px) {
  .ksc-merkmale__raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .ksc-merkmale__raster {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ksc-merkmal {
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  padding: 1.4rem 2rem 1.4rem 0;
}

.ksc-merkmal__symbol {
  flex: 0 0 auto;
  width: 3.2rem;
  height: 3.2rem;
  margin-top: 0.1rem;
  color: var(--celano-braun);
}

.ksc-merkmal__name {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
}

.ksc-merkmal__wert {
  margin: 0.2rem 0 0;
  font-size: 1.5rem;
  line-height: 1.45;
  color: rgba(var(--color-foreground), 0.74);
}

@media (max-width: 599px) {
  .ksc-merkmale__raster {
    padding: 1.6rem 0;
  }

  .ksc-merkmal {
    padding: 1.1rem 0;
  }

  .ksc-merkmal__symbol {
    width: 2.8rem;
    height: 2.8rem;
  }
}

/* Verweis auf den Reparaturauftrag unter dem Kurzformular
   (sections/standort.liquid). Bewusst kein zweiter voller Knopf: neben
   „Nachricht senden" würden zwei gleich laute Schaltflächen um dieselbe
   Entscheidung konkurrieren. Die Zeile nennt den Anlass, der Verweis das
   Ziel. */
.ksc-standort__weiche {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin: 0;
  padding-top: 0.4rem;
  font-size: 1.4rem;
  color: rgba(var(--color-foreground), 0.72);
}

.ksc-standort__reparatur {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  color: var(--celano-highlight);
  text-decoration: none;
  border-bottom: 0.1rem solid currentColor;
  transition: color 0.2s ease;
}

.ksc-standort__reparatur::after {
  content: '→';
  line-height: 1;
}

.ksc-standort__reparatur:hover,
.ksc-standort__reparatur:focus-visible {
  color: var(--celano-highlight-dunkel);
}

/* ===============================================================
   Marken ja und nein (sections/marken-ausgeschlossen.liquid)
   Zwei Spalten nebeneinander: links, was wir annehmen, rechts, was
   nicht. Die Farbe trägt die Aussage mit, die Beschriftung bleibt aber
   eindeutig – wer die Farben nicht unterscheidet, liest die Spaltenköpfe.
   =============================================================== */
.ksc-markenliste {
  max-width: 76rem;
}

.ksc-markenliste__kopf {
  margin-bottom: 2.4rem;
}

.ksc-markenliste__titel {
  margin: 0;
  font-size: 2.8rem;
  line-height: 1.2;
}

.ksc-markenliste__intro {
  margin-top: 1rem;
  max-width: 62ch;
  font-size: 1.6rem;
  line-height: 1.6;
  color: rgba(var(--color-foreground), 0.78);
}

.ksc-markenliste__tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.6rem;
}

.ksc-markenliste__tabelle th,
.ksc-markenliste__tabelle td {
  width: 50%;
  padding: 1.1rem 1.6rem;
  text-align: left;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.1);
}

.ksc-markenliste__tabelle thead th {
  padding-top: 0;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom-width: 0.2rem;
}

.ksc-markenliste__tabelle thead .ksc-markenliste__ja {
  color: var(--celano-highlight);
  border-bottom-color: var(--celano-highlight);
}

.ksc-markenliste__tabelle thead .ksc-markenliste__nein {
  color: rgba(var(--color-foreground), 0.55);
  border-bottom-color: rgba(var(--color-foreground), 0.3);
}

.ksc-markenliste__tabelle tbody tr:last-child th,
.ksc-markenliste__tabelle tbody tr:last-child td {
  border-bottom: 0;
}

/* Die rechte Spalte etwas zurücknehmen: sie ist die Auskunft, nicht das
   Angebot. */
.ksc-markenliste__tabelle tbody .ksc-markenliste__nein {
  color: rgba(var(--color-foreground), 0.62);
}

.ksc-markenliste__hinweis {
  margin: 2rem 0 0;
  font-size: 1.4rem;
  color: rgba(var(--color-foreground), 0.62);
}

@media (max-width: 599px) {
  .ksc-markenliste__titel {
    font-size: 2.2rem;
  }

  .ksc-markenliste__tabelle {
    font-size: 1.5rem;
  }

  .ksc-markenliste__tabelle th,
  .ksc-markenliste__tabelle td {
    padding: 0.9rem 0.8rem;
  }
}

/* ===============================================================
   „Nur mit Termin" (snippets/termin-hinweis.liquid)

   Antonino arbeitet allein; unangemeldeter Besuch reißt ihn aus der
   Arbeit. Der Hinweis ist deshalb kein beiläufiger Satz, sondern ein
   eigener Kasten in der Signalfarbe. Ein Hinweis, den man überliest, ist
   keiner.
   =============================================================== */
.ksc-termin {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.2rem 1.4rem;
  border-radius: 0.8rem;
  /* Leiser als zuerst gebaut: keine dicke Kante in Signalfarbe, kein
     getönter Hintergrund. Die Farbe trägt jetzt nur noch das Symbol, den
     Rest macht die Schrift. Ein Hinweis darf auffallen, ohne zu rufen. */
  border: 0.1rem solid rgba(var(--color-foreground), 0.14);
  background-color: transparent;
}

.ksc-termin__symbol {
  flex: 0 0 auto;
  display: block;
  width: 2rem;
  height: 2rem;
  margin-top: 0.2rem;
  color: var(--celano-highlight);
}

.ksc-termin__symbol svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ksc-termin__text {
  min-width: 0;
}

.ksc-termin__satz {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--celano-braun);
}

.ksc-termin__knopf {
  display: inline-flex;
  align-items: center;
  margin-top: 0.8rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--celano-highlight);
  text-decoration: none;
  border-bottom: 0.1rem solid currentColor;
  transition: color 0.2s ease;
}

.ksc-termin__knopf:hover,
.ksc-termin__knopf:focus-visible {
  color: var(--celano-highlight-dunkel);
}

.ksc-termin--klein {
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  border-radius: 0.8rem;
}

.ksc-termin--klein .ksc-termin__symbol {
  width: 2rem;
  height: 2rem;
}

.ksc-termin--klein .ksc-termin__satz {
  font-size: 1.4rem;
}

.ksc-termin--klein .ksc-termin__knopf {
  margin-top: 0.5rem;
  font-size: 1.3rem;
}

/* In der Karteikarte auf der Karte läuft der Hinweis über beide Spalten
   und schließt den Kasten ab. */
.ksc-karte__infos .ksc-termin {
  grid-column: 1 / -1;
}

/* Terminhinweis in der Reparatur-Box: etwas Luft zum Kasten darüber, auf
   voller Breite, damit er nicht wie eine Fußnote wirkt. */
.ksc-rbox__termin {
  margin-top: 1.6rem;
}

/* ===============================================================
   Kaffeesorten auf der Kaffee-Seite (sections/kaffee-sorten.liquid)
   Karten mit Bild, Namen, Aromen und den Eckwerten aus der
   Geschmackstabelle. Bewusst flach gehalten: Die Seite erzählt und
   verweist in den Shop, sie ist nicht die Kategorie.
   =============================================================== */
.ksc-sorten__kopf {
  max-width: 62ch;
  margin-bottom: 3.2rem;
}

.ksc-sorten__titel {
  margin: 0;
  font-size: 3.2rem;
  line-height: 1.15;
}

.ksc-sorten__intro {
  margin-top: 1rem;
  font-size: 1.7rem;
  line-height: 1.6;
  color: rgba(var(--color-foreground), 0.78);
}

.ksc-sorten__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 2.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ksc-sorte {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 1.2rem;
  background-color: var(--celano-creme);
  color: inherit;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.ksc-sorte:hover,
.ksc-sorte:focus-visible {
  transform: translateY(-0.3rem);
  box-shadow: 0 1.2rem 2.8rem rgba(41, 31, 25, 0.16);
  color: inherit;
}

.ksc-sorte__bild {
  display: block;
  background-color: #fff;
}

.ksc-sorte__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.ksc-sorte__text {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1 1 auto;
  padding: 2rem 2.2rem 2.2rem;
}

.ksc-sorte__name {
  font-size: 1.8rem;
  font-weight: var(--font-heading-weight);
  line-height: 1.25;
}

.ksc-sorte__aroma {
  font-size: 1.5rem;
  line-height: 1.5;
  color: rgba(var(--color-foreground), 0.74);
}

/* Die Eckwerte als kleine Marken, damit man zwei Sorten im Vorbeigehen
   vergleichen kann, ohne Fließtext zu lesen. */
.ksc-sorte__werte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.2rem;
}

.ksc-sorte__werte span {
  padding: 0.3rem 0.8rem;
  border-radius: 0.4rem;
  background-color: #fff;
  font-size: 1.2rem;
  color: rgba(var(--color-foreground), 0.72);
}

.ksc-sorte__preis {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 1.6rem;
  font-weight: 600;
}

.ksc-sorten__button {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 3.2rem;
  padding: 1.5rem 2.8rem;
  border-radius: 0.6rem;
  background-color: var(--celano-highlight);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.ksc-sorten__button::after {
  content: '→';
  font-size: 1.6rem;
  line-height: 1;
}

.ksc-sorten__button:hover,
.ksc-sorten__button:focus-visible {
  background-color: var(--celano-highlight-dunkel);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .ksc-sorte {
    transition: box-shadow 0.3s ease;
  }

  .ksc-sorte:hover,
  .ksc-sorte:focus-visible {
    transform: none;
  }
}

@media (max-width: 749px) {
  .ksc-sorten__titel {
    font-size: 2.4rem;
  }

  .ksc-sorten__raster {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.6rem;
  }

  .ksc-sorte__text {
    padding: 1.6rem 1.6rem 1.8rem;
  }
}

/* ===============================================================
   Sortenliste im Kartenstil (sections/kaffee-menue.liquid)
   Zweispaltig, je Zeile Bild, Text und Preis. Vorbild ist der Abschnitt
   „Our Popular Menu" im Kofi-Demo. Der Rahmen umschließt die Zeile, die
   senkrechte Linie trennt den Preis ab: so liest man erst, was es ist,
   und dann, was es kostet.
   =============================================================== */
.ksc-menue__kopf {
  margin-bottom: 3.6rem;
  text-align: center;
}

.ksc-menue__kicker {
  margin: 0 0 0.8rem;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--celano-highlight);
}

.ksc-menue__titel {
  margin: 0;
  font-size: 3.4rem;
  line-height: 1.15;
}

.ksc-menue__intro {
  max-width: 62ch;
  margin: 1.2rem auto 0;
  font-size: 1.7rem;
  line-height: 1.6;
  color: rgba(var(--color-foreground), 0.78);
}

.ksc-menue__liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem 3.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .ksc-menue__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ksc-menue__zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.6rem;
  height: 100%;
  padding: 1.4rem 1.8rem 1.4rem 0;
  border: 0.1rem solid rgba(var(--color-foreground), 0.12);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ksc-menue__zeile:hover,
.ksc-menue__zeile:focus-visible {
  border-color: rgba(var(--color-foreground), 0.3);
  background-color: var(--celano-creme);
  color: inherit;
}

/* Das Bild ragt bewusst über die linke Kante hinaus, wie in der Vorlage.
   Dadurch wirkt die Zeile leichter, als wenn alles brav im Rahmen sitzt. */
.ksc-menue__bild {
  display: block;
  width: 12rem;
  margin-left: -2.4rem;
}

.ksc-menue__bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.ksc-menue__text {
  display: block;
  min-width: 0;
}

.ksc-menue__name {
  display: block;
  font-size: 1.8rem;
  font-weight: var(--font-heading-weight);
  line-height: 1.25;
}

.ksc-menue__satz {
  display: block;
  margin-top: 0.4rem;
  font-size: 1.45rem;
  line-height: 1.5;
  color: rgba(var(--color-foreground), 0.7);
}

.ksc-menue__preis {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  padding-left: 1.6rem;
  border-left: 0.1rem solid rgba(var(--color-foreground), 0.12);
  white-space: nowrap;
}

.ksc-menue__betrag {
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--celano-highlight);
}

.ksc-menue__vorher {
  font-size: 1.4rem;
  color: rgba(var(--color-foreground), 0.5);
}

.ksc-menue__button {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 3.2rem;
  padding: 1.5rem 2.8rem;
  border-radius: 0.6rem;
  background-color: var(--celano-highlight);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.ksc-menue__button:hover,
.ksc-menue__button:focus-visible {
  background-color: var(--celano-highlight-dunkel);
  color: #fff;
}

@media (max-width: 899px) {
  .ksc-menue__kopf {
    margin-bottom: 2.4rem;
    text-align: left;
  }

  .ksc-menue__titel {
    font-size: 2.6rem;
  }

  .ksc-menue__intro {
    margin-inline: 0;
    font-size: 1.6rem;
  }

  .ksc-menue__bild {
    width: 9rem;
    margin-left: -1.6rem;
  }

  .ksc-menue__zeile {
    gap: 1.2rem;
    padding: 1.2rem 1.4rem 1.2rem 0;
  }

  .ksc-menue__name {
    font-size: 1.6rem;
  }

  .ksc-menue__preis {
    padding-left: 1.2rem;
  }
}

/* Merkposten im Bildkopf (sections/bildkopf.liquid).

   Erst waren das drei gleich leise Pillen mit halbdurchsichtiger Fläche.
   Auf einem Foto wirkten sie wie abgeschaltete Knöpfe: zu wenig Kontrast,
   keine Rangfolge. Jetzt trägt einer die Entscheidung als voller Knopf,
   die übrigen sind klare weiße Verweise mit Pfeil. */
.ksc-bildkopf__punkte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.4rem;
  margin: 2.4rem 0 0;
  padding: 0;
  list-style: none;
}

.ksc-bildkopf__inhalt--mitte .ksc-bildkopf__punkte {
  justify-content: center;
}

.ksc-bildkopf__punkte li {
  display: flex;
}

/* Der hervorgehobene: voller Knopf in der Signalfarbe. */
.ksc-bildkopf__punkt--haupt {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 2.6rem;
  border-radius: 0.6rem;
  background-color: var(--celano-highlight);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.ksc-bildkopf__punkt--haupt::after {
  content: '→';
  font-size: 1.6rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.ksc-bildkopf__punkt--haupt:hover,
.ksc-bildkopf__punkt--haupt:focus-visible {
  background-color: var(--celano-highlight-dunkel);
  color: #fff;
}

.ksc-bildkopf__punkt--haupt:hover::after {
  transform: translateX(0.3rem);
}

/* Die übrigen: weißer Text mit Pfeil, keine Fläche. Der Schatten hält
   sie auf hellen Bildstellen lesbar. */
.ksc-bildkopf__punkt {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 0.3rem;
  border-bottom: 0.1rem solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  text-decoration: none;
  text-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.45);
  transition: border-color 0.2s ease;
}

a.ksc-bildkopf__punkt::after {
  content: '→';
  font-size: 1.4rem;
  line-height: 1;
  opacity: 0.8;
  transition: transform 0.2s ease;
}

a.ksc-bildkopf__punkt:hover,
a.ksc-bildkopf__punkt:focus-visible {
  color: #fff;
  border-bottom-color: #fff;
}

a.ksc-bildkopf__punkt:hover::after {
  transform: translateX(0.3rem);
}

@media (prefers-reduced-motion: reduce) {
  .ksc-bildkopf__punkt--haupt::after,
  a.ksc-bildkopf__punkt::after {
    transition: none;
  }

  .ksc-bildkopf__punkt--haupt:hover::after,
  a.ksc-bildkopf__punkt:hover::after {
    transform: none;
  }
}

@media (max-width: 749px) {
  .ksc-bildkopf__punkte {
    gap: 0.9rem 1.6rem;
    margin-top: 1.8rem;
  }

  .ksc-bildkopf__punkt--haupt {
    padding: 1.1rem 1.8rem;
    font-size: 1.2rem;
  }

  .ksc-bildkopf__punkt {
    font-size: 1.35rem;
  }
}

}

/* ===============================================================
   Kategorienkacheln über der Produktliste
   (sections/kategorien-leiste.liquid)

   Kleiner als die Kacheln auf der Startseite: Sie sind ein Wegweiser
   über der Liste, nicht der Inhalt der Seite. Deshalb Rahmen statt
   Fläche, Bild klein und quadratisch, Text daneben.

   Welche Ebene erscheint, entscheidet die Sektion: auf der Gesamtliste
   die Oberbereiche, in einem Bereich dessen Unterkategorien.
   =============================================================== */
.ksc-katnav {
  padding-bottom: 2rem;
  padding-top: 0.4rem;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.1);
}

.ksc-katnav__raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ksc-katkachel {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  height: 100%;
  padding: 0.9rem 1.4rem 0.9rem 0.9rem;
  border: 0.1rem solid rgba(var(--color-foreground), 0.16);
  border-radius: 0.8rem;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ksc-katkachel:hover,
.ksc-katkachel:focus-visible {
  border-color: var(--celano-highlight);
  background-color: var(--celano-creme);
  color: inherit;
}

.ksc-katkachel--aktiv {
  border-color: var(--celano-highlight);
  background-color: var(--celano-creme);
}

.ksc-katkachel__bild {
  flex: 0 0 auto;
  display: block;
  width: 4.4rem;
  height: 4.4rem;
  overflow: hidden;
  border-radius: 0.5rem;
  background-color: #fff;
}

.ksc-katkachel__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ksc-katkachel__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.ksc-katkachel__name {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
}

.ksc-katkachel__zahl {
  font-size: 1.2rem;
  color: rgba(var(--color-foreground), 0.55);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 599px) {
  .ksc-katnav__raster {
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.8rem;
  }

  .ksc-katkachel {
    gap: 0.9rem;
    padding: 0.7rem 1rem 0.7rem 0.7rem;
  }

  .ksc-katkachel__bild {
    width: 3.6rem;
    height: 3.6rem;
  }

  .ksc-katkachel__name {
    font-size: 1.35rem;
  }
}

/* ===============================================================
   Google-Abzeichen unter den Kundenstimmen
   (snippets/google-bewertung.liquid)

   Die drei Stimmen darüber kommen von Google; das Abzeichen nennt die
   Quelle und führt zu den übrigen. Es steht als weiße Karte auf der
   beigen Fläche der Sektion – ein Knopf wäre zu laut, ein reiner
   Textlink zu leise für eine Quellenangabe.
   =============================================================== */
.ksc-google {
  display: flex;
  justify-content: center;
  margin-top: 4rem;
}

.ksc-google__karte {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  padding: 1.4rem 2.2rem;
  border: 0.1rem solid rgba(var(--color-foreground), 0.12);
  border-radius: 0.8rem;
  background-color: #fff;
  color: rgb(var(--color-foreground));
  text-decoration: none;
  box-shadow: 0 0.2rem 1.2rem rgba(41, 31, 25, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ksc-google__karte:hover,
.ksc-google__karte:focus-visible {
  border-color: rgba(var(--color-foreground), 0.28);
  box-shadow: 0 0.4rem 1.8rem rgba(41, 31, 25, 0.12);
  color: rgb(var(--color-foreground));
}

.ksc-google__g {
  display: flex;
  flex: 0 0 auto;
}

.ksc-google__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: left;
}

.ksc-google__zeile {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.ksc-google__note {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.ksc-google__sterne {
  display: inline-flex;
  gap: 0.2rem;
}

/* Die Sterne sind ein Zeichen mit Verlauf als Füllung: so lässt sich ein
   halber Stern darstellen, ohne ein zweites Bild zu laden. */
.ksc-google__stern {
  width: 1.6rem;
  height: 1.6rem;
  background-color: rgba(var(--color-foreground), 0.18);
  -webkit-mask: var(--ksc-stern) center / contain no-repeat;
  mask: var(--ksc-stern) center / contain no-repeat;
}

.ksc-google__stern--voll {
  background-color: #fbbc05;
}

.ksc-google__stern--halb {
  background-image: linear-gradient(to right, #fbbc05 50%, rgba(41, 31, 25, 0.18) 50%);
  background-color: transparent;
}

.ksc-google__unten {
  font-size: 1.4rem;
  color: rgba(var(--color-foreground), 0.65);
}

.ksc-google__pfeil {
  font-size: 1.8rem;
  line-height: 1;
  color: rgba(var(--color-foreground), 0.4);
  transition: transform 0.2s ease;
}

.ksc-google__karte:hover .ksc-google__pfeil {
  transform: translateX(0.3rem);
}

@media (prefers-reduced-motion: reduce) {
  .ksc-google__pfeil,
  .ksc-google__karte {
    transition: none;
  }

  .ksc-google__karte:hover .ksc-google__pfeil {
    transform: none;
  }
}

@media (max-width: 749px) {
  .ksc-google__karte {
    gap: 1.2rem;
    padding: 1.2rem 1.6rem;
  }

  .ksc-google__note {
    font-size: 1.7rem;
  }

  .ksc-google__pfeil {
    display: none;
  }
}

/* Schlanke Fassung für den Kopfbereich der Startseite: eine Zeile, keine
   Fläche. Neben den beiden Knöpfen darüber wäre eine dritte Fläche ein
   Signal zu viel – die Bewertung soll stützen, nicht konkurrieren. */
.ksc-google--schlank {
  justify-content: flex-start;
  margin-top: 2rem;
}

.ksc-google--schlank .ksc-google__karte {
  gap: 1rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.ksc-google--schlank .ksc-google__karte:hover,
.ksc-google--schlank .ksc-google__karte:focus-visible {
  box-shadow: none;
}

/* In einer Zeile statt übereinander, mit Mittelpunkt als Trenner. */
.ksc-google--schlank .ksc-google__text {
  flex-direction: row;
  align-items: center;
  gap: 0.8rem;
}

.ksc-google--schlank .ksc-google__note {
  font-size: 1.6rem;
}

.ksc-google--schlank .ksc-google__stern {
  width: 1.4rem;
  height: 1.4rem;
}

.ksc-google--schlank .ksc-google__unten {
  font-size: 1.4rem;
}

.ksc-google--schlank .ksc-google__unten::before {
  content: '·';
  margin-right: 0.8rem;
  color: rgba(var(--color-foreground), 0.35);
}

.ksc-google--schlank .ksc-google__karte:hover .ksc-google__unten {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

@media (max-width: 749px) {
  /* Auf dem Handy bricht die Zeile um, statt den Text zu quetschen. */
  .ksc-google--schlank .ksc-google__text {
    flex-wrap: wrap;
    gap: 0.4rem 0.8rem;
  }

  .ksc-google--schlank .ksc-google__unten::before {
    content: none;
  }
}

/* Freigestelltes Bild in der Collage: ganz zeigen statt beschneiden.
   Der Kasten ist querformatig, ein quadratischer Packshot verlöre oben
   und unten je ein Stück. Der cremefarbene Grund entspricht dem
   Hintergrund der Aufnahme, die Kante fällt dadurch nicht auf. */
.ksc-hero__bild--voll {
  background-color: var(--ksc-bild-grund, var(--celano-creme));
}

/* Unten aufsetzen: So bleibt nur oben ein Streifen Grundfarbe, und der
   lässt sich mit dem oberen Rand der Aufnahme zur Deckung bringen. Bei
   mittiger Lage wären es zwei Streifen, und der untere träfe eine andere
   Stelle des Verlaufs. */
.ksc-hero__bild--voll img {
  object-fit: contain;
  object-position: center bottom;
}

/* Der Verweis füllt den Kasten, damit die ganze Fläche klickbar ist. */
.ksc-hero__bild > a {
  display: block;
  width: 100%;
  height: 100%;
}

/* Freigestellte Abbildung neben dem Text im Bildkopf
   (sections/bildkopf.liquid).

   Die Bühne setzt Text und Abbildung nebeneinander, ohne am bisherigen
   Aufbau zu rühren: Ohne Abbildung bleibt der Inhalt genau wie vorher,
   die Bühne ist dann nur ein Kasten um ihn herum. */
.ksc-bildkopf__buehne {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Der Bildkopf schneidet sonst ab. Das Hintergrundbild und der Schleier
   liegen beide auf `inset: 0` und ragen nicht heraus, nur die Abbildung –
   das Sichtbarmachen kostet also nichts.

   Der z-index muss über 9 liegen: Das Theme gibt jeder `.xo-section`
   genau diesen Wert, und der folgende Abschnitt hat die herausragende
   Abbildung sonst einfach übermalt. Mit 2 war sie unsichtbar, obwohl sie
   geometrisch richtig saß – ein Fehler, den man im Layout nicht sieht,
   sondern nur im Ergebnis. */
.ksc-bildkopf:has(.ksc-bildkopf__beiwerk) {
  overflow: visible;
  z-index: 10;
}

@media (min-width: 1000px) {
  .ksc-bildkopf__buehne--mit-beiwerk {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.46fr);
    /* Unten bündig, damit die Abbildung auf der Unterkante des Bildkopfs
       aufsetzt und von dort nach unten herausragen kann. */
    align-items: end;
    gap: 3rem;
    max-width: var(--xo-container-width, 1600px);
    margin: 0 auto;
  }

  /* Der Inhalt bringt seine eigene Breitenbegrenzung mit; in der Spalte
     muss sie weg, sonst stünde er mittig statt am linken Rand. */
  .ksc-bildkopf__buehne--mit-beiwerk .ksc-bildkopf__inhalt {
    max-width: none;
    margin: 0;
  }
}

.ksc-bildkopf__beiwerk {
  display: none;
}

@media (min-width: 1000px) {
  .ksc-bildkopf__beiwerk {
    display: block;
  }

  /* Die Abbildung steht unten im weißen Bereich und ragt nach oben in den
     Bildkopf hinein. Dafür schiebt der negative Außenabstand sie über die
     Unterkante hinaus; `overflow: visible` am Abschnitt lässt sie heraus
     und `z-index` hält sie über dem folgenden Abschnitt. */
  .ksc-bildkopf__beiwerk {
    /* Die Bühne endet nicht an der Unterkante des Bildkopfs, darunter
       liegen noch dessen 5rem Polster. Die müssen mit abgezogen werden,
       sonst ist der sichtbare Überstand um genau diesen Betrag kleiner –
       bei 7rem blieben 2rem übrig. */
    margin-bottom: calc(-5rem - var(--ksc-beiwerk-ueberstand, 7rem));
  }

  .ksc-bildkopf__beiwerk img {
    display: block;
    width: 100%;
    height: auto;
    /* Nicht höher als Bildkopf plus Überstand, sonst reicht die Abbildung
       oben in den Kopfbereich mit Logo und Menü. */
    max-height: calc(var(--ksc-bildkopf-hoehe) - 10rem + var(--ksc-beiwerk-ueberstand, 7rem));
    object-fit: contain;
    object-position: center bottom;
    /* Ein Hauch Schatten, damit die Tüten nicht wie ausgeschnitten auf
       dem Foto kleben – mehr nicht. Vorher war er so kräftig, dass er im
       hellen Bereich unter dem Bildkopf als graue Wolke stand. */
    filter: drop-shadow(0 0.8rem 1.4rem rgba(0, 0, 0, 0.18));
  }

  .ksc-bildkopf__beiwerk a {
    display: block;
    transition: transform 0.3s ease;
  }

  .ksc-bildkopf__beiwerk a:hover {
    transform: translateY(-0.4rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ksc-bildkopf__beiwerk a,
  .ksc-bildkopf__beiwerk a:hover {
    transition: none;
    transform: none;
  }
}

/* Terminhinweis und Plakette im Reparaturablauf
   (sections/service-reparatur.liquid). */
.ksc-service__termin {
  margin-bottom: 3.2rem;
}

/* „1 Espresso geht aufs Haus“ neben dem Schritt. Eine Plakette und kein
   Satz im Fließtext: Es ist eine Belohnung, keine Bedingung – sie soll
   auffallen, ohne die Anleitung zu unterbrechen. */
.ksc-service__plakette {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.8rem;
  padding: 0.5rem 1.2rem;
  border-radius: 10rem;
  background-color: var(--celano-creme);
  color: var(--celano-braun);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
}

.ksc-service__plakette::before {
  content: '';
  width: 1.4rem;
  height: 1.4rem;
  flex: 0 0 auto;
  background-color: var(--celano-highlight);
  /* Espressotasse, als Maske: so trägt sie die Signalfarbe und braucht
     keine zweite Datei. */
  -webkit-mask: var(--ksc-tasse) center / contain no-repeat;
  mask: var(--ksc-tasse) center / contain no-repeat;
}

/* Hinweiskasten im Reparaturformular (snippets/reparatur-formular.liquid).
   Ersetzt das frühere Feld „Mitgegebenes Zubehör": Gefragt war nicht, was
   jemand mitbringt, sondern dass alles mitkommt. */
/* „Bitte komplett abgeben“ – seit 20.10.2026 als eigener Kasten mit
   Symbol. Ohne Fläche ging der Hinweis zwischen den Feldern unter. Creme
   statt Orange: Es ist eine Bitte, keine Warnung. */
.ksc-reparatur__hinweis {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.4rem;
  row-gap: 0.3rem;
  align-items: start;
  margin-top: 0.4rem;
  padding: 1.6rem 1.8rem;
  border-radius: 1rem;
  background-color: var(--celano-creme);
  font-size: 1.4rem;
  line-height: 1.55;
  color: rgba(var(--color-foreground), 0.78);
}

.ksc-reparatur__hinweis-zeichen {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: #fff;
  color: var(--celano-braun);
}

.ksc-reparatur__hinweis strong {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--celano-braun);
}

.ksc-reparatur__hinweis-text {
  grid-column: 2;
}

/* ===============================================================
   Megamenü darf nicht aus dem Fenster laufen

   Das Theme hängt das Aufklappmenü an den Menüpunkt (`li` mit
   `position: relative`, Panel auf `left: 0`) und gibt ihm eine feste
   Höchstbreite von 1116 px. Bei „Produkte“ sitzt der Menüpunkt weit
   rechts: Ab etwa 1300 px Fensterbreite ragte das Panel über den rechten
   Rand hinaus, und die Schnelllinks „Neuheiten“ und „Bestseller“ am Ende
   der Reihe waren nicht mehr erreichbar.

   Statt an den Menüpunkt wird das Panel deshalb an den Inhaltsrahmen
   gehängt: Der Menüpunkt wird `static`, der Rahmen `relative`, das Panel
   spannt von Rand zu Rand. Damit kann es gar nicht mehr hinauslaufen,
   egal wie schmal das Fenster ist – und es liegt ruhiger, weil es beim
   Wechsel zwischen den Menüpunkten nicht mehr hin und her springt.

   Nur für das gemischte Menü (Produkte). Das schmale Listenmenü
   (Service) bleibt am Menüpunkt hängen, sonst stünde eine 28 rem breite
   Liste mitten im Rahmen.
   =============================================================== */
@media (min-width: 1200px) {
  .header-v14__sticky xo-container:has(
    .header-v14__navigation-desktop
      .xo-menu-horizontal__sub-menu
      .xo-menu-horizontal__sub-menu--grandchild
  ) {
    position: relative;
  }

  .header-v14__navigation-desktop
    > .xo-menu-horizontal
    > .xo-menu-horizontal__item:has(
      > .xo-menu-horizontal__sub-menu .xo-menu-horizontal__sub-menu--grandchild
    ) {
    position: static;
  }

  .header-v14__navigation-desktop
    > .xo-menu-horizontal
    > .xo-menu-horizontal__item:has(
      > .xo-menu-horizontal__sub-menu .xo-menu-horizontal__sub-menu--grandchild
    )
    > .xo-menu-horizontal__sub-menu {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
  }
}

/* Sofortantwort zur Marke im Reparaturformular.
   Drei Zustände: reparieren wir, reparieren wir nicht, nicht in der
   Liste. Der dritte ist bewusst neutral und keine Absage – unsere Liste
   ist nicht vollständig, und wer eine seltene Marke hat, soll den
   Auftrag trotzdem schicken. */
/* Plakette rechts neben „Marke *“, über dem Feld (seit 20.10.2026).
   Sie liegt absolut im Feld, damit beim Tippen nichts verrutscht – vorher
   schob ein Kasten unter dem Feld alle folgenden Felder nach unten. */
.ksc-feld--marke {
  position: relative;
}

.ksc-marken-antwort {
  position: absolute;
  top: -0.2rem;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 60%;
  padding: 0.3rem 1rem 0.3rem 0.8rem;
  border-radius: 99rem;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  animation: ksc-plakette 0.25s ease-out;
}

.ksc-marken-antwort[hidden] {
  display: none;
}

/* Lange Markennamen kürzen statt umbrechen: die Plakette bleibt einzeilig
   und schiebt nichts. Der ganze Satz steht im Hinweis beim Überfahren. */
.ksc-marken-antwort > span[aria-hidden] {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ksc-marken-antwort strong {
  font-weight: 700;
}

.ksc-marken-antwort::before {
  content: '';
  flex: 0 0 auto;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background-color: currentColor;
}

.ksc-marken-antwort--ja {
  background-color: rgba(31, 122, 60, 0.1);
  color: #1f7a3c;
}

.ksc-marken-antwort--nein {
  background-color: rgba(176, 58, 32, 0.1);
  color: #b03a20;
}

.ksc-marken-antwort--offen {
  background-color: rgba(var(--color-foreground), 0.06);
  color: rgba(var(--color-foreground), 0.7);
}

@keyframes ksc-plakette {
  from { opacity: 0; transform: translateY(0.3rem); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ksc-marken-antwort { animation: none; }
}

/* Reparaturauftrag zweispaltig: links der Ablauf, rechts das Formular
   (sections/service-reparatur.liquid, Einstellung „nebeneinander“).

   Der Ablauf beantwortet genau die Fragen, die beim Ausfüllen aufkommen –
   was kostet der Kostenvoranschlag, wann wird der Termin gemacht.
   Untereinander hat man ihn beim Formular schon vergessen und scrollt
   zurück. */
@media (min-width: 1000px) {
  .ksc-service__paar {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: 4.8rem;
    align-items: start;
  }

  /* Der Ablauf bleibt beim Scrollen stehen: Das Formular ist länger als
     die linke Spalte, und der Hinweis „nur nach Absprache“ soll sichtbar
     bleiben, solange jemand ausfüllt. */
  .ksc-service__links {
    position: sticky;
    top: calc(var(--ksc-kopf-hoehe) + 2rem);
  }

  .ksc-service__paar .ksc-service__ablauf,
  .ksc-service__paar .ksc-service__formular {
    margin-top: 0;
  }

  /* Die Überschrift des Formulars steht auf derselben Höhe wie der
     Terminhinweis, sonst beginnen die Spalten versetzt. */
  .ksc-service__paar .ksc-service__formular > h2:first-child {
    margin-top: 0;
  }

  /* Überschriften linksbündig: Mittig gesetzt stehen sie in einer
     schmalen Spalte neben dem Text statt über ihm. */
  .ksc-service__paar .ksc-service__ablauf > h2,
  .ksc-service__paar .ksc-service__formular > h2,
  .ksc-service__paar .ksc-service__formular .ksc-service__intro {
    text-align: left;
  }
}


/* Luft zwischen der Einleitung und der Schrittleiste des Formulars.
   Der Satz klebte direkt auf dem ersten Reiter „Maschine“ und sah aus,
   als gehörte er dazu. */
.ksc-service__formular .ksc-service__intro {
  margin-bottom: 2.4rem;
}

/* Das Formular als abgegrenzte Fläche
   (sections/service-reparatur.liquid, Einstellung „nebeneinander“).

   Nebeneinander verschwamm die Grenze: Links Fließtext, rechts Felder,
   beides auf Weiß – man sah nicht sofort, wo das Formular anfängt. Ein
   feiner Rahmen mit etwas Innenabstand genügt; ein farbiger Kasten wäre
   zu laut für eine Seite, die sonst ruhig ist. */
@media (min-width: 1000px) {
  .ksc-service__paar .ksc-service__formular {
    padding: 3.2rem;
    border: 0.1rem solid rgba(var(--color-foreground), 0.14);
    border-radius: 1.2rem;
    background-color: #fff;
    box-shadow: 0 0.2rem 1.6rem rgba(41, 31, 25, 0.04);
  }
}

/* Auf schmalen Bildschirmen stehen Ablauf und Formular untereinander.
   Der Rahmen bleibt, fällt aber schmaler aus – sonst stünde er fast am
   Bildschirmrand. */
@media (max-width: 999px) {
  .ksc-service__formular {
    padding: 2rem 1.6rem;
    border: 0.1rem solid rgba(var(--color-foreground), 0.14);
    border-radius: 1.2rem;
  }
}

/* „1 Espresso geht aufs Haus“ als runde Plakette oben rechts im
   Formular.

   Vorher stand sie gefüllt in der Signalfarbe über der Überschrift und
   nahm eine eigene Zeile ein – im Formular war das zu laut, sie konkurrierte
   mit den Feldern. Jetzt sitzt sie in der Ecke, nimmt keinen Platz in der
   Spalte weg und ist trotzdem das Erste, was neben der Überschrift
   auffällt. */
.ksc-service__formular {
  position: relative;
}

.ksc-service__gratis {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.6rem 1.2rem 0.6rem 0.9rem;
  border: 0.1rem solid rgba(207, 84, 32, 0.35);
  border-radius: 10rem;
  background-color: rgba(207, 84, 32, 0.07);
  color: var(--celano-highlight);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.ksc-service__gratis::before {
  content: '';
  width: 1.4rem;
  height: 1.4rem;
  flex: 0 0 auto;
  background-color: var(--celano-highlight);
  -webkit-mask: var(--ksc-tasse) center / contain no-repeat;
  mask: var(--ksc-tasse) center / contain no-repeat;
}

/* Ab der Breite, in der das Formular einen Rahmen hat, sitzt sie in
   dessen oberer rechter Ecke. Darunter bleibt sie im Textfluss, sonst
   läge sie über der Überschrift. */
@media (min-width: 1000px) {
  .ksc-service__gratis {
    position: absolute;
    top: 2.4rem;
    right: 2.4rem;
    margin: 0;
  }

  /* Platz für die Plakette, damit die Überschrift nicht darunter läuft. */
  .ksc-service__paar .ksc-service__formular > h2:first-of-type {
    padding-right: 20rem;
  }
}

@media (max-width: 999px) {
  .ksc-service__gratis {
    margin-bottom: 1.2rem;
  }
}


/* Zusaetzlich ein weicher Schatten an Logo und Symbolen, solange der
   Kopfbereich durchsichtig ueber dem Foto liegt.

   Der Verlauf allein reicht nicht fuer jedes Motiv: Auf der Kontaktseite
   sitzt das Logo vor einer hellen Werkstattdecke. Ein Schatten wirkt
   unabhaengig davon, wie hell die Stelle darunter gerade ist - und er
   faellt auf dunklen Motiven nicht auf. */
/* ACHTUNG: `filter` ist EINE Eigenschaft. Das Logo wird weiter oben mit
   `filter: brightness(0) invert(1)` weiß gefärbt – ein zweiter Block mit
   nur `drop-shadow` ersetzt das und das Logo stand plötzlich dunkel auf
   dem Foto. Der Schatten muss deshalb in derselben Deklaration stehen
   wie die Einfärbung, nicht in einer eigenen. */
html.ksc-oben body:has(.ksc-bildkopf) .header-v14__icon svg,
html.ksc-oben body:has(.ksc-bildkopf) .header-v14__icon-wrap svg,
html.ksc-oben body:has(.ksc-bildkopf) .header-v14__navigation-mobile svg {
  filter: drop-shadow(0 0.1rem 0.5rem rgba(0, 0, 0, 0.55));
}

/* Großes Bild direkt unter der Überschrift – nur auf dem Handy
   (sections/startseite-hero.liquid).

   Es steht zweimal im Markup: einmal hier in der Textspalte, einmal in
   der Collage rechts. Jeweils eine Fassung ist ausgeblendet, geladen
   wird die Datei dadurch trotzdem nur einmal. So bleibt das
   Desktop-Layout unangetastet. */
.ksc-hero__bild-mobil {
  display: none;
}

@media (max-width: 991px) {
  .ksc-hero__bild-mobil {
    display: block;
    margin: 0 0 2.4rem;
    border-radius: 1.6rem;
    overflow: hidden;
  }

  .ksc-hero__bild-mobil img {
    display: block;
    width: 100%;
    height: 28rem;
    object-fit: cover;
    object-position: center 20%;
  }

  /* In der Collage entfällt das große Bild dann – sonst stünde dasselbe
     Motiv zweimal auf einer Bildschirmhöhe. Die beiden kleinen bleiben. */
  .ksc-hero__bilder .ksc-hero__bild--gross {
    display: none;
  }

  .ksc-hero__bilder {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    height: auto;
  }
}

/* Google-Bewertung als hochkant gestellte Karte über der Bildcollage im
   Startseiten-Kopf (snippets/google-bewertung.liquid, stil 'karte-hoch').
   Sitzt auf der Fuge zwischen großem und kleinen Bildern, unten. */
.ksc-hero__bilder {
  position: relative;
}

.ksc-google--hoch {
  position: absolute;
  z-index: 3;
  left: 1.6rem;
  bottom: 1.6rem;
  margin: 0;
}

.ksc-google--hoch .ksc-google__karte {
  flex-direction: column;
  gap: 0.6rem;
  min-width: 13rem;
  padding: 1.6rem 1.8rem 1.4rem;
  border: 0;
  border-radius: 1.4rem;
  box-shadow: 0 0.8rem 2.4rem rgba(41, 31, 25, 0.18);
  text-align: center;
}

.ksc-google--hoch .ksc-google__text {
  align-items: center;
  text-align: center;
  gap: 0.4rem;
}

.ksc-google--hoch .ksc-google__zeile {
  flex-direction: column-reverse;
  gap: 0.6rem;
}

.ksc-google--hoch .ksc-google__stern {
  width: 2rem;
  height: 2rem;
}

.ksc-google--hoch .ksc-google__stern--voll {
  background-color: var(--celano-highlight);
}

.ksc-google--hoch .ksc-google__stern--halb {
  background-image: linear-gradient(to right, var(--celano-highlight) 50%, rgba(41, 31, 25, 0.18) 50%);
}

.ksc-google--hoch .ksc-google__note {
  font-size: 2.4rem;
}

.ksc-google__wort {
  font-size: 1.5rem;
  color: rgba(var(--color-foreground), 0.8);
}

.ksc-google--hoch .ksc-google__unten,
.ksc-google--hoch .ksc-google__pfeil {
  display: none;
}

@media (max-width: 991px) {
  /* Mobil zeigt die Collage nur die beiden kleinen Bilder, rund 13 rem
     hoch – die hochkant gestellte Karte ragte darüber hinaus. Dort liegt
     sie deshalb flach: G, Note, Sterne, Wort in einer Zeile. */
  .ksc-google--hoch {
    left: 1rem;
    bottom: 1rem;
  }
  .ksc-google--hoch .ksc-google__karte {
    flex-direction: row;
    gap: 0.8rem;
    min-width: 0;
    padding: 0.8rem 1.2rem;
    border-radius: 1rem;
  }
  .ksc-google--hoch .ksc-google__g svg { width: 2.2rem; height: 2.2rem; }
  .ksc-google--hoch .ksc-google__text { flex-direction: row; gap: 0.6rem; }
  .ksc-google--hoch .ksc-google__zeile { flex-direction: row; gap: 0.6rem; }
  .ksc-google--hoch .ksc-google__note { font-size: 1.7rem; }
  .ksc-google--hoch .ksc-google__stern { width: 1.3rem; height: 1.3rem; }
  .ksc-google--hoch .ksc-google__wort { font-size: 1.3rem; }
}

/* Megamenü „Produkte“: Schnelllinks untereinander statt nebeneinander.

   Neuheiten, Bestseller und Geschenkgutscheine haben keine Unterpunkte
   und standen als Pillen in einer Reihe hinter den Spalten – mit dem
   dritten rutschten sie weit nach rechts. Jetzt teilen sie sich eine
   Spalte. Das Panel wird dafür ein Raster: Spalten mit Unterpunkten
   reichen über alle Zeilen, die Schnelllinks belegen die letzte Spalte
   Zeile für Zeile.

   Keine feste Spaltenzahl: Das Raster füllt spaltenweise, die Gruppen
   reichen über alle Zeilen, und `order: 1` schiebt die Schnelllinks hinter
   die letzte Gruppe. Eine vierte Gruppe im Admin-Menü braucht also keine
   Änderung hier (bis 19.10.2026 stand die Spalte fest auf 4). */
@media (min-width: 1200px) {
  .header-v14__navigation-desktop
    > .xo-menu-horizontal
    > .xo-menu-horizontal__item
    > .xo-menu-horizontal__sub-menu:has(.xo-menu-horizontal__sub-menu--grandchild) {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(6, auto);
    grid-auto-columns: max-content;
    column-gap: 5rem;
    row-gap: 1rem;
    align-items: start;
  }

  .header-v14__navigation-desktop
    > .xo-menu-horizontal
    > .xo-menu-horizontal__item
    > .xo-menu-horizontal__sub-menu:has(.xo-menu-horizontal__sub-menu--grandchild)
    > .xo-menu-horizontal__item--child:has(.xo-menu-horizontal__sub-menu--grandchild) {
    grid-row: 1 / -1;
  }

  .header-v14__navigation-desktop
    > .xo-menu-horizontal
    > .xo-menu-horizontal__item
    > .xo-menu-horizontal__sub-menu:has(.xo-menu-horizontal__sub-menu--grandchild)
    > .xo-menu-horizontal__item--child:not(:has(.xo-menu-horizontal__sub-menu--grandchild)) {
    order: 1;
    margin: 0;
  }
}

/* Die Google-Karte ragt unten aus der Collage heraus, damit sie über der
   Bildkante steht und heraussticht. Damit der folgende Abschnitt sie
   nicht übermalt, liegt der Kopfabschnitt eine Ebene höher – das Theme
   gibt jeder .xo-section z-index 9. */
@media (min-width: 992px) {
  .ksc-google--hoch {
    bottom: -3.2rem;
    left: 4.8rem;
  }

  .xo-section:has(.ksc-google--hoch) {
    position: relative;
    z-index: 10;
  }
}

/* Teaser „Kaffee ist Handwerk“ auf der Startseite: Der Knopf klebte am
   Text darüber. */
.ksc-service__teaser-text .ksc-service__button {
  margin-top: 3.2rem;
}

/* Kanalzeile im Startseiten-Kopf etwas größer. */
.ksc-hero__kanaele a {
  gap: 0.8rem;
  font-size: 1.6rem;
}
.ksc-hero__kanaele svg {
  width: 2.6rem;
  height: 2.6rem;
}

/* Leere Kategorie mit Hinweis aus der Sammlungsbeschreibung
   (snippets/filters-content.liquid), etwa „Bald wieder da“. */
.ksc-leer {
  max-width: 64rem;
  margin: 2rem auto 4rem;
  padding: 3.2rem;
  border: 0.1rem solid rgba(var(--color-foreground), 0.12);
  border-radius: 1.2rem;
  background-color: var(--celano-creme);
  text-align: center;
}
.ksc-leer h2 { margin: 0 0 1.2rem; }
.ksc-leer p:last-child { margin-bottom: 0; }

/* ===============================================================
   Marken-Check (sections/marken-check.liquid, seit 20.10.2026)
   Ein Kasten in der Mitte: Frage, Eingabefeld, Antwort. Die Antwort hat
   eine feste Mindesthöhe, damit beim Tippen nichts verrutscht.
   =============================================================== */
.ksc-mcheck {
  max-width: 72rem;
  margin: 0 auto;
  padding: 4rem 4.4rem;
  border-radius: 1.6rem;
  background-color: var(--celano-creme);
  text-align: center;
}

.ksc-mcheck__kicker {
  margin: 0 0 0.8rem;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--celano-highlight);
}

.ksc-mcheck__titel {
  margin: 0 0 1rem;
}

.ksc-mcheck__text {
  margin: 0 auto 2.6rem;
  max-width: 48rem;
  font-size: 1.6rem;
  line-height: 1.55;
  color: rgba(var(--color-foreground), 0.75);
}

.ksc-mcheck__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ksc-mcheck__feld {
  position: relative;
  max-width: 48rem;
  margin: 0 auto;
}

.ksc-mcheck__lupe {
  position: absolute;
  left: 1.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(var(--color-foreground), 0.45);
  pointer-events: none;
}

.ksc-mcheck__eingabe {
  width: 100%;
  height: 5.6rem;
  padding: 0 2rem 0 5rem;
  border: 0.1rem solid rgba(41, 31, 25, 0.18);
  border-radius: 99rem;
  background: #fff;
  font-family: inherit;
  font-size: 1.8rem;
  color: rgb(var(--color-foreground));
  box-shadow: 0 0.6rem 2rem rgba(41, 31, 25, 0.06);
}

.ksc-mcheck__eingabe:focus {
  outline: none;
  border-color: var(--celano-braun);
  box-shadow: 0 0 0 0.3rem rgba(41, 31, 25, 0.12);
}

.ksc-mcheck__ergebnis {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1.4rem;
  max-width: 48rem;
  min-height: 19.5rem;
  margin: 1.8rem auto 0;
  text-align: left;
}

.ksc-mcheck__leer {
  margin: 0.4rem 0 0;
  font-size: 1.4rem;
  color: rgba(var(--color-foreground), 0.55);
  text-align: center;
}

.ksc-mcheck__ergebnis--ja,
.ksc-mcheck__ergebnis--nein,
.ksc-mcheck__ergebnis--offen {
  justify-content: flex-start;
  padding: 1.8rem 2rem;
  border-radius: 1.2rem;
  background: #fff;
  animation: ksc-plakette 0.25s ease-out;
}

.ksc-mcheck__zeichen {
  flex: 0 0 auto;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.6rem;
}

.ksc-mcheck__ergebnis--ja .ksc-mcheck__zeichen {
  background-color: #1f7a3c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
}

.ksc-mcheck__ergebnis--nein .ksc-mcheck__zeichen {
  background-color: #b03a20;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

.ksc-mcheck__ergebnis--offen .ksc-mcheck__zeichen {
  background-color: rgba(var(--color-foreground), 0.45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M9.5 9a2.5 2.5 0 1 1 3.5 2.3c-.7.3-1 .9-1 1.7M12 17h.01'/%3E%3C/svg%3E");
}

.ksc-mcheck__antwort-titel {
  margin: 0.3rem 0 0.4rem;
  font-size: 1.7rem;
  font-weight: 500;
}

.ksc-mcheck__ergebnis--ja .ksc-mcheck__antwort-titel { color: #1f7a3c; }
.ksc-mcheck__ergebnis--nein .ksc-mcheck__antwort-titel { color: #b03a20; }

.ksc-mcheck__antwort-text {
  margin: 0 0 1.2rem;
  font-size: 1.4rem;
  line-height: 1.5;
  color: rgba(var(--color-foreground), 0.72);
}

.ksc-mcheck__ergebnis--nein .ksc-mcheck__antwort-text {
  margin-bottom: 0;
}

.ksc-mcheck__knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.1rem 2.2rem;
  border-radius: 99rem;
  background-color: var(--celano-highlight);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.ksc-mcheck__knopf::after {
  content: '→';
}

.ksc-mcheck__knopf:hover {
  background-color: var(--celano-highlight-dunkel);
  color: #fff;
}

.ksc-mcheck__knopf--leise {
  background-color: transparent;
  border: 0.1rem solid rgba(41, 31, 25, 0.3);
  color: var(--celano-braun);
}

.ksc-mcheck__knopf--leise:hover {
  background-color: var(--celano-braun);
  color: #fff;
}

@media (max-width: 749px) {
  .ksc-mcheck {
    padding: 3rem 2rem;
  }

  .ksc-mcheck__eingabe {
    height: 5rem;
    font-size: 1.6rem;
  }

  .ksc-mcheck__ergebnis {
    min-height: 24rem;
  }
}

.ksc-mcheck__vorschlaege {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}

.ksc-mcheck__vorschlag-text {
  font-size: 1.4rem;
  color: rgba(var(--color-foreground), 0.6);
}

.ksc-mcheck__vorschlag {
  padding: 0.7rem 1.4rem;
  border: 0.1rem solid rgba(41, 31, 25, 0.2);
  border-radius: 99rem;
  background: #fff;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--celano-braun);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.ksc-mcheck__vorschlag:hover,
.ksc-mcheck__vorschlag:focus-visible {
  border-color: var(--celano-highlight);
  color: var(--celano-highlight);
}

/* „Weitere Bezahlmöglichkeiten“ unter dem Schnellkauf-Knopf ausgeblendet
   (27.10.2026). Den Link setzt Shopify selbst, sobald mehrere Zahlarten
   aktiv sind (seit PayPal und Shopify Payments). Alle Zahlarten bleiben
   an der Kasse wählbar; welche es gibt, zeigen die Symbole darunter. */
.shopify-payment-button__more-options {
  display: none !important;
}