/* === Inter Variable – globale Einbindung === */
@font-face {
 font-family: "Inter";
 src:
 local("Inter Variable"),
 local("InterVar"),
 url("../fonts/Inter-Variable.woff2") format("woff2");
 font-weight: 100 900;
 font-style: normal;
 font-display: swap;
}
/* === Styles === */
:root{--color-bg:#f5f5f5;--color-text:#111;--color-muted:#444;--color-surface:#ffffff;--color-primary:#0a66c2;--color-primary-200:#90caf9;--color-border:#cbd5e1;--gutter-desktop:20px;--gutter-mobile:16px;--header-h-desktop:38px;--header-h-mobile:32px;--header-offset:64px;--header-el-h:clamp(28px, 1.2vw + 23px, 38px);--header-icon:clamp(14px, 0.6vw + 11px, 20px);--site-header-h:calc(var(--header-el-h) * 1.7 + 1px);--section-gap:clamp(3rem, 3.5vw + 2rem, 5rem);--section-half-gap:clamp(1.5rem, 1.75vw + 1rem, 2.5rem)}
:root.dark{--color-bg:#141924;--color-text:#e6e6e6;--color-muted:#b0b8c1;--color-surface:#1c2333;--color-primary:#5b9dff;--color-primary-200:#cfe8ff;--color-border:#3a4356}
*{box-sizing:border-box}
html{height:auto;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:calc(100vh + 1px);margin:0;padding-top:var(--site-header-h);font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif;background:var(--color-bg);color:var(--color-text);line-height:1.6;overflow-x:hidden;overflow-x:clip}

.container{max-width:1100px;margin:0 auto;padding:0 clamp(16px, 0.5vw + 14px, 20px)}
.section{padding:var(--section-gap) 0;scroll-margin-top:var(--header-offset)}
.section-last{padding-bottom:0}
main{padding-bottom:2rem}
.section-last .container>:last-child{margin-bottom:0}
.section-title{margin:0 0 1rem;font-size:clamp(1.7rem, 0.8vw + 1.4rem, 2.2rem);color:var(--color-primary);font-weight:800}
.sub-title{margin:.2rem 0 .6rem;font-size:clamp(1.06rem, 0.15vw + 1rem, 1.15rem);font-weight:600}
.body-text{font-size:1rem}
.site-header{position:fixed;top:0;right:0;left:0;z-index:50;background:var(--color-bg);border-bottom:1px solid var(--color-border);-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform}
.header-inner{min-height:calc(var(--header-el-h) * 1.7)}
.brand{font-weight:800;color:var(--color-primary);text-decoration:none;font-size:calc(var(--header-el-h) * 1.2);line-height:1;display:inline-flex;align-items:center;padding:0 .75rem;border-radius:10px;background:transparent;border:0;white-space:nowrap}
.main-nav{display:flex;gap:.85rem;align-items:center;white-space:nowrap;flex-wrap:nowrap;overflow:visible;min-width:0}
.main-nav a{color:var(--color-text);text-decoration:none;padding:.20rem .45rem;border-radius:8px;font-size:1.05rem}
.btn{appearance:none;border:1px solid var(--color-primary);border-radius:10px;cursor:pointer;background:var(--color-primary);color:#fff}
.btn:focus-visible{outline:2px solid var(--color-primary-200);outline-offset:2px}
/* Admin-only navigation (flat, no dropdown) */
.admin-nav a.admin-nav-link{color:var(--color-text) !important;text-decoration:none !important;font-weight:700}
.admin-nav a.admin-nav-link:hover{color:var(--color-text) !important;text-decoration:none !important;background:transparent !important}
.admin-nav a.admin-nav-link.active{color:var(--color-primary) !important;text-decoration:none !important;opacity:1}
.theme-toggle,.menu-toggle{display:inline-flex;align-items:center;gap:.35rem;min-width:unset;width:auto}
.theme-toggle__icon,.menu-toggle__icon,.lang-toggle__icon{fill:currentColor}
@media (min-width: 1081px){
 .header-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.65rem;height:auto}
 .menu-toggle{display:none}
 .theme-toggle,.menu-toggle{height:var(--header-el-h);padding:0 .56rem}
 .theme-toggle__icon,.menu-toggle__icon,.lang-toggle__icon{width:var(--header-icon);height:var(--header-icon)}
 .brand{padding-left:0 !important}
}
@media (max-width: 1080px){
 :root{--brand-mobile-inset:6px;--header-offset:48px;--site-header-h:max(calc(var(--header-el-h) * 1.7 + 1px),calc(clamp(23px, 7vw, 38px) + 1.2rem + 1px))}
 .brand{padding:0 calc(.90rem + var(--brand-mobile-inset)) 0 0;font-size:clamp(23px, 7vw, 38px)}
 .header-inner{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:.6rem;height:auto;padding:.6rem clamp(16px, 0.5vw + 14px, 20px);position:relative}
 .theme-toggle,.menu-toggle{height:var(--header-el-h);padding:0 .48rem;margin-right:0}
 .menu-toggle{margin-right:.25rem}
 .theme-toggle__icon,.menu-toggle__icon,.lang-toggle__icon{width:var(--header-icon);height:var(--header-icon)}
 .brand{order:1;justify-self:start}
 .theme-toggle{order:4;justify-self:end}
 .menu-toggle{order:3;justify-self:end}
 .main-nav{order:5;grid-column:1 / -1;position:absolute;top:100%;left:calc(-1 * clamp(16px, 0.5vw + 14px, 20px));right:calc(-1 * clamp(16px, 0.5vw + 14px, 20px));background:var(--color-bg);border-top:1px solid var(--color-border);box-shadow:0 8px 20px rgba(0,0,0,.08);width:auto;display:none;z-index:40}
 .main-nav.open{display:block}
 .main-nav a{display:block;padding:.7rem clamp(16px, 0.5vw + 14px, 20px);border-bottom:1px solid var(--color-border)}
}
.grid{display:grid;grid-template-columns:1fr;gap:1rem}
.grid>.card:only-child{grid-column:1/-1}
.grid-2col{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:800px){.grid{grid-template-columns:repeat(3,1fr)}.grid-2col{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:14px;padding:1rem 1.1rem}
/* Der Streifen haelt keinen Platz fuer eine Bildlaufleiste frei: Die beiden
   folgenden Regeln blenden sie in jedem aktuellen Browser aus. Bis zum
   2026-09-05 stand hier ein halbes rem, das den Kasten der Galerie unter die
   Bildkante zog -- unsichtbar, aber im Abstand zum naechsten Block sichtbar. */
.gallery{position:relative}
.gallery-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,33%);gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;position:relative}
.gallery-strip::-webkit-scrollbar{display:none}
.gallery-strip img,.gallery-strip video{width:100%;height:clamp(220px, 10vw + 150px, 300px);object-fit:cover;border-radius:12px;border:1px solid var(--color-border);scroll-snap-align:start;cursor:zoom-in}
.gallery-strip img:last-child,.gallery-strip video:last-child{scroll-snap-align:end}

/* === Gallery Arrow Buttons === */
.gallery-arrow{appearance:none;border:none;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:72px;height:72px;opacity:.55;color:var(--color-primary);position:absolute;top:50%;transform:translateY(-50%);z-index:5}
.gallery-arrow svg{width:56px;height:56px;fill:currentColor}
.gallery-arrow--left{left:-24px}
.gallery-arrow--right{right:-24px}
.gallery-arrow.hidden{opacity:0;pointer-events:none}
.gallery-arrow:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:4px}
@media(max-width:600px){.gallery-arrow{width:64px;height:64px}.gallery-arrow svg{width:48px;height:48px}.gallery-arrow--left{left:-8px}.gallery-arrow--right{right:-8px}}
/* Lightbox – zentriert via Grid, dvw/dvh kompatibel, FIX: Bild an Container binden */
.lightbox{position:fixed;inset:0;display:none;z-index:9999;place-items:center;overscroll-behavior:contain}
.lightbox[aria-hidden="false"]{display:grid}
.lightbox-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.7)}

