/* ═══════════════════════════════════════════════════════════
   Fan Point Kassel – gemeinsamer Kopf- und Fussbereich
   Wird von allen Seiten geladen. Farben aus dem JTL-Shop gemessen.
   Seitenspezifisches CSS kommt zusaetzlich dazu.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   Fan Point Kassel – One Pager
   Farben aus dem JTL-Shop gemessen (startseite_shop.png):
     #4e7214 Top-Leiste · #87b334 Header · #5f5d5d Service · #bd0214 CTA
   ═══════════════════════════════════════════════════════════ */

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

:root {
  --gruen-dunkel:#4e7214;
  --gruen:#87b334;
  --gruen-blass:#d4e8a0;
  --gruen-mittel:#6a9a1a;   /* war --green-mid auf den aelteren Seiten */
  --grau:#5f5d5d;
  --rot:#bd0214;
  --rot-hell:#e0313f;
  --dark:#111a08;
  --dark-mid:#1e2e0d;
  --weiss:#ffffff;
  --off-white:#f5f5f0;
  --grau-hell:#e8e8e0;
  --grau-mittel:#666666;    /* war --gray; NICHT --grau (#5f5d5d), anderer Wert */
  --text:#333333;
}

html { scroll-behavior:smooth; scroll-padding-top:150px; }
body { font-family:'Barlow',sans-serif; background:var(--off-white); color:var(--dark); overflow-x:hidden; }
img { max-width:100%; }
/* "hidden" muss immer gewinnen. Sonst ueberstimmt jedes display:flex
   das Attribut - so hat der Kategoriefilter der Newsseite nie etwas
   ausgeblendet, weil die Karten display:flex haben. */
[hidden] { display:none !important; }

/* ── Sprungmarke ──────────────────────────────────────────
   Erster Punkt im Seitenaufbau, aber nur sichtbar, wenn er den Fokus
   hat. Wer mit der Tastatur bedient, kommt damit am ganzen Menue vorbei
   direkt zum Inhalt – sonst muss er sich durch jeden Navigationspunkt
   hangeln. Nicht display:none, sonst waere er nicht anwaehlbar. */
.sprungmarke {
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--dark); color:#fff; padding:.9rem 1.4rem;
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:.9rem; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; border:2px solid var(--gruen);
}
.sprungmarke:focus { left:0; }
/* Das Sprungziel bekommt tabindex="-1", damit der Fokus wirklich dort
   landet. Der Rahmen darum waere aber nur Zierde. */
[id="inhalt"]:focus { outline:none; }

