/* ============================================================================
   mountainbike-sale.de — Entwurf „Preisschild"

   Papier und Tinte, ein Signalrot, Preise als Riesenzahlen. Die Haltung des
   Shops ist „Einstiegsklasse ehrlich benannt" — deshalb sind Preis, Bestand
   und die Grenzen der Technik gestaltete Elemente und nicht Kleingedrucktes.

   Regeln, die überall gelten und nicht Geschmackssache sind:
   - Grundschrift 17 px
   - jedes Bedienelement mindestens 48 px hoch
   - Textkontrast mindestens 4,5:1 (AA), sichtbarer Fokusrahmen
   - kein waagerechtes Rollen ab 360 px Fensterbreite
   ========================================================================= */

:root{
  --papier:#F2EEE5; --karte:#FBF9F4; --tinte:#171310; --grau:#5E564B;
  --signal:#C62A11; --signal-dunkel:#A62310; --linie:#D6CFC0;
  --gruen:#2C6B2E; --wa:#0B7A3D; --wa-dunkel:#08602F;
}

*, *::before, *::after{ box-sizing:border-box; }

html{ font-size:17px; -webkit-text-size-adjust:100%; }

body{
  background:var(--papier); color:var(--tinte);
  /* Deutsche Komposita („Aluminium-Doppelwandfelgen") brechen sonst nicht um. */
  hyphens:auto; overflow-wrap:break-word;
}

/* Schlagzeilen nie automatisch trennen — „Shimano-Tech-nik" liest sich wie ein Fehler. */
h1,h2,h3,h4{ hyphens:manual; overflow-wrap:break-word; }

img{ max-width:100%; height:auto; }

/* Papier: feines Raster wie auf einem Kassenbonblock. Liegt hinter allem und
   fängt keine Klicks ab. */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:
    repeating-linear-gradient(0deg, rgba(23,19,16,.045) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(23,19,16,.03) 0 1px, transparent 1px 26px);
}
.wp-site-blocks{ position:relative; z-index:1; }

:focus-visible{ outline:3px solid var(--signal); outline-offset:3px; }

.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--tinte); color:var(--papier);
  padding:.8rem 1.2rem; z-index:999;
}
.skip-link:focus{ left:0; }