/* === Lightbox Arrow Buttons === */
.lightbox-image-wrapper{position:relative;display:flex;align-items:center;justify-content:center}
.lightbox-arrow{appearance:none;border:none;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:72px;height:72px;opacity:.55;color:var(--color-primary);position:absolute;top:50%;transform:translateY(-50%);z-index:10}
.lightbox-arrow svg{width:56px;height:56px;fill:currentColor}
.lightbox-arrow--left{left:-24px}
.lightbox-arrow--right{right:-24px}
.lightbox-arrow.hidden{opacity:0;pointer-events:none}
.lightbox-arrow:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:4px}
@media(max-width:600px){.lightbox-arrow{width:64px;height:64px}.lightbox-arrow svg{width:48px;height:48px}.lightbox-arrow--left{left:-20px}.lightbox-arrow--right{right:-20px}}

.lightbox-content{
  position: relative;
  margin: 0;
  display: inline-grid;            /* shrink-to-fit */
  gap: .5rem;
  place-items: center;
  background: var(--color-bg);
  border-radius: 16px;
  padding: clamp(.5rem, 1.2vw, 1rem);
  box-shadow: 0 18px 40px rgba(0,0,0,.5);
  inline-size: auto;               /* keine feste Breite */
  max-inline-size: min(92svw, 1200px);
  max-block-size: 85svh;
  z-index: 1;
}
.lightbox-content img,.lightbox-content video{
 display:block;
 margin-inline:auto; /* NEU: horizontal mittig */
 max-inline-size:100%; /* NEU: statt max-width:90dvw */
 max-block-size:80dvh; /* wie zuvor funktional */
 width:auto;height:auto;object-fit:contain;border-radius:10px;
}
.lightbox-content figcaption{font-size:.95rem;color:var(--color-muted)}
.site-footer{border-top:1px solid var(--color-border);background:var(--color-bg)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 var(--gutter-desktop)}
.to-top{text-decoration:none;color:var(--color-primary);font-weight:700}
.footer-privacy-link{font-size:.85rem;color:var(--color-muted);text-decoration:none !important}
.form-privacy-notice{font-size:.85rem;color:var(--color-muted);margin:0}
.form-privacy-notice a{color:var(--color-muted);text-decoration:none !important}
.contact-copy{display:flex;align-items:flex-start;gap:.5rem;font-size:.9rem}
.contact-copy input{margin-top:.25rem;width:1.1rem;height:1.1rem;accent-color:var(--color-primary)}
.contact-copy label{cursor:pointer}
.privacy-content h2{margin-top:2rem}
.privacy-content a{color:var(--color-primary);text-decoration:none !important}
.privacy-content .privacy-updated{color:var(--color-muted);font-size:.9rem;margin-bottom:1.5rem}
.privacy-list{list-style:disc;padding-left:1.5rem;margin:.5rem 0 1rem}
.privacy-list li{margin-bottom:.3rem}
.contact-form{display:grid;gap:1rem;max-width:720px;margin:0}
.form-row{display:block}
.form-row label{display:block;margin:0 0 .35rem;font-weight:600;font-size:.95rem}
.form-row input,.form-row textarea{display:block;width:100%;padding:.80rem .90rem;border:1px solid var(--color-border);border-radius:10px;background:var(--color-bg);color:var(--color-text);font-family:inherit;font-size:1rem;resize:vertical;font-feature-settings:"calt" 0}
.form-actions{display:flex;align-items:center;gap:.75rem;margin-top:.25rem}
.form-actions .btn{padding:clamp(0.6rem, 0.3vw + 0.5rem, 0.75rem) clamp(0.85rem, 0.4vw + 0.7rem, 1.05rem);font-size:clamp(0.9rem, 0.15vw + 0.85rem, 1rem)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;opacity:0}
/* Orientation tuning: keep captions visible and avoid overfilling */
@media (orientation: landscape) { .lightbox-content img,.lightbox-content video { max-block-size:75dvh; } }
@media (orientation: portrait) { .lightbox-content img,.lightbox-content video { max-block-size:85dvh; } }

/* === Mobile Fullscreen Lightbox === */
@media (max-width: 920px) {
  /* Backdrop passend zum Modus */
  .lightbox-backdrop {
    background: #fff;
  }
  :root.dark .lightbox-backdrop {
    background: #000;
  }

  /* Lightbox-Content entrahmen: kein Card-Look auf Mobile */
  .lightbox-content {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    max-inline-size: 100svw;
    max-block-size: 100svh;
    gap: 0;
  }

  /* Bild füllt den ganzen Screen */
  .lightbox-content img,
  .lightbox-content video {
    max-inline-size: 100svw;
    max-block-size: 100svh;
    border-radius: 0;
    width: 100%;
    height: auto;
  }

  /* Caption als Gradient-Overlay über dem unteren Bildrand */
  .lightbox-image-wrapper {
    position: relative;
  }

  .lightbox-content figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2.5rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: #5b9dff;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    z-index: 5;
    pointer-events: none;
  }

  /* Pfeile auf dem Bild statt ausserhalb, helles Blau für Kontrast */
  .lightbox-arrow { color: #5b9dff; }
  .lightbox-arrow--left { left: 0; }
  .lightbox-arrow--right { right: 0; }

  /* Orientation-Overrides: Bild darf den vollen Screen nutzen */
  .lightbox-content img,
  .lightbox-content video {
    max-block-size: 100svh;
  }
}

/* Safe-Area-Padding für Geräte mit Notch/Dynamic Island */
@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 920px) {
    .lightbox {
      padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    }
  }
}

.theme-toggle, .menu-toggle { border-radius: 8px; }
.theme-toggle__icon, .menu-toggle__icon, .lang-toggle__icon { color: var(--color-bg); }
/* === Section-Trennung: Linie zwischen Sections === */
main .section + .section{border-top:1px solid var(--color-border)}
/* === Header & Footer mit Surface === */
.site-header,
.site-footer {
 background: var(--color-surface);
}
/* === Kontakt-Inputs mit Surface-Hintergrund === */
#kontakt .form-row input,
#kontakt .form-row textarea {
 background: var(--color-surface);
}

