/* design.css — Apple-Design-Überarbeitung (Plan 2026-11-11)
   Wird NACH shared.css und den Seiten-Styles geladen und überschreibt nur.
   Entfernen dieser Datei = alte Optik. */

/* ═══ 1. Tokens & Kontrast ═══════════════════════════════════════════
   Jeder Text ≥ 4,5:1 auf --bg/--bg2/--bg3/--surface. --red bleibt für Flächen. */
:root{
  --text-muted:#a2a2b2;   /* vorher #7a7a8a */
  --text-dim:#8a8a9a;     /* vorher #4a4a5a (2,3:1) */
  --red-text:#ef5a5e;     /* rote SCHRIFT, ≥ 4,97:1 */
  --ease-out:cubic-bezier(.32,.72,0,1);
  --dur:300ms;
}
/* Rote Schrift → heller Rotton */
.nav-logo .name span,.footer-brand .name span,
.nav-links a:hover,.nav-links a.active,.mobile-menu a:hover,.mobile-menu a.active,
.page-hero-tag,.section-label,.modal-tag,.team-role,.alert-label,.hero-tag,.preview-link,
.kontakt-item-text a:hover,.footer-col a:hover,.modal-close:hover,.form-error,
.btn-delete,.bar-btn.primary,.page-edit-section-title,.posts-year-heading,
.btn-red-outline,.section-edit-bar span,.ueber-tab-btn.active,.fuehrung-label,
[style^="color:var(--red)"],[style*=";color:var(--red)"],[style*="; color:var(--red)"]{color:var(--red-text)!important;}
.btn-red-outline:hover,.btn-delete:hover,.bar-btn.primary:hover{color:#fff!important;}
/* Pfeil in News-Zeilen: sichtbarer */
.post-row-arrow{color:var(--red-text);opacity:.7;}
/* Kleinschrift: alles unter .75rem wird auf .75rem angehoben */
.news-type,.termin-badge,.role-badge,.btn-edit,.btn-delete,.sec-btn,.termin-month,.stat-label,
.alert-label,.page-hero-tag,.modal-tag,.filter-btn,.footer-col h5,.form-group label,
.page-edit-group label,.img-upload-section .section-lbl,.img-del-btn,.img-file-label,
.section-edit-bar span,.fuehrung-label{font-size:.75rem;}

/* ═══ 2. Fokus ══════════════════════════════════════════════════════ */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible,summary:focus-visible{
  outline:2px solid var(--red-text)!important;outline-offset:3px;
}
/* Buttons mit clip-path schneiden den Außenring ab → Innenring */
.btn-primary:focus-visible,.nav-cta:focus-visible,.kontakt-submit:focus-visible,
.btn-publish:focus-visible,.add-post-btn:focus-visible,.hero-edit-btn:focus-visible{
  outline:none!important;box-shadow:inset 0 0 0 2px #fff;
}
/* Formularfelder: deutlicher Fokus statt nur Randfarbe */
.form-group input:focus-visible,.form-group select:focus-visible,.form-group textarea:focus-visible,
.kontakt-form input:focus-visible,.kontakt-form textarea:focus-visible,
.page-edit-group input:focus-visible,.page-edit-group textarea:focus-visible{outline-offset:0;}
/* Bearbeitungsmodus behält seine gestrichelten Rahmen */
.edit-mode-active [data-editable]:focus-visible,.pc-editable:focus-visible{outline-style:dashed!important;}

/* ═══ 3. Druck-Feedback (sofort beim Drücken) ════════════════════════ */
button,.btn-primary,.btn-ghost,.nav-cta,.nav-login-btn,.filter-btn,.bar-btn,.submit-btn,
.kontakt-submit,.btn-cancel,.btn-publish,.add-post-btn,.btn-red-outline,.preview-link,
.ueber-tab-btn,.legal-tab,.hero-edit-btn,.nav-user-pill{-webkit-tap-highlight-color:transparent;}
button:active,.btn-primary:active,.btn-ghost:active,.nav-cta:active,.nav-login-btn:active,
.filter-btn:active,.bar-btn:active,.submit-btn:active,.kontakt-submit:active,.btn-cancel:active,
.btn-publish:active,.add-post-btn:active,.btn-red-outline:active,.preview-link:active,
.ueber-tab-btn:active,.legal-tab:active,.hero-edit-btn:active,.nav-user-pill:active{
  transform:scale(.97);transition:transform 100ms ease-out;
}
.news-card:active,.post-row:active,.vehicle-card:active,.team-card:active{transform:scale(.99);transition:transform 100ms ease-out;}
.mobile-menu a:active,.footer-col a:active{opacity:.6;transition:opacity 100ms ease-out;}

/* ═══ 4. Bewegung ═══════════════════════════════════════════════════
   Nur Eigenschaften animieren, die sich ändern (statt transition:all). */
.nav-login-btn,.btn-ghost,.btn-edit,.btn-delete,.filter-btn,.bar-btn,.btn-cancel,.legal-tab,
.sec-btn,.ceo-btn,.img-del-btn,.img-rot-btn,.ge-btn,.lernen-tab,.btn-view,.quiz-option{
  transition:color .18s ease-out,background-color .18s ease-out,border-color .18s ease-out,transform .1s ease-out,opacity .18s ease-out;
}
.hamburger span{transition:transform var(--dur) var(--ease-out),opacity .2s ease-out;}
/* Termin-Zeilen: gleiche Optik, aber per transform statt padding (kein Layout-Neuberechnen) */
.termin-row:hover{padding-left:0;}
.termin-row>*{transition:transform .2s var(--ease-out);}
.termin-row:hover>:not(:last-child){transform:translateX(12px);}
/* Einheitliche Kurve für Overlays & Toast */
.modal-overlay,.sub-modal-overlay,.legal-overlay,.lightbox{transition:opacity var(--dur) var(--ease-out);}
.toast,.ffb-toast{transition:transform 350ms var(--ease-out);}
.news-card .corner-line{transition:height var(--dur) var(--ease-out);}

/* ═══ 4b. Reduzierte Bewegung ═══════════════════════════════════════
   Keine Bewegung im Raum, nur kurze Überblendungen. (!important, weil später
   folgende Abschnitte eigene Übergänge setzen.) */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto!important;}
  *,*::before,*::after{animation-duration:.2s!important;animation-iteration-count:1!important;scroll-behavior:auto!important;}
  .hero-tag,.hero-title,.hero-sub,.hero-stats,[style*="fadeUp"]{animation-name:ffbFade!important;}
  .alert-dot,.admin-indicator{animation:none!important;}
  .ember,.embers{display:none!important;}
  .termin-row:hover>:not(:last-child),.post-row:hover .post-row-arrow,.preview-link:hover{transform:none!important;}
  :active{transform:none!important;}
  button:active,a:active{filter:brightness(1.15);}
  .modal-box,.sub-modal-box,.legal-box,.mobile-menu,.toast,.ffb-toast{transform:none!important;}
  *,*::before,*::after{transition-property:opacity,color,background-color,border-color!important;transition-duration:.2s!important;}
}
@keyframes ffbFade{from{opacity:0}to{opacity:1}}