.nur-vorleser{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

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

/* ---------------------------------------------------------------- Bausteine */

.zahl{
  font-family:PlexEng, system-ui, sans-serif; font-weight:700;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.rubrik{
  font-family:PlexMono, ui-monospace, monospace; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grau);
}

/* Fehlende Angabe. Steht bewusst sichtbar, damit niemand eine Zahl für gesetzt
   hält, die noch keine ist (Versandkosten, Lieferzeit, Rufnummer). */
.offen{
  font-family:PlexMono, ui-monospace, monospace; font-size:.8em; font-weight:500;
  border:1px dashed currentColor; padding:.1em .45em; border-radius:2px;
  opacity:.85; white-space:nowrap;
}

/* Jedes Bedienelement ist mindestens 48 px hoch. */
.ziel, .wp-block-button__link,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .wc-block-components-button{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 1.4rem;
  font-family:Plex, system-ui, sans-serif; font-weight:700; font-size:1rem;
  text-decoration:none; border:none; border-radius:0; cursor:pointer;
  background:var(--signal); color:#fff;
  transition:background 140ms ease;
}
.ziel:hover, .wp-block-button__link:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .wc-block-components-button:hover{
  background:var(--signal-dunkel); color:#fff;
}
.ziel.zweit, .woocommerce a.button.zweit{
  background:transparent; color:var(--tinte); border:2px solid var(--tinte);
}
.ziel.zweit:hover, .woocommerce a.button.zweit:hover{ background:var(--tinte); color:var(--papier); }
.ziel.wa{ background:var(--wa); color:#fff; }        /* #128C4B wäre nur 4,3:1 */
.ziel.wa:hover{ background:var(--wa-dunkel); }

/* ------------------------------------------------------------------- Kopf */

.site-kopf{ border-bottom:3px solid var(--tinte); background:var(--papier); }
.marke{
  font-family:Archivo, system-ui, sans-serif; font-weight:800; font-size:1.24rem;
  letter-spacing:-.04em; text-decoration:none; min-height:48px;
  display:inline-flex; align-items:center;
}
.marke em{ font-style:normal; color:var(--signal); }
.kopf-rat{ font-size:.84rem; color:var(--grau); line-height:1.35; margin:0; text-align:right; }
.kopf-rat b{ display:block; color:var(--tinte); font-size:.95rem; }
@media(max-width:900px){ .kopf-rat{ text-align:left; } }

.site-kopf .wp-block-navigation{ font-weight:500; font-size:.94rem; }
.site-kopf .wp-block-navigation a{
  text-decoration:none; min-height:48px; display:inline-flex; align-items:center;
  border-bottom:2px solid transparent;
}
.site-kopf .wp-block-navigation a:hover{ border-bottom-color:var(--signal); }
/* Im Überlagerungsmenü stört der Unterstrich-Hover; dort zählt Fläche. */
.wp-block-navigation__responsive-container.is-menu-open a{ border-bottom:none; }
/* WooCommerce haengt per Block-Hook einen Konto-Verweis in die Kopfzeile; er kommt
   mit 37 px und ohne Beschriftung. Wir behalten ihn (Bestellungen einsehen), machen
   ihn aber treffbar und benennen ihn ueber das title-Attribut des Themes. */
.wc-block-customer-account,
.wc-block-customer-account__link,
.wc-block-mini-cart__button{
  min-width:48px; min-height:48px; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; padding:0 .4rem;
}
.wc-block-customer-account__link svg,
.wc-block-mini-cart__button svg{ width:24px; height:24px; }
.wc-block-mini-cart__button:hover{ background:transparent; color:var(--signal); }

/* Der Menüknopf kommt von WordPress mit 24 px — zu klein zum Treffen. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close{
  min-width:48px; min-height:48px; display:inline-flex; align-items:center; justify-content:center;
}

/* ------------------------------------------------------------- Preisschild */

/* Der Aufmacher: Text links, Schild rechts. */
.auf-raster{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
             gap:2rem; align-items:center; }
.auf-raster > *{ min-width:0; }
.auf-raster h1{ margin:0 0 1.1rem; }
.auf-vor{ font-size:1.12rem; max-width:46ch; color:#3A332B; margin:0 0 1.6rem; }
.auf-knoepfe{ display:flex; flex-wrap:wrap; gap:.7rem; }
@media(max-width:860px){ .auf-raster{ grid-template-columns:1fr; } }

/* Ein echtes Schild mit Loch und Reißkante. Als Verweis auf das Rad. */
a.schild{ display:block; text-decoration:none; color:inherit; }
a.schild:hover{ box-shadow:14px 16px 0 rgba(23,19,16,.2); }
.schild .bez, .schild .klein{ display:block; }
.schild{
  position:relative; background:var(--karte); border:2px solid var(--tinte);
  padding:2.2rem 1.6rem 1.4rem; transform:rotate(-1.4deg);
  box-shadow:10px 12px 0 rgba(23,19,16,.14);
}
.schild::before{
  content:""; position:absolute; top:.85rem; left:50%; transform:translateX(-50%);
  width:56px; height:15px; border:2px solid var(--tinte); border-radius:9px; background:var(--papier);
}
.schild img{ display:block; width:100%; max-width:420px; margin:1.2rem auto .4rem; }
.schild .preis{ display:flex; align-items:baseline; justify-content:center; gap:.35rem; }
.schild .preis .gross{ font-size:clamp(3.6rem,11vw,5.6rem); line-height:.85; }
.schild .preis .euro{ font-size:1.9rem; }
.schild .bez{ text-align:center; font-weight:700; font-size:1.02rem; margin:.5rem 0 0; }
.schild .klein{ text-align:center; font-size:.82rem; color:var(--grau); margin:.15rem 0 .9rem; }
.reiss{
  border-top:2px dashed var(--linie); padding-top:.7rem; display:flex;
  justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  font-family:PlexMono, ui-monospace, monospace; font-size:.72rem; color:var(--grau);
}
@media(max-width:860px){ .schild{ transform:none; box-shadow:6px 8px 0 rgba(23,19,16,.14); } }

/* Laufband unter dem Aufmacher. */
.band{ background:var(--tinte); color:var(--papier); padding:.8rem 1.4rem; }
.band ul{
  display:flex; gap:2.4rem; margin:0 auto; padding:0; list-style:none;
  justify-content:center; flex-wrap:wrap; max-width:1160px;
  font-family:PlexMono, ui-monospace, monospace; font-size:.78rem;
  letter-spacing:.06em; text-transform:uppercase;
}
.band li::before{ content:"— "; color:#FF7A5E; }

/* Abschnittsköpfe mit dicker Linie. */
.abschnitt-kopf{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:.6rem 1.4rem;
  border-bottom:3px solid var(--tinte); padding-bottom:.7rem; margin:0 0 2rem;
}
.abschnitt-kopf h2{ margin:0; }
.abschnitt-kopf p{ margin:0; color:var(--grau); font-size:.92rem; }
.abschnitt-kopf .mehr{
  margin-left:auto; font-weight:700; font-size:.92rem; color:var(--signal);
  min-height:48px; display:inline-flex; align-items:center; text-decoration:none;
}
.abschnitt-kopf .mehr:hover{ text-decoration:underline; }
@media(max-width:760px){ .abschnitt-kopf .mehr{ margin-left:0; flex-basis:100%; } }

/* Gegenüberstellung „kann / kann nicht". Steht auf der Startseite auf der
   schwarzen Tafel und auf der Produktseite auf Papier — die Farben gehören
   deshalb an den jeweiligen Grund, nicht an .gegen selbst. */
.gegen{ display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); }
.gegen > div{ border-top:2px solid var(--linie); padding-top:.9rem; min-width:0; }
.gegen h3{ font-size:1.06rem; margin:0 0 .4rem; color:var(--tinte); }
.gegen p{ margin:0; font-size:.92rem; color:var(--grau); }
.gegen .ja h3::before{ content:"+ "; color:#1E7A22; }
.gegen .nein h3::before{ content:"– "; color:var(--signal); }

/* Schwarze Tafel: „was diese Räder nicht können". */
.ehrlich{ background:var(--tinte); color:#EDE7DA; padding:3.2rem 1.4rem; }
.ehrlich > *{ max-width:1160px; margin-inline:auto; }
.ehrlich h2{ color:#fff; margin:0 0 .6rem; }
.ehrlich h2 .aus{ color:#FF7A5E; }
.ehrlich .ein{ max-width:60ch; color:#D8D2C7; margin:0 0 2rem; }
.ehrlich .gegen > div{ border-top-color:#4A423A; }
.ehrlich .gegen h3{ color:#fff; }
.ehrlich .gegen p{ color:#CFC8BC; }
.ehrlich .gegen .ja h3::before{ color:#8FD48A; }
.ehrlich .gegen .nein h3::before{ color:#FF7A5E; }

/* Beratungskacheln. */
.kanaele{ display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); }
.kanal{ background:var(--karte); border:2px solid var(--tinte); padding:1.4rem; min-width:0;
        display:flex; flex-direction:column; }
.kanal .nr{ font-family:PlexEng,sans-serif; font-weight:700; font-size:1.5rem; display:block; margin:.2rem 0 .5rem; }
.kanal h3{ margin:0; }
.kanal p{ font-size:.92rem; color:var(--grau); margin:.4rem 0 1rem; }
.kanal .ziel{ width:100%; margin-top:auto; }
.hinweis-ki{ font-family:PlexMono, ui-monospace, monospace; font-size:.72rem; color:var(--grau); margin:.7rem 0 0; }

/* Werkstattkasten. */
.werkstatt{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:2rem;
  align-items:center; background:var(--karte); border:2px solid var(--tinte); padding:1.8rem;
}
.werkstatt h2{ margin:0 0 .8rem; }
.werkstatt p{ margin:0 0 1rem; }
.werkstatt ul{ margin:0; padding-left:1.1rem; font-size:.94rem; color:var(--grau); }
.adresse{
  font-family:PlexMono, ui-monospace, monospace; font-size:.84rem; line-height:1.7;
  border-left:3px solid var(--signal); padding-left:.9rem; margin:0;
}
@media(max-width:820px){ .werkstatt{ grid-template-columns:1fr; } }

/* ---------------------------------------------------- WooCommerce: Listen */

/* Woo rechnet mit festen Prozentbreiten und Floats; das bricht bei großer
   Schrift auf. Raster statt Float. */
.woocommerce ul.products{
  display:grid !important; gap:1.4rem; margin:0; padding:0; list-style:none;
  /* 300 px Mindestbreite ergibt bei 1160 px Inhaltsbreite drei Spalten. Bei
     280 px wären es vier — und drei Räder stünden verloren in einer Viererreihe. */
  grid-template-columns:repeat(auto-fill, minmax(min(300px,100%), 1fr));
}
.woocommerce ul.products::before, .woocommerce ul.products::after{ content:none !important; }
.woocommerce ul.products li.product{
  width:auto !important; float:none !important; margin:0 !important; min-width:0;
  background:var(--karte); border:2px solid var(--tinte); padding:1.2rem 1.2rem 1.3rem;
  display:flex; flex-direction:column; position:relative;
  transition:transform 140ms ease, box-shadow 140ms ease;
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-4px); box-shadow:8px 10px 0 rgba(23,19,16,.14);
}
/* WooCommerce packt Bild, Titel, unsere Merkmale, Bestand und Preis in EINEN
   Verweis; nur er, die Rubrik und der Kaufknopf sind Flex-Kinder der Kachel.
   Ohne diese Regel läuft das margin-bottom:auto der Merkmalliste ins Leere,
   weil ihr Elternteil kein Flex-Behälter ist — die Preise dreier Kacheln
   stehen dann auf drei Höhen. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
  display:flex; flex-direction:column; flex:1 1 auto; text-decoration:none; color:inherit;
}
.woocommerce ul.products li.product a img{
  /* Die Studiofotos sind unterschiedlich hoch beschnitten — ohne festes
     Seitenverhältnis starten die Kacheln auf drei verschiedenen Höhen. */
  aspect-ratio:4/3; object-fit:contain; width:100%; margin:.5rem 0 .8rem;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:Archivo, system-ui, sans-serif; font-weight:800; font-size:1.32rem;
  letter-spacing:-.025em; line-height:1.15; padding:0; margin:0 0 .5rem;
}
.woocommerce ul.products li.product .price{
  font-family:PlexEng, system-ui, sans-serif; font-weight:700; font-size:2.5rem;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--tinte);
  line-height:1; margin:0 0 .2rem; display:block;
}
.woocommerce ul.products li.product .price del{ font-size:1rem; color:var(--grau); }
.woocommerce ul.products li.product .price ins{ text-decoration:none; }
.woocommerce ul.products li.product .preis-zusatz{
  font-size:.72rem; color:var(--grau); margin:0 0 .9rem;
}
.woocommerce ul.products li.product .button{ align-self:flex-start; }
/* Eigener Sale-Hinweis statt Woo-Kreis. */
.woocommerce span.onsale{ display:none !important; }

/* margin-bottom:auto schiebt alles darunter (Bestand, Preis, Knopf) auf eine
   gemeinsame Grundlinie. Ohne das stehen die Preise dreier Kacheln auf drei
   Höhen, sobald ein Rad ein Merkmal weniger gepflegt hat.
   Die lange Auswahl ist nötig: WooCommerce setzt für Listen in der Kachel eine
   eigene margin-bottom, die eine kurze Regel überschreibt. */
.kachel-fakten,
.woocommerce ul.products li.product ul.kachel-fakten{
  list-style:none; margin:0 0 auto; padding:0 0 1rem; font-size:.9rem;
}
.kachel-fakten li{ display:flex; gap:.6rem; padding:.3rem 0; border-bottom:1px dotted var(--linie); }
.kachel-fakten b{ font-weight:500; color:var(--grau); min-width:8.5rem; }
.lager{ font-family:PlexMono, ui-monospace, monospace; font-size:.74rem; color:var(--gruen); margin:0 0 .6rem; }
.lager.knapp{ color:var(--signal); font-weight:600; }
.kein-mtb{
  position:absolute; top:-2px; right:-2px; background:var(--tinte); color:var(--papier);
  font-family:PlexMono, ui-monospace, monospace; font-size:.66rem; letter-spacing:.08em;
  text-transform:uppercase; padding:.3rem .6rem;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{ font-size:.88rem; color:var(--grau); }
.woocommerce .woocommerce-ordering select{
  min-height:48px; border:2px solid var(--tinte); background:var(--karte); border-radius:0;
  padding:.4rem .7rem; font-family:Plex, system-ui, sans-serif; font-size:.94rem; max-width:100%;
}
.woocommerce nav.woocommerce-pagination ul{ border:none; }
.woocommerce nav.woocommerce-pagination ul li{ border:none; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  min-width:48px; min-height:48px; display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--tinte); margin-right:.4rem; background:var(--karte);
}
.woocommerce nav.woocommerce-pagination ul li span.current{ background:var(--tinte); color:var(--papier); }

/* --------------------------------------------------- WooCommerce: Produkt */

.woocommerce div.product{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
                          gap:2.4rem; align-items:start; }
.woocommerce div.product .woocommerce-product-gallery{ float:none !important; width:auto !important;
                                                       background:var(--karte); border:2px solid var(--tinte);
                                                       padding:1.2rem; }
.woocommerce div.product .summary{ float:none !important; width:auto !important; margin:0 !important; }
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .pdp-abschnitt,
.woocommerce div.product .up-sells{ grid-column:1 / -1; }
@media(max-width:900px){ .woocommerce div.product{ grid-template-columns:1fr; } }

.woocommerce div.product .product_title{
  font-family:Archivo, system-ui, sans-serif; font-weight:800;
  font-size:clamp(1.8rem,4vw,2.8rem); letter-spacing:-.03em; line-height:1.05; margin:0 0 .4rem;
}
.woocommerce div.product p.price{
  font-family:PlexEng, system-ui, sans-serif; font-weight:700;
  font-size:clamp(3rem,8vw,4.4rem); line-height:.9; color:var(--tinte);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; margin:.6rem 0 .2rem;
}
.woocommerce div.product .preis-zusatz{ font-size:.84rem; color:var(--grau); margin:0 0 1.2rem; }
.woocommerce div.product form.cart{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center;
                                    margin:1.2rem 0 1rem; }
.woocommerce div.product form.cart .quantity{ display:flex; }
.woocommerce .quantity input.qty{
  width:5rem; min-height:48px; text-align:center; border:2px solid var(--tinte);
  background:var(--karte); font-family:PlexEng, sans-serif; font-weight:700; font-size:1.1rem;
}
.woocommerce div.product form.cart .button{ flex:0 0 auto; }
.pdp-hinweis-ki{ font-family:PlexMono, ui-monospace, monospace; font-size:.74rem; color:var(--grau); }

/* Galerie ohne Schieber wäre eine sehr breite Reihe im Dokument. Wir setzen die
   Woo-Supports (functions.php) UND begrenzen die Bildbreite gegen Inline-Styles. */
.woocommerce div.product .woocommerce-product-gallery__image img{ width:100% !important; }
/* Der Lupenknopf von WooCommerce ist 36 px groß — zu klein zum Treffen. */
.woocommerce div.product .woocommerce-product-gallery__trigger{
  min-width:48px; min-height:48px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--karte); border:2px solid var(--tinte); border-radius:0; text-decoration:none;
}
.woocommerce div.product .flex-control-thumbs{ display:flex; flex-wrap:wrap; gap:.5rem;
                                               margin:.8rem 0 0; padding:0; list-style:none; }
.woocommerce div.product .flex-control-thumbs li{ width:auto !important; float:none !important;
                                                  margin:0 !important; flex:0 0 22%; }
/* Die Vorschaubilder sind unterschiedlich hoch beschnitten — ohne festes
   Seitenverhältnis steht die Reihe treppenförmig. */
.woocommerce div.product .flex-control-thumbs img{ aspect-ratio:4/3; object-fit:contain;
                                                   width:100%; background:#fff; }

.pdp-abschnitt{ margin:2.4rem 0 0; }
.pdp-abschnitt h2{ border-bottom:3px solid var(--tinte); padding-bottom:.5rem; margin:0 0 1rem; }
table.datenblatt{ width:100%; border-collapse:collapse; }
table.datenblatt th, table.datenblatt td{
  text-align:left; padding:.55rem .2rem; border-bottom:1px dotted var(--linie); vertical-align:top;
}
table.datenblatt th{ font-weight:500; color:var(--grau); width:40%; }
table.datenblatt td.wert{ font-family:PlexMono, ui-monospace, monospace; font-size:.92rem; }

/* ---------------------------------------------- WooCommerce: Korb & Kasse */

.woocommerce table.shop_table{ border:2px solid var(--tinte); border-radius:0; background:var(--karte); }
.woocommerce table.shop_table th{
  font-family:PlexMono, ui-monospace, monospace; font-size:.74rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--grau); border-bottom:2px solid var(--tinte);
}
.woocommerce table.shop_table td{ border-top:1px dotted var(--linie); }
.woocommerce table.shop_table .product-price,
.woocommerce table.shop_table .product-subtotal,
.woocommerce table.shop_table .order-total{ font-family:PlexEng, sans-serif; font-weight:700;
                                            font-variant-numeric:tabular-nums; }
.woocommerce .cart_totals h2, .woocommerce-checkout h3{ font-size:1.2rem; }
.woocommerce .cart-collaterals .cart_totals{ background:var(--karte); border:2px solid var(--tinte);
                                             padding:1.2rem; }
.woocommerce-checkout #customer_details .form-row{ margin-bottom:1rem; }
.woocommerce form .form-row label{ font-weight:500; font-size:.9rem; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
  min-height:48px; border:2px solid var(--tinte); background:var(--karte); border-radius:0;
  padding:.5rem .7rem; font-family:Plex, system-ui, sans-serif; font-size:1rem; width:100%;
  /* Ohne max-width sprengt eine Zeile mit 100 % Breite plus Innenabstand das Telefon. */
  max-width:100%;
}
.woocommerce #order_review{ background:var(--karte); border:2px solid var(--tinte); padding:1.2rem; }

/* Die Blockmeldung von WooCommerce kommt in Hellblau mit runden Ecken — das
   ist ein anderer Auftritt als der Rest der Seite. */
.wc-block-components-notice-banner{
  background:var(--karte) !important; border:none !important;
  border-left:4px solid var(--signal) !important; border-radius:0 !important;
  color:var(--tinte) !important;
}
.wc-block-components-notice-banner.is-success{ border-left-color:var(--gruen) !important; }
.wc-block-components-notice-banner > svg{ fill:var(--tinte); }

.woocommerce-message, .woocommerce-info, .woocommerce-error{
  border-top:none; border-left:4px solid var(--signal); background:var(--karte);
  padding:1rem 1.2rem; margin:0 0 1.6rem; list-style:none;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before{ content:none; }
.woocommerce-message{ border-left-color:var(--gruen); }

/* --------------------------------------------------------------- Inhalte */

.beitrag-liste{ display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); }
.beitrag-liste > *{ min-width:0; }

.entry-content > * + *{ margin-top:1.1rem; }
.entry-content h2{ margin-top:2.2rem; }
.entry-content ul, .entry-content ol{ padding-left:1.3rem; }
/* Verweise im Fließtext rot — aber nicht die Knöpfe. Ohne den Ausschluss
   gewinnt „.entry-content a" gegen die Knopfregel und färbt die Schrift auf
   dem roten Knopf ebenfalls rot (1,0:1, unlesbar). */
.entry-content a:not(.wp-element-button):not(.button):not(.ziel){
  color:var(--signal); text-underline-offset:3px;
}

/* ------------------------------------------------------ Beratungsfenster */

.berater{ position:fixed; right:1rem; bottom:1rem; z-index:200; display:flex;
          flex-direction:column; align-items:flex-end; gap:.6rem; max-width:calc(100vw - 2rem); }
.berater-knopf{
  min-height:48px; padding:0 1.3rem; border:2px solid var(--tinte); background:var(--signal);
  color:#fff; font-family:Plex, system-ui, sans-serif; font-weight:700; font-size:1rem;
  cursor:pointer; box-shadow:5px 6px 0 rgba(23,19,16,.2);
}
.berater-knopf:hover{ background:var(--signal-dunkel); }

.berater-fenster{
  width:min(380px, calc(100vw - 2rem)); max-height:min(560px, calc(100vh - 8rem));
  display:flex; flex-direction:column; background:var(--karte);
  border:2px solid var(--tinte); box-shadow:8px 10px 0 rgba(23,19,16,.2);
}
/* Ohne diese Zeile stand das Fenster auf jeder Seite dauerhaft offen: „display:flex"
   auf der Klasse schlägt das „display:none" des hidden-Attributs aus dem Browser. */
.berater-fenster[hidden]{ display:none; }
.berater-kopf{ position:relative; padding:.9rem 1rem .8rem; border-bottom:2px solid var(--tinte); }
.berater-kopf strong{ font-family:Archivo, sans-serif; font-weight:800; font-size:1.05rem; }
.berater-hinweis{
  margin:.25rem 0 0; font-family:PlexMono, ui-monospace, monospace; font-size:.72rem;
  line-height:1.5; color:var(--grau); max-width:26ch;
}
.berater-schliessen{
  position:absolute; top:.4rem; right:.4rem; min-width:48px; min-height:48px;
  background:transparent; border:none; cursor:pointer; font-size:.8rem;
  font-family:PlexMono, ui-monospace, monospace; color:var(--grau); text-decoration:underline;
}
.berater-verlauf{ flex:1 1 auto; overflow-y:auto; padding:.9rem 1rem; display:flex;
                  flex-direction:column; gap:.8rem; }
.berater-zeile p{ margin:0; font-size:.92rem; line-height:1.55; }
.berater-bot p{ background:var(--papier); border-left:3px solid var(--signal); padding:.6rem .8rem; }
.berater-ich{ align-self:flex-end; max-width:85%; }
.berater-ich p{ background:var(--tinte); color:var(--papier); padding:.6rem .8rem; }
.berater-verweis{
  display:inline-flex; align-items:center; min-height:44px; margin-top:.3rem;
  font-size:.86rem; font-weight:700; color:var(--signal);
}
.berater-verweis-wa{ color:var(--wa); }
.berater-formular{ display:flex; gap:.5rem; padding:.8rem 1rem; border-top:1px solid var(--linie); }
.berater-feld{
  flex:1 1 auto; min-width:0; min-height:48px; padding:.5rem .7rem;
  border:2px solid var(--tinte); background:#fff; border-radius:0;
  font-family:Plex, system-ui, sans-serif; font-size:1rem;
}
.berater-senden{
  min-height:48px; padding:0 1rem; border:none; background:var(--tinte); color:var(--papier);
  font-family:Plex, system-ui, sans-serif; font-weight:700; cursor:pointer;
}
.berater-senden[disabled]{ opacity:.6; cursor:progress; }
.berater-fuss{ padding:0 1rem .9rem; }
.berater-wa{
  display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:48px;
  background:var(--wa); color:#fff; font-weight:700; font-size:.92rem; text-decoration:none;
}
.berater-wa:hover{ background:var(--wa-dunkel); color:#fff; }
@media(max-width:480px){ .berater{ right:.6rem; bottom:.6rem; } }

/* ----------------------------------------------------------------- Fuß */

.site-fuss{ border-top:3px solid var(--tinte); font-size:.9rem; color:var(--grau); }
.site-fuss h4{ font-family:Archivo, sans-serif; font-weight:800; font-size:.88rem;
               letter-spacing:.04em; text-transform:uppercase; color:var(--tinte); margin:0 0 .6rem; }
.site-fuss a{ text-decoration:none; }
.site-fuss a:hover{ text-decoration:underline; }
.site-fuss .recht{ margin-top:1.8rem; padding-top:1rem; border-top:1px solid var(--linie); font-size:.82rem; }

/* ------------------------------------------- Werkzeuge (Rechner, Finder) */

.werkzeug{
  background:var(--karte); border:2px solid var(--tinte);
  box-shadow:6px 7px 0 rgba(23,19,16,.14); padding:1.4rem; margin:1.6rem 0;
}
.werkzeug-form{ display:flex; flex-direction:column; gap:1.1rem; align-items:flex-start; }
.feldgruppe{ border:none; margin:0; padding:0; width:100%; max-width:34rem; }
.feldgruppe legend, .feldgruppe > label:first-child{
  display:block; font-family:Archivo, sans-serif; font-weight:800; font-size:1.02rem;
  margin:0 0 .5rem; padding:0;
}
.feldgruppe .optional{ font-family:PlexMono, ui-monospace, monospace; font-weight:500;
                       font-size:.72rem; color:var(--grau); }
.feldgruppe input[type="number"]{
  display:block; width:100%; max-width:14rem; min-height:48px; padding:.5rem .7rem;
  border:2px solid var(--tinte); background:#fff; border-radius:0;
  font-family:PlexEng, system-ui, sans-serif; font-size:1.1rem;
}
.feldgruppe label:has(input[type="radio"]){
  display:flex; align-items:center; gap:.7rem; min-height:48px; padding:.2rem 0;
  font-size:.96rem; cursor:pointer;
}
.feldgruppe input[type="radio"]{ width:1.35em; height:1.35em; accent-color:var(--signal);
                                 flex:0 0 auto; margin:0; }
.werkzeug-hinweis{ margin:1rem 0 0; font-size:.88rem; color:var(--grau); max-width:60ch; }
.werkzeug-klein{ font-size:.82rem; color:var(--grau); }
.werkzeug-ergebnis{ margin-top:1.4rem; border-top:2px solid var(--tinte); padding-top:1.1rem; }
.werkzeug-ergebnis[hidden]{ display:none; }
.werkzeug-ergebnis h3{ margin:0 0 .6rem; }
.rr-liste{ list-style:none; margin:1rem 0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.rr-liste li{ padding:.6rem .8rem; border-left:4px solid var(--linie); background:var(--papier); }
.rr-liste li.rr-gut{ border-left-color:var(--gruen); }
.rr-liste li.rr-knapp{ border-left-color:#B07A00; }
.rr-liste li.rr-nein{ border-left-color:var(--grau); opacity:.85; }

.rf-karte{ display:flex; gap:1.1rem; align-items:flex-start; flex-wrap:wrap;
           background:var(--papier); border:1px solid var(--linie); padding:1rem; margin-top:1rem;
           position:relative; }
/* Der Kachel-Merker ist absolut positioniert — in der Finder-Karte soll er
   im Textfluss stehen, sonst landet er am Seitenrand statt am Rad. */
.rf-karte .kein-mtb{ position:static; display:inline-block; margin:0 0 .4rem; }
.rf-karte[hidden]{ display:none; }
.rf-karte img{ width:200px; max-width:100%; aspect-ratio:4/3; object-fit:contain; background:#fff; }
.rf-karte-text h3{ margin:0 0 .3rem; }
.rf-karte-text .ziel{ margin-top:.6rem; }
.rf-preis{ margin:.4rem 0; }
.rf-preis .amount{ font-family:PlexEng, system-ui, sans-serif; font-weight:700; font-size:1.3rem; }

/* --------------------------------------------------- Video (Zwei-Klick) */

.video-halter{
  background:var(--tinte); color:var(--papier); padding:1.4rem; margin:1.2rem 0;
  display:flex; flex-direction:column; gap:.5rem; align-items:flex-start;
}
.video-halter .video-titel{ margin:0; font-family:Archivo, sans-serif; font-weight:800; font-size:1.1rem; }
.video-halter .werkzeug-klein{ color:var(--linie); max-width:52ch; }
.video-halter.video-aktiv{ padding:0; background:#000; }
.video-halter.video-aktiv iframe{ width:100%; aspect-ratio:16/9; border:0; display:block; }

/* ------------------------------------------------------- Ratgeberliste */

.ratgeber-liste{ list-style:none; margin:1.2rem 0; padding:0;
                 display:flex; flex-direction:column; gap:.9rem; }
.ratgeber-liste li{ background:var(--karte); border-left:4px solid var(--signal);
                    padding:.9rem 1.1rem; }
.ratgeber-liste a{ display:block; font-family:Archivo, sans-serif; font-weight:800;
                   font-size:1.08rem; line-height:1.25; text-decoration:none;
                   color:var(--tinte); min-height:auto; padding:.2rem 0; }
.ratgeber-liste a:hover{ color:var(--signal); text-decoration:underline; }
.ratgeber-liste span{ display:block; margin-top:.3rem; font-size:.92rem; color:var(--grau); }

/* Das Widerrufsformular soll aussehen wie ein Formular, das man ausfüllt. */
.widerruf-formular{ background:var(--karte); border:1px dashed var(--tinte);
                    padding:1.2rem; margin:1.2rem 0; font-size:.95rem; }
.widerruf-formular p{ margin:.6rem 0; }

/* ------------------------------------------------------------------ FAQ */

details.faq{ border:1px solid var(--linie); background:var(--karte); margin:0 0 .6rem; }
details.faq summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:.7rem;
  min-height:48px; padding:.6rem 1rem; font-family:Archivo, sans-serif; font-weight:800;
}
details.faq summary::before{ content:"+"; font-family:PlexMono, ui-monospace, monospace;
                             font-weight:500; color:var(--signal); flex:0 0 auto; }
details.faq[open] summary::before{ content:"–"; }
details.faq summary::-webkit-details-marker{ display:none; }
details.faq .faq-antwort{ padding:0 1rem 1rem; }
details.faq .faq-antwort p{ margin:.3rem 0; }