/* === Basis-Komponenten mit leicht stärkerer Linienstärke === */
.card,
.form-row input,
.form-row textarea,
.content-input,
.content-textarea {
 border-width: 1.25px;
}

/* === Fokus-Indikator === */
input:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
 outline: 2px solid var(--color-primary);
 outline-offset: 2px;
}
@media (prefers-contrast: more) {
 input:focus-visible,
 textarea:focus-visible,
 button:focus-visible,
 a:focus-visible {
  outline-width: 3px;
 }
}

/* === Footer-Höhe === */
.footer-inner { min-height: var(--header-el-h); }

/* === Silbentrennung (DE) === */
p, li, blockquote {
 hyphens: auto;
 -webkit-hyphens: auto;
 -ms-hyphens: auto;
}
/* UI/Headlines bewusst ohne Trennung */
button, .btn, .brand, .section-title, .sub-title, nav a { hyphens: none; }

/* === Header-Menülinks === */
.site-header .main-nav a {
  font-weight: 700;
}
.site-header .main-nav a.nav-external-link{font-weight:400}
.site-header .main-nav a:hover {
  background: transparent;
  color: inherit;
}

/* === Easter Egg Link (unsichtbar) === */
.easter-egg-link {
  color: inherit;
  text-decoration: none;
  cursor: default;
}
.easter-egg-link:hover,
.easter-egg-link:focus {
  color: inherit;
  text-decoration: none;
  outline: none;
}

/* === Auth / Login UI === */
.nav-auth-link {
  color: var(--color-primary) !important;
}
/* === Analytics Dashboard === */

.timerange-selector{display:flex;gap:0.5rem}
.timerange-btn{padding:0.4rem 0.9rem;font-size:0.9rem;background:transparent;color:var(--color-primary);border:1px solid var(--color-primary);border-radius:8px}
.timerange-btn.active{background:var(--color-primary);color:#fff}

.analytics-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
@media(max-width:800px){.analytics-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){
  .timerange-selector{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .timerange-btn{padding:.4rem .35rem}
  .analytics-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
  .analytics-kpi-card{min-width:0;padding:1rem .5rem}
  .analytics-kpi-value--unavailable{overflow-wrap:anywhere}
}

.analytics-kpi-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.2rem 1rem}
.analytics-kpi-label{font-size:0.85rem;color:var(--color-muted);margin-bottom:0.3rem}
.analytics-kpi-value{font-size:clamp(1.8rem, 1vw + 1.4rem, 2.4rem);font-weight:800;color:var(--color-primary)}
.analytics-kpi-value--unavailable{font-size:clamp(1rem,.5vw + .85rem,1.25rem);color:var(--color-muted)}

.analytics-chart-card{padding:1rem 1.1rem;overflow:hidden;min-width:0}
.analytics-coverage{color:var(--color-muted);font-size:.78rem;font-weight:500}
.analytics-chart-wrap{position:relative;height:300px;width:100%;overflow:hidden}
.analytics-chart-wrap canvas{max-width:100%}
.analytics-chart-wrap--bar{height:280px}
.analytics-chart-wrap--doughnut{height:260px}

.analytics-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:800px){.analytics-grid-2{grid-template-columns:1fr}}
@media(max-width:800px){.analytics-chart-wrap--bar{height:250px}.analytics-chart-wrap--doughnut{height:280px}}

/* ============================================================
   Admin Dashboard – Landing Page
   ============================================================ */
.password-form{display:grid;gap:1rem;max-width:720px}
.password-form .content-input{background:var(--color-surface)}
.password-help{max-width:720px;margin:0 0 1rem;color:var(--color-muted);font-size:.9rem}
.password-status{min-height:1.6em;margin:0}
.content-history .changelog-entry{border-bottom:0}
/* Collapsible log details */
.log-details{width:100%}
.log-summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.5rem;user-select:none}
.log-summary::-webkit-details-marker{display:none}
.log-summary::before{content:'';display:inline-block;width:0;height:0;border-left:.45em solid var(--color-primary);border-top:.3em solid transparent;border-bottom:.3em solid transparent;transition:transform .2s}
.log-details[open]>.log-summary::before{transform:rotate(90deg)}
.log-details>div{margin-top:.75rem}
/* Changelog list on dashboard */
.changelog-list{list-style:none;padding:0;margin:0}
.changelog-entry{display:flex;align-items:baseline;gap:.55rem;padding:.4rem 0;border-bottom:1px solid var(--color-border);font-size:.9rem;line-height:1.5}
.changelog-entry:last-child{border-bottom:none}
/* Stacked log entry layout (line 1: meta, line 2: detail) */
.log-entry-line1{display:grid;grid-template-columns:auto auto 5.3em auto auto;align-items:baseline;gap:0;width:fit-content}
.log-col{white-space:nowrap}
.log-sep{padding:0 .4em;color:var(--color-muted);white-space:nowrap}
.log-date{font-variant-numeric:tabular-nums}
.login-status{font-weight:600}
.log-entry-line2{display:block;overflow:hidden;text-overflow:ellipsis}
.log-email{color:var(--color-primary)}
.changelog-user{color:var(--color-primary);white-space:nowrap}
.changelog-detail{display:flex;min-width:0;flex-wrap:wrap;column-gap:.35rem}
.changelog-detail__item{white-space:nowrap}
@media(max-width:600px){.changelog-entry{flex-wrap:wrap;gap:0 .55rem}.changelog-detail{flex-basis:100%}}
.login-status--success{color:#16a34a}
.login-status--denied{color:crimson;font-weight:600}
.status-denied{color:crimson;font-weight:600}
:root.dark .login-status--success{color:#4ade80}
:root.dark .login-status--denied,:root.dark .status-denied{color:#f87171}
/* ============================================================
   Content Editor – Sections & Card Accordions
   ============================================================ */
/* sr-only: visually hidden but accessible to screen readers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Section headings with divider */
.content-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin:0}
.content-header .section-title{margin-bottom:0}
/* Was rechts neben dem Titel steht, bringt keinen eigenen Aussenabstand mit;
   sonst sitzt die Zeile nicht mittig und alles darunter verrutscht. */
.content-header>*{margin:0}
.admin-greeting{font-weight:700;color:var(--color-primary)}
.content-site-selector{display:grid;grid-template-columns:repeat(2,10rem);gap:.5rem}
.content-site-btn{padding:.4rem .9rem;font-size:.9rem;background:transparent;color:var(--color-primary);border:1px solid var(--color-primary);border-radius:8px}
.content-site-btn.active{background:var(--color-primary);color:#fff}
/* Der Abstand zwischen den Bloecken einer Adminseite steht an EINER Stelle:
   als gap eines Flex-Containers, nicht als Aussenabstand der Bloecke.

   Der Unterschied ist nicht kosmetisch. Die Content-Seite haelt die
   Abschnitte BEIDER Websites im Dokument und blendet die der anderen mit
   display:none aus. Eine Nachbarschaftsregel wie .content-header +
   .content-section trifft dann den ausgeblendeten Abschnitt, und der erste
   sichtbare bekam je nach Website einen anderen Abstand. Ein gap kennt
   dieses Problem nicht: ausgeblendete Kinder zaehlen nicht mit, und es gibt
   keine sich verrechnenden Aussenabstaende.

   admin-head ist der Seitenkopf: auf allen drei Adminseiten genau eine Zeile
   mit dem Titel links und dem Nebensaechlichen rechts. Alles Weitere haengt
   als eigener Block im Stapel und bekommt damit denselben Abstand. */
.admin-stack{display:flex;flex-direction:column;gap:3rem}
.admin-stack>*{margin:0}
.admin-head{display:flex;flex-direction:column;gap:1rem}
.admin-head>*{margin:0}
.content-section{margin:0}
.content-section-title{font-size:1.15rem;font-weight:700;color:var(--color-primary);margin:0 0 .75rem}
/* Hier stand bis zum 2026-09-02 ein .content-header{align-items:flex-start}.
   Es stammte aus der Zeit vor dem Umbau des Seitenkopfs und richtete nichts
   mehr aus: Auf der Content-Seite fuellt der Website-Umschalter ab 600 Pixeln
   ohnehin seine eigene Zeile, auf der Statistikseite haengt ihn das Skript ab
   800 Pixeln ganz aus dem Kopf heraus. Geblieben war nur der Schaden -- auf
   der Admin-Seite sass "Willkommen, ..." an der Oberkante der Zeile statt in
   ihrer Mitte, rund sieben Pixel zu hoch, weil die Ueberschrift 27 und der
   Gruss 16 Pixel gross ist.

   Die Ausrichtung des Seitenkopfs steht deshalb nur noch an einer Stelle:
   align-items:center in .content-header, auf jeder Breite dieselbe. */
@media(max-width:600px){
  .content-site-selector{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .content-site-btn{padding:.4rem .35rem}
}

/* Card & Gallery accordion */
.card-accordion{margin-bottom:0}
.card-accordion-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.65rem 0;cursor:pointer;font-weight:600;font-size:.95rem;color:var(--color-text);user-select:none;list-style:none}
.card-accordion-header::-webkit-details-marker{display:none}
.card-accordion-label{display:flex;align-items:center;gap:.5rem}
.card-accordion-label::before{content:"\25B6";font-size:.75rem;color:var(--color-primary);transition:transform .15s;display:inline-block}
.card-accordion[open]>.card-accordion-header .card-accordion-label::before{transform:rotate(90deg)}
.card-accordion-header .md-toolbar{margin:0;flex-shrink:0}
.card-preview{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-muted);font-weight:400;font-size:.85rem}
.card-accordion[open] .card-preview{display:none}
.card-accordion-body{padding:0 0 .75rem;display:grid;gap:.5rem}

.content-input{display:block;width:100%;padding:.80rem .90rem;border:1px solid var(--color-border);border-radius:10px;background:var(--color-surface);color:var(--color-text);font-family:inherit;font-size:1rem;font-feature-settings:"calt" 0}
.content-input:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.content-textarea{display:block;width:100%;min-height:120px;padding:.80rem .90rem;border:1px solid var(--color-border);border-radius:10px;background:var(--color-surface);color:var(--color-text);font-family:inherit;font-size:1rem;line-height:1.6;resize:vertical;font-feature-settings:"calt" 0}
.content-textarea:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}

/* ============================================================
   Markdown Toolbar & Preview
   ============================================================ */
.md-toolbar{display:flex;gap:.35rem;margin-bottom:.4rem;flex-wrap:wrap}
.md-btn{appearance:none;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface);color:var(--color-text);padding:.3rem;min-width:2rem;font-size:.85rem;cursor:pointer;font-family:inherit;font-weight:600;line-height:1.2;display:inline-flex;align-items:center;justify-content:center}
.md-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;vertical-align:middle}