/* ── Kopfbereich ──────────────────────────────────────── */
.topbar { background:var(--gruen-dunkel); color:#fff; font-size:.78rem; }
.topbar-inner { max-width:1400px; margin:0 auto; padding:.45rem 2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.topbar-links, .topbar-social { display:flex; align-items:center; gap:1.4rem; }
.topbar a { color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; opacity:.92; }
.topbar a:hover { opacity:1; text-decoration:underline; }
.topbar svg { width:13px; height:13px; fill:currentColor; flex-shrink:0; }

/* Öffnungszeiten in der obersten Leiste.
   Im HTML stehen die regulaeren Zeiten als Text, oeffnungszeiten.js
   ersetzt sie durch den tatsaechlichen Stand. Das Uhrsymbol faerbt
   sich dabei - gruen wenn offen, blass rot wenn zu. Der Text sagt es
   ohnehin im Klartext, die Farbe ist also nur Zugabe und nicht die
   einzige Information. */
.topbar-zeiten { font-variant-numeric:tabular-nums; }
/* Der Text wechselt zwischen "Mo–Fr 10–18 · Sa 10–15 Uhr" und
   "Jetzt geöffnet bis 18:00 Uhr". Kein Umbruch mitten in der Angabe. */
.topbar-zeiten-text { white-space:nowrap; }
.topbar-zeiten.ist-offen svg { fill:#b6e34a; }
.topbar-zeiten.ist-zu    svg { fill:#ffc2c2; }

.kopf { background:var(--gruen); position:sticky; top:0; z-index:100; box-shadow:0 2px 14px rgba(0,0,0,.14); }
.kopf-inner { max-width:1400px; margin:0 auto; padding:.55rem 2rem; display:flex; align-items:center; gap:1.5rem; }
.logo { flex-shrink:0; display:block; }
.logo img { height:34px; width:auto; display:block; }
.hauptnav { display:flex; align-items:center; gap:.15rem; list-style:none; margin-inline:auto; }
.hauptnav a { color:#fff; font-size:.84rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; padding:.6rem .8rem; border-radius:2px; white-space:nowrap; transition:background .2s; }
.hauptnav a:hover, .hauptnav a.aktiv { background:rgba(0,0,0,.16); }

.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; margin-left:auto; }
.nav-toggle span { display:block; width:24px; height:2px; background:#fff; transition:.3s; }

.servicebar { background:var(--grau); color:#fff; font-size:.82rem; }
.servicebar-inner { max-width:1400px; margin:0 auto; padding:.55rem 2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.servicebar span { display:inline-flex; align-items:center; gap:.5rem; }
.servicebar svg { width:14px; height:14px; fill:currentColor; flex-shrink:0; }

/* ── Shop-Knopf (animiert) ────────────────────────────── */
.shop-btn {
  position:relative; flex-shrink:0;
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--rot); color:#fff; text-decoration:none;
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:1rem; letter-spacing:.09em; text-transform:uppercase;
  padding:.7rem 1.5rem; border-radius:2px; overflow:hidden;
  box-shadow:0 2px 10px rgba(189,2,20,.35);
  transition:transform .2s, box-shadow .2s, background .2s;
}
.shop-btn:hover { background:var(--rot-hell); transform:translateY(-2px); box-shadow:0 6px 20px rgba(189,2,20,.5); }
.shop-btn:active { transform:translateY(0); }
.shop-btn .pfeil { display:inline-block; transition:transform .25s; }
.shop-btn:hover .pfeil { transform:translateX(5px); }
/* Glanzstreifen, der periodisch durchlaeuft */
.shop-btn::before {
  content:''; position:absolute; top:0; left:-140%; width:55%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform:skewX(-22deg);
  animation:glanz 4.5s ease-in-out infinite;
}
@keyframes glanz { 0%,72% { left:-140%; } 92%,100% { left:190%; } }
/* Aufmerksamkeitsring */
.shop-btn::after {
  content:''; position:absolute; inset:0; border-radius:2px;
  box-shadow:0 0 0 0 rgba(189,2,20,.65);
  animation:puls 3.2s ease-out infinite;
}
@keyframes puls { 0% { box-shadow:0 0 0 0 rgba(189,2,20,.6); } 65%,100% { box-shadow:0 0 0 14px rgba(189,2,20,0); } }

/* Service-Punkte auf dem Handy: einblenden, stehen lassen, ausblenden.
   Ein Punkt belegt ein Drittel des Durchlaufs, die Bewegung ist bewusst
   klein – fuenf Pixel, kein Springen. */
@keyframes dienst {
  0%   { opacity:0; transform:translate(-50%,calc(-50% + 5px)); }
  3%   { opacity:1; transform:translate(-50%,-50%); }
  31%  { opacity:1; transform:translate(-50%,-50%); }
  34%  { opacity:0; transform:translate(-50%,calc(-50% - 5px)); }
  100% { opacity:0; transform:translate(-50%,calc(-50% + 5px)); }
}

.shop-btn-gross { font-size:1.3rem; padding:1.05rem 2.6rem; gap:.8rem; }
/* "Zum" faellt auf dem Handy weg – siehe Mobilteil unten. */
.btn-lang { }

/* Footer */
.fuss { background:#0b1404; color:rgba(255,255,255,.5); padding:3rem 0 2rem; }
.fuss-oben { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:2.5rem; padding:0 2rem 2.5rem; border-bottom:1px solid rgba(255,255,255,.08); }
.fuss-marke img { height:30px; margin-bottom:1rem; }
.fuss-marke p { font-size:.9rem; line-height:1.7; max-width:38ch; }
.fuss-kontakt { display:flex; flex-direction:column; gap:.35rem; margin-top:1rem; }
.fuss a { color:rgba(255,255,255,.55); text-decoration:none; font-size:.9rem; }
.fuss a:hover { color:var(--gruen); }
.fuss h5 { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:.85rem; letter-spacing:.15em; text-transform:uppercase; color:#fff; margin-bottom:.9rem; }
.fuss ul { list-style:none; display:flex; flex-direction:column; gap:.4rem; }
.fuss-unten { max-width:1400px; margin:1.5rem auto 0; padding:0 2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem; }
.fuss-recht { display:flex; gap:1.5rem; }

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

/* ── Schmale Schirme ──────────────────────────────────── */
@media (max-width:1000px) {
  .topbar-inner, .kopf-inner, .servicebar-inner,
  .fuss-oben, .fuss-unten { padding-left:1.25rem; padding-right:1.25rem; }
  /* Aufgeklapptes Menue. align-items:stretch ist noetig, weil die
     Desktop-Regel center vererbt - dann standen die Punkte zentriert und
     jede Trennlinie war nur so breit wie ihr Wort. */
  .hauptnav {
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--gruen-dunkel); padding:.25rem 1.25rem .75rem;
    box-shadow:0 14px 28px rgba(0,0,0,.28);
  }
  .hauptnav.offen { display:flex; }
  /* Trennlinien an den Listenpunkten, nicht an den Links: so kann die
     Hover-Flaeche mit etwas Abstand zwischen den Linien sitzen, statt
     als Balken von Linie zu Linie zu reichen. */
  .hauptnav li { display:block; }
  .hauptnav li + li { border-top:1px solid rgba(255,255,255,.12); }
  .hauptnav a {
    display:flex; align-items:center; min-height:46px; margin:.2rem 0;
    padding:0 .9rem; font-size:.95rem; border-radius:4px;
  }
  /* Einrueckung wie alle anderen - nur der Strich markiert, kein Sprung. */
  .hauptnav a.aktiv { background:none; box-shadow:inset 3px 0 0 var(--gruen); }
  .hauptnav a:hover { background:none; }
  @media (hover:hover) {
    .hauptnav a:hover { background:rgba(255,255,255,.09); }
  }
  /* Berührflächen auf mindestens 44 px bringen – Fingerbreite, nicht Mauszeiger */
  .nav-toggle { display:flex; padding:12px; min-width:44px; min-height:44px; justify-content:center; }
  .kopf { position:relative; }
  /* Der Shop-Knopf stand in einer zweiten Zeile unter dem Logo und wirkte
     dort wie ein verlorener Klotz auf dem Hellgruen. Jetzt liegt alles in
     einer Reihe: Logo links, Knopf und Menue rechts.
     Platz dafuer schafft nur Rechnen – bei 360 px Fensterbreite bleiben
     320 px Inhalt. Logo 34 px hoch ist 193 px breit, mit "Zum Shop" und
     dem 44-px-Menue kommt die Reihe auf 374 px und muss umbrechen.
     Mit 28 px Logo und nur "Shop" sind es 294 px. */
  .kopf-inner { flex-wrap:nowrap; gap:.6rem; }
  .logo img { height:28px; }
  /* NUR im Kopfbereich. Ohne .kopf davor traf diese Regel jeden
     Shop-Knopf der Seite - im Hero der Startseite wurde der grosse
     Aufruf dadurch auf .8rem geschrumpft und von margin-left:auto nach
     rechts geschoben. */
  .kopf .btn-lang { display:none; }
  /* Reihenfolge ausdruecklich setzen: im HTML steht das Menuesymbol vor
     dem Knopf, in der Reihe soll es aber ganz rechts stehen. */
  .kopf .shop-btn {
    order:1; margin-left:auto; padding:0 .95rem; min-height:44px;
    font-size:.8rem; letter-spacing:.06em; gap:.45rem;
  }
  .nav-toggle { order:2; margin-left:0; }
  /* Auf dem Handy war nur der erste Punkt zu sehen, die anderen zwei
     waren schlicht ausgeblendet. Jetzt wechseln sie sich ab, drei
     Sekunden pro Punkt. Reine CSS-Animation ohne JavaScript – so gibt es
     keinen versteckten Zustand, der haengen bleiben kann, wenn ein
     Skript nicht laedt.
     Die drei Punkte liegen uebereinander, deshalb braucht die Leiste
     eine feste Hoehe, sonst faellt sie zusammen. */
  .servicebar-inner { justify-content:center; position:relative; min-height:1.5rem; }
  .servicebar span {
    position:absolute; left:50%; top:50%; white-space:nowrap;
    opacity:0; transform:translate(-50%,-50%);
    animation:dienst 9s ease infinite;
  }
  .servicebar span:nth-child(2) { animation-delay:3s; }
  .servicebar span:nth-child(3) { animation-delay:6s; }
  .topbar-inner { justify-content:center; gap:1rem; flex-wrap:nowrap; }
  .topbar-social { display:none; }
  /* Drei Angaben passen bei 360 px nicht nebeneinander: die
     E-Mail-Adresse allein braucht rund 110 px. Sie steht im Fussbereich
     und in jedem Kontaktabschnitt, Telefon und Zeiten sind unterwegs
     wichtiger.
     ".topbar" davor ist Pflicht: ".topbar a { display:inline-flex }"
     oben ist spezifischer als ein blankes ".topbar-mail" und hat die
     Adresse sonst wieder eingeblendet - die Leiste lief dann ueber und
     machte die ganze Seite seitlich verschiebbar. */
  .topbar .topbar-mail { display:none; }
  .topbar-links { gap:1.1rem; min-width:0; max-width:100%; }
  .topbar a { white-space:nowrap; }
  /* Die Zeiten koennen lang werden ("Heute geschlossen · Montag ab
     10:00 Uhr"). Lieber am Ende kuerzen als die Leiste sprengen. */
  .topbar-zeiten { min-width:0; }
  .topbar-zeiten-text { overflow:hidden; text-overflow:ellipsis; }
  .fuss-oben { grid-template-columns:1fr; }
}

/* Tablet und schmales Desktopfenster: das Menue als schmale Liste unter
   dem Burger, nicht als Balken ueber die ganze Breite. */
@media (min-width:601px) and (max-width:1000px) {
  .hauptnav { left:auto; right:1.25rem; width:320px; border-radius:0 0 6px 6px; }
}

/* Kleine Handys: bei 320 px bleiben nur 280 px Inhalt. */
@media (max-width:380px) {
  .logo img { height:24px; }
  .kopf .shop-btn { padding:0 .75rem; font-size:.76rem; }
}


/* Wer Bewegung abgeschaltet hat, bekommt keine Animation – dann wuerde
   die globale Regel oben den Wechsel auf seinen Endzustand setzen und
   die Leiste bliebe leer. Deshalb hier zurueck in den normalen Fluss:
   alle drei Punkte sichtbar, untereinander. */
@media (max-width:1000px) and (prefers-reduced-motion: reduce) {
  .servicebar-inner { position:static; min-height:0; flex-direction:column; gap:.3rem; }
  .servicebar span { position:static; transform:none; opacity:1; animation:none; }
}