/* ═══ 5. Navigation, Menü & Modals ══════════════════════════════════ */
/* Hamburger: 44×44 Tippfläche, Striche optisch an gleicher Stelle */
.hamburger{min-width:44px;min-height:44px;align-items:center;justify-content:center;margin-right:-10px;}
/* Mobilmenü: gleitet von oben (aus Richtung Hamburger) herein und auf gleichem Weg hinaus */
.mobile-menu{display:flex;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transform-origin:top right;
  transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),visibility 0s linear var(--dur);}
.mobile-menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),visibility 0s;}
/* Modals: kommen leicht von unten + Maßstab, gehen auf gleichem Weg */
.modal-box,.legal-box{transform:translateY(20px) scale(.98);transition:transform var(--dur) var(--ease-out);}
.sub-modal-box{transform:translateY(16px) scale(.98);transition:transform var(--dur) var(--ease-out);}
.modal-overlay.open .modal-box,.sub-modal-overlay.open .sub-modal-box,.legal-overlay.open .legal-box{transform:none;}
/* openModal() blendet ohne Übergang ein → Startzustand für den Eintritt */
@starting-style{
  .modal-overlay.open,.sub-modal-overlay.open{opacity:0!important;}
  .modal-overlay.open .modal-box,.sub-modal-overlay.open .sub-modal-box{transform:translateY(20px) scale(.98);}
}
/* Textlinks: größere Tippfläche, Abstand optisch gleich */
.preview-link{padding-block:14px;margin-top:calc(2rem - 14px);margin-bottom:-14px;}
.footer-col a{padding-block:6px;margin-top:-6px;margin-bottom:calc(.5rem - 6px);}
.kontakt-item-text a{display:inline-block;padding-block:10px;margin-block:-10px;}
.mobile-menu a{min-height:44px;}

/* ═══ 6. Typografie & Hero ══════════════════════════════════════════
   Buchstabenabstand nach Größe gestaffelt: groß = eng, klein = etwas weiter. */