/* ============================================================
   Gallery Editor
   ============================================================ */
.gallery-editor{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem;margin-top:.25rem}
.gallery-editor-item{position:relative;border:1px solid var(--color-border);border-radius:10px;overflow:hidden;background:var(--color-surface);transition:border-color .15s,box-shadow .15s}
.gallery-editor-item.dragging{opacity:.4}
.gallery-editor-item.drop-left,.gallery-editor-item.drop-right{overflow:visible}
.gallery-editor-item.drop-left::before,.gallery-editor-item.drop-right::after{content:'';position:absolute;top:0;width:3px;height:100%;background:var(--color-primary);border-radius:2px;box-shadow:0 0 6px var(--color-primary);z-index:10}
.gallery-editor-item.drop-left::before{left:-0.5rem}
.gallery-editor-item.drop-right::after{right:-0.5rem}
.gallery-thumb-wrap{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;cursor:grab;background:var(--color-bg)}
.gallery-thumb-media{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.gallery-remove-btn{position:absolute;top:6px;right:6px;background:transparent;color:rgba(220,38,38,.65);border:0;width:28px;height:28px;padding:0;cursor:pointer;filter:drop-shadow(0 0 3px rgba(0,0,0,.5))}
.gallery-remove-btn svg{width:100%;height:100%;display:block}
.gallery-add-btn{display:flex;align-items:center;justify-content:center;min-height:120px;border:2px dashed var(--color-border);border-radius:10px;cursor:pointer;color:var(--color-muted);font-size:2rem;font-weight:300;background:transparent}
.gallery-add-btn.drop-hover,.gallery-editor.drop-hover{outline:2px dashed var(--color-primary);outline-offset:2px;border-color:var(--color-primary);color:var(--color-primary);background:rgba(0,100,220,.05)}

.gallery-uploading{position:relative;pointer-events:none}
.gallery-uploading::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center}
.upload-progress{position:absolute;bottom:0;left:0;height:3px;background:var(--color-primary);transition:width .2s;z-index:2}

/* ============================================================
   Floating Save Button
   ============================================================ */
