/* HOCKERSTUBE — SKIZZE-SKIN
   Ruhige Alternative zum „Original"-Look: ALLES auf einem einzigen beigen Grund.
   Keine wechselnden Sektionsfarben mehr — Sektionen werden stattdessen durch eine
   handgezeichnete, kindlich-krakelige Linie getrennt. Flach, einheitlich, minimal.
   Aktiv via :root[data-skin="skizze"]; layert sich über site.css. */

/* ============================================================ EIN GRUND FÜR ALLES */
:root[data-skin="skizze"]{
  --skz-line: var(--hs-navy);
  --skz-bg:   var(--hs-sand-100);
  --color-ink-muted: var(--hs-navy-500);   /* keine grauen Schriften — Sekundärtext blau */
}

/* ============================================================ KOMPROMISSLOS FLACH */
/* Keine Schatten, kein Glow \u2014 nirgends. */
:root[data-skin="skizze"] *{ box-shadow: none !important; }
:root[data-skin="skizze"] .hero__bigsymbol{ filter: none !important; }
:root[data-skin="skizze"] .field input:focus,
:root[data-skin="skizze"] .field textarea:focus{ box-shadow: none !important; border-color: var(--accent) !important; }

/* Jede farbige Fläche → derselbe beige Grund, dieselbe Tinte */
:root[data-skin="skizze"] body{ background: var(--skz-bg); }
:root[data-skin="skizze"] .topbar{ background: var(--skz-bg); }
:root[data-skin="skizze"] .hero,
:root[data-skin="skizze"] .hero--navy,
:root[data-skin="skizze"] .hero--sky,
:root[data-skin="skizze"] .section,
:root[data-skin="skizze"] .section--sky,
:root[data-skin="skizze"] .section--sand2,
:root[data-skin="skizze"] .section--navy,
:root[data-skin="skizze"] .marquee,
:root[data-skin="skizze"] .footer{
  background: var(--skz-bg) !important;
  color: var(--color-ink) !important;
}

/* Text- & Akzentfarben zurück auf den hellen Standard holen */
:root[data-skin="skizze"] .section--navy h2,
:root[data-skin="skizze"] .section--navy h3,
:root[data-skin="skizze"] .section--navy .h2,
:root[data-skin="skizze"] .section--navy .h3,
:root[data-skin="skizze"] .hero--navy .display,
:root[data-skin="skizze"] .hero--navy .hero__sub{ color: var(--color-ink) !important; }
:root[data-skin="skizze"] .section--navy .muted{ color: var(--color-ink-muted) !important; }
:root[data-skin="skizze"] .section--navy .kicker,
:root[data-skin="skizze"] .hero--navy .kicker{ color: var(--accent) !important; }

