/* Retroankauf · gemeinsamer Kopf und Kontaktleiste (2026-11-12) · Richtung A „Modulschacht“.
   Der Kopf ist die Oberkante der Petrol-Bühne. Das Logo steckt als weißes Modul im Schacht und
   behält rundherum seinen Schutzraum. Nur vorhandene Marken-Tokens, Fredoka und Inter.
   Amber trägt allein die Fotoanfrage. Kein per CSS erzeugter Text. */

:root {
  --rk-bar: 84px;       /* gezeichnete Leiste */
  --rk-modul: 121px;    /* Logo-Modul: 42 px Logo, 38 px Schutzraum oben und unten, 3 px Rand */
  --rk-leiste: 0px;     /* Höhe der Kontaktleiste am unteren Rand */
  --header-h: 121px;
  --rk-hart: 0 6px 0 rgba(0, 0, 0, .22);
  --rk-linien: repeating-linear-gradient(180deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 4px);
}

/* Sprungziele: ein Abstand unter dem Kopf. Der Bestand rechnete ihn doppelt (scroll-padding und scroll-margin). */
html { scroll-padding-top: calc(var(--header-h) + 20px); }
.rt :target { scroll-margin-top: 0; }

/* ---------- Leiste ---------- */
.rk-kopf { position: sticky; top: 0; z-index: 60; height: var(--rk-modul); color: var(--weiss); font-family: var(--font-body); pointer-events: none; }
.rk-kopf::before { content: ""; position: absolute; inset: 0 0 auto; height: 100%; background: var(--petrol-tief) var(--rk-linien); }
.rk-kopf::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--px); background: repeating-linear-gradient(90deg, var(--petrol-tief) 0 var(--px), transparent var(--px) calc(var(--px) * 2)); }
.rk-kopf.is-unterwegs::before { height: var(--rk-bar); }
.rk-kopf.is-unterwegs::after { top: var(--rk-bar); }
.rk-kopf__leiste { position: relative; display: flex; align-items: center; gap: 10px; height: var(--rk-bar); max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.rk-kopf__leiste > * { pointer-events: auto; }
.rk-kopf a, .rk-kopf summary, .rk-kopf button { -webkit-tap-highlight-color: transparent; }
body.rt .rk-kopf :focus-visible { outline: 3px solid var(--weiss); outline-offset: 3px; border-radius: 10px; }

/* ---------- Logo-Modul ---------- */
.rk-marke { position: relative; z-index: 2; flex: 0 0 auto; align-self: flex-start; box-sizing: border-box; display: flex; align-items: center; height: var(--rk-modul); margin-left: -41px; padding: 0 38px; background: var(--weiss); border: 3px solid var(--ink); border-top: 0; border-radius: 0 0 16px 16px; box-shadow: var(--rk-hart); }
.rk-marke img { display: block; width: 150px; height: auto; }
/* Zweifarbiger Ring: Weiß auf der Petrol-Leiste, Petrol Tief dort, wo das Modul beim Scrollen über hellem Inhalt hängt. */
body.rt .rk-kopf .rk-marke:focus-visible { outline-offset: 4px; border-radius: 0 0 16px 16px; box-shadow: 0 0 0 4px var(--petrol-tief), var(--rk-hart); }
.rk-nur-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- Navigation ---------- */
.rk-nav { display: flex; align-items: center; gap: 0; margin-left: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.04rem; letter-spacing: .01em; }
.rk-nav__punkt { position: relative; display: inline-flex; align-items: center; gap: .42em; min-height: 46px; padding: 0 12px; border-radius: 10px; color: var(--weiss); text-decoration: none; cursor: pointer; list-style: none; user-select: none; white-space: nowrap; }
.rk-nav__punkt::-webkit-details-marker { display: none; }
.rk-nav a.rk-nav__punkt:hover, .rk-nav a.rk-nav__punkt:focus { color: var(--weiss); text-decoration: none; }
.rk-nav__punkt::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 4px; background: linear-gradient(90deg, var(--weiss) 0 56%, var(--petrol-hell) 56% 80%, var(--petrol) 80%); transform: scaleX(0); transform-origin: left; }
.rk-nav__punkt:hover::after, .rk-nav__punkt[aria-current]::after, .rk-sub[open] > summary::after { transform: scaleX(1); }
.rk-sub { position: relative; }
.rk-sub > summary::before { content: ""; order: 2; width: 7px; height: 7px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.rk-sub[open] > summary::before { transform: translateY(2px) rotate(-135deg); }
.rk-sub__feld { position: absolute; top: calc(100% + 12px); left: 0; z-index: 5; box-sizing: border-box; width: min(560px, 92vw); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 12px; background: var(--weiss); border: 3px solid var(--ink); border-radius: 16px; box-shadow: var(--rk-hart); font-family: var(--font-body); font-size: .96rem; letter-spacing: 0; }
.rk-sub--orte .rk-sub__feld { width: 250px; grid-template-columns: minmax(0, 1fr); }
.rk-sub__feld a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border-radius: 10px; color: var(--ink); font-weight: 600; text-decoration: none; }
.rk-sub__feld a:hover { background: var(--petrol-nebel); color: var(--petrol-tief); text-decoration: none; }
.rk-sub--ankauf .rk-sub__feld a:first-child { grid-column: 1 / -1; background: var(--mint-hell); color: var(--petrol-tief); }
.rk-sub__feld a[aria-current] { box-shadow: inset 0 0 0 2px var(--petrol); }
.rk-sub__feld .pix { width: 34px; height: auto; flex: 0 0 auto; }
body.rt .rk-kopf .rk-sub__feld :focus-visible { outline-color: var(--petrol-tief); outline-offset: 1px; }