.save-fab-wrap{position:fixed;bottom:1.5rem;right:max(1.5rem,calc((100vw - 1100px)/2 + 1.5rem));z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;pointer-events:none;opacity:0;transform:translateY(20px);transition:opacity .3s ease,transform .3s ease}
.save-fab-wrap.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.save-fab{padding:clamp(0.6rem, 0.3vw + 0.5rem, 0.75rem) clamp(0.85rem, 0.4vw + 0.7rem, 1.05rem);font-size:clamp(0.9rem, 0.15vw + 0.85rem, 1rem);box-shadow:0 4px 14px rgba(0,0,0,.25)}
.save-fab:disabled{opacity:.6;cursor:not-allowed}
.save-fab-status{font-size:.8rem;padding:.35rem .7rem;border-radius:8px;background:var(--color-surface);border:1px solid var(--color-border);box-shadow:0 2px 8px rgba(0,0,0,.12);white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity .25s ease,transform .25s ease}
.save-fab-status.show{opacity:1;transform:translateX(0)}
.save-fab-status.save-status--dirty{color:crimson}
.save-fab-status.save-status--saving{color:var(--color-primary)}
.save-fab-status.save-status--saved{color:#16a34a}
.save-fab-status.save-status--error{color:#dc2626}

/* ============================================================
   Dark mode adjustments for admin
   ============================================================ */
:root.dark .gallery-uploading::after{background:rgba(20,25,36,.7)}
:root.dark .btn{color:var(--color-bg)}
:root.dark .timerange-btn{color:var(--color-primary)}
:root.dark .timerange-btn.active{color:var(--color-bg)}
:root.dark .content-site-btn{color:var(--color-primary)}
:root.dark .content-site-btn.active{color:var(--color-bg)}
:root.dark .gallery-add-btn{color:var(--color-muted)}
:root.dark .save-fab-status.save-status--dirty{color:#f87171}
:root.dark .save-fab-status.save-status--saved{color:#4ade80}
:root.dark .save-fab-status.save-status--error{color:#f87171}

/* ============================================================
   LiftAir CTA
   ============================================================ */
.liftair-cta{display:flex;flex-direction:column;align-items:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:14px;padding:.75rem 1.5rem;text-decoration:none;color:var(--color-text);cursor:pointer;transition:border-color .2s}
.liftair-cta:hover{border-color:var(--color-muted)}
.liftair-cta__row{display:flex;align-items:center;gap:.75rem;justify-content:center}
.liftair-cta__logo{height:clamp(1.7rem,0.75vw + 1.35rem,2.15rem);width:auto;transform:translateY(2px)}
:root.dark .liftair-cta__logo{filter:invert(1)}
.liftair-cta__action{font-size:clamp(1.7rem,0.8vw + 1.4rem,2.2rem);font-weight:800;display:inline-flex;align-items:center;gap:.4rem}
.liftair-cta__bt{flex-shrink:0;width:18px;height:18px}
.liftair-cta__arrow{display:inline-block;transition:transform .2s ease}
.liftair-cta:hover .liftair-cta__arrow{transform:translateX(4px)}
.liftair-cta__hint{margin-top:.3rem;margin-bottom:0;font-size:.9rem;text-align:center;text-wrap:balance;hyphens:auto;color:var(--color-muted)}
/* Eine einzige Kachel fuer alle Fluege. Sechs stehen immer im Dokument;
   eingeklappt blendet die CSS die ueberzaehligen mit display:none aus -- sie
   kosten dann keine Hoehe, auch keine reservierte. Wie viele sichtbar sind,
   entscheidet allein die Medienabfrage: einer auf dem Telefon, drei ab 800px.
   Das Skript schaltet nur die Klasse um und muss die Bildschirmbreite nicht
   mitlesen, auch nicht beim Drehen des Geraets. */
.recent-flights{padding:1rem 1.1rem .45rem;border:1px solid var(--color-border);border-radius:14px;background:var(--color-surface)}
/* Die Kopfzeile darf nie umbrechen: Der Link behaelt seine Breite, und wenn es
   wirklich zu eng wird, kuerzt die Ueberschrift mit drei Punkten. */
.recent-flights__head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.9rem}
.recent-flights__title{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recent-flights__all{flex:0 0 auto;color:var(--color-primary);font-size:.85rem;font-weight:600;text-decoration:none;white-space:nowrap}
.recent-flights__all:focus-visible{text-decoration:underline}
/* Der negative Aussenabstand hebt den Innenabstand des ersten und des letzten
   *sichtbaren* Fluges auf -- unabhaengig davon, welcher das gerade ist. Ohne
   ihn stuende innen doppelter Rand. */
.recent-flights__list{display:grid;grid-template-columns:1fr;margin-block:-.85rem}
.recent-flight{display:flex;min-width:0;flex-direction:column;gap:.65rem;padding-block:.85rem;color:var(--color-text);text-decoration:none}
.recent-flight + .recent-flight{border-top:1px solid var(--color-border)}
.recent-flight:nth-child(n+2){display:none}
@media(min-width:800px){
  .recent-flights__list{grid-template-columns:repeat(3,minmax(0,1fr));margin-inline:-1.1rem}
  .recent-flight{padding-inline:1.1rem}
  .recent-flight + .recent-flight{border-top:0}
  .recent-flight:nth-child(n+2){display:flex}
  .recent-flight:not(:nth-child(3n+1)){border-left:1px solid var(--color-border)}
  .recent-flight:nth-child(n+4){display:none;border-top:1px solid var(--color-border)}
}
/* Muss nach der Medienabfrage stehen: gleiche Spezifitaet, der spaetere gewinnt. */
.recent-flights--all .recent-flight{display:flex}
/* Kein Hover: Die Kacheln haben sich beim Ueberfahren angehoben und ihren
   Rahmen gefaerbt, das ist weg. Mit ihm faellt der transition-Eintrag, der nur
   ihn weich machte. Die Tastaturmarkierung bleibt -- sie ist kein Effekt,
   sondern zeigt, wo man gerade steht. */
.recent-flight:focus-visible{outline:2px solid var(--color-primary-200);outline-offset:2px}
/* Drei gleich gebaute Zeilen zu je drei Spalten -- dieselbe Form wie ein
   Eintrag der Liste "Meine letzten Fluege" auf dem Telefon. minmax(0,1fr)
   statt 1fr, damit eine Spalte ihren Text abschneiden darf, statt das Raster
   auseinanderzudruecken. Hervorgehoben ist allein der Startplatz, wie in der
   Liste auch. */
.recent-flight__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.recent-flight__metric{display:flex;min-width:0;flex-direction:column}
.recent-flight__metric-label{color:var(--color-muted);font-size:.72rem}
.recent-flight__value{display:block;overflow:hidden;font-size:.9rem;text-overflow:ellipsis;white-space:nowrap}
.recent-flight__metric--takeoff .recent-flight__value{font-weight:700}
.recent-flights__status{grid-column:1/-1;margin:0;color:var(--color-muted)}
.recent-flights__toggle{display:block;width:fit-content;margin-top:.5rem;padding:.1rem 0;border:0;background:none;color:var(--color-primary);font:inherit;font-size:.8rem;font-weight:600;text-align:left;cursor:pointer}
.recent-flights__toggle[hidden]{display:none}
.recent-flights__toggle:focus-visible{outline:2px solid var(--color-primary-200);outline-offset:2px;border-radius:6px}
/* position:relative traegt den Schimmer des Ladeplatzhalters: Sein ::after
   arbeitet mit position:absolute und inset:0. Ohne positionierten Vorfahren
   bezieht sich das auf den Anfangsblock der Seite statt auf die Kachel, und
   das overflow:hidden hier schneidet es nicht ab -- es beschneidet nur
   Nachfahren, deren Bezugsrahmen innerhalb liegt. Am 2026-09-03 stand die
   Regel kurzzeitig an der Kachel selbst und fiel beim Entfernen des Pfeils
   mit weg; drei seitengrosse Farbverlaeufe waren die Folge. */
.recent-flight--loading{position:relative;overflow:hidden}
.recent-flight--loading::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--color-muted) 12%,transparent),transparent);animation:recent-flight-loading 1.4s infinite}
@keyframes recent-flight-loading{to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.recent-flight,.recent-flight--loading::after{animation:none;transition:none}}
.section.home-section{padding-top:var(--section-half-gap);padding-bottom:var(--section-half-gap)}
.section.home-section:first-child{padding-top:var(--section-gap)}
.section.home-section.section-last{padding-bottom:0}
/* Der Abstand zwischen den Bloecken einer Startseiten-Sektion steht an genau
   einer Stelle -- so wie .admin-stack im Adminbereich. Nachbarschaftsregeln
   halten eine Umstellung nicht aus: Bis zum 2026-09-05 gab .gallery + .grid
   den Karten ihren Abstand, .section-title + .liftair-cta nahm der Box ihren.
   Als die Galerie nach oben wanderte, griff beides nicht mehr -- die Karten
   klebten am Block darueber, die Box riss ein Loch von --section-gap. */
.home-section .section-title{margin-bottom:0}
.home-section .container > * + *{margin-top:1rem}
#content-ueber-mich-text{margin-bottom:0}
#content-ueber-mich-text>:last-child{margin-bottom:0}
main .section.home-section + .section.home-section{border-top:0}

/* ============================================================
   LiftAir Hero (Landing Page)
   ============================================================ */
.liftair-hero{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center}
.liftair-hero__logo{width:90%;max-width:1100px;aspect-ratio:280.25/118.71;background-color:var(--color-text);-webkit-mask-image:url(/assets/images/liftair-logo.svg);mask-image:url(/assets/images/liftair-logo.svg);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.liftair-boxes{margin-top:2rem;width:100%}
.liftair-box{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--color-text);cursor:pointer;transition:border-color .2s}
.liftair-box:hover{border-color:var(--color-muted)}
.liftair-box__row{display:flex;align-items:center;gap:.75rem;justify-content:center}
.liftair-box__logo{height:clamp(1.7rem,0.75vw + 1.35rem,2.15rem);width:auto;transform:translateY(2px)}
:root.dark .liftair-box__logo{filter:invert(1)}
.liftair-box__label{font-size:clamp(1.7rem,0.8vw + 1.4rem,2.2rem);font-weight:800;color:var(--color-primary);display:inline-flex;align-items:center;gap:.4rem}
.liftair-box__arrow{display:inline-block;transition:transform .2s ease}
.liftair-box:hover .liftair-box__arrow{transform:translateX(4px)}
.liftair-box__hint{margin-top:.5rem;margin-bottom:0;font-size:.9rem;color:var(--color-muted);text-wrap:balance}
.liftair-hero__cta{margin-top:4rem;width:100%}

/* ============================================================
   LiftAir Sub-Navigation
   ============================================================ */
.liftair-nav{display:flex;gap:.85rem;align-items:center;white-space:nowrap}
.liftair-nav a{color:var(--color-primary);text-decoration:none;padding:.20rem .45rem;border-radius:8px;font-size:1.05rem;font-weight:700}
.liftair-nav a:hover{background:transparent;color:var(--color-primary)}
.liftair-nav a.liftair-nav--active{color:var(--color-primary)}
.liftair-nav__brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--color-text);font-weight:800;font-size:calc(var(--header-el-h) * 1.2);line-height:1;padding:0 .75rem;border-radius:10px;white-space:nowrap}
.liftair-nav__brand-text{font-size:inherit;font-weight:inherit;color:inherit}
.liftair-nav__brand-logo{height:var(--header-el-h);width:auto}
:root.dark .liftair-nav__brand-logo{filter:invert(1)}
@media(max-width:1080px){
  .liftair-nav{order:5;grid-column:1/-1;position:absolute;top:100%;left:calc(-1 * clamp(16px, 0.5vw + 14px, 20px));right:calc(-1 * clamp(16px, 0.5vw + 14px, 20px));background:var(--color-bg);border-top:1px solid var(--color-border);box-shadow:0 8px 20px rgba(0,0,0,.08);width:auto;display:none;z-index:40}
  .liftair-nav.open{display:block}
  .liftair-nav a{display:block;padding:.7rem clamp(16px, 0.5vw + 14px, 20px);border-bottom:1px solid var(--color-border)}
  .liftair-nav__brand{order:1;justify-self:start;padding-left:.90rem !important}
}
@media(min-width:1081px){
  .liftair-nav__brand{padding-left:0 !important}
}