body{font-weight:400;}
p,li{line-height:1.6;}
.page-hero-title,.section-title,.modal-title,.vehicle-id,.footer-brand .name{letter-spacing:.01em;}
.page-hero-title{line-height:1;}
.news-card h3,.team-name,.termin-info h4{letter-spacing:.01em;}
.page-hero-tag,.section-label,.modal-tag,.news-type,.termin-month,.termin-badge,.team-role,.vehicle-type,
.alert-label,.footer-col h5,.form-group label,.page-edit-group label,.hero-tag,.stat-label,
.posts-year-heading,.fuehrung-label{letter-spacing:.14em;}
/* Hero: lesbar auf Foto/Video */
.hero-title{color:rgba(255,255,255,.94);letter-spacing:0;text-shadow:0 2px 28px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.45);}
.hero-title .highlight{color:rgba(239,90,94,.97);}
.hero-tag,.hero-sub,.hero-stats{text-shadow:0 1px 12px rgba(0,0,0,.6);}
.hero-tag{color:#ff8a8d!important;text-shadow:0 1px 3px rgba(0,0,0,.8),0 2px 16px rgba(0,0,0,.7);}
.hero-sub{color:#c4c4d0;}
/* Handy: Titel darf umbrechen und wird groß genug (vorher ~26 px) */
@media (max-width:600px){
  .hero-title{font-size:clamp(2.75rem,13vw,4rem)!important;line-height:.95;max-width:100%;}
  .hero-title>span{white-space:normal!important;}
}

/* ═══ 7. Material & Tiefe ═══════════════════════════════════════════
   Navigation als schwebende Glasschicht; weicher Übergang statt harter Linie. */
nav{background:rgba(10,10,11,.72);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  border-bottom-color:transparent;box-shadow:0 1px 0 rgba(255,255,255,.05),0 10px 30px -14px rgba(0,0,0,.7);}
.mobile-menu{background:rgba(14,14,16,.9);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  border-bottom-color:transparent;box-shadow:0 18px 40px -16px rgba(0,0,0,.8);}
.admin-bar{-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);border-top-color:rgba(255,255,255,.06);}
.modal-overlay,.sub-modal-overlay,.legal-overlay{-webkit-backdrop-filter:blur(8px);}
/* Modals: Lichtkante oben + Tiefe */
.modal-box,.sub-modal-box,.legal-box{border-top-color:rgba(255,255,255,.1);box-shadow:0 30px 80px -20px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.4);}
.toast,.ffb-toast{box-shadow:0 16px 40px -12px rgba(0,0,0,.7);}

/* ═══ 8. Barrierefreiheit: Transparenz & Kontrast ═══════════════════ */
@media (prefers-reduced-transparency: reduce){
  nav,.mobile-menu,.admin-bar{background:var(--bg)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom-color:var(--border)!important;}
  .modal-overlay,.sub-modal-overlay,.legal-overlay{background:rgba(0,0,0,.95)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
}
@media (prefers-contrast: more){
  :root{--border:#5a5a66;--text-muted:var(--text);--text-dim:#b4b4c0;}
  nav{background:var(--bg)!important;border-bottom:1px solid var(--border)!important;}
}

/* ═══ 9. Korrekturen aus der Durchsicht ═════════════════════════════ */
/* Über-uns-Tabs: direkt unter der 70px-Navigation statt 10px darunter versteckt */
.ueber-tabs-bar{top:70px;}
@media (max-width:768px){.ueber-tabs-bar{top:70px;}}
/* Rechtliches-Fenster: langer Titel („Datenschutzerklärung“) passt aufs Handy, ✕ bleibt sichtbar */
.legal-header{gap:1rem;}
.legal-header>div{min-width:0;}
#legalTitle{overflow-wrap:anywhere;hyphens:auto;}
@media (max-width:600px){
  .legal-header{padding:1.5rem 1.25rem 1rem;}
  #legalTitle{font-size:clamp(1.6rem,8vw,2.5rem);}
}
/* iPhone: Eingabefelder ab 16px, sonst zoomt Safari beim Antippen hinein */
@media (max-width:768px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important;}
}

/* ═══ 10. Kleinigkeiten aus dem alten Stand ═════════════════════════ */
/* News-Liste (Handy): Datum + Uhrzeit bleiben in einer Zeile, 📷 rutscht bei Bedarf darunter */
@media (max-width:600px){
  .post-row-meta{flex-wrap:wrap;row-gap:.25rem;}
  .post-row-date{white-space:nowrap;font-size:.82rem;letter-spacing:.05em;}
}
/* Lernen: Schloss-Symbol nicht mehr ausgegraut */
.lernen-locked .lock-icon{opacity:.85;}
/* Über uns (Handy): Karten dürfen schmaler als ihr längstes Wort werden → kein seitliches Überlaufen */
@media (max-width:1100px){
  .team-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .team-card{min-width:0;overflow-wrap:anywhere;hyphens:manual;}
}
@media (max-width:600px){
  .team-card{padding:1.5rem .75rem;}
  .team-role{font-size:.75rem;letter-spacing:.03em;}
}