/* ---------- Menütaste (nur schmale Ansicht) ---------- */
.rk-taste { display: none; }
.rk-schleier { position: fixed; inset: 0; z-index: 1; background: rgba(42, 42, 42, .5); pointer-events: auto; touch-action: none; }

/* ---------- Kontakt: WhatsApp, Anrufen, Fotoanfrage ---------- */
.rk-kontakt { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.rk-k { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 46px; min-height: 46px; padding: 0 14px; border: 2px solid color-mix(in srgb, var(--petrol-hell) 62%, transparent); border-radius: var(--r-pill); color: var(--weiss); font: 600 .95rem/1.1 var(--font-body); text-decoration: none; white-space: nowrap; }
.rk-kontakt a.rk-k:hover { background: rgba(255, 255, 255, .12); border-color: var(--weiss); color: var(--weiss); text-decoration: none; }
.rk-glyph { flex: 0 0 auto; display: block; image-rendering: pixelated; }
.rk-k--tel .rk-k__wort { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.rk-k--foto { padding: 0 18px; font-family: var(--font-display); font-size: 1.04rem; letter-spacing: .01em; background: var(--amber); border-color: var(--amber); color: var(--ink); box-shadow: 0 4px 0 var(--amber-tief); }
.rk-kontakt a.rk-k--foto:hover { background: var(--amber-tief); border-color: var(--amber-tief); color: var(--ink); transform: translateY(2px); box-shadow: 0 2px 0 var(--amber-tief); }
/* Steht bereits ein Amber-Hauptbutton im Bild, tritt die Fotoanfrage im Kopf zurück: ein Haupt-CTA je Ansicht. */
.rk-ruhig .rk-k--foto { background: var(--weiss); border-color: var(--weiss); color: var(--petrol-tief); box-shadow: 0 4px 0 rgba(0, 0, 0, .25); }
.rk-ruhig .rk-kontakt a.rk-k--foto:hover { background: var(--petrol-nebel); border-color: var(--petrol-nebel); color: var(--petrol-tief); box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
body.rt .rk-kopf .rk-k:focus-visible { border-radius: var(--r-pill); }

@media (min-width: 1180px) and (max-width: 1259px) {
  .rk-k--wa { padding: 0; }
  .rk-k--wa .rk-k__wort { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 980px) and (max-width: 1179px) {
  .rk-nav { margin-left: 8px; font-size: 1.02rem; }
  .rk-nav__punkt { padding: 0 9px; }
  .rk-nav__punkt::after { left: 9px; right: 9px; }
  .rk-k--tel, .rk-k--wa { padding: 0; }
  .rk-k__nr, .rk-k--wa .rk-k__wort { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* Angesprungene Standortkarte kurz kenntlich machen */
.loc .card:target { outline: 3px solid var(--petrol); outline-offset: 5px; }

/* ---------- Schmale Ansicht: Modul links, Menütaste rechts, Kontaktleiste unten ---------- */
@media (max-width: 979px) {
  :root { --rk-bar: 64px; --rk-modul: 118px; --rk-leiste: 76px; --header-h: 118px; }
  /* Fokussierte und angesprungene Elemente bleiben über der Kontaktleiste frei (WCAG 2.4.11). */
  html { scroll-padding-bottom: calc(var(--rk-leiste) + env(safe-area-inset-bottom, 0px) + 20px); }
  .rk-kopf.is-unterwegs::before { height: 100%; }
  .rk-kopf.is-unterwegs::after { top: 100%; }
  .rk-kopf__leiste { padding-inline: 12px; gap: 0; }
  .rk-marke { margin-left: 0; border-radius: 0 0 14px 14px; }
  .rk-marke img { width: 140px; }

  .rk-taste { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 9px; margin-left: auto; min-width: 48px; min-height: 48px; box-sizing: border-box; padding: 0 14px 0 12px; background: var(--weiss); color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 4px 0 rgba(0, 0, 0, .3); font: 600 1.02rem/1 var(--font-display); letter-spacing: .01em; cursor: pointer; }
  .rk-taste:active, .rk-taste[aria-expanded="true"] { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
  .rk-taste__balken { display: grid; gap: 4px; width: 18px; }
  .rk-taste__balken i { display: block; height: 3px; background: currentColor; }
  .rk-taste[aria-expanded="true"] .rk-taste__balken i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .rk-taste[aria-expanded="true"] .rk-taste__balken i:nth-child(2) { opacity: 0; }
  .rk-taste[aria-expanded="true"] .rk-taste__balken i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  body.rt .rk-kopf .rk-taste:focus-visible { outline-color: var(--petrol-hell); border-radius: 12px; }

  .rk-nav { position: absolute; z-index: 4; top: calc(var(--rk-modul) + 14px); left: 12px; right: 12px; display: none; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 10px; box-sizing: border-box; max-height: calc(100vh - var(--rk-modul) - 30px); max-height: calc(100dvh - var(--rk-modul) - 30px); overflow-y: auto; overscroll-behavior: contain; background: var(--weiss); border: 3px solid var(--ink); border-radius: 16px; box-shadow: var(--rk-hart); color: var(--ink); font-size: 1.16rem; }
  .rk-kopf.is-offen .rk-nav { display: flex; }
  .rk-nav__punkt { justify-content: space-between; min-height: 52px; padding: 0 14px; color: var(--ink); }
  .rk-nav a.rk-nav__punkt:hover, .rk-nav a.rk-nav__punkt:focus { color: var(--petrol-tief); }
  .rk-nav__punkt::after { left: 14px; right: auto; width: 64px; bottom: 7px; background: linear-gradient(90deg, var(--petrol-tief) 0 56%, var(--petrol) 56% 80%, var(--petrol-hell) 80%); }
  .rk-nav__punkt:hover::after { transform: scaleX(0); }
  .rk-nav__punkt[aria-current]::after, .rk-sub[open] > summary::after { transform: scaleX(1); }
  .rk-sub > summary::before { order: 2; }
  .rk-sub__feld, .rk-sub--orte .rk-sub__feld { position: static; width: auto; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 0 0 8px; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .rk-sub__feld a { min-height: 48px; }
  body.rt .rk-kopf .rk-nav :focus-visible { outline-color: var(--petrol-tief); outline-offset: -3px; }

  /* Kopf weicht beim Abwärtsscrollen und kommt beim Aufwärtsscrollen zurück; die Kontaktleiste bleibt. */
  .rk-kopf.is-weg { top: calc(-1 * (var(--rk-modul) + 16px)); }

  .rk-kontakt { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); align-items: stretch; gap: 8px; margin: 0; padding: 8px max(10px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)); background: var(--petrol-tief) var(--rk-linien); }
  .rk-kontakt::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--px); background: repeating-linear-gradient(90deg, var(--petrol-tief) 0 var(--px), transparent var(--px) calc(var(--px) * 2)); pointer-events: none; }
  .rk-k, .rk-k--wa { flex-direction: column; gap: 5px; min-height: 52px; padding: 5px 4px; border-radius: 14px; font-size: .8rem; }
  .rk-k--tel .rk-k__wort { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; }
  .rk-k__nr { display: none; }
  .rk-k--foto { font-size: .96rem; box-shadow: 0 3px 0 var(--amber-tief); }
  .rk-ruhig .rk-k--foto { box-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
  body.rt .rk-kopf .rk-k:focus-visible { border-radius: 14px; outline-offset: 2px; }
  /* Tastatur offen, Menü offen, Formular im Bild oder Dialog offen: Leiste macht Platz. */
  .rk-leiste-aus .rk-kontakt, html:has(dialog[open]) .rk-kontakt { transform: translateY(calc(100% + var(--px))); visibility: hidden; }
  /* Platz unter dem Footer, damit die Leiste nichts verdeckt */
  .rt .rt-footer::after { content: ""; display: block; height: calc(var(--rk-leiste) + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 359px) {
  .rk-taste { padding: 0; justify-content: center; }
  .rk-taste__wort { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .rk-k--foto { font-size: .9rem; }
}

/* ---------- Bewegung: aus dem Bestand abgeleitet (Tasten drücken sich ein, Röhre schaltet ein) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rk-kopf { transition: top .28s var(--ease); }
  .rk-kopf::before { transition: height .22s var(--ease); }
  .rk-kopf::after { transition: top .22s var(--ease); }
  .rk-nav__punkt::after { transition: transform .2s var(--ease); }
  .rk-sub > summary::before { transition: transform .2s var(--ease); }
  .rk-k { transition: background-color .15s, border-color .15s, color .15s, transform .12s var(--ease), box-shadow .12s var(--ease); }
  .rk-taste, .rk-taste__balken i { transition: transform .14s var(--ease), box-shadow .14s var(--ease), opacity .14s; }
  .rk-sub[open] > .rk-sub__feld, .rk-kopf.is-offen .rk-nav { animation: rk-einschalten .22s var(--ease); transform-origin: 50% 0; }
  @keyframes rk-einschalten { 0% { transform: scaleY(.05) scaleX(.9); filter: brightness(1.7); } 55% { transform: scaleY(1.03) scaleX(1); filter: none; } 100% { transform: none; } }
  @media (max-width: 979px) {
    .rk-sub[open] > .rk-sub__feld { animation: none; }
    .rk-kontakt { transition: transform .25s var(--ease), visibility 0s linear 0s; }
    .rk-leiste-aus .rk-kontakt, html:has(dialog[open]) .rk-kontakt { transition: transform .25s var(--ease), visibility 0s linear .25s; }
  }
}

@media print { .rk-kontakt, .rk-taste { display: none; } .rk-kopf { position: static; } }