/* ============================================================
   LiftAir Product Page
   ============================================================ */
.product-hero{text-align:center;margin-bottom:2rem}
.product-hero__title{font-size:clamp(1.8rem,1vw + 1.4rem,2.6rem);font-weight:800;color:var(--color-primary);margin:0 0 .5rem}
.branded-title{display:inline-flex;align-items:center;gap:.5rem;font-size:clamp(1.8rem,1vw + 1.4rem,2.6rem);font-weight:800;margin:0 0 .5rem}
.branded-title__brand{color:var(--color-text)}
.branded-title__brand--light{font-weight:400}
.branded-title__logo{height:1em;width:auto}
:root.dark .branded-title__logo{filter:invert(1)}

/* ============================================================
   Header toggles (theme, language, menu) — uniform square buttons
   ============================================================ */
.lang-toggle__icon{font-weight:600}
.lang-toggle,.theme-toggle,.menu-toggle{display:inline-flex;align-items:center;justify-content:center;gap:0;width:var(--header-el-h);height:var(--header-el-h);min-width:unset;padding:0;border-radius:10px}
@media (min-width:1081px){
  .header-inner{grid-template-columns:auto 1fr auto auto}
  .menu-toggle{display:none}
}
@media (max-width:1080px){
  .header-inner{grid-template-columns:auto 1fr auto auto}
  /* Reihenfolge rechts: Menü, Sprache, Theme → Sprach-Knopf in der Mitte */
  .menu-toggle{order:3;justify-self:end}
  .lang-toggle{order:4;justify-self:end}
  .theme-toggle{order:5;justify-self:end}
}

.branded-title__page{color:var(--color-primary)}
.product-hero__subtitle{font-size:.95rem;color:var(--color-muted);margin:0}
.product-cta{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.5rem;padding:.75rem 1.5rem;font-size:1.05rem;font-weight:700;text-decoration:none}
.product-cta .liftair-box__arrow{display:inline-block;transition:transform .2s ease}
.product-cta:hover .liftair-box__arrow{transform:translateX(4px)}
.product-specs{width:100%;border-collapse:collapse;margin-top:1.5rem}
.product-specs th,.product-specs td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--color-border);font-size:.95rem}
.product-specs th{font-weight:600;color:var(--color-muted);width:40%}
.vario-overview{padding-bottom:var(--section-half-gap)}
.vario-overview .gallery + .grid{margin-top:1rem}
main .section.vario-specifications{border-top:0;padding-top:var(--section-half-gap)}
.vario-specifications .product-specs th,
.vario-specifications .product-specs td{padding-top:.35rem;padding-bottom:.35rem;border-bottom:0}
.vario-specifications .product-specs td p{margin:0}

/* ============================================================
   LiftAir Shop
   ============================================================ */
.shop-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem}
@media(min-width:800px){.shop-layout{grid-template-columns:1fr 1fr;align-items:stretch}}

