/* ============================================================
   Barrierefreiheit (WCAG 2.2 AA) – Stand 16.10.2026
   Wird als letztes Stylesheet geladen und überschreibt nur, was für
   Kontrast, Tastatur und Umbruch nötig ist.
   ============================================================ */

/* Kontrast: Pink für Schrift, Buttons, Fokusrahmen dunkler (#C8385A = 4,7:1 auf Creme,
   Weiß darauf 5,0:1). Helles Pink bleibt auf dunklen Flächen (Braun) erhalten. */
:root{--pink:#c8385a;--pink-hell:#fb788f;--pink-dark:#a92a47;--wp--preset--color--pink:#c8385a}
.mobile-menu,.scene--hero,.scene--sorten,.scene--philosophie,.is-braun,.big-cta,.job-card,
.partners,.page-eis-waffeln-smoothies .cta-locations,.page-jobs .sticky-hero,section.jobs,.site-footer{--pink:#fb788f}
.is-cream{--pink:#c8385a}

/* Buttons mit weißer Schrift immer auf dunklem Pink – auch auf braunen Flächen */
.btn--pink,.wp-block-button__link,.consent__btn--primary,.standorte-fab__btn,.job-card__btn,
.stelle-aufgaben__list li::before{--pink:#c8385a}
.btn--pink:hover,.wp-block-button__link:hover,.standorte-fab__btn:hover,.consent__btn--primary:hover{background:#a92a47;border-color:#a92a47;color:#fff}

/* Fokus sichtbar mit ausreichend Kontrast (Pink + heller Ring für dunkle Flächen) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--pink);outline-offset:3px;box-shadow:0 0 0 6px rgba(253,248,220,.9)}
.funnel__field input:focus,.funnel__textarea:focus{outline:3px solid #c8385a;outline-offset:2px}

/* Leise Texte kräftiger */
.funnel__foot{color:#6f665c}
.funnel__foot a{color:#504646;text-decoration:underline}

/* Sorten-Leiste per Tastatur erreichbar: Fokusrahmen */
.flavors__track:focus-visible{outline:3px solid var(--pink);outline-offset:4px;border-radius:12px}

/* Kleine Schalter: Mindestgröße 24 px */
.footer__consent-link{min-height:24px;padding:4px 2px}

/* Umbruch bei 320 px: lange Wörter in großen Überschriften trennen */
h1,h2,h3,.page-hero__title,.intro-prose__title,.split__title{overflow-wrap:break-word;hyphens:manual;-webkit-hyphens:manual}
@media (max-width:420px){h1 em,h2 em,h3 em{overflow-wrap:anywhere}}

/* Überschriften im Footer: Optik wie bisher h4 */
.site-footer h2.footer__h{font-size:11px;line-height:.98;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--cream);margin:0 0 22px}
.site-footer h2.footer__h a{color:inherit}

/* KI-Hinweis Szene 1 */
.scene--hero p.ki-hinweis{position:absolute;left:16px;bottom:40px;max-width:none;line-height:1.3;z-index:3;margin:0;font-size:12px;letter-spacing:.03em;color:#fdf8dc;background:rgba(58,50,50,.72);padding:4px 9px;border-radius:999px;pointer-events:none}

/* Pflichtfeld-Markierung im Bewerbungsformular */
.funnel__req{color:#a92a47;margin-left:2px}
.funnel__privacy{font-size:13px;line-height:1.5;margin:14px 0 0;color:#504646}
.funnel__privacy a{color:#504646;text-decoration:underline}
h2.eyebrow{line-height:1.4}
.funnel__req-note{display:block;margin-top:6px;font-size:12px;color:#6f665c}

/* Szenen-Punkte: Trefferfläche 24 × 24 px (WCAG 2.5.8, Touch auf dem iPad), sichtbarer Punkt bleibt 10 px */
.band-dots{gap:0;padding:4px 2px}
.band-dots a{width:24px;height:24px;background:none!important;position:relative;border-radius:50%}
.band-dots a::before{content:'';position:absolute;left:7px;top:7px;width:10px;height:10px;border-radius:50%;background:rgba(80,70,70,.3)}
.band-dots a.is-active::before{background:var(--pink)}

/* Handy: KI-Hinweis unten links neben dem Standorte-Button; Hero-Text passt unter den Header */
@media (max-width:720px){
  .scene--hero p.ki-hinweis{bottom:calc(44px + env(safe-area-inset-bottom));left:12px;font-size:10px;letter-spacing:.02em;padding:4px 8px}
  .hero__overlay{padding-bottom:calc(max(11vh,92px) + env(safe-area-inset-bottom))}
  .scene--hero .eyebrow,.hero__eyebrow{font-size:10px;letter-spacing:.14em}
  .scene--hero h1{font-size:clamp(34px,9.6vw,60px)}
  .scene--hero .hero__overlay p:not(.eyebrow):not(.hero__eyebrow){font-size:15px;line-height:1.5}
}
/* Kleine Handys (z. B. iPhone SE, 667 px hoch): Hero-Text passt komplett unter den Header */
@media (max-width:720px) and (max-height:760px){
  .scene--hero .eyebrow,.scene--hero .hero__eyebrow{display:none}
  .scene--hero h1{font-size:clamp(30px,8.6vw,44px)}
  .hero__overlay{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}
/* Desktop: Navigation ist sichtbar → „Menü“-Button rechts ausblenden (nur Handy/Tablet ≤ 1024 px) */
@media (min-width:1025px){.site-header__menu-btn{display:none}}
/* Handy/Tablet ≤ 900 px: Szene 1 randlos wie am Desktop (die allgemeine .scene-Innenabstand-Regel griff auch hier) */
@media (max-width:900px){.scene--hero{padding:0}}
/* Kein cremefarbener Balken oben: WordPress-Blockabstand (24 px) zwischen Header/Inhalt/Footer aus.
   Unterseiten behalten den bisherigen Abstand des Inhalts, damit die Heros gleich sitzen. */
.wp-site-blocks > *{margin-block-start:0}
body:not(.has-band) .wp-site-blocks > main{margin-block-start:24px}

/* Mauszeiger = Logo (Eistüte), Spitze der Tüte ist der Klickpunkt. Nur mit Maus/Trackpad, nur öffentliche Website.
   Textfelder behalten den Text-Cursor. */
@media (pointer:fine){
  body.is-website,body.is-website *{cursor:url(../img/cursor-eis.png?v=3) 14 31,auto}
  body.is-website,body.is-website *{cursor:-webkit-image-set(url(../img/cursor-eis.png?v=3) 1x,url(../img/cursor-eis@2x.png?v=3) 2x) 14 31,auto}
  body.is-website,body.is-website *{cursor:image-set(url(../img/cursor-eis.png?v=3) 1x,url(../img/cursor-eis@2x.png?v=3) 2x) 14 31,auto}
  body.is-website input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=file]),
  body.is-website textarea,body.is-website [contenteditable=true],body.is-website [contenteditable=true] *{cursor:text}
  body.is-website img.eis-fokus-an{cursor:grab}
}

/* Nur eingeloggt (lokal): WordPress-Adminleiste (32 px, Handy 46 px) liegt sonst über dem Header */
.admin-bar .site-header{top:32px}
.admin-bar .mobile-menu{top:32px}
@media (max-width:782px){.admin-bar .site-header,.admin-bar .mobile-menu{top:46px}}