/* =====================================================================
   kraft24.at – Stylesheet
   Farben, Schriften und Größen wie auf www.kraft-co.at.
   Aufbau: 1 Grundlagen · 2 Kopf und Fuß · 3 Übersicht · 4 Produktseite
           5 Warenkorb und Formulare · 6 Kontaktseite · 7 kleine Bildschirme
   Stand 19.09.2026 – einmal aufgeräumt. Regeln bitte im passenden
   Abschnitt ändern, nicht unten anhängen.
   ===================================================================== */

/* ============ 1 Grundlagen ============ */
:root {
  --blau: #4898d8;          /* Kraft-Logo-Blau, Akzente */
  --blau-knopf: #2f79b8;    /* Flächen mit weißer Schrift */
  --blau-tief: #2e6fae;     /* Links und Hover */
  --navy: #16324a;
  --ink: #101418;           /* fast Schwarz: Überschriften, Knöpfe */
  --text: #1a222b;
  --text-muted: #5b6672;
  --linie: #e3e7ea;
  --bg: #f9fafb;            /* sehr helles Grau als Seitenhintergrund */
  --warn-bg: #fff4d6;       /* nur für den Entwurfs-Balken */
  --warn: #7a5200;
  --radius: 10px;
  --rand: clamp(16px, 3vw, 40px);
  --max: 1400px;            /* gemeinsame Breite von Leiste, Inhalt und Fuß */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Inter", "Segoe UI", system-ui, sans-serif; color: var(--text); background: var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blau-tief); }
h1, h2, h3 { font-family: "Archivo", "Inter", sans-serif; font-weight: 700; line-height: 1.15; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
button, input, textarea, select { font: inherit; color: inherit; }
table { width: 100%; border-collapse: collapse; }
input[type=number] { width: 64px; padding: 7px 8px; border: 1px solid var(--linie); border-radius: 8px; }

.inhalt { padding: clamp(20px, 3vw, 40px) var(--rand) 80px; max-width: var(--max); margin: 0 auto; min-height: 60vh; }
.leer { padding: 40px 0; color: var(--text-muted); }
.klein { font-size: .82rem; color: var(--text-muted); }
.marke { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blau-tief); }
.hinweis { font-size: .8rem; color: var(--text-muted); }
.art { display: block; font-size: .76rem; color: var(--text-muted); }
/* In der Optionsliste steht die Artikelnummer hinter der Bezeichnung */
.wahl-name .art { display: inline; margin-left: 8px; white-space: nowrap; }
.wahl-name .art::before { content: "· "; }
/* i-Symbol: zeigt die genaue Bezeichnung und die Erklärung */
.info-knopf { display: inline-flex; align-items: center; justify-content: center; vertical-align: -3px; margin-left: 7px;
  width: 20px; height: 20px; padding: 0; border: 0; background: none; color: var(--text-muted); cursor: pointer; }
.info-knopf .sym { width: 15px; height: 15px; }
.info-knopf:hover, .info-knopf.an { color: var(--blau-tief); }
.info-box { display: block; margin-top: 5px; padding: 8px 10px; background: #f2f5f8; border-radius: 8px;
  font-size: .85rem; line-height: 1.45; color: var(--text); }
.info-box[hidden] { display: none; }
/* nur für Google und Vorleseprogramme, für das Auge unsichtbar */
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* gelber Balken und gelbe Kästen: nur im Entwurf (SHOP.entwurf = true) */
/* (Der Schalter "Preise verbergen" war am 21.09.2026 entfallen und ist am
   23.09.2026 zurückgekommen – als Link in der grünen Kraft-Leiste, siehe
   .wie-link. Über die Adresse geht es weiterhin: ?preise=an / ?preise=aus.) */
/* Bearbeiten in der Vorschau: feste Leiste unten, Preisfelder an Ort und Stelle */
body.mit-bearbeiten { padding-bottom: 96px; }
.bearbeiten { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #16324a; color: #fff; box-shadow: 0 -6px 20px rgba(16,20,24,.18); }
.bearbeiten-innen { max-width: var(--max); margin: 0 auto; padding: 10px var(--rand); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: .9rem; }
.b-aktiv { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; min-width: 128px; }
.b-aktiv input { position: absolute; opacity: 0; pointer-events: none; }
.b-schalter { width: 42px; height: 24px; border-radius: 99px; background: #7d8b98; position: relative; transition: background .15s; flex: none; }
.b-schalter::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.b-aktiv.an .b-schalter { background: #2fa866; } .b-aktiv.an .b-schalter::after { transform: translateX(18px); }
.b-aktiv input:focus-visible + .b-schalter { outline: 2px solid #fff; outline-offset: 2px; }
.b-stufen { display: inline-flex; align-items: center; gap: 0; }
.b-titel { margin-right: 8px; opacity: .8; }
.b-stufe { padding: 6px 12px; border: 1px solid rgba(255,255,255,.45); cursor: pointer; margin-left: -1px; white-space: nowrap; }
.b-stufe:first-of-type { border-radius: 8px 0 0 8px; } .b-stufe:last-of-type { border-radius: 0 8px 8px 0; }
.b-stufe input { position: absolute; opacity: 0; pointer-events: none; }
.b-stufe.an { background: #fff; color: #16324a; font-weight: 700; }
.b-knopf { padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.45); background: transparent; color: #fff; cursor: pointer; }
.b-knopf.an { background: #ffd66b; color: #16324a; border-color: #ffd66b; font-weight: 700; }
/* Häkchen "Auswahl als Vorauswahl" – wird beim ersten Klick im Konfigurator von selbst gesetzt */
.b-vorwahl { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.45); cursor: pointer; white-space: nowrap; }
.b-vorwahl.an { background: #ffd66b; color: #16324a; border-color: #ffd66b; font-weight: 700; }
.b-vorwahl input { margin: 0; }
.b-ende { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
.b-status { font-size: .85rem; opacity: .9; text-align: right; } .b-status.gut { color: #9be7bb; opacity: 1; font-weight: 600; } .b-status.fehler { color: #ffb4a8; opacity: 1; font-weight: 600; }
.bearbeiten .knopf { background: #fff; color: #16324a; border-color: #fff; } .bearbeiten .knopf:disabled { opacity: .4; cursor: default; }
.preis-bearbeiten { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-weight: 600; color: var(--text-muted); }
/* Ausstattungstabelle: was in welcher Ausführung steckt (Serie 6Y) */
.ausstattung { width: 100%; border-collapse: collapse; font-size: .88rem; background: #fff;
  border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.ausstattung th, .ausstattung td { padding: 7px 10px; border-bottom: 1px solid var(--linie); text-align: left; }
.ausstattung thead th { background: #f2f5f8; font-weight: 600; vertical-align: bottom; }
.ausstattung .a-spalte { text-align: center; width: 68px; }
.ausstattung .a-kurz { display: block; font-weight: 700; }
.ausstattung .a-lang { display: block; font-size: .68rem; font-weight: 400; color: var(--text-muted); white-space: nowrap; }
.ausstattung tbody td.a-was { line-height: 1.35; }
.ausstattung .a-gruppe th { background: #eef3f8; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--blau-tief); padding-top: 9px; padding-bottom: 9px; }
.ausstattung td.a-spalte { color: var(--blau); font-size: 1.05rem; line-height: 1; }
.ausstattung td.a-spalte.ja { color: #1b7a43; }
.ausstattung .a-leer { color: #c8d2dc; }
.ausstattung tr:last-child td { border-bottom: 0; }
.ausstattung .a-was { width: auto; }
@media (max-width: 620px) {
  .ausstattung { font-size: .82rem; }
  .ausstattung th, .ausstattung td { padding: 6px 7px; }
  .ausstattung .a-spalte { width: 56px; }
  .ausstattung .a-lang { display: none; }
}
/* Foto hinter dem i-Symbol und Zwischenüberschrift in einer Auswahlliste */
.info-bild { display: block; width: 100%; max-width: 300px; height: auto; margin-top: 8px; border-radius: 6px; background: #fff; }
.info-bildtext { display: block; margin-top: 4px; font-size: 12px; color: #5b6472; }
.wahl-ueberschrift { margin: 14px 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #1d3557; }
/* Achtung: ".wahl input" setzt Radioknöpfe auf 16 px – das Preisfeld braucht deshalb die genauere Regel */
.preis-eingabe, .wahl input.preis-eingabe, .artikel input.preis-eingabe { width: 104px; height: auto; margin-top: 0; padding: 5px 8px; border: 1px solid #c9a227; border-radius: 8px; text-align: right; font-variant-numeric: tabular-nums; background: #fffbea; color: var(--ink); font-weight: 600; }
.preis-bearbeiten.geaendert .preis-eingabe { border-color: var(--blau-knopf); background: #eef5fc; }
.preis-eingabe.falsch { border-color: #b3261e; background: #fdf1f0; }
.inaktiv-marke.aktiv { background: #1b7a43; }
.karte { position: relative; }

/* Vorschau (Backend-Ansicht): Leiste oben, nicht aktive Produkte ausgegraut */
.vorschau-leiste { background: #16324a; color: #fff; font-size: .82rem; text-align: center; padding: 6px var(--rand); line-height: 1.5; }
.vorschau-leiste a { color: #fff; font-weight: 600; }
.karte.inaktiv { position: relative; }
.karte.inaktiv .karte-bild, .karte.inaktiv .karte-text { opacity: .42; filter: grayscale(1); }
.karte.inaktiv:hover .karte-bild, .karte.inaktiv:hover .karte-text { opacity: .75; }
/* Zwei Marken nebeneinander: Status und Preisstufe (Ampel) */
.marken { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; gap: 4px; }
.stufen-marke { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; background: #fff; border: 1px solid currentColor; }
.stufen-marke.s-offen { color: #1b7a43; }
.stufen-marke.s-registrierung { color: #b45309; }
.stufen-marke.s-freigabe { background: #c02718; color: #fff; border-color: #c02718; }
.marken .inaktiv-marke { position: static; }
.inaktiv-marke { position: absolute; top: 10px; left: 10px; z-index: 2; background: #16324a; color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; }
.inaktiv-hinweis { background: #16324a; color: #fff; padding: 10px 14px; border-radius: var(--radius); margin-bottom: 14px; font-size: .92rem; }
.inaktiv-hinweis a { color: #fff; }
.entwurf { background: var(--warn-bg); color: var(--warn); font-size: .8rem; font-weight: 600; text-align: center; padding: 3px var(--rand); line-height: 1.5; }
/* Sehen nur Team-Konten: der Server hat die fertig gebauten Seiten verworfen
   (02.10.2026). Deutlicher als .entwurf, weil hier etwas zu tun ist. */
.rendern-weg { background: var(--warn); color: #fff; font-size: .82rem; text-align: center; padding: 7px var(--rand); line-height: 1.5; }
.rendern-weg strong { font-weight: 700; }
.pruefen { background: var(--warn-bg); color: var(--warn); font-size: .8rem; padding: 6px 10px; border-radius: 6px; margin: 6px 0; display: block; }

.knopf { background: var(--blau-knopf); color: #fff; border: 0; border-radius: 999px; padding: 12px 26px; font-weight: 600; cursor: pointer; }
.knopf:hover { background: var(--blau-tief); }
.klein-knopf { padding: 8px 14px; font-size: .82rem; background: var(--ink); }
.knopf.gross { padding: 15px 34px; font-size: 1.02rem; margin-top: 18px; }

/* ============ 2 Kopf und Fuß ============ */
/* Schmale Leiste über dem Menü – gleiche Hintergrundfarbe, nur ein Textverweis */
.topleiste { max-width: var(--max); margin: 0 auto; padding: 9px var(--rand) 0; display: flex; justify-content: flex-end; gap: 18px; font-size: .82rem; }
.topleiste a { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); text-decoration: none; }
.topleiste a:hover { color: var(--ink); text-decoration: underline; }
.topleiste .sym { width: 14px; height: 14px; }

/* Menüleiste: Logo · Produktgruppen · Symbole. Gleiche Breite wie der Inhalt,
   damit Logo und Hamburger bündig über den Produktkarten stehen. */
/* #kopf bleibt beim Scrollen stehen. Der Balken darüber (#oben) scrollt weg –
   deshalb liegen Entwurfs-Hinweis, Sperrleiste und Topleiste dort und nicht hier. */
#kopf { position: sticky; top: 0; z-index: 6; background: var(--bg); }
.kopf { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: clamp(14px, 2vw, 34px);
        max-width: var(--max); margin: 0 auto; padding: 7px var(--rand); background: var(--bg); }
.logo { display: flex; align-items: center; text-decoration: none; color: var(--ink); }
.logo img { height: 22px; width: auto; }
/* overflow: hidden ist der Sicherheitsgurt – stünde einmal eine
   Produktgruppe mehr in der Leiste, schöbe sie sich sonst über die
   Symbole rechts. */
.kopf .haupt { display: flex; align-items: center; gap: 22px; flex: 1; min-width: 0; margin-left: 12px; overflow: hidden; }
.kopf .haupt a { font-family: "Archivo", sans-serif; font-weight: 600; font-size: .88rem; color: var(--ink); text-decoration: none;
                 white-space: nowrap; padding: 4px 0; border-bottom: 2px solid transparent; }
.kopf .haupt a:hover { color: var(--blau-tief); }
.kopf .haupt a.an { border-bottom-color: var(--ink); }
/* Der -9px-Ausgleich hebt den Innenabstand des letzten Symbolknopfes auf */
.kopf .werkzeuge { display: flex; align-items: center; gap: 4px; margin-right: -9px; }
.kopf .symbol { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 34px;
                border: 0; background: none; border-radius: 999px; color: var(--ink); cursor: pointer; padding: 0; }
.kopf .symbol:hover { background: #eceff2; }
.sym { width: 24px; height: 24px; display: block; flex: none; }
#korb-zahl { position: absolute; top: 3px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
             background: var(--blau-knopf); color: #fff; font-size: .66rem; font-weight: 700; line-height: 17px; text-align: center; }
#korb-zahl[hidden] { display: none; }

/* Suchleiste – klappt über die Lupe auf */
.suchleiste { display: flex; gap: 10px; padding: 0 var(--rand) 14px; max-width: var(--max); margin: 0 auto; }
.suchleiste[hidden] { display: none; }
.suchleiste input { flex: 1; min-width: 0; border: 1px solid var(--linie); border-radius: 999px; padding: 11px 20px; background: #fff; }
.suchleiste .knopf { padding: 10px 22px; }

/* Hamburger-Menü, fährt von rechts herein */
#menue-schleier { position: fixed; inset: 0; background: rgba(16, 20, 24, .35); z-index: 20; }
.menue { position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); background: #fff; z-index: 21;
         padding: 64px 32px 32px; overflow-y: auto; box-shadow: -12px 0 40px rgba(12, 20, 29, .12); animation: menue-herein .2s ease-out; }
@keyframes menue-herein { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.menue[hidden], #menue-schleier[hidden] { display: none; }
.menue a { display: block; padding: 9px 0; color: var(--ink); text-decoration: none; font-family: "Archivo", sans-serif; font-weight: 600; font-size: 1.12rem; }
.menue a:hover { color: var(--blau-tief); }
.menue .marke { margin: 26px 0 6px; }
.menue .marke:first-of-type { margin-top: 0; }
.menue-zu { position: absolute; top: 14px; right: 20px; width: 42px; height: 42px; border: 0; background: none; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--ink); border-radius: 8px; }
.menue-zu:hover { background: #eceff2; }
.menue-tel { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--linie); font-size: .9rem; color: var(--text-muted); }
.menue-tel a { display: inline; font-family: inherit; font-size: inherit; font-weight: 600; padding: 0; }
body.menue-offen { overflow: hidden; }

/* Fuß in derselben hellen Farbe wie die Seite */
.fuss { background: var(--bg); color: var(--text-muted); border-top: 1px solid var(--linie); font-size: .88rem; }
.fuss a, .fuss b { color: var(--ink); }
.fuss-innen { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 32px var(--rand); max-width: var(--max); margin: 0 auto; line-height: 1.8; }
.fuss-logo { display: block; margin-bottom: 8px; }
.fuss-logo img { height: 26px; width: auto; }
.fuss-hinweis { border-top: 1px solid var(--linie); padding: 14px var(--rand); max-width: var(--max); margin: 0 auto; font-size: .8rem; color: var(--text-muted); }

/* Meldung „… liegt im Warenkorb" */
#meldung { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 80px); background: var(--ink); color: #fff;
           padding: 12px 20px; border-radius: 999px; font-size: .9rem; opacity: 0; transition: .25s; z-index: 10; max-width: 92vw; }
#meldung.sichtbar { transform: translate(-50%, 0); opacity: 1; }
#meldung a { color: #9fd0ff; margin-left: 8px; }

/* Preissperre: Hinweisleiste, gesperrte Preise, Kasten auf der Produktseite */
.sperrleiste { background: #eef5fc; color: var(--blau-tief); font-size: .84rem; text-align: center; padding: 8px var(--rand); }
.sperrleiste a { color: var(--ink); font-weight: 600; }
.gesperrt { display: inline-block; font-size: .8rem; font-weight: 600; color: var(--blau-tief); text-decoration: none; border-bottom: 1px dashed currentColor; white-space: nowrap; }
.gesperrt:hover { color: var(--ink); }
.gesperrt-klein { color: var(--text-muted); font-weight: 500; font-size: .82rem; }
.sperre { background: #eef5fc; border-radius: var(--radius); padding: 16px 18px; }
.sperre p { font-size: .92rem; margin-bottom: 10px; }
.sperre p:last-child { margin-bottom: 0; }
/* Dieselbe Anfrage steht auch oben beim Bild – dort knapper, damit die
   Konfiguration darunter nicht weggedrückt wird */
.sperre.oben { margin-bottom: 18px; }

/* ============ 3 Übersicht ============ */
/* Herobild: nur sichtbar, solange SHOP.hero gesetzt ist (derzeit aus) */
.hero-bild { border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; margin: calc(-1 * clamp(20px, 3vw, 40px)) 0 clamp(18px, 3vw, 32px); background: #fff; }
.hero-bild img { width: 100%; aspect-ratio: 2.7 / 1; object-fit: cover; }

.schlagzeile { max-width: 940px; margin: clamp(14px, 2.2vw, 30px) 0 clamp(18px, 2.4vw, 30px); }
.schlagzeile h1 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
.schlagzeile p { margin-top: 10px; color: var(--text-muted); font-size: clamp(.95rem, 1.3vw, 1.08rem); max-width: 760px; }

/* Filter: ein Trichter-Zeichen, das die Auswahl aufklappt.
   Die Leiste bleibt beim Scrollen unter der Menüleiste stehen (deren Höhe: 48 px). */
.werkzeugleiste { position: sticky; top: 48px; z-index: 4; background: var(--bg); padding: 6px 0 10px; margin-bottom: 4px; }
.werkzeugzeile { display: flex; align-items: center; gap: 12px; }
/* Eine Zeile: Filterzeichen, Ergebniszahl, die Filterfelder und rechts die Größenwahl */
.filterkopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--linie); }
.filterkopf > b { font-size: 1rem; }
.filterkopf .strich { width: 1px; height: 20px; background: var(--linie); }
.ergebnisse { font-size: .95rem; font-weight: 400; color: var(--text-muted); }
.ergebnisse b { color: var(--ink); font-weight: 700; }
/* Die Filterfelder: Pillen, unter denen die Liste aufklappt */
/* Die Filterfelder stehen immer im Fluss; geschlossen sind sie nur unsichtbar,
   damit beim Öffnen nichts verrutscht. */
.filterzeile { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; visibility: hidden; }
.filterzeile.offen { visibility: visible; }
.filter-feld { position: relative; }
/* Gleiche Ecken wie die Produktkästchen, flacher als zuvor */
.filter-pille { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 7px 14px; font: inherit; font-size: .9rem; font-weight: 500; color: var(--ink); cursor: pointer;
  transition: border-color .15s, background .15s; }
.filter-pille:hover { border-color: var(--ink); }
.filter-pille.offen { border-color: var(--ink); }
.filter-pille.aktiv { border-color: var(--blau-knopf); background: #f2f8fd; }
.filter-pille .sym { width: 16px; height: 16px; transition: transform .15s; }
.filter-pille.offen .sym { transform: rotate(180deg); }
.pille-wert { color: var(--text-muted); font-weight: 400; }
.pille-zahl, .filter-punkt { background: var(--blau-knopf); color: #fff; border-radius: 999px; font-size: .72rem; font-weight: 700; padding: 0 6px; }
.pille-zahl:empty, .filter-punkt:empty { display: none; }
.filter-klapp { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; min-width: 240px; max-height: 320px; overflow: auto;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: 0 14px 34px rgba(0, 0, 0, .14); padding: 10px 16px; }
.filter-klapp[hidden] { display: none; }
.filter-klapp label { display: flex; align-items: center; gap: 10px; font-size: .92rem; padding: 7px 0; cursor: pointer; white-space: nowrap; }
.filter-klapp input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--blau-tief); }
/* Nur Zeichen, kein Knopf: weder Rahmen noch Fläche */
.zeichen-knopf { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; border-radius: 0; padding: 4px 0;
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--ink); cursor: pointer; transition: color .15s, opacity .15s; }
.zeichen-knopf .sym { width: 18px; height: 18px; }
.zeichen-knopf:hover { opacity: .6; }
.zeichen-knopf.ikon { padding: 4px; color: #aab3bc; }
.zeichen-knopf.ikon.aktiv { color: var(--ink); }
.zeichen-knopf.ikon .sym { width: 20px; height: 20px; }
/* Bruttopreis neben dem Nettopreis – nötig für Google Shopping */
.summe-brutto td { font-size: .85rem; color: var(--text-muted); font-weight: 400; }
.filter-punkt[hidden] { display: none; }
/* Karte: Richtpreis-Zusatz – die Zeile darf nie umbrechen, sonst wächst das Kästchen */
.karte-preis { white-space: nowrap; overflow: hidden; }
.karte-zusatz { font-weight: 400; font-size: .8rem; color: var(--text-muted); }
/* Preise, die erst nach Prüfung der Muster verbindlich sind */
/* Hinweis unter dem Kaufbereich: Listenpreise, Nachlass auf Anfrage */
.listenpreis-kasten { margin-top: 18px; }

/* Kasten am Ende der Optionen: Es gibt mehr, als der Shop zeigt */
.mehr-kasten { margin-top: 26px; padding: 16px 18px; background: #eef5fc; border: 1px solid #cfe2f5; border-radius: var(--radius); }
.mehr-kasten h3 { font-size: 1.05rem; margin-bottom: 6px; }
.mehr-kasten p { font-size: .93rem; color: var(--text); }
.mehr-wege { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 12px; }
.mehr-tel { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; color: var(--ink); white-space: nowrap; }
.mehr-tel svg { width: 18px; height: 18px; }
.preis-hinweis { margin-top: 14px; border-left: 3px solid var(--blau-knopf); background: #fff; padding: 12px 14px; font-size: .95rem; }
.anfrage { border: 1px solid var(--linie); background: #fff; border-radius: var(--radius); padding: 16px 18px; margin-top: 4px; }
/* Derselbe Weg zur Anfrage auch ganz oben in der rechten Spalte */
.anfrage.oben { margin: 0 0 18px; }
/* Ablauf der Bestellung im Warenkorb */
.ablauf { background: #eef5fc; border-radius: var(--radius); padding: 16px 18px; }
.ablauf ol { margin: 10px 0 0; padding-left: 20px; }
.ablauf li { margin-bottom: 6px; font-size: .95rem; }
.ablauf .klein { margin-top: 10px; }
.anfrage p + p { margin-top: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.filter-reset { border: 0; background: none; color: var(--blau-tief); font-size: .85rem; font-weight: 700; cursor: pointer; padding: 0; }
.filter-reset[hidden] { display: none; }

/* Wahl: 4 oder 5 Produkte nebeneinander */
.ansicht { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ansicht .sym { width: 20px; height: 20px; }

.karten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.karten[data-spalten="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.karte { display: flex; flex-direction: column; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden;
         text-decoration: none; color: inherit; background: #fff; transition: box-shadow .15s, transform .15s; }
.karte:hover { box-shadow: 0 8px 20px rgba(12, 20, 29, .09); transform: translateY(-2px); }
.karte-bild { background: #fff; aspect-ratio: 4 / 3; min-height: 0; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; }   /* min-height 0 + flex none: das Kaestchen behaelt 4:3, egal wie hoch das Foto ist */
.karte-bild img { width: 100%; height: 100%; min-height: 0; object-fit: contain; padding: 14px; mix-blend-mode: multiply; }   /* min-height 0: sonst zwingt ein quadratisches Foto das Kästchen in die Höhe */
.kein-bild { width: 100%; height: 100%; min-height: 160px; display: flex; align-items: center; justify-content: center; color: #9aa5b0; font-size: .85rem;
             background: repeating-linear-gradient(45deg, #fff, #fff 12px, #f4f6f8 12px, #f4f6f8 24px); }
.karte-text { padding: 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.karte-text h2 { font-size: 1.12rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 2.5em; }
.karte-text p { font-size: .88rem; color: var(--text-muted); flex: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 2.9em; }
.karte-preis { font-weight: 700; margin-top: auto; padding-top: 8px; }

/* ============ 4 Produktseite ============ */
.pfad { font-size: .85rem; color: var(--text-muted); margin-bottom: 14px; }
.pfad a { color: inherit; }
.p-kopf { max-width: 860px; margin: 18px 0 0; }
.p-kopf .gattung { font-weight: 600; margin: 6px 0 10px; }
/* Zwei gleich breite Spalten. Links (A) Bild, Name und alle Erklärungen,
   rechts (B) der Preisblock – er beginnt ganz oben. */
.p-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(24px, 4vw, 56px); row-gap: 0;   /* zwischen Kurztext und Beschreibung kein Loch */
  align-items: start; grid-template-areas: "aoben b" "aunten b"; grid-template-rows: auto 1fr; }
.p-info.oben { grid-area: aoben; }
.p-info.unten { grid-area: aunten; }
.p-wahl { grid-area: b; }
.p-info.unten { padding-top: 0; }
/* Nichts klebt hier: Die linke Spalte scrollt ganz normal mit. (Vorher klebte erst
   die ganze Spalte, dann das Foto – beides hat beim Scrollen und beim Umschalten
   der Optionen gestört.) */
.p-info { min-width: 0; }
.p-info h3 { font-size: 1rem; margin: 18px 0 6px; }
.p-info p { font-size: .93rem; }
.p-bild { background: #fff; border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; }
.p-bild img { width: 100%; max-height: 420px; object-fit: contain; padding: 20px; mix-blend-mode: multiply; }
.p-bild .kein-bild { min-height: 260px; }
/* Weitere Fotos eines Produkts – Klick wechselt oben das große Bild */
.p-galerie { display: flex; gap: 8px; flex-wrap: wrap; margin: -12px 0 20px; }
.p-vorschau { width: 74px; height: 74px; padding: 5px; background: #fff; border: 1px solid var(--linie);
  border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.p-vorschau img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.p-vorschau:hover { border-color: var(--blau); }
.p-vorschau.an { border-color: var(--blau); box-shadow: 0 0 0 1px var(--blau); }
.technik { font-size: .88rem; }
.technik th, .technik td { text-align: left; padding: 7px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.technik th { font-weight: 600; width: 40%; padding-right: 12px; }
.downloads { list-style: none; font-size: .93rem; }
.downloads li { padding: 7px 0; border-bottom: 1px solid var(--linie); }
.downloads a::before { content: "↓ "; }
/* Mitlaufende Preisleiste: erscheint, sobald "Ihre Auswahl" aus dem Bild
   ist. Liegt unter der Bearbeitungsleiste der Vorschau (z-index 60) und
   rückt für das Team nach oben, damit sich beide nicht überdecken. */
.preis-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
                background: #fff; border-top: 1px solid var(--linie);
                box-shadow: 0 -4px 16px rgba(16, 20, 24, .10); }
.preis-leiste[hidden] { display: none; }
.pl-innen { max-width: var(--max); margin: 0 auto; padding: 9px var(--rand);
            display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.pl-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pl-text b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.pl-klein { font-size: .78rem; color: var(--text-muted); }
.preis-leiste .knopf { white-space: nowrap; }
/* Damit die Leiste den Fuß nicht verdeckt */
body.mit-preis-leiste { padding-bottom: 68px; }
/* Der Abstand zur Bearbeitungsleiste wird in shop.js gemessen und gesetzt –
   eine feste Zahl stimmt am Handy nicht, weil die Leiste dort umbricht. */
@media (max-width: 480px) {
  .pl-innen { padding: 8px 14px; gap: 10px; }
  .pl-text b { font-size: 1rem; }
  .preis-leiste .knopf { padding: 8px 13px; font-size: .88rem; }
}

/* Abschluss der Maschinenbeschreibung: zwei ruhige Flächen nebeneinander –
   links Beratung, rechts der Weg auf kraft-co.at (Michaels Fassung G2,
   22.09.2026). Ohne Gegenstück auf der Firmenseite steht die Beratung
   allein über die volle Breite. */
/* auto-fit statt fester Spalten: Das Feld steht in der schmalen
   Beschreibungsspalte, nicht über die ganze Seite. Unterschreitet eine
   Spalte 230 Pixel, rutschen die beiden Flächen von selbst untereinander –
   unabhängig davon, wie breit das Fenster gerade ist. */
.beratung-feld { margin-top: 20px; display: grid; gap: 12px;
                 grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.beratung-feld.allein { grid-template-columns: 1fr; }
.beratung-feld .karte { background: #f2f6fa; border-radius: var(--radius); padding: 14px 16px; }
.beratung-feld .feld-kopf { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--blau-tief); }
.beratung-feld .feld-kopf .sym { width: 19px; height: 19px; }
.beratung-feld .feld-kopf b { font-size: .95rem; color: var(--ink); }
.beratung-feld p { margin: 5px 0 10px; font-size: .88rem; color: var(--text-muted); line-height: 1.5; }
.beratung-feld a.z { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: .92rem;
                     color: var(--blau-tief); text-decoration: underline; text-underline-offset: 3px; }
.beratung-feld a.z .sym { width: 15px; height: 15px; }
.beratung-feld a.tel-z { display: block; margin-top: 8px; font-weight: 600; font-size: .9rem;
                         color: var(--ink); text-decoration: none; white-space: nowrap; }
.beratung-feld a.tel-z .sym { width: 16px; height: 16px; vertical-align: -3px; display: inline-block; }
@media (max-width: 700px) { .beratung-feld { grid-template-columns: 1fr; } }

/* Videos: Standbild oder eigener Player, immer volle Breite der Infospalte.
   YouTube wird erst nach einem Klick geladen – bis dahin liegt nur ein Standbild
   von unserem Server auf der Seite (wir haben kein Cookie-Banner). */
.video { margin: 12px 0 18px; }
.video video, .video iframe, .video .video-start { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); background: #0b0f13; }
.video .video-start { position: relative; padding: 0; cursor: pointer; overflow: hidden; }
.video .video-start img { width: 100%; height: 100%; object-fit: cover; }
.video .video-knopf { position: absolute; inset: 0; margin: auto; width: 62px; height: 44px; border-radius: 10px; background: rgba(16, 20, 24, .72); }
.video .video-knopf::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.video .video-start:hover .video-knopf { background: var(--blau-knopf); }
.video figcaption { font-size: .88rem; color: var(--text-muted); margin-top: 6px; }
.video figcaption .hinweis { display: block; font-size: .78rem; }

/* Auswahl der Ausführung, Optionen und Zubehör */
.abschnitt { font-size: 1.25rem; margin: 34px 0 6px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.abschnitt:first-child { margin-top: 0; }
.gruppen-titel { font-size: .98rem; margin: 18px 0 8px; }
.gruppen-hinweis { font-size: .85rem; color: var(--text-muted); margin: 4px 0 10px; }
/* Bildlupe: legt ein Foto groß über die Seite, statt einen Reiter zu öffnen */
.lupe { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(16, 32, 48, .82); padding: 28px; cursor: zoom-out; }
.lupe[hidden] { display: none; }
.lupe-innen { margin: 0; max-width: min(1100px, 92vw); max-height: 88vh; display: flex; flex-direction: column;
  align-items: center; gap: 10px; cursor: default; }
.lupe-innen img { max-width: 100%; max-height: 78vh; width: auto; height: auto; background: #fff;
  border-radius: var(--radius); padding: 10px; box-sizing: border-box; }
.lupe-innen figcaption { color: #fff; font-size: .9rem; text-align: center; max-width: 60ch; }
.lupe-zu { position: absolute; top: 14px; right: 18px; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5); background: rgba(0, 0, 0, .35); color: #fff;
  font-size: 1.7rem; line-height: 1; cursor: pointer; }
.lupe-zu:hover { background: #fff; color: #16202b; }
body.mit-lupe { overflow: hidden; }
/* Foto der Bauart über einer Zubehörgruppe – Klick öffnet es groß */
.gruppen-bild { margin: 0 0 10px; }
.gruppen-bild img { display: block; width: 100%; max-width: 260px; height: auto; background: #fff;
  border: 1px solid var(--linie); border-radius: var(--radius); padding: 6px; box-sizing: border-box; }
.gruppen-bild figcaption { font-size: .8rem; color: var(--text-muted); margin-top: 5px; max-width: 320px; }
.gruppe { border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.gruppe > :last-child { border-bottom: 0; }
.wahl, .artikel { display: flex; align-items: flex-start; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--linie); background: #fff; }
.wahl { cursor: pointer; }
/* Wer mit der Tastatur durch den Konfigurator geht, soll sehen, in welcher
   Zeile er steht – der Fokusring sitzt sonst nur auf dem 16 px kleinen
   Knopf und geht in langen Listen unter (Michael, 02.10.2026). Fällt :has()
   aus, bleibt der gewohnte Ring des Browsers; es geht also nichts verloren. */
.wahl:has(input:focus-visible) { outline: 2px solid var(--blau-knopf); outline-offset: -2px; background: #f4f9ff; }
.artikel { align-items: center; flex-wrap: wrap; }
.wahl:hover { background: #fafbfc; }
.wahl.an { background: #eef5fc; }
.wahl input { margin-top: 4px; accent-color: var(--blau-knopf); width: 16px; height: 16px; flex: none; }
/* Erweiterungen zu einer Option: eingerückt darunter, mit eigenem Aufpreis */
.wahl.unter { padding-left: 44px; background: #fbfcfd; }
.wahl.unter::before { content: "↳"; position: absolute; left: 20px; color: var(--text-muted); font-size: .9rem; }
/* zweite Stufe, z. B. Handrad unter dem Kapselaufsetzer */
.wahl.unter.tief2 { padding-left: 74px; background: #f7f9fb; }
.wahl.unter.tief2::before { left: 50px; }
.wahl.unter { position: relative; }
.wahl.unter .wahl-name { font-weight: 400; }
.wahl-reihe.unter .wahl.unter { background: transparent; }
.wahl-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Optionen, die es je Etikettierstation einmal gibt: Stückzahl unter der Zeile */
.wahl-reihe { border-bottom: 1px solid var(--linie); background: #eef5fc; }
.wahl-reihe > .wahl { border-bottom: 0; }
.menge-wahl { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 0 14px 12px 42px; font-size: .88rem; }
.menge-wahl label { display: flex; align-items: center; gap: 8px; }
.menge-wahl input { width: 64px; }
.menge-summe { color: var(--text-muted); }
.wahl-name { font-size: .93rem; font-weight: 500; line-height: 1.35; }
.preis { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: .95rem; }
.preis.inkl, .preis.folgt { font-weight: 500; color: var(--text-muted); font-size: .82rem; }
/* "inklusive" in der Auswahlliste, wenn die Position in einem Paket steckt */
.inkl-wort { color: var(--text-muted); font-weight: 500; }
.artikel-kauf { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.alle-zeigen { margin-top: 18px; }
.alle-zeigen button { border: 1px solid var(--linie); background: #fff; border-radius: 999px; padding: 9px 18px; font-size: .88rem; cursor: pointer; }
.alle-zeigen button:hover { border-color: var(--ink); }

.auswahl { margin-top: 28px; border: 2px solid var(--ink); border-radius: var(--radius); padding: 18px; background: #fff; }
.auswahl h2 { font-size: 1.1rem; margin-bottom: 10px; }
.auswahl td, .korb-eintrag td, .gesamt td { padding: 8px 0; border-bottom: 1px solid var(--linie); font-size: .92rem; vertical-align: top; }
td.r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; padding-left: 16px; }
tr.summe td { border-bottom: 0; font-weight: 700; padding-top: 12px; }
.kaufen { display: flex; align-items: center; gap: 12px; margin: 14px 0 8px; flex-wrap: wrap; }

/* Technische Daten mehrerer Modelle nebeneinander – am Handy seitlich verschiebbar */
.technik-breit { overflow-x: auto; margin-top: 6px; }
/* Lange Angaben dürfen umbrechen, sonst wird die Tabelle in der schmalen
   Infospalte zu breit und muss seitlich geschoben werden (Michael, 22.09.2026). */
.technik.modelle { min-width: 0; width: 100%; font-size: .88rem; table-layout: fixed; }
.technik.modelle thead th { text-align: right; font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--ink); padding: 6px 8px; white-space: nowrap; }
.technik.modelle thead th:first-child { text-align: left; white-space: normal; }
.technik.modelle tbody th { text-align: left; font-weight: 500; color: var(--text-muted); padding: 6px 8px 6px 0;
  white-space: normal; overflow-wrap: break-word; hyphens: auto; }
.technik.modelle tbody td { text-align: right; padding: 6px 8px; white-space: normal; overflow-wrap: break-word;
  font-variant-numeric: tabular-nums; }
.technik.modelle tbody tr + tr th, .technik.modelle tbody tr + tr td { border-top: 1px solid var(--linie); }
/* erste Spalte bleibt beim seitlichen Verschieben stehen */
.technik.modelle thead th:first-child, .technik.modelle tbody th { position: sticky; left: 0; background: var(--bg); }

/* Zeichnung in der Beschreibung (z. B. Ausstattungsübersicht) mit Liste darunter */
.p-zeichnung { margin: 14px 0 10px; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px; }
.p-zeichnung img { width: 100%; height: auto; }
.p-zeichnung figcaption { font-size: .8rem; color: var(--text-muted); margin-top: 8px; }
.p-liste { margin: 8px 0 0 18px; font-size: .93rem; }
.p-liste li { margin-bottom: 4px; }

/* ============ 5 Warenkorb und Formulare ============ */
.korb-eintrag { border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 18px; margin-top: 16px; max-width: 900px; background: #fff; }
.korb-kopf { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; margin-bottom: 6px; }
.korb-kopf a { color: var(--ink); text-decoration: none; }
.weg { border: 0; background: none; color: var(--text-muted); text-decoration: underline; cursor: pointer; font-size: .85rem; }
.gesamt { max-width: 900px; margin-top: 20px; padding: 16px 18px; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); }
.bestellung { max-width: 900px; margin-top: 36px; }
.bestellung h2 { margin-bottom: 6px; }
.felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 16px 0; }
.bestellung label { display: flex; flex-direction: column; gap: 5px; font-size: .88rem; font-weight: 600; }
.bestellung input:not([type=radio]):not([type=checkbox]), .bestellung textarea { border: 1px solid var(--linie); border-radius: 8px; padding: 10px 12px; font-weight: 400; background: #fff; }
.bestellung fieldset { border: 1px solid var(--linie); border-radius: var(--radius); margin: 18px 0; overflow: hidden; background: #fff; }
.bestellung legend { font-weight: 700; padding: 0 8px; margin-left: 8px; }
.bestellung .wahl { flex-direction: row; font-weight: 400; }
.bestellung .haken { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; display: block; }
/* Feld, dessen Eingabe gerade nicht gebraucht wird */
label.blass { opacity: .5; }
.honigtopf { position: absolute; left: -9999px; }
/* Rückmeldung nach erfolgreichem Versand */

/* ============ 6 Kontaktseite ============ */
.kontakt-lead { margin: 10px 0 28px; max-width: 720px; color: var(--text-muted); font-size: 1.05rem; }
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.kontakt-daten p { margin-bottom: 20px; line-height: 1.6; }
.kontakt-telefon { display: block; font-family: "Archivo", sans-serif; font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2rem);
                   color: var(--ink); text-decoration: none; margin-bottom: 22px; line-height: 1.2; }
.kontakt-telefon span { display: block; font-family: "Inter", sans-serif; font-size: .74rem; font-weight: 700; letter-spacing: .14em;
                        text-transform: uppercase; color: var(--blau-tief); margin-bottom: 4px; }
.kontakt-telefon:hover { color: var(--blau-tief); }
.kontakt-formular { margin-top: 0; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: clamp(18px, 3vw, 32px); }
.kontakt-formular .felder { margin-top: 0; }

/* Angebotsblatt: am Bildschirm unsichtbar, beim Drucken steht nur dieses Blatt da */
.angebot { display: none; }
.angebot-knopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.knopf.leise { background: #fff; color: var(--ink); border: 1px solid var(--linie); }
.knopf.leise:hover { border-color: var(--ink); }

/* Aussehen des Blattes – gilt für den Druck und für die Vorschau am Bildschirm */
.angebot.zeigen { display: block; background: #fff; color: #000; padding: 26px 28px; border: 1px solid var(--linie); border-radius: var(--radius); }
.angebot-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; border-bottom: 1px solid #999; padding-bottom: 12pt; }
.angebot-kopf img { width: 150px; height: auto; flex: none; }
.angebot-kopf div { text-align: right; font-size: 9pt; line-height: 1.5; }
.angebot h1 { font-size: 18pt; margin: 18pt 0 6pt; }
.angebot-zeile { margin-bottom: 12pt; }
.angebot-hinweis { border-left: 3pt solid #999; padding: 6pt 10pt; margin-bottom: 12pt; font-size: 10pt; }
.angebot-tabelle { width: 100%; border-collapse: collapse; }
.angebot-tabelle th, .angebot-tabelle td { border-bottom: .5pt solid #bbb; padding: 5pt 4pt; text-align: left; vertical-align: top; }
.angebot-tabelle th { font-size: 9pt; text-transform: uppercase; letter-spacing: .06em; }
.angebot-tabelle .r { text-align: right; white-space: nowrap; }
.angebot-tabelle tfoot td { border-bottom: 0; padding-top: 7pt; }
.angebot-tabelle tfoot .gesamt td { font-weight: 700; border-top: .5pt solid #000; }
.angebot-fuss { margin-top: 18pt; font-size: 9pt; line-height: 1.5; }

@media print {
  /* Beim Drucken bleibt nur das Angebotsblatt übrig */
  body > *:not(#inhalt), #inhalt > *:not(#angebot) { display: none !important; }
  #inhalt { margin: 0; padding: 0; max-width: none; }
  .angebot { display: block; color: #000; font-size: 11pt; border: 0; padding: 0; }
  @page { margin: 18mm 16mm; }
}

/* ============ 7 Kleine Bildschirme ============ */
/* Wird das Fenster schmäler, verschwinden die Produktgruppen von hinten
   nach vorn – zuerst die langen Wörter am Ende, zuletzt die drei
   wichtigsten. Vorher fiel die ganze Leiste auf einen Schlag weg
   (Michaels Wunsch, 22.09.2026). Gezählt wird vom Ende her, damit es
   auch stimmt, wenn eine leere Produktgruppe wegfällt.
   Die Grenzen sind gemessen, nicht geschätzt: Logo 128, Symbole 269,
   Polster 2×39, Einträge 54/74/69/85/96/147 mit 22 Abstand. Alle sechs
   brauchen 1122 Pixel, dazu etwas Luft. */
@media (max-width: 1170px) { .kopf .haupt a:nth-last-child(-n+1) { display: none; } }
@media (max-width: 1000px) { .kopf .haupt a:nth-last-child(-n+2) { display: none; } }
@media (max-width:  885px) { .kopf .haupt a:nth-last-child(-n+3) { display: none; } }
/* Darunter reicht der Platz auch für die drei ersten nicht mehr */
@media (max-width:  775px) { .kopf .haupt { display: none; } }

/* Der Pfeil beim Verweis auf kraft-co.at im Hamburger-Menü */
.menue .menue-extern { display: inline-flex; align-items: center; gap: 5px; }
.menue .menue-extern .sym { width: 15px; height: 15px; }
/* Drei Produkte nebeneinander, die Wahl 4/5 hat dann keinen Sinn mehr */
@media (max-width: 1100px) {
  .ansicht { display: none; }
  /* Auf schmalen Schirmen passen die Filterfelder nicht in dieselbe Zeile.
     Dort wird der Platz erst beim Öffnen gebraucht. */
  .filterzeile:not(.offen) { display: none; }
  .karten, .karten[data-spalten="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Zwei Videos nebeneinander in Spalte A */
.videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

@media (max-width: 860px) {
  /* Filter am Handy wie im Katalog auf www.kraft-co.at: ein Kasten unter der
     Leiste, darin die Gruppen zum Auf- und Zuklappen, eine Zeile je Häkchen.
     Aus den Pillen werden dabei Überschriftenzeilen mit Pfeil. */
  .filterzeile.offen { display: block; width: 100%; margin-top: 10px; padding: 2px 16px;
    background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); }
  .filter-feld { width: 100%; border-bottom: 1px solid var(--linie); }
  .filter-pille { display: flex; width: 100%; gap: 10px; padding: 13px 0; border: 0; border-radius: 0;
    background: none; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .filter-pille:hover, .filter-pille.offen, .filter-pille.aktiv { background: none; border: 0; }
  .filter-pille .sym { margin-left: auto; }
  /* Der gewählte Wert der Sortierung liest sich in normaler Schreibweise besser */
  .filter-pille .pille-wert { text-transform: none; letter-spacing: 0; font-size: .92rem; }
  .filter-klapp { position: static; min-width: 0; max-height: none; padding: 0 0 12px;
    border: 0; border-radius: 0; box-shadow: none; }
  .filter-klapp label { white-space: normal; }
  /* Am Handy ist der Platz knapp: Die Ergebniszahl steht ohnehin über der Liste */
  .filterzeile .ergebnisse, .filterzeile .strich { display: none; }
  .filter-reset { width: 100%; text-align: left; padding: 0 0 14px; }

  /* Untereinander: Bild, Name, Kurztext – dann gleich die Preise,
     erst danach Beschreibung, Technik, Prospekte und Videos. */
  .p-raster { grid-template-columns: 1fr; grid-template-areas: "aoben" "b" "aunten"; row-gap: 22px; }
  .p-info.unten { padding-top: 10px; }
  .videos { grid-template-columns: 1fr; }
  .kontakt-raster { grid-template-columns: 1fr; }
  .wahl, .artikel { flex-wrap: wrap; }
  .wahl .preis { margin-left: 28px; }
  .artikel-kauf { margin-left: 0; width: 100%; }
}
@media (max-width: 700px) {
  .karten, .karten[data-spalten="5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .karte-text { padding: 12px; }
  .karte-text h2 { font-size: 1rem; }
}
@media (max-width: 480px) {
  .kopf { gap: 8px; }
  .logo img { height: 20px; }
  .kopf .werkzeuge { gap: 0; }
  .kopf .symbol { width: 36px; height: 34px; }
  .suchleiste .knopf { display: none; }
}
.danke { background: #eef7ee; border: 1px solid #cde3cd; color: #26542a; padding: 10px 14px; border-radius: 8px; margin-top: 12px; font-size: .92rem; }

/* ============ 8 Rechtstexte (Impressum, AGB, Datenschutz, Versand) ============ */
.recht { max-width: 760px; }
.recht .stand { color: var(--text-muted); font-size: .85rem; margin: 8px 0 26px; }
.recht h2 { font-size: 1.08rem; margin: 26px 0 8px; }
.recht p { margin-bottom: 12px; font-size: .95rem; line-height: 1.65; }
.recht .offen { background: var(--warn-bg); color: var(--warn); padding: 2px 6px; border-radius: 4px; font-size: .88rem; }
.recht-nav { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--linie); font-size: .9rem; }

/* ---------- Kundenkonto (Michael, 21.09.2026) ----------
   Anmelden und Registrieren stehen nebeneinander; unter 900 px untereinander. */
.konto-spalten { display: grid; grid-template-columns: 1fr 1.25fr; gap: 26px; align-items: start; max-width: 1100px; }
.konto-karte { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 22px 24px; }
.konto-karte h2 { margin-top: 0; font-size: 1.15rem; }
.konto-karte .felder { grid-template-columns: 1fr 1fr; }
.konto-karte .knopf.gross { margin-top: 14px; }
@media (max-width: 900px) { .konto-spalten { grid-template-columns: 1fr; } .konto-karte .felder { grid-template-columns: 1fr; } }
/* Angemeldet-Leiste im Kopf: seit 21.09.2026 die EINE Leiste für Kraft –
   Konto, Wechsel zwischen Vorschau und öffentlicher Seite, Anmeldungen. */
.sperrleiste.angemeldet { background: #eaf6ee; color: #14532d; border-bottom-color: #b7dfc6; }
.sperrleiste.angemeldet a { color: #14532d; font-weight: 600; text-decoration: underline; }
.sperrleiste.angemeldet a:hover { text-decoration: none; }
/* Sieht aus wie die Links daneben, bleibt aber ein Bedienelement – mit der
   Tastatur erreichbar und für Vorleseprogramme als Schalter erkennbar
   (Michaels Wunsch vom 23.09.2026: kein Knopf, nur unterstrichener Text). */
.sperrleiste .wie-link { border: 0; background: none; padding: 0; margin: 0;
  font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.sperrleiste.angemeldet .wie-link { color: #14532d; font-weight: 600; }
.sperrleiste .wie-link:hover { text-decoration: none; }

.leiste-knopf { margin-left: 10px; border: 1px solid currentColor; background: transparent; color: inherit;
  border-radius: 99px; padding: 2px 12px; font: inherit; font-size: .85rem; cursor: pointer; }
.leiste-knopf:hover { background: #14532d; color: #fff; border-color: #14532d; }
/* Testzugang: Preise sichtbar, aber kein Konto dahinter – warm statt grün,
   damit man den Unterschied zur echten Anmeldung sofort sieht. */
.sperrleiste.testzugang { background: #fdf6e7; color: #7a5312; border-bottom-color: #e8d4a8; }
.sperrleiste.testzugang .leiste-knopf:hover { background: #7a5312; border-color: #7a5312; }
/* In der Menüleiste steht das Wort statt eines Zeichens: "Anmelden" oder
   "Abmelden". So sieht man den Zustand, ohne ihn erst aufklappen zu müssen. */
.konto-wort { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; margin-right: 2px;
  border: 1px solid var(--linie); border-radius: 99px; background: #fff; color: var(--ink);
  font: inherit; font-size: .82rem; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.konto-wort:hover { border-color: var(--blau); color: var(--blau-tief); }
.konto-wort.an { background: #eaf6ee; border-color: #b7dfc6; color: #14532d; }
.konto-wort.an:hover { background: #14532d; border-color: #14532d; color: #fff; }
/* Im Hamburger-Menü sieht der Abmelden-Knopf aus wie die Links daneben */
.menue-knopf { display: block; width: 100%; box-sizing: border-box; border: 0; background: none;
  font: inherit; text-align: left; cursor: pointer; }
/* Anfrage für ein freigabepflichtiges Produkt */
.freigabe-text { display: block; margin: 12px 0 4px; font-size: .9rem; }
.freigabe-text textarea { width: 100%; }
/* Anmeldefeld: Benutzername und Passwort genau untereinander, gleich breit */
#login-form label { width: 100%; }
#login-form input { width: 100%; box-sizing: border-box; }
#login-form label + label { margin-top: 14px; }
/* (Das frühere Personenzeichen mit grünem Punkt ist am 21.09.2026 dem Wort
   "Anmelden"/"Abmelden" gewichen – siehe .konto-wort weiter oben.) */

/* (.kraftco-kasten ist am 22.09.2026 entfallen – der Weg auf die Firmenseite
   steht jetzt oben im Beratungsfeld, siehe .beratung-feld.) */