.shop-product{display:flex;flex-direction:column;align-items:stretch;text-align:center}
.shop-product__details{padding:.75rem 1.5rem 1.25rem;text-align:center;display:flex;flex-direction:column;align-items:center}
.shop-product__title{font-size:clamp(1.7rem,0.8vw + 1.4rem,2.2rem);font-weight:800;color:var(--color-primary);margin:0 0 1.25rem}
.shop-product__branded{justify-content:center;margin:0 0 .35rem}
.shop-product__image{width:100%;border-radius:12px;border:1px solid var(--color-border);margin-bottom:1rem}
.shop-product__price{font-size:clamp(1.8rem,1vw + 1.4rem,2.6rem);font-weight:400;margin:0;line-height:1.1;color:var(--color-primary)}

.shop-quantity-sentence{font-size:1.05rem;font-weight:400;margin:.65rem 0 0}
.shop-quantity-sentence select{display:inline-block;width:auto;padding:.2rem .3rem;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface);color:var(--color-text);font-family:inherit;font-size:1rem;cursor:pointer;vertical-align:baseline}
.shop-quantity-sentence select:focus{border-color:var(--color-primary);outline:none}

.shop-product__shipping-note{font-size:.9rem;color:var(--color-muted);margin:.35rem 0 0}

.shop-layout>*,.shop-form-col,.shop-form,.shop-form .form-row,.shop-form .form-row-inline{min-width:0}
.shop-form-col{display:flex;flex-direction:column;width:100%;max-width:100%}
.shop-form{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:720px;margin:0;flex:1}
.shop-form .form-row label{display:block;margin:0 0 .35rem;font-weight:600;font-size:.95rem}
.shop-form .form-row input,.shop-form .form-row textarea,.shop-form .form-row select{display:block;width:100%;min-width:0;max-width:100%;padding:.80rem .90rem;border:1.25px solid var(--color-border);border-radius:10px;background:var(--color-surface);color:var(--color-text);font-family:inherit;font-size:1rem;resize:vertical;font-feature-settings:"calt" 0}
.shop-form .form-row-inline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media(max-width:700px){.shop-form .form-row-inline{grid-template-columns:minmax(0,1fr)}}

.shop-privacy{display:flex;align-items:flex-start;gap:.5rem;font-size:.9rem}
.shop-privacy input[type="checkbox"]{margin-top:.25rem;width:1.1rem;height:1.1rem;accent-color:var(--color-primary)}
.shop-privacy label{cursor:pointer}
.shop-privacy a{color:inherit;text-decoration:none}

.shop-status{display:block;font-size:.9rem;min-height:1.3em;font-weight:600}
#formStatus{font-weight:600}
#formStatus[data-state="error"]{color:crimson}
#formStatus[data-state="warning"]{color:#9a6700}
#formStatus[data-state="success"],#formStatus[data-state="pending"]{color:var(--color-primary)}

.shop-success{text-align:center;padding:2rem 1rem}
.shop-success__icon{font-size:clamp(3.5rem,2.5vw + 3rem,5.5rem);font-weight:900;margin-bottom:1rem;color:var(--color-primary)}
.shop-success__title{font-size:1.4rem;font-weight:700;color:var(--color-primary);margin:0 0 .5rem}
.shop-success__text{color:var(--color-muted);font-size:1rem;margin:.25rem 0}
.shop-success__text .mobile-br{display:none}
@media(max-width:480px){.shop-success__text .mobile-br{display:inline}}
.shop-success__text a{color:var(--color-primary)}

/* ============================================================
   Geburtstag: Gruss-Badge + Thermik-Konfetti
   ============================================================ */
.bday-age{font-weight:800;color:var(--color-primary)}
.bday-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:9999}
.bday-logo{position:absolute;left:0;top:0;display:inline-block;color:var(--color-primary);white-space:nowrap;line-height:1;will-change:transform,opacity}
.bday-logo__text{display:inline-block;font-weight:600;font-style:italic;letter-spacing:-.02em}
.bday-logo__glider{position:absolute;display:block;overflow:visible}
@media (prefers-reduced-motion: reduce){.bday-layer{display:none}}

/* Eine Zeile auf der Statistikseite: der Satz, ob die eigenen Besuche
   gezaehlt werden, und dahinter der Umschalter.

   Die Groesse ist .85rem -- dieselbe wie Fussnote und Kachelbeschriftung, und
   auf jeder Breite dieselbe. Sie ist so gewaehlt, dass Satz und Umschalter auf
   dem Telefon auf eine Zeile passen; darunter bleibt der Umbruch als
   Rueckfallebene fuer sehr schmale Schirme.

   Der Umschalter ist bewusst kein Knopf mehr, sondern ein Link: er fuehrt
   wirklich an eine Adresse, und der Browser gibt ihm dafuer Tastaturbedienung,
   Kontextmenue und Statuszeile. Unterstrichen wird er erst beim Ueberfahren
   und bei Tastaturfokus, damit die schmale Zeile ruhig bleibt. */
