/* Ruhrpott Guitars · Gestaltung „Stahl & Kupfer“ (seit dem Redesign 2026, Seiten erzeugt vom CMS in _cms/)
   Überschriften: Oswald, Fließtext: Lato – beide lokal aus fonts/ (Google-Fonts-Dateien, nur Zeichensatz „latin“, je ~14 KB;
   keine Verbindung zu Google → datenschutzfreundlich).
   Aufbau jeder Seite: Kopfleiste → Kopfbild mit H1 → Bänder (hell/dunkel im Wechsel) → Fußzeile. */

@font-face { font-family: 'Oswald'; font-weight: 300; font-display: swap; src: url('fonts/oswald-v57-latin-300.woff2') format('woff2'); }
@font-face { font-family: 'Oswald'; font-weight: 400; font-display: swap; src: url('fonts/oswald-v57-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Oswald'; font-weight: 500; font-display: swap; src: url('fonts/oswald-v57-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-weight: 400; font-display: swap; src: url('fonts/lato-v25-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-weight: 400; font-style: italic; font-display: swap; src: url('fonts/lato-v25-latin-400italic.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-weight: 700; font-display: swap; src: url('fonts/lato-v25-latin-700.woff2') format('woff2'); }

:root {
  --seite: #161310;
  --kopf: #0d0b09;
  --dunkel: #1d1915;
  --text: #ebe5dc;
  --link: #f0c9a6;
  --akzent: #c46a2c;        /* glühender Stahl / Kupfer */
  --akzent-hell: #f0a066;
  --akzent-tief: #8e4718;   /* Links auf hellem Grund */
  --papier: #f2ece3;
  --papier-2: #faf7f2;
  --papier-text: #24201c;
  --linie-hell: #dccdbd;
  --rand: max(1.25rem, calc((100vw - 1240px) / 2 + 1.25rem));   /* gleiche Kante für Kopfleiste, Bänder und Fußzeile */
  --spalt: clamp(2rem, 4vw, 4rem);                               /* Abstand zwischen den Spalten des Rasters */
  --text-schrift: Lato, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--text-schrift); font-size: 1.0625rem; line-height: 1.65; color: var(--text); background: var(--seite); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, .kachel-titel, .fuss-titel, .menu, .menu-knopf, .dachzeile, .betrag, .kopf-termin, .knopf, .sprungleiste a, summary {
  font-family: Oswald, var(--text-schrift); font-weight: 400; letter-spacing: .01em; }
h1 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.12; margin: 0 0 .5em; font-weight: 400; text-transform: uppercase; letter-spacing: .015em; }
h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.2; margin: 0 0 .55em; text-transform: uppercase; letter-spacing: .02em; }
h3 { font-size: 1.3rem; line-height: 1.25; margin: 1.4em 0 .45em; }
h4 { font-size: 1.1rem; margin: 1.2em 0 .4em; }
.spalte-text > h2:not(:first-child) { margin-top: 1.6em; }
.spalte-text > h3:first-child, .kasten > h3:first-child { margin-top: 0; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
li { margin-bottom: .3em; }
a { color: var(--link); text-underline-offset: .18em; }
a:hover { color: var(--akzent-hell); }
small { font-size: .85em; opacity: .85; }

.sprung { position: absolute; left: -999px; top: 0; z-index: 50; padding: .5em 1em; background: #fff; color: #000; }
.sprung:focus { left: 1rem; top: .5rem; }
.vorschau-band { margin: 0; padding: .35em 1rem; font: 600 .85rem/1.4 var(--text-schrift); text-align: center; background: #ffe08a; color: #111; }

/* ---- Kopfleiste: Logo + Menü in einer Zeile, bleibt oben stehen ---- */
.kopf { position: sticky; top: 0; z-index: 20; background: var(--kopf); }
.kopf-innen { max-width: 1240px; margin: 0 auto; padding: .55rem 1.25rem; display: flex; align-items: center; gap: 1.5rem; }
/* Logo-Datei ist schwarz/grau – hier komplett weiß (Hämmer im Plektrum sind durchsichtig, bleiben also dunkel) */
.logo img { width: 200px; filter: brightness(0) invert(1); }
.menu { margin-left: auto; font-size: 1.08rem; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li { margin: 0; }
.menu > ul { display: flex; align-items: center; gap: .25rem; }
.menu a { display: block; padding: .45em .7em; color: #f2ede6; text-decoration: none; white-space: nowrap; }
.menu a:hover, .menu li:focus-within > a, .menu a[aria-current="page"], .menu > ul > li.aktiv > a { color: var(--akzent-hell); }
/* Bereich der aktuellen Seite: Kupferstrich unter dem Menüpunkt */
.menu > ul > li.aktiv > a { box-shadow: inset 0 -2px 0 var(--akzent); }
.menu .hat-unter { position: relative; }
.menu .hat-unter > a::after { content: ' ▾'; font-size: .75em; opacity: .7; }
.menu .hat-unter > ul { position: absolute; top: 100%; left: 0; min-width: 14rem; padding: .4rem 0;
  background: var(--kopf); border-top: 2px solid var(--akzent); box-shadow: 0 12px 24px rgba(0,0,0,.35);
  visibility: hidden; opacity: 0; transform: translateY(-4px); transition: .15s; }
.menu .hat-unter:hover > ul, .menu .hat-unter:focus-within > ul { visibility: visible; opacity: 1; transform: none; }
.menu .hat-unter > ul a { font-family: var(--text-schrift); font-size: .95rem; padding: .45em 1.1em; }
.menu .trenner { border-top: 1px solid rgba(255,255,255,.14); margin: .3rem 1.1rem; }
.menu-schalter, .menu-knopf { display: none; }
/* Termin buchen: unaufdringlich, aber immer da – feiner Rahmen statt gefülltem Knopf */
.kopf-termin { flex: none; font-size: 1rem; letter-spacing: .02em; color: var(--akzent-hell); text-decoration: none;
  padding: .32em .85em; border: 1px solid var(--akzent); border-radius: 3px; white-space: nowrap; }
.kopf-termin:hover { background: var(--akzent); color: #fff; }

/* ---- Kopfbild mit H1 ---- */
.hero { position: relative; overflow: hidden; color: #fff; border-bottom: 3px solid var(--akzent);
  background: linear-gradient(90deg, rgba(13,11,9,.92) 0%, rgba(13,11,9,.62) 50%, rgba(13,11,9,.3) 100%),
    url('img/background.jpg') center 40% / cover no-repeat; }
.hero-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero:has(.hero-bild)::before { content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(13,11,9,.92) 0%, rgba(13,11,9,.62) 50%, rgba(13,11,9,.3) 100%); }
.hero-innen { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem clamp(2rem, 4.5vw, 3.25rem); }
.hero h1 { max-width: 22em; margin: 0; }
.hero.gross .hero-innen { padding-top: clamp(4rem, 11vw, 9rem); padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.hero.gross h1 { font-size: clamp(2rem, 4.2vw, 3.3rem); max-width: 15em; margin-bottom: .6em; }
.dachzeile { text-transform: uppercase; letter-spacing: .14em; font-size: .9rem; margin: 0 0 1em; color: var(--akzent-hell); }
.hero-text { font-size: 1.15rem; max-width: 40em; margin-top: 1.1rem; }
.hero-text > :last-child { margin-bottom: 0; }
.hero-text a:not(.knopf) { color: #fff; }
.hero-text li { margin-bottom: .15em; }
.hero-links, .knopf-zeile { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0 0; }
.knopf-zeile { margin: 1.2rem 0 1em; }

/* Knöpfe (auch die Knöpfe aus pickups.js und vertrag-widerrufen.js) */
.knopf, a.knopf { display: inline-block; padding: .6em 1.3em; font-size: 1.08rem; line-height: 1.3; text-decoration: none; border-radius: 4px;
  border: 1.5px solid var(--akzent); background: var(--akzent); color: #fff; cursor: pointer; }
.knopf.leise { background: transparent; color: inherit; border-color: currentColor; }
.hero .knopf.leise { color: #fff; border-color: rgba(255,255,255,.75); }
.knopf:hover { filter: brightness(1.1); color: #fff; }
.knopf.leise:hover { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.knopf[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- Bänder ---- */
.band { padding: clamp(2.75rem, 6vw, 4.5rem) var(--rand); }
.band.hell { background: var(--papier); color: var(--papier-text); }
.band.hell a:not(.knopf) { color: var(--akzent-tief); }
.band.hell h2, .band.hell h3 { color: #141210; }
.band.dunkel { background: var(--dunkel); }
.band.kontakt { background: linear-gradient(135deg, #2a1a10, var(--dunkel) 60%); }
.band.kupfer { background: var(--akzent); color: #fff; padding-top: 2rem; padding-bottom: 2rem; text-align: center; }
.band.kupfer h2 { margin: 0; font-size: clamp(1.15rem, 2vw, 1.5rem); }
.band.kupfer a { color: #fff; }
.band.mit-seite { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.band.seite-links { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.band.seite-links .spalte-seite { order: -1; }
/* Ruhige Unterseiten: aufeinanderfolgende helle Bänder trennt eine feine Linie auf Inhaltsbreite */
.band.hell + .band.hell, .band.hell + .bauform, .bauform + .band.hell { padding-top: clamp(2.25rem, 4.5vw, 3.5rem);
  background-image: linear-gradient(var(--linie-hell), var(--linie-hell)); background-size: calc(100% - 2 * var(--rand)) 1px;
  background-position: top center; background-repeat: no-repeat; }

/* Raster (alle Abschnitte ohne Seitenspalte): Überschrift links ein Drittel, Inhalt rechts zwei Drittel,
   Galerien über die ganze Breite. So enden alle Inhalte an denselben Kanten wie Kopfleiste und Fußzeile. */
.raster > .band-kopf h2 { margin-bottom: .4em; }
.raster > .band-breit { margin: .4rem 0 1.4rem; }
.raster > .band-breit:last-child { margin-bottom: 0; }
.raster > .band-breit > :is(.galerie, .logos, .kacheln, .preisliste) { margin: 0; }
.spalte-text > :last-child, .spalte-seite > :last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--spalt); align-items: start; }
  .raster > .band-kopf { grid-column: 1; }
  .raster > .spalte-text { grid-column: 2; }
  .raster > .band-breit, .raster > .modelle, .raster > .spalte-text.voll { grid-column: 1 / -1; }
  .spalte-text.zweispaltig { columns: 2; column-gap: var(--spalt); }
  .spalte-text.zweispaltig > * { break-inside: avoid; }
  .raster > .band-kopf h2 { margin-bottom: 0; }
  .raster > .band-breit { margin: 1.6rem 0; }
  .raster > .band-breit:first-child { margin-top: 0; }
  .raster > .spalte-text + .band-breit, .raster > .band-breit + .spalte-text { margin-top: 1.6rem; }
}

/* Bild mit Unterschrift */
figure { margin: 0 0 1em; }
.bild img { width: 100%; border-radius: 4px; }
.bild.hoch img { max-height: 32rem; object-fit: cover; object-position: top; }
figcaption { font-size: .9rem; margin-top: .5em; opacity: .85; }

/* Galerie: quadratisch zugeschnitten */
.galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 40vw), 1fr)); gap: 1rem; margin: 1.2em 0 1.6em; }
.band-breit .galerie:has(> :nth-child(4)) { grid-template-columns: repeat(auto-fill, minmax(min(260px, 40vw), 1fr)); }
.galerie img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; }
/* Logos (Partner) */
.logos { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.2em 0; }
.logos a { display: flex; align-items: center; justify-content: center; width: 220px; height: 130px; padding: 1rem; background: #fff; border-radius: 4px;
  outline: 1px solid var(--linie-hell); }
.logos img { max-height: 100%; width: auto; object-fit: contain; }

/* Kasten (z. B. Werkbankpauschale, Kontaktdaten) */
.kasten { border-radius: 4px; padding: 1.4rem 1.5rem; margin: 0 0 1em; background: rgba(196, 106, 44, .1); border: 1px solid rgba(196, 106, 44, .45); }
.band.hell .kasten { background: #fff; border-color: #e2c3a8; }
.band.kontakt .spalte-seite, .band.kontakt .kasten { background: rgba(0,0,0,.25); }
.band.kontakt .spalte-seite { border-radius: 4px; padding: 1.4rem 1.5rem; border: 1px solid rgba(196, 106, 44, .45); }
.kasten > :last-child { margin-bottom: 0; }
.betrag { font-size: 2.6rem; line-height: 1.1; margin: .1em 0 .4em; color: var(--akzent); }

/* Preisliste */
.preisliste { width: 100%; border-collapse: collapse; margin: .5em 0 2em; }
.preisliste thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.preisliste th, .preisliste td { text-align: left; vertical-align: top; padding: .6em .9em .6em 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.band.dunkel .preisliste :is(th, td) { border-bottom-color: rgba(255,255,255,.08); }
.preisliste th[scope="row"] { width: 27%; font-family: Oswald, var(--text-schrift); font-weight: 400; font-size: 1.1rem; line-height: 1.35; border-bottom: 1px solid var(--linie-hell); }
.preisliste tr.gruppen-ende td { border-bottom: 1px solid var(--linie-hell); }
.band.dunkel .preisliste th[scope="row"], .band.dunkel .preisliste tr.gruppen-ende td { border-bottom-color: rgba(255,255,255,.25); }
.preisliste td.preis { white-space: nowrap; text-align: right; padding-right: 0; font-weight: 600; }

/* Fragen & Antworten zum Aufklappen */
.fragen { margin: .5em 0 1.5em; }
.fragen details:first-child { border-top: 1px solid var(--linie-hell); }
.band.dunkel .fragen details:first-child { border-top-color: rgba(255,255,255,.18); }
.fragen details { border-bottom: 1px solid var(--linie-hell); }
.band.dunkel .fragen details { border-bottom-color: rgba(255,255,255,.18); }
.fragen summary { cursor: pointer; list-style: none; position: relative; padding: .75em 2em .75em 0; font-size: 1.12rem; line-height: 1.35; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: '+'; position: absolute; right: .2em; top: .6em; font-size: 1.3rem; color: var(--akzent); }
.fragen details[open] summary::after { content: '\2013'; }
.fragen summary:hover { color: var(--akzent); }
.fragen details > :not(summary) { margin-top: 0; }
.fragen details > :last-child { margin-bottom: 1em; }

/* Steckbrief („Auf einen Blick“) */
.steckbrief { width: 100%; border-collapse: collapse; margin: .3em 0 1.5em; }
.steckbrief th, .steckbrief td { text-align: left; vertical-align: top; padding: .5em .9em .5em 0; border-bottom: 1px solid rgba(0,0,0,.1); }
.band.dunkel .steckbrief :is(th, td) { border-bottom-color: rgba(255,255,255,.1); }
.steckbrief th { width: 28%; font-weight: 600; }

/* Sprungleiste */
.sprungleiste { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1em 0 1.5em; }
.sprungleiste a { padding: .3em .85em; border: 1px solid var(--akzent); border-radius: 3px; text-decoration: none; font-size: 1.02rem; }
.band.hell .sprungleiste a { color: var(--akzent-tief); }
.sprungleiste a:hover, .band.hell .sprungleiste a:hover { background: var(--akzent); color: #fff; }

/* ---- Kacheln (Startseite) ---- */
.kacheln { display: grid; grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: auto auto; gap: 1rem; }
.kachel { position: relative; display: block; overflow: hidden; border-radius: 4px; min-height: 15rem; color: #fff; text-decoration: none;
  background: #222; outline: 1px solid rgba(255,255,255,.06); }
.kachel.gross { grid-row: span 2; min-height: 31rem; }
.kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.kachel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.82) 10%, rgba(0,0,0,0) 62%); }
.kachel::before { content: ''; position: absolute; z-index: 2; left: 1.25rem; bottom: 0; width: 2.5rem; height: 3px; background: var(--akzent); transition: width .3s; }
.kachel:hover::before { width: 5rem; }
.kachel:hover img { transform: scale(1.04); }
.kachel-text { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 1.1rem 1.25rem; }
.kachel-titel { display: block; font-size: 1.6rem; line-height: 1.15; text-transform: uppercase; letter-spacing: .03em; }
.kachel.gross .kachel-titel { font-size: 2.1rem; }
.kachel-zeile { display: block; font-size: .98rem; opacity: .92; margin-top: .25em; }
.kachel:hover .kachel-titel { color: var(--akzent-hell); }
/* Kachel ohne Bild: glühende Röhre */
.kachel.platzhalter { background: radial-gradient(circle at 50% 42%, #ffb15c 0, #e0671d 9%, #7a2c0c 26%, #241510 52%, #120d0a 75%); }
.roehre { position: absolute; left: 50%; top: 14%; width: 4.2rem; height: 7.5rem; transform: translateX(-50%); border-radius: 2.1rem 2.1rem .6rem .6rem;
  border: 2px solid rgba(255,220,180,.35); box-shadow: inset 0 0 28px rgba(255,170,90,.55), 0 0 40px rgba(255,120,40,.35); }

/* ---- Pickup-Katalog (Karten baut pickups.js aus dem Katalog der Werkstatt-App) ---- */
.katalog-start { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.katalog-start .sprungleiste { margin: 0; }
.katalog-status { padding: .6em 1em; border: 1px dashed currentColor; border-radius: 4px; margin: 1em 0 0; }
.bauform { padding: clamp(2.5rem, 5vw, 3.75rem) var(--rand); background: var(--papier); color: var(--papier-text); }
.bauform:nth-of-type(even) { background: var(--papier-2); }
.bauform h2 { color: #141210; }
.bauform a:not(.knopf) { color: var(--akzent-tief); }
.bauform, .pickup, #wunsch, #rewinds { scroll-margin-top: 4.5rem; }
.modelle { margin-top: 1.5rem; }
.pickup { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.5em; padding: 1.5em 0; border-top: 1px solid var(--linie-hell); }
/* Karte in drei Spalten (data-karten="spalten"): Bild | Beschreibung | Auswahl, Preis, Bestellen */
[data-karten="spalten"] .pickup { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(16rem, 19rem); column-gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: 2rem 0; align-items: start; }
.pickup-kauf { padding: 1.1rem 1.2rem; background: #fff; border: 1px solid #e2c3a8; border-radius: 4px; }
.pickup-kauf .pickup-optionen { grid-template-columns: 1fr; gap: .2em; margin-top: 0; }
.pickup-kauf .pickup-optionen label { margin-top: .45em; font-size: .92rem; }
.pickup-kauf .pickup-optionen label:first-child { margin-top: 0; }
.pickup-kauf .pickup-optionen select { max-width: none; }
.pickup-kauf .pickup-optionen .option-hinweis { grid-column: 1; margin-top: 0; }
.pickup-kauf .knopf { width: 100%; }
.pickup-text > :last-child { margin-bottom: 0; }
.pickup-text h4 { font-size: 1.05rem; }
/* Bild in der Karte öffnet das Detail-Fenster */
.pickup-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 4px; overflow: hidden; }
.pickup-zoom img { transition: transform .3s; }
.pickup-zoom:hover img { transform: scale(1.03); }

/* Detail-Fenster: links Bilder + Bestell-Kasten (bleibt beim Lesen stehen), rechts der ganze Text */
html:has(dialog[open]) { overflow: hidden; }
dialog.pickup-detail { width: min(1180px, calc(100% - 2rem)); max-width: none; max-height: calc(100vh - 2rem); margin: auto; padding: 0;
  border: 0; border-radius: 8px; overflow: auto; background: var(--papier-2); color: var(--papier-text); }
dialog.pickup-detail::backdrop { background: rgba(13, 11, 9, .78); }
.pd-kopf { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.5rem; background: var(--papier-2); border-bottom: 1px solid var(--linie-hell); }
.pd-kopf h2 { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.7rem); color: #141210; }
.pd-zu { flex: none; width: 2.4rem; height: 2.4rem; border: 1px solid var(--linie-hell); border-radius: 50%; background: #fff; color: #141210;
  font-size: 1.5rem; line-height: 1; cursor: pointer; }
.pd-zu:hover { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.pd-inhalt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 3vw, 2.75rem); padding: 1.5rem; }
.pd-links { position: sticky; top: 5rem; align-self: start; }
.pd-bild img { width: 100%; border-radius: 4px; }
.pd-thumbs { margin-top: 8px; }
.pd-thumbs button { width: 64px; }
.pd-kauf .pickup-kauf { margin-top: 1rem; }
.pd-text a { color: var(--akzent-tief); }
.pd-text h4 { font-size: 1.1rem; margin: 1.3em 0 .4em; }
.pd-text > :first-child { margin-top: 0; }
@media (max-width: 700px) {
  dialog.pickup-detail { width: 100%; max-height: 100vh; height: 100%; border-radius: 0; }
  .pd-kopf { padding: .7rem 1rem; }
  .pd-inhalt { grid-template-columns: minmax(0, 1fr); padding: 1rem; }
  .pd-links { position: static; }
}
.pickup-mehr { margin: .6em 0 0; padding: 0; border: 0; background: none; font: inherit; color: var(--akzent-tief); text-decoration: underline;
  text-underline-offset: .18em; cursor: pointer; }
.pickup-mehr::after { content: ' \2197'; font-size: .85em; }
.pickup.markiert { background: rgba(255, 220, 120, .35); box-shadow: 0 0 0 .75em rgba(255, 220, 120, .35); }
.pickup h3 { font-size: 1.5rem; margin: 0 0 .2em; }
.pickup-bild img { width: 100%; border-radius: 4px; }
.pickup-thumbs { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.pickup-thumbs button { padding: 0; border: 2px solid transparent; border-radius: 4px; background: none; cursor: pointer; width: 54px; }
.pickup-thumbs button[aria-current="true"] { border-color: var(--akzent); }
.pickup-thumbs img { width: 100%; border-radius: 3px; }
.pickup-kurz { font-style: italic; }
.pickup-optionen { display: grid; grid-template-columns: max-content 1fr; gap: .4em .8em; align-items: center; margin: .8em 0; }
.pickup-optionen select, .anfrage input, .anfrage textarea, .widerruf-form input, .widerruf-form textarea {
  font: inherit; font-size: 1rem; padding: .4em .5em; border: 1px solid #8a7b6b; border-radius: 4px; background: #fff; color: #1a1714; max-width: 100%; }
.pickup-optionen select { width: 100%; max-width: 22em; }
.pickup-optionen-liste { display: contents; }
.pickup-optionen .option-hinweis { grid-column: 2; margin-top: -.3em; }
.option-hinweis { display: block; font-size: .85em; opacity: .8; }
.pickup-preis { font-family: Oswald, var(--text-schrift); font-size: 1.45rem; margin: .5em 0; }
.pickup-preis small { font-size: .6em; }
.pickup details { margin-top: 1em; }
.pickup summary { cursor: pointer; font-size: 1.05rem; }
.pickup details p, .pickup details ul, .pickup details ol { margin-top: .5em; }
.pickup details h4 { margin-top: 1em; font-size: 1em; }

/* Bestell-Fenster */
/* gleicher Look wie das Detail-Fenster der Pickups: Papier, Kopf mit Titel und ×, Kästen weiß mit Kupferrand */
dialog.anfrage { margin: auto; max-height: calc(100vh - 2rem); overflow: auto; max-width: 640px; width: calc(100% - 2rem); border: 0; border-radius: 8px;
  padding: 0; background: var(--papier-2); color: var(--papier-text); }
dialog.anfrage::backdrop { background: rgba(13, 11, 9, .78); }
#anfrage-form { padding: 1.5rem; }
.anfrage h2 { color: #141210; }
@media (max-width: 700px) {
  dialog.anfrage { width: 100%; max-width: none; max-height: 100vh; height: 100%; border-radius: 0; }
  #anfrage-form { padding: 1rem; }
}
.anfrage a { color: var(--akzent-tief); }
.anfrage-auswahl { background: #fff; border: 1px solid #e2c3a8; border-radius: 4px; padding: .9rem 1.1rem; margin: 0 0 1.2rem; }
.anfrage-felder { display: grid; grid-template-columns: 1fr 1fr; gap: .6em .8em; }
.anfrage-felder label { display: flex; flex-direction: column; gap: .2em; }
.anfrage-felder .breit { grid-column: 1 / -1; }
.anfrage .einwilligung { display: flex; gap: .5em; align-items: flex-start; margin: 1em 0; }
.anfrage .einwilligung input { margin-top: .3em; }
.anfrage .falle, .widerruf-form .falle { position: absolute; left: -9999px; }
.anfrage [aria-invalid="true"], .widerruf-form [aria-invalid="true"] { border-color: #b00020; outline: 2px solid #b00020; }
.anfrage-knoepfe { display: flex; gap: .8em; justify-content: flex-end; flex-wrap: wrap; }
.anfrage-knoepfe .knopf.leise { color: #1a1714; }
.anfrage-meldung, .widerruf-meldung { margin: .8em 0; font-weight: 600; }
.anfrage-meldung.fehler, .widerruf-meldung.fehler { color: #a00; }
.anfrage .anfrage-rechtliches { font-size: .85em; margin: 0 0 1em; }
/* Gewährleistungslabel (Pflicht): Handy/Tablet unter der Auswahl, ab 900 px als eigene Spalte rechts – nie verstecken */
#anfrage-form { display: grid; grid-template-columns: minmax(0, 1fr); }
#anfrage-form > .anfrage-auswahl { order: -2; }
#anfrage-form > .gewaehrleistungslabel { order: -1; margin: 0 0 1em; }
.anfrage .gewaehrleistungslabel img { width: 100%; border: 1px solid #ddd; }
@media (min-width: 900px) {
  dialog.anfrage { max-width: 1100px; }
  dialog.anfrage:has(#anfrage-form.gesendet) { max-width: 640px; }
  #anfrage-form { grid-template-columns: minmax(0, 1fr) 430px; column-gap: 2em; }
  #anfrage-form > * { grid-column: 1; }
  #anfrage-form > .gewaehrleistungslabel { order: 0; grid-column: 2; grid-row: 1 / span 9; align-self: start; position: sticky; top: 4.5rem; margin: 0; }
  #anfrage-form.gesendet { grid-template-columns: minmax(0, 1fr); }
}
#anfrage-form.gesendet .anfrage-felder, #anfrage-form.gesendet .einwilligung, #anfrage-form.gesendet .anfrage-rechtliches, #anfrage-form.gesendet .gewaehrleistungslabel { display: none; }
.anfrage-uebersicht h3 { font-size: 1em; margin: 1em 0 .3em; }
.anfrage-uebersicht h3:first-child { margin-top: 0; }
.anfrage-uebersicht table { border-collapse: collapse; margin-top: .4em; }
.anfrage-uebersicht td { padding: .1em 1em .1em 0; }
.anfrage-uebersicht td:last-child { text-align: right; padding-right: 0; }
.anfrage-uebersicht tr.summe td { border-top: 1px solid #000; font-weight: 600; }

/* ---- Online-Widerruf ---- */
.widerruf-form { max-width: 560px; margin-top: 1.5em; }
.widerruf-form label { display: flex; flex-direction: column; gap: .2em; margin-bottom: .8em; }
.widerruf-form .hinweis { font-size: .85em; opacity: .8; }
.widerruf-bestaetigung { margin-top: 1.5em; padding: 1em 1.2em; background: #fff; border: 1px solid #e2c3a8; border-radius: 4px; }
.widerruf-bestaetigung table { border-collapse: collapse; margin-top: .6em; }
.widerruf-bestaetigung td { padding: .15em 1em .15em 0; vertical-align: top; }

/* ---- Rechtstexte der IT-Recht Kanzlei (werden beim Besuch geladen) ---- */
.itrk-legaltext { overflow-wrap: anywhere; }
.itrk-legaltext h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.itrk-legaltext h2 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); margin-top: 1.6em; }
.itrk-legaltext h3 { font-size: 1.15rem; }

/* Zählpixel der Statistik (nur wenn eingeschaltet): unsichtbar, nimmt keinen Platz ein */
.zaehler { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---- Fußzeile ---- */
.fuss { background: var(--kopf); color: #d9d3ca; border-top: 8px solid var(--akzent); }   /* Kupfer-Linie zwischen Kontakt und Fuß */
.fuss-innen { max-width: 1240px; margin: 0 auto; padding: 2.5rem 1.25rem 3rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; font-size: .98rem; }
.fuss a { color: #f2ede6; text-decoration: none; }
.fuss a:hover { color: var(--akzent-hell); text-decoration: underline; }
.fuss-titel { font-size: 1.2rem; color: #fff; margin-bottom: .5em; }

/* ---- Tablet: Menü wird zum Klappmenü, sobald es nicht mehr in eine Zeile passt ---- */
@media (max-width: 1060px) {
  .menu-knopf { display: block; color: #fff; font-size: 1.25rem; cursor: pointer; padding: .3em .2em; order: 2; }
  .kopf-termin { order: 1; margin-left: auto; font-size: .92rem; padding: .25em .7em; }
  .kopf-innen { gap: .9rem; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--kopf); padding: .5rem 1.25rem 1.25rem;
    max-height: calc(100vh - 4rem); overflow-y: auto; }
  .menu-schalter:checked ~ .menu { display: block; }
  .menu > ul { display: block; }
  .menu .hat-unter > a::after { content: ''; }
  .menu .hat-unter > ul { position: static; visibility: visible; opacity: 1; transform: none; box-shadow: none; border: 0; padding: 0 0 .4rem 1rem; min-width: 0; }
  .menu .trenner { display: none; }
  .menu a { padding: .55em 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .kacheln { grid-template-columns: repeat(2, 1fr); }
  .kachel.gross { grid-column: span 2; grid-row: auto; min-height: 20rem; }
  [data-karten="spalten"] .pickup { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  .pickup-kauf { grid-column: 2; margin-top: 1rem; }
  .kachel-titel { font-size: 1.35rem; }
}
/* ---- Handy ---- */
@media (max-width: 700px) {
  body { font-size: 1rem; }
  .logo img { width: 160px; }
  .kacheln { grid-template-columns: 1fr; }
  .kachel.gross { grid-column: auto; min-height: 16rem; }
  .kachel { min-height: 13rem; }
  .band.mit-seite, .band.seite-links { grid-template-columns: minmax(0, 1fr); }
  .band.seite-links .spalte-seite { order: 2; }
  .fuss-innen { grid-template-columns: 1fr; gap: 1.2rem; }
  .hero-text { font-size: 1.08rem; }
  /* Preisliste untereinander: Leistung als Überschrift, darunter Details und Preis */
  .preisliste, .preisliste tbody { display: block; }
  .preisliste tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; }
  .preisliste th[scope="row"] { grid-column: 1 / -1; width: auto; border-bottom: 0; padding: .9em 0 .1em; }
  .preisliste td { padding: .35em 0; }
  .steckbrief th { width: 38%; }
  .pickup, [data-karten="spalten"] .pickup { grid-template-columns: 1fr; }
  .pickup-kauf { grid-column: 1; }
  .anfrage-felder { grid-template-columns: 1fr; }
  .pickup-optionen { grid-template-columns: 1fr; }
  .pickup-optionen .option-hinweis { grid-column: 1; }
  .logos a { width: calc(50% - .5rem); height: 100px; }
}
@media (max-width: 420px) {
  .menu-knopf { white-space: nowrap; font-size: 1.5rem; }
  .menu-wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .logo img { width: 150px; }
  .dachzeile { font-size: .78rem; letter-spacing: .1em; }
}