/* ============================================================ HANDGEZEICHNETE TRENN-LINIE */
/* Eine krakelige, ungleichmäßige Linie sitzt oben in jeder Sektion und trennt sie sanft. */
:root[data-skin="skizze"] .section{ position: relative; }
:root[data-skin="skizze"] .section::before{
  content:"";
  position:absolute; top: clamp(28px, 4vw, 56px); left:0;
  width: 100%;
  height: 26px; pointer-events:none;
  background: center / 100% 100% no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M5 17 C 70 7 132 23 214 14 C 300 4 360 24 470 15 C 560 8 628 25 742 13 C 842 4 902 23 1010 15 C 1090 9 1140 21 1196 12' stroke='%23193085' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* erste Inhaltssektion: Linie sitzt direkt oben statt eingerückt durch die Marquee darüber */
:root[data-skin="skizze"] .footer{ position: relative; }
:root[data-skin="skizze"] .footer::before{
  content:""; position:absolute; top: clamp(28px,4vw,52px); left:0;
  width: 100%; height:26px; pointer-events:none;
  background: center / 100% 100% no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M5 14 C 70 24 132 6 214 15 C 300 24 360 5 470 14 C 560 22 628 6 742 16 C 842 24 902 6 1010 14 C 1090 20 1140 8 1196 16' stroke='%23193085' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Section-Header: keine Welle mehr, Nummer steht ÜBER dem Namen */
:root[data-skin="skizze"] .kicker::before{ display:none !important; }
:root[data-skin="skizze"] .kicker{ color: var(--accent); }
:root[data-skin="skizze"] .kicker:has(.no){ flex-direction: column; align-items: flex-start; gap: 3px; }
:root[data-skin="skizze"] .kicker .no{ opacity: 1; }

/* ============================================================ HANDGEMACHTE KACHELN */
/* Weiß, ohne Kontur, mit leicht krakeligen (nie 90°) Ecken — jede Kachel etwas anders,
   genau wie die handgezeichneten Linien. Sanfter Schatten hebt sie vom Beige ab. */
:root[data-skin="skizze"] .card,
:root[data-skin="skizze"] .cat,
:root[data-skin="skizze"] .menu-tile,
:root[data-skin="skizze"] .swiper__viewport,
:root[data-skin="skizze"] .section--navy .card{
  background: var(--color-surface) !important;
  border: none !important;
  box-shadow: none !important;
}
/* Krakel-Ecken entfernt — Kacheln sind schlicht rechteckig */
:root[data-skin="skizze"] .card,
:root[data-skin="skizze"] .cat,
:root[data-skin="skizze"] .menu-tile,
:root[data-skin="skizze"] .swiper__viewport{ border-radius: 0 !important; clip-path: none !important; }
:root[data-skin="skizze"] .card:nth-child(2n),
:root[data-skin="skizze"] .cat:nth-child(2n),
:root[data-skin="skizze"] .menu-tile:nth-child(2n){ clip-path: none !important; }

:root[data-skin="skizze"] .card.hoverable:hover,
:root[data-skin="skizze"] .cat:hover,
:root[data-skin="skizze"] .menu-tile:hover{
  transform: none;
  background: color-mix(in srgb, var(--hs-navy) 4%, var(--color-surface)) !important;
  box-shadow: none !important;
}

/* ============================================================ BUTTONS — schlicht rechteckig, flach, einfacher Hover */
:root[data-skin="skizze"] .btn{
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background .15s ease, color .15s ease;
}
:root[data-skin="skizze"] .btn--accent{ background: var(--accent) !important; color:#fff !important; }
:root[data-skin="skizze"] .btn--accent:hover{ background: color-mix(in srgb, var(--accent) 84%, black) !important; }
:root[data-skin="skizze"] .btn--ghost{ background: var(--hs-white) !important; color: var(--color-ink) !important; border-radius: 0 !important; }
:root[data-skin="skizze"] .btn--ghost:hover{ background: var(--color-ink) !important; color: var(--hs-sand-100) !important; }
:root[data-skin="skizze"] .btn:hover{ transform: none; box-shadow: none !important; }
:root[data-skin="skizze"] .btn:active{ transform: none; box-shadow: none !important; }

/* ============================================================ SLIDESHOW-PFEILE schlicht, flach */
:root[data-skin="skizze"] .swiper__nav{
  background: var(--hs-navy) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
:root[data-skin="skizze"] .swiper__nav--next{ border-radius: 0 !important; }
:root[data-skin="skizze"] .swiper__nav:hover{ transform: translateY(-50%) !important; background: var(--hs-navy-800) !important; }

/* Sticker & Tags: ebenfalls rechteckig, gerade */
:root[data-skin="skizze"] .tag{ border-radius: 0 !important; }
:root[data-skin="skizze"] .sticker{ border-radius: 0 !important; transform: none !important; }

/* Bild-Platzhalter überall einheitlich hell */
:root[data-skin="skizze"] .ph,
:root[data-skin="skizze"] .section--navy .ph{
  background-color: var(--hs-sand-50) !important;
  border: 1.5px dashed color-mix(in srgb, var(--hs-navy) 30%, transparent) !important;
  color: var(--color-ink-muted) !important;
  background-image: repeating-linear-gradient(45deg, transparent 0 13px, color-mix(in srgb, var(--hs-navy) 7%, transparent) 13px 14px) !important;
}
:root[data-skin="skizze"] .ph b,
:root[data-skin="skizze"] .section--navy .ph b{ color: var(--color-ink) !important; }

/* Ghost-Buttons, Sozial-Links & Co. wieder im hellen Modus */
:root[data-skin="skizze"] .section--navy .btn--ghost,
:root[data-skin="skizze"] .hero--navy .btn--ghost{
  --fg: var(--color-ink) !important; background: var(--color-surface) !important;
}
:root[data-skin="skizze"] .section--navy .btn--ghost:hover,
:root[data-skin="skizze"] .hero--navy .btn--ghost:hover{ background: var(--color-ink) !important; color: var(--hs-sand-100) !important; }
:root[data-skin="skizze"] .section--navy .social,
:root[data-skin="skizze"] .hero--navy .social,
:root[data-skin="skizze"] .footer .social{
  border-color: var(--color-ink) !important; background: var(--color-surface) !important; color: var(--color-ink) !important;
}
:root[data-skin="skizze"] .section--navy .social:hover,
:root[data-skin="skizze"] .hero--navy .social:hover,
:root[data-skin="skizze"] .footer .social:hover{ background: var(--hs-navy) !important; color: var(--hs-sand-100) !important; border-color: var(--hs-navy) !important; }

/* ============================================================ MARQUEE — ruhiges Typo-Band */
:root[data-skin="skizze"] .marquee__track span{ color: var(--color-ink) !important; }
/* Marquee-Icons sind jetzt Masken (currentColor) — sie folgen der Textfarbe
   automatisch, kein Varianten-Tausch nötig. */

/* ============================================================ FOOTER auf Beige */
:root[data-skin="skizze"] .footer a{ color: var(--hs-blue) !important; }
:root[data-skin="skizze"] .footer p,
:root[data-skin="skizze"] .footer ul a{ color: var(--color-ink) !important; opacity:.85; }
:root[data-skin="skizze"] .footer h4{ color: var(--color-ink-muted) !important; }
:root[data-skin="skizze"] .footer__bottom{ color: var(--color-ink-muted) !important; border-top-color: color-mix(in srgb, var(--hs-navy) 22%, transparent) !important; }
/* helles Sand-Logo → Navy-Logo, damit es auf Beige sichtbar bleibt */
:root[data-skin="skizze"] .footer__logo{ content: url('assets/logo/logo-stacked-navy.png'); }

/* ============================================================ KEINE GERADEN LINIEN MEHR */
/* FAQ-Trennlinien: gerade Haarlinien → dünne handgezogene Krakel-Linie */
:root[data-skin="skizze"] .faq{ border-top: none !important; }
:root[data-skin="skizze"] .faq__item{
  border-bottom: none !important;
  background: bottom center / 100% 12px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 12' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M4 7 C 84 3 150 10 244 6 C 344 2 410 10 524 6 C 636 3 700 10 824 6 C 936 3 1012 10 1124 6 C 1152 5 1176 7 1196 6' stroke='%23193085' stroke-opacity='.55' stroke-width='0.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
:root[data-skin="skizze"] .faq{
  background: top center / 100% 12px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 12' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M4 6 C 84 10 150 3 244 7 C 344 11 410 3 524 7 C 636 10 700 3 824 7 C 936 10 1012 3 1124 7 C 1152 8 1176 5 1196 7' stroke='%23193085' stroke-opacity='.55' stroke-width='0.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* FAQ-Plus schlicht quadratisch */
:root[data-skin="skizze"] .faq__q .plus{ box-shadow:none; border-radius: 0 !important; }

/* Kontakt-Infozeilen: minimalistisch — keine Trennlinien, nur Abstand */
:root[data-skin="skizze"] .info-row{
  border-bottom: none !important;
  background: none !important;
  padding: 9px 0 !important;
}
/* Platzhalter-Karte beruhigen: flacher Grund, dezenteres Raster */
:root[data-skin="skizze"] .map{ background: var(--hs-sand-50) !important; }
:root[data-skin="skizze"] .map__grid{ opacity: .28 !important; }

/* Formularfelder: randlos — weißer Grund, dezenter Fokus ohne Kontur */
:root[data-skin="skizze"] .field input,
:root[data-skin="skizze"] .field textarea{
  -webkit-appearance: none !important; appearance: none !important;
  border: none !important;
  border-radius: 0 !important;
  background-color: var(--hs-white) !important;
  background-image: none !important;
  color: var(--color-ink) !important;
}
:root[data-skin="skizze"] .field input::placeholder,
:root[data-skin="skizze"] .field textarea::placeholder{ color: var(--hs-navy-300) !important; }
:root[data-skin="skizze"] .field input:focus,
:root[data-skin="skizze"] .field textarea:focus{
  background-image: none !important;
  background-color: color-mix(in srgb, var(--hs-navy) 5%, var(--hs-white)) !important;
}

/* ============================================================ FOOTER — gerade Linie unten raus */
:root[data-skin="skizze"] .footer__bottom{
  border-top: none !important;
  position: relative;
  padding-top: calc(var(--space-6) + 8px);
  background: top center / 100% 16px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 16' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M5 9 C 86 4 150 13 244 8 C 344 3 410 14 524 8 C 636 4 700 14 824 7 C 936 4 1012 13 1124 8 C 1154 7 1178 10 1196 8' stroke='%23193085' stroke-opacity='.55' stroke-width='0.9' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ============================================================ EINHEITLICHE SCHRIFT */
/* Wenige Größen, wenige Schnitte: Hero-Titel · Sektionstitel · Subhead · Fließtext · Label. */
:root[data-skin="skizze"] .display{
  font-size: calc(clamp(1.9rem, 4vw, 3rem) * var(--type-scale)) !important;
  font-weight: 700 !important; letter-spacing: -.02em;
}
:root[data-skin="skizze"] .hero .display{ font-size: calc(clamp(2.8rem, 6.5vw, 4.8rem) * var(--type-scale)) !important; }

:root[data-skin="skizze"] .h2,
:root[data-skin="skizze"] .h3,
:root[data-skin="skizze"] .merch__title,
:root[data-skin="skizze"] .faq__q{
  font-size: calc(1.25rem * var(--type-scale)) !important; font-weight: 600 !important;
}
:root[data-skin="skizze"] .stat__num{ font-size: calc(clamp(1.9rem, 4vw, 3rem) * var(--type-scale)) !important; font-weight: 700 !important; }

:root[data-skin="skizze"] .lead,
:root[data-skin="skizze"] .hero__sub{ font-size: calc(1.1rem * var(--type-scale)) !important; font-weight: 400 !important; line-height: 1.55; }
:root[data-skin="skizze"] p,
:root[data-skin="skizze"] .muted{ font-weight: 400 !important; }

:root[data-skin="skizze"] .cat__name,
:root[data-skin="skizze"] .menu-tile__name,
:root[data-skin="skizze"] .member__name{ font-weight: 600 !important; font-size: 1rem !important; }
:root[data-skin="skizze"] .merch__price{ font-size: calc(1.25rem * var(--type-scale)) !important; font-weight: 500 !important; }

/* Alle Mono-Labels auf eine Größe & einen Schnitt */
:root[data-skin="skizze"] .kicker,
:root[data-skin="skizze"] .cat__meta,
:root[data-skin="skizze"] .menu-tile__meta,
:root[data-skin="skizze"] .card__num,
:root[data-skin="skizze"] .stat__label,
:root[data-skin="skizze"] .member__role,
:root[data-skin="skizze"] .field label,
:root[data-skin="skizze"] .info-row dt,
:root[data-skin="skizze"] .tag,
:root[data-skin="skizze"] .topbar nav a,
:root[data-skin="skizze"] .social,
:root[data-skin="skizze"] .motif{ font-size: .8rem !important; font-weight: 500 !important; }

/* ============================================================ FOOTER-ABSCHLUSS: HOCKERSTUBE in Weiß */
/* Navy-Band ganz unten mit weißem Wortzeichen. */
:root[data-skin="skizze"] .footer__icons{ display:flex; gap:14px; }
:root[data-skin="skizze"] .footer .iconbtn{
  border: none !important; background: transparent !important;
  color: var(--hs-navy) !important;
}
:root[data-skin="skizze"] .footer .iconbtn svg{ width: 28px !important; height: 28px !important; }
:root[data-skin="skizze"] .footer .iconbtn:hover{ background: transparent !important; color: var(--accent) !important; transform: translateY(-2px); }

/* Wortzeichen-Abschluss: beige (kein Navy), nur so breit wie der Inhalt, in dunklerem Beige */
:root[data-skin="skizze"] .footer__wordmark{
  background: transparent !important;
  max-width: var(--maxw) !important;
  margin: var(--space-6) auto 0 !important;
  padding-inline: clamp(20px,5vw,48px) !important;
}
:root[data-skin="skizze"] .footer__wordmark img{ filter: none !important; content: url('assets/logo/wordmark-beige.svg'); }