/* ============================================================
   JET ART · Rechtsseiten
   ------------------------------------------------------------
   Impressum, Datenschutz, AGB. Eigene Seiten statt Overlays —
   so sind sie verlinkbar, druckbar und von Suchmaschinen
   erfassbar, und der Besucher verliert seine Position auf der
   Startseite nicht.

   Farben, Schriften und Masse kommen aus jetart-tokens.css.
   Hier steht nur, was diese drei Seiten zusaetzlich brauchen.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background:var(--paper);overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font-body);font-size:15px;line-height:1.55;font-weight:400;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--accent)}
ul,ol{list-style:none}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent);color:var(--paper)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--accent);color:var(--paper);font:800 12px/1 var(--font-heading);letter-spacing:.1em;text-transform:uppercase;padding:14px 18px}
.skip-link:focus{left:0}

/* Slogan-Lockup · einzige Goldstelle, wie auf der Startseite */
.slogan{font-weight:400;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.slogan .m{color:var(--accent)}
.slogan .amp{
  font-weight:800;padding:0 .18em;
  background:var(--gold-grad);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:goldFlow 7s linear infinite;
}
@keyframes goldFlow{0%{background-position:0% 50%}100%{background-position:220% 50%}}
@media (prefers-reduced-motion:reduce){.slogan .amp{animation:none;background-position:30% 50%}}
.on-dark .slogan .g{color:var(--paper)}
.on-dark .slogan .m{color:var(--a400)}

/* Kopfzeile · schlanker als auf der Startseite */
.ja-head{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:var(--rule) solid var(--divider)}
.ja-head-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x);display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:66px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;flex:none;padding:8px 0}
.brand-mark{width:30px;height:30px;object-fit:contain;flex:none}
.brand-name{font:800 15px/1 var(--font-heading);letter-spacing:.16em;text-transform:uppercase}
.brand-sub{font:400 11px/1 var(--font-body);border-left:var(--rule) solid var(--divider);padding-left:12px}
.ja-nav{display:flex;align-items:center;gap:clamp(12px,2vw,26px);font:400 12px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;flex-wrap:wrap;padding:8px 0}
.ja-nav a{white-space:nowrap}
.ja-nav a[aria-current="page"]{color:var(--accent);font-weight:600}
.btn-home{border:var(--rule) solid var(--ink);font:800 12px/1 var(--font-heading);letter-spacing:.08em;text-transform:uppercase;padding:12px 16px;display:inline-flex;align-items:center;min-height:44px}
.btn-home:hover{background:var(--ink);color:var(--paper)}
@media (max-width:760px){.brand-sub{display:none}}

/* Kopf der Seite */
.legal-head{max-width:var(--maxw);margin:0 auto;padding:clamp(32px,5vw,72px) var(--pad-x) 0}
.legal-kicker{margin:0 0 clamp(18px,2.4vw,32px);font:400 11px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--n600)}
.legal-head h1{margin:0 0 20px;font:800 clamp(34px,7vw,124px)/1.02 var(--font-heading);letter-spacing:-.03em;text-transform:uppercase}
.legal-intro{margin:0 0 clamp(28px,3.6vw,52px);max-width:70ch;font:400 clamp(15px,1.2vw,18px)/1.6 var(--font-body)}

/* Inhalt */
.legal-body{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x) clamp(52px,7vw,104px)}

/* Impressum · Kartenraster */
.legal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));border-top:var(--rule) solid var(--divider);border-left:var(--rule) solid var(--divider)}
.legal-grid > div{border-right:var(--rule) solid var(--divider);border-bottom:var(--rule) solid var(--divider);padding:clamp(20px,2.2vw,32px)}
.legal-grid h2,.legal-grid h3{margin:0 0 14px;font:800 11px/1.3 var(--font-heading);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.legal-grid p{margin:0;font:400 15px/1.7 var(--font-body)}
.legal-grid strong{font-weight:800}
.legal-grid a{text-decoration:underline}

/* Datenschutz & AGB · Abschnitte untereinander */
.legal-sections{border-top:var(--rule) solid var(--divider)}
.legal-sections h2,.legal-sections h3{margin:0;padding:clamp(22px,2.6vw,34px) 0 12px;font:800 clamp(18px,1.8vw,26px)/1.15 var(--font-heading);text-transform:uppercase;letter-spacing:-.01em}
.legal-sections p,.legal-sections li{margin:0 0 12px;max-width:78ch;font:400 15px/1.75 var(--font-body)}
.legal-sections ul,.legal-sections ol{margin:0 0 16px;padding-left:20px;list-style:disc}
.legal-sections ol{list-style:decimal}
.legal-sections li{margin-bottom:8px}
.legal-sections strong{font-weight:800}
.legal-sections a{text-decoration:underline}
.legal-sections table{width:100%;border-collapse:collapse;font:400 14px/1.6 var(--font-body);margin:0 0 18px}
.legal-sections th,.legal-sections td{text-align:left;padding:10px 12px 10px 0;border-bottom:var(--rule) solid var(--divider);vertical-align:top}
.legal-sections th{font:800 11px/1.4 var(--font-heading);text-transform:uppercase;letter-spacing:.06em}
/* Jeder Abschnitt bekommt eine Trennlinie — das Raster des Entwurfs. */
.legal-sections > section{border-bottom:var(--rule) solid var(--divider);padding-bottom:8px}
.legal-sections > section:last-child{border-bottom:0}

.legal-date{margin-top:clamp(28px,3.4vw,48px);border-top:var(--rule) solid var(--divider);padding-top:16px;font:400 11px/1.6 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--n600)}