.own-visits{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;margin:0}
.own-visits__title{margin:0;font-size:.85rem;font-weight:600;color:var(--color-text)}
.own-visits--warn .own-visits__title{color:#9a6700}
.own-visits__link{font-size:.85rem;font-weight:600;color:var(--color-primary);text-decoration:none}
.own-visits__link:hover,.own-visits__link:focus-visible{text-decoration:underline}
:root.dark .own-visits--warn .own-visits__title{color:#d9a441}
:root.dark .own-visits__link{color:var(--color-primary)}

/* Statistikseite: Website-Umschalter, freie Datumswahl, Abschnitte. */
/* Ausschluss-Feld und Zeitraumwahl bilden eine Gruppe: untereinander eng,
   nach aussen gilt der Abstand des Stapels. */
.analytics-controls{display:flex;flex-direction:column;gap:1rem}
.analytics-controls>*{margin:0}
/* Zeitraum-Knoepfe und Datumsauswahl teilen sich eine Zeile. */
.analytics-timeline{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem}
.site-selector{display:flex;flex-wrap:nowrap;gap:.5rem}
.site-btn{padding:.4rem .9rem;font-size:.9rem;background:transparent;color:var(--color-primary);border:1px solid var(--color-primary);border-radius:8px}
.site-btn.active{background:var(--color-primary);color:#fff}
/* Eine Zeile, auch auf dem Telefon: keine Beschriftungen, Gedankenstrich
   statt "bis", und auf schmalen Schirmen ein kurzer Knopf.

   Die Datumsfelder sahen auf dem iPhone anders aus als in Edge, und zwar aus
   zwei Gruenden, die beide daher ruehren, dass ein <input type="date"> ein
   Bedienelement des Browsers ist und keines von uns:

   1. iOS Safari zeichnet kein Kalendersymbol ins Feld, Chromium schon. Das
      machte die Felder dort rund 24 Pixel schmaler -- und weil der Knopf den
      Rest der Zeile nimmt, wurde der dort entsprechend breiter.
   2. iOS legte fuer die Hoehe seine eigenen Masse fuer Bedienelemente an
      statt unserer Schrift. Die Felder standen dadurch zwei bis drei Pixel
      hoeher als der Knopf daneben und ragten als Einzige aus der Zeile.

   Beides steht jetzt bei uns statt beim Browser: appearance:none nimmt die
   Systemmasse weg, line-height:1.2 setzt die Texthoehe, und das Kalenderblatt
   zeichnen wir selbst als Data-URI -- einmal hell, einmal dunkel, weil ein
   SVG im background-image nicht an currentColor herankommt.

   Das eingebaute Symbol von Chromium bleibt bestehen, wird aber unsichtbar
   genau ueber unseres gelegt. Nur so geht die Auswahl dort weiter auf: Ein
   Klick in den Text eines Datumsfeldes oeffnet in Chromium keinen Kalender,
   das tut allein dieses Bedienelement. Weil es dabei absolut positioniert
   ist, zaehlt es fuer die Breite nicht mehr mit -- die Felder sind in beiden
   Browsern gleich breit.

   Die Groesse des Symbols steht an genau einer Stelle. Sie bestimmt zugleich
   den Innenabstand rechts, die Breite des unsichtbaren Bedienelements und die
   Breite des Feldes; vier Werte, die auseinanderliefen, sobald man einen davon
   anfasst.

   Die Breite setzen wir selbst, statt sie dem Browser zu ueberlassen. Chromium
   gibt seinen Datumsfeldern ein Mindestmass, das groesser ist als der Text
   darin -- bei 393 Pixeln fehlten der Zeile dadurch sieben Pixel und der Knopf
   wurde angeschnitten. 10ch tragen "31.08.2026" mit etwas Reserve und wachsen
   mit, falls Inter einmal nicht laedt und eine breitere Ersatzschrift
   einspringt. */
/* Gestreckt statt mittig: Felder und Knopf nehmen die Hoehe des Hoechsten.
   Vorher rechnete jedes fuer sich -- die Felder aus line-height und ihrem
   Innenabstand, der Knopf aus seiner eigenen Zeilenhoehe und seinem -- und
   dass sich zwei verschiedene Rechnungen auf denselben Wert treffen, waere
   Zufall gewesen. Erst standen die Felder zwei Pixel zu hoch, dann drei zu
   niedrig. Ein Stretch kennt die Frage nicht: Es gibt keine Zahl mehr, die
   auseinanderlaufen koennte, auch nicht, wenn spaeter jemand einen
   Innenabstand aendert. Nur der Gedankenstrich bleibt mittig; gestreckt
   saesse er oben. */
/* Umbrechen darf sie. Das ist das Sicherheitsnetz: Reicht der Platz einmal
   nicht, faellt "Anzeigen" auf eine eigene Zeile und nimmt dort dank flex-grow
   die volle Breite -- statt der Laenge nach angeschnitten zu werden. Es ist
   der einzige Teil dieser Zeile, der ohne eine gerechnete Zahl auskommt, und
   nach zwei danebenliegenden Schaetzungen ist er das wert. Bei 393 und 420
   Pixeln greift er nicht; dort bleibt alles einzeilig. */
.daterange{display:flex;flex-wrap:wrap;align-items:stretch;gap:.4rem;margin:0;--daterange-icon:1rem}
.daterange__dash{align-self:center;color:var(--color-muted)}
.daterange .content-input{position:relative;width:calc(10ch + var(--daterange-icon) + 1.1rem + 2px);min-width:0;flex:0 0 auto;padding:.35rem calc(var(--daterange-icon) + .7rem) .35rem .4rem;font-size:.9rem;line-height:1.2;color:var(--color-muted);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23444444' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .4rem center;background-size:var(--daterange-icon) var(--daterange-icon)}
:root.dark .daterange .content-input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b8c1' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E")}
.daterange .content-input::-webkit-calendar-picker-indicator{position:absolute;top:0;bottom:0;right:.4rem;width:var(--daterange-icon);height:auto;margin:0;padding:0;opacity:0;cursor:pointer}
/* Wird die Zeile zu eng, gibt der Knopf nach, nicht das Datum: Ein
   abgeschnittenes "02.09.202" waere ein Lesefehler, ein schmalerer Knopf nur
   enger. Er gibt dabei zuerst seinen Innenabstand her -- der schrumpft mit der
   Fensterbreite --, damit die Buchstaben so lange wie moeglich stehen
   bleiben. */
.daterange .btn{padding:.4rem clamp(.35rem,2vw,.9rem);font-size:.9rem;border-radius:8px;white-space:nowrap}
.analytics-note{margin:0;font-size:.85rem;color:var(--color-muted)}
.analytics-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--color-muted);font-size:.95rem}
:root.dark .site-btn{color:var(--color-primary)}
:root.dark .site-btn.active{color:var(--color-bg)}
@media(max-width:800px){
  .site-selector{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
}
/* Sobald die Zeitraum-Knoepfe die ganze Breite nehmen, steht die Datumszeile
   allein auf ihrer Zeile -- dann soll sie die Breite auch nutzen.

   Die Felder wachsen dabei NICHT mit. Vorher teilten sie sich mit flex:1 1 0
   allen freien Platz und wurden viel breiter, als "31.08.2026" braucht; die
   Zeile musste sich die Hoehe dann anderswo absparen. Jetzt bleiben sie
   inhaltsbreit und der Rest geht an den Knopf -- die Zeile schliesst buendig
   ab und der Knopf ist auf dem Telefon leichter zu treffen. */
@media(max-width:600px){
  .daterange{width:100%}
  .daterange .btn{flex:1 1 auto;min-width:0}
}
/* Bis 390 Pixel hinunter traegt die Datumszeile dieselbe Schrift und denselben
   Innenabstand wie auf dem Desktop. Vorher schrumpfte sie schon ab 640 Pixeln
   stufenlos mit und stand mit 26 statt 30 Pixeln Hoehe gedrueckt neben den
   Zeitraum-Knoepfen darueber.

   Erst darunter reicht die Breite wirklich nicht mehr -- dann greift die alte
   stufenlose Schrumpfung wieder und traegt die Zeile bis 320 Pixel hinunter.
   389 ist keine runde Zahl, aber die richtige: 390 ist die Breite, die halten
   muss, also darf die Regel erst genau darunter greifen. */
@media(max-width:389px){
  .daterange{gap:clamp(.15rem,1vw,.4rem);--daterange-icon:clamp(.75rem,3.3vw,1rem)}
  .daterange .content-input{font-size:clamp(.7rem,3vw,.9rem);padding:clamp(.2rem,.8vw,.35rem) calc(var(--daterange-icon) + .7rem) clamp(.2rem,.8vw,.35rem) clamp(.2rem,1.2vw,.4rem)}
  .daterange .btn{font-size:clamp(.7rem,3vw,.9rem);padding:clamp(.25rem,.9vw,.4rem) clamp(.4rem,2vw,.9rem)}
}

/* Der Abschnitt "Womit" traegt zwei Raster untereinander. Sie brauchen
   denselben Zwischenraum wie die Karten innerhalb eines Rasters -- das ist
   der einzige Abstand, den die Statistikseite noch selbst setzt. */
#analytics-content .analytics-grid-2+.analytics-grid-2{margin-top:1rem}

/* Dem Browser sagen, wie die Seite gefaerbt ist. Sonst zeichnet er seine
   eigenen Bedienelemente hell in eine dunkle Seite: Kalendersymbol,
   aufklappender Kalender, Bildlaufleisten, Auswahlfelder. */
:root{color-scheme:light}
:root.dark{color-scheme:dark}