/* Fusszeile · schmal */
.ja-foot{background:var(--ink);color:var(--paper)}
.ja-foot a{color:var(--paper)}
.ja-foot a:hover{color:var(--a400)}
.ja-foot-in{max-width:var(--maxw);margin:0 auto;padding:clamp(30px,3.6vw,52px) var(--pad-x);display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
.foot-nav{display:flex;flex-wrap:wrap;gap:18px;font:400 12px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px}
.ja-foot small{font:400 11px/1.5 var(--font-body);letter-spacing:.08em;text-transform:uppercase;opacity:.65}

@media (hover:none){
  html{-webkit-tap-highlight-color:transparent}
  .ja-nav a{display:inline-flex;align-items:center;min-height:44px}
  .ja-foot-in{padding-bottom:calc(clamp(30px,3.6vw,52px) + env(safe-area-inset-bottom))}
}

/* ── Fassung aus dem CMS ────────────────────────────────────
   Die Rechtstexte sind im Business-OS gepflegt; das Hydrations-
   Skript ersetzt damit den statischen Inhalt. Es liefert einen
   durchlaufenden Textblock, kein Raster — deshalb wird das
   Karten- bzw. Abschnittsraster abgeschaltet, sobald es greift.
   Die statische Fassung darunter bleibt als Rueckfall bestehen,
   falls das OS nicht erreichbar ist. */
.legal-grid:has(.cms-legal),
.legal-sections:has(.cms-legal){display:block;border:0}
.legal-grid:has(.cms-legal) > div,
.legal-sections:has(.cms-legal) > section{border:0;padding:0}

.cms-legal{max-width:78ch}
/* Die erste Ueberschrift wiederholt nur den Seitentitel, der als H1
   schon darueber steht. */
.cms-legal > h2:first-child{display:none}
.cms-legal h2,.cms-legal h3{
  margin:clamp(26px,3vw,40px) 0 12px;
  padding-top:clamp(18px,2.2vw,28px);
  border-top:var(--rule) solid var(--divider);
  font:800 clamp(17px,1.6vw,23px)/1.2 var(--font-heading);
  text-transform:uppercase;letter-spacing:-.01em;color:var(--ink);
}
.cms-legal h2:first-of-type,.cms-legal h3:first-of-type{border-top:0;padding-top:0;margin-top:0}
.cms-legal p,.cms-legal li{margin:0 0 12px;font:400 15px/1.75 var(--font-body);color:var(--ink)}
.cms-legal ul,.cms-legal ol{margin:0 0 16px;padding-left:20px;list-style:disc}
.cms-legal ol{list-style:decimal}
.cms-legal strong{font-weight:800}
.cms-legal a{text-decoration:underline}

/* ─────────────────────────────────────────────────────────────────
   Nachtrag 21.09.2026

   `.last-update` wurde auf den Rechtsseiten schon laenger verwendet
   (Datenschutz, AGB, Impressum), hatte hier aber keine Regel — der
   Absatz sah deshalb aus wie normaler Fliesstext, obwohl er eine
   Fussnote ist.

   `.hinweis-klein` ist neu: ein eingerueckter Nebensatz fuer Stellen,
   an denen wir eine Einschraenkung offenlegen, statt sie wegzulassen.
   Bewusst KEIN Farbkasten — es soll leiser wirken als der Haupttext,
   nicht lauter.
   ───────────────────────────────────────────────────────────────── */
.legal-sections .last-update{
  margin-top:clamp(26px,3vw,40px);
  padding-top:14px;
  border-top:var(--rule) solid var(--divider);
  font:400 13px/1.6 var(--font-body);
  color:var(--ink-muted,rgba(15,15,18,.6));
}
.legal-sections .hinweis-klein{
  margin:0 0 16px;
  padding-left:14px;
  border-left:2px solid var(--divider);
  font:400 14px/1.7 var(--font-body);
  color:var(--ink-muted,rgba(15,15,18,.68));
}