/*
  großartig Textilgestaltung — shared stylesheet
  Design system: DESIGN.md "Chalk & Thread" (scanned from wireframe-1c.html, corrected
  to a production type scale). Loaded on every page of the site — keep anything here
  general enough to serve Startseite, Über mich, Kontakt, Leistungen and Das Geschäft.
  Page-specific one-off rules belong in that page's own <style>, not here.
*/

/* ============ FONT ============ */
/* Self-hosted instead of loaded from fonts.googleapis.com/fonts.gstatic.com:
   loading fonts live from Google's CDN sends every visitor's IP address to
   Google before they've consented to anything, which is exactly what German
   courts (e.g. LG München I, Jan. 2022) have found unlawful without consent
   or a self-hosting fix — this is the fix. One variable-font file per family
   covers the whole weight range used on the site; the German alphabet (äöüß)
   lives in the Unicode "latin" block, no separate latin-ext file needed. */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/caveat-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Added 2026-10-12: readability fix. Caveat (handwritten script) was used
   for every text role, including body copy — DESIGN.md's "One-Hand Rule".
   Client feedback (via real site visitors, several of them older) said the
   text was hard to read, especially on mobile: a script face that reads as
   charming in a short headline becomes genuinely hard to parse at running-
   text size. Caveat stays for Display/Headline/Title (short, decorative,
   the hand-crafted brand voice); Lora now carries Subtitle/Body/Label and
   every functional UI string (nav, buttons, form fields, meta/info text) —
   see --font vs --font-body below and DESIGN.md's updated Typography section.
   Lora replaced an initial Inter pick the same day: Inter solved legibility
   but the client found it bland against Caveat's handwriting; Lora (a serif)
   keeps the literary/atelier warmth while staying far more legible than the
   script face at body size — picked from a 3-way preview (Libre Franklin /
   Nunito Sans / Lora) the client reviewed directly. */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/lora-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ DESIGN.md TOKENS ============ */
:root {
  --cinnamon: #C67139;
  --cinnamon-deep: #AD6135;
  --cinnamon-wash: rgba(198,113,57,0.13);
  --clay: #8A4F24;
  --charcoal: #201E1D;
  --sage-wash: rgba(122,138,94,0.16);
  --sage: #7A8A5E; /* Sage Thread at full opacity — same color as --sage-wash, just solid; only used where a wash background wouldn't read (the calendar legend's small dot) */
  --paper: #FDFBF7;
  --linen: #EFECE6;

  --ink-100: var(--charcoal);
  --ink-75: rgba(32,30,29,0.75);
  --ink-65: rgba(32,30,29,0.65); /* label/meta text — DESIGN.md's corrected value (was 50%, failed 4.5:1 on paper) */
  --ink-45: rgba(32,30,29,0.45);
  --ink-40: rgba(32,30,29,0.4);
  --ink-35: rgba(32,30,29,0.35);
  --ink-30: rgba(32,30,29,0.3);
  --ink-06: rgba(32,30,29,0.06);

  --r-mark: 6px;
  --r-container: 12px;
  --r-card: 14px;
  --r-pill: 999px;

  --sp-2xs: 3px;
  --sp-xs: 6px;
  --sp-sm: 9px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 18px;

  --shadow-ambient: 0 1px 3px rgba(32,30,29,0.06);
  --shadow-lift: 0 4px 14px rgba(198,113,57,0.22);

  --ease: cubic-bezier(0.4,0,0.2,1);
  --font: 'Caveat', cursive; /* Display/Headline/Title — short, decorative text */
  --font-body: 'Lora', serif; /* Subtitle/Body/Label + all functional UI text — see FONT comment above */

  /* Edge padding — grows with viewport so wide screens don't feel edge-cramped */
  --edge: clamp(20px, 5vw, 64px);

  /* Type ramp — DESIGN.md's corrected production sizes */
  --fs-display: 40px;
  --fs-headline: 26px;
  --fs-title: 21px;
  --fs-subtitle: 16px;
  --fs-body: 17px;
  --fs-label: 14px;
}

/* ============ RESET ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* overflow-x on html only — the same rule on body also forces overflow-y:auto
   there (per spec, an x/y overflow pair can't mix visible with non-visible),
   which makes body a second scroll container and silently breaks the sticky
   nav below (it starts sticking relative to body instead of the viewport). */
html { overflow-x: hidden; }

body {
  background: var(--linen);
  color: var(--ink-100);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
/* height: auto keeps images sized by their CSS width (or an aspect-ratio
   rule) rather than by the raw pixel value in their HTML height="" attribute
   — without it, the width/height attributes added for CLS stop any
   aspect-ratio/object-fit layout from scaling the image down. */
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul { list-style: none; }
svg { display: block; }

::selection { background: var(--cinnamon-wash); color: var(--charcoal); }

:focus-visible {
  outline: 2px dashed var(--clay);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--charcoal); color: var(--paper);
  padding: 12px 18px; z-index: 999; font-size: var(--fs-title); font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ============ THE PAGE CARD ============ */
.page {
  max-width: 1180px;
  margin: 0 auto;
  background: var(--paper);
  box-shadow: var(--shadow-ambient);
}
@media (min-width: 720px) {
  .page { margin: var(--sp-xl) auto; border-radius: var(--r-card); }
  /* .page no longer clips via overflow:hidden — that combination clips a
     position:sticky descendant unpredictably. The nav carries its own top
     rounding instead so the card still reads as one rounded object. */
  .site-nav { border-radius: var(--r-card) var(--r-card) 0 0; }
}

.container { max-width: 980px; margin: 0 auto; padding: 0 var(--edge); }
/* So an in-page anchor link (e.g. leistungen.html#stickerei) lands below the
   sticky nav instead of underneath it — applies site-wide, any future anchor
   target gets this for free. */
/* Longhand on purpose: .section is combined with .container on every single
   use site-wide, and a horizontal padding: 0 here would silently overwrite
   .container's padding: 0 var(--edge) since both selectors share the same
   specificity and this rule comes later in the cascade — that exact bug
   previously zeroed out all edge padding below the 980px .container cap. */
.section { padding-top: 56px; padding-bottom: 56px; scroll-margin-top: 90px; }
@media (max-width: 720px) {
  .section { padding-top: 40px; padding-bottom: 40px; }
}
.section + .section { border-top: 1.5px dashed var(--ink-30); }

p.measure { max-width: 68ch; }

h1, h2, h3, h4 { font-family: var(--font); color: var(--ink-100); font-weight: 700; }

/* ============ TYPE ROLES ============ */
/* Each role sets font-family explicitly rather than relying on inheritance
   from <body>/<h1-h4> — a role class doesn't always land on a heading tag
   (e.g. a <p class="t-title">), so the font has to follow the class, not
   the element. */
.t-display { font-size: var(--fs-display); line-height: 1.05; font-weight: 700; font-family: var(--font); }
.t-headline { font-size: var(--fs-headline); line-height: 1.1; font-weight: 700; font-family: var(--font); }
.t-title { font-size: var(--fs-title); line-height: 1.15; font-weight: 700; font-family: var(--font); }
.t-subtitle { font-size: var(--fs-subtitle); line-height: 1.15; font-weight: 700; font-family: var(--font-body); }
.t-body { font-size: var(--fs-body); line-height: 1.4; font-weight: 500; color: var(--ink-75); font-family: var(--font-body); }
.t-label { font-size: var(--fs-label); line-height: 1.3; font-weight: 500; color: var(--ink-65); font-family: var(--font-body); }

/* ============ NAV ============ */
/* The <header> wrapper is exactly as tall as .site-nav, and a sticky element
   can never stick beyond its own parent's box — with zero spare height there,
   it would just scroll away with it. display:contents removes <header> from
   the box tree (keeping its landmark role) so .site-nav's effective parent
   becomes .page, which spans the whole page and gives it real room to stick. */
header { display: contents; }

.site-nav {
  display: flex; align-items: center; gap: var(--sp-lg);
  padding: var(--sp-md) var(--edge);
  border-bottom: 1.5px solid var(--ink-35);
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
}
.brand { display: flex; align-items: center; gap: var(--sp-sm); margin-right: auto; }
.brand img { width: 34px; height: 34px; object-fit: contain; }
.brand span { font-size: var(--fs-title); font-weight: 700; font-family: var(--font); white-space: nowrap; }

/* Lora runs wider than Inter did, and five links + CTA + social icons no
   longer fit on one line at the old 22px gap/Title-size/720px breakpoint —
   it was wrapping mid-phrase, which read as broken. Fixed by trimming gap
   and link size slightly (18px, still clearly Title-weight) and moving the
   switch-to-desktop-nav breakpoint to 1220px, just past where .page hits
   its own 1180px max-width — above that point available width is constant,
   so this fits with real margin at every width the full nav ever appears
   at, not just right at the edge. Below 1220px the hamburger panel (same
   as below 720px) handles it instead. */
.nav-links { display: none; align-items: center; gap: var(--sp-md); }
.nav-links > a:not(.btn-primary) { font-size: 18px; font-weight: 600; color: var(--ink-75); transition: color 0.18s var(--ease); white-space: nowrap; }
.nav-links .social-links { gap: 10px; }
.nav-links > a:not(.btn-primary):hover { color: var(--clay); }
.nav-links > a[aria-current="page"] { color: var(--cinnamon-deep); }

/* A real, primary way to navigate the site — not provisional — so it gets
   the system's solid-stroke ("committed container") treatment, not dashed.
   The panel is absolutely positioned so opening it overlays the page instead
   of pushing content down the way an in-flow panel would. */
.nav-details { display: block; position: relative; }
.nav-details summary {
  list-style: none; cursor: pointer;
  font-size: var(--fs-subtitle); font-weight: 700; color: var(--clay);
  border: 1.5px solid var(--cinnamon); border-radius: var(--r-pill);
  padding: 6px 14px; display: inline-flex; align-items: center; gap: 6px;
  transition: background 0.18s var(--ease);
}
.nav-details summary:hover, .nav-details summary:focus-visible { background: var(--cinnamon-wash); }
.nav-details summary::-webkit-details-marker { display: none; }
.nav-details summary::after { content: '···'; letter-spacing: 2px; }
.nav-details[open] summary::after { content: '×'; }
.nav-details-panel {
  display: flex; flex-direction: column; gap: 14px;
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 110;
  min-width: 220px; max-width: calc(100vw - 2 * var(--edge));
  padding: var(--sp-lg);
  background: var(--paper);
  border: 1.5px solid var(--ink-30); border-radius: var(--r-container);
  box-shadow: var(--shadow-lift);
}
.nav-details-panel > a:not(.btn-primary) { font-size: var(--fs-title); font-weight: 600; color: var(--ink-75); }
.nav-details-panel > a[aria-current="page"] { color: var(--cinnamon-deep); }
.nav-details-panel > a:hover { color: var(--clay); }
.nav-details-panel .social-links { margin-top: var(--sp-xs); padding-top: var(--sp-md); border-top: 1px dashed var(--ink-30); }

@media (min-width: 1220px) {
  .nav-links { display: flex; }
  .nav-details { display: none; }
}

/* ============ BUTTONS ============ */
.btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-title); line-height: 1;
  border-radius: var(--r-pill); padding: 11px 22px; white-space: nowrap;
  transition: background 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease), color 0.18s var(--ease);
}
.btn-primary {
  background: var(--cinnamon); color: var(--paper); border: 1.5px solid var(--cinnamon);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--cinnamon-deep); border-color: var(--cinnamon-deep);
  box-shadow: var(--shadow-lift); transform: translateY(-1px);
}
.btn-ghost {
  background: transparent; color: var(--clay); border: 1.5px solid var(--cinnamon);
}
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--cinnamon-wash); }

.btn-primary:disabled, .btn-ghost:disabled {
  opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none;
}

.btn-row { display: flex; gap: var(--sp-md); flex-wrap: wrap; }

.nav-cta { font-size: var(--fs-body) !important; padding: 9px 18px; }

/* ============ SOCIAL LINKS ============ */
/* Hand-drawn line icons matching the site's icon language — not the platforms' brand
   marks, so a Facebook blue / Instagram gradient never breaks the Single Accent Rule. */
.social-links { display: flex; align-items: center; gap: 16px; }
.social-links a { color: var(--cinnamon-deep); transition: color 0.18s var(--ease); }
.social-links a:hover, .social-links a:focus-visible { color: var(--clay); }
.social-links svg { width: 20px; height: 20px; }

/* ============ ICONS ============ */
.icon { width: 40px; height: 40px; color: var(--clay); flex-shrink: 0; }

/* ============ PHOTO FRAME ============ */
.frame {
  border: 1.5px solid var(--ink-30); border-radius: var(--r-container);
  overflow: hidden; background: var(--paper);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame.ratio-4-5 { aspect-ratio: 4 / 5; }
.frame.ratio-3-2 { aspect-ratio: 3 / 2; }
.frame.ratio-1-1 { aspect-ratio: 1 / 1; }
.frame.ratio-2-3 { aspect-ratio: 2 / 3; }

/* ============ HATCH PLACEHOLDER ============ */
.hatch {
  border: 1.5px solid var(--ink-40); border-radius: var(--r-container);
  background-image: repeating-linear-gradient(45deg, var(--ink-06) 0 6px, transparent 6px 12px);
  background-color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: var(--sp-md);
}
.hatch span { font-size: var(--fs-label); color: var(--ink-65); max-width: 20ch; }

.avatar-hatch {
  width: 120px; height: 120px; border-radius: var(--r-pill);
  border: 1.5px solid var(--ink-40);
  background-image: repeating-linear-gradient(45deg, var(--ink-06) 0 6px, transparent 6px 12px);
  background-color: var(--paper);
  display: flex; align-items: center; justify-content: center; text-align: center;
  overflow: hidden;
}
.avatar-hatch span { font-size: var(--fs-label); color: var(--ink-65); max-width: 9ch; }
.avatar-hatch img { width: 100%; height: 100%; object-fit: cover; }

/* ============ PARTNER LOGOS (homepage, auto-scrolling brand/partner marquee) ============ */
/* Edge fade instead of a hard clip line, so tiles visually drift in/out
   rather than getting chopped off. */
.partner-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.partner-track { display: flex; width: max-content; animation: partner-scroll 28s linear infinite; }
.partner-marquee:hover .partner-track,
.partner-marquee:focus-within .partner-track { animation-play-state: paused; }
/* Two identical groups back to back: translating the whole track by exactly
   -50% (its own half-width, i.e. one group) lines group two up where group
   one started, so the loop point is invisible. */
.partner-track-group { display: flex; gap: var(--sp-lg); padding-right: var(--sp-lg); flex-shrink: 0; }
.partner-logo {
  width: 140px; height: 80px; flex: 0 0 auto;
  object-fit: contain;
  opacity: 0.55; filter: grayscale(1);
  transition: opacity 0.18s var(--ease), filter 0.18s var(--ease);
}
.partner-logo:hover { opacity: 1; filter: grayscale(0); }
@keyframes partner-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .partner-track { animation: none; } }

/* ============ CAROUSEL ============ */
/* Native scroll-snap does the sliding; assets/js/main.js drives the
   prev/next buttons and autoplay and builds one dot per slide — add or
   remove a .carousel-slide in the markup and it adapts automatically.
   Wrap any .frame in .carousel and it becomes a slideable gallery. */
.carousel .frame { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; display: flex; }
.carousel .frame::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .carousel .frame { scroll-behavior: auto; } }
.carousel-slide { flex: 0 0 100%; scroll-snap-align: start; }
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel-slide.hatch { height: 100%; border: none; border-radius: 0; }

.carousel-controls { display: flex; align-items: center; justify-content: center; gap: var(--sp-md); margin-top: var(--sp-md); }
.carousel-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border: 1.5px solid var(--cinnamon); border-radius: var(--r-pill);
  background: transparent; color: var(--clay); cursor: pointer;
  transition: background 0.18s var(--ease);
}
.carousel-btn:hover, .carousel-btn:focus-visible { background: var(--cinnamon-wash); }
.carousel-btn svg { width: 16px; height: 16px; }
.carousel-dots { display: flex; align-items: center; gap: 8px; }
.carousel-dot {
  width: 8px; height: 8px; padding: 0; border-radius: var(--r-pill);
  border: 1.5px solid var(--cinnamon); background: transparent; cursor: pointer;
  transition: background 0.1s var(--ease);
}
.carousel-dot[aria-current="true"] { background: var(--cinnamon); }

/* ============ TAG CHIP ============ */
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-size: var(--fs-label); font-weight: 500; color: var(--clay);
  border-radius: var(--r-pill); padding: 4px 12px;
  background: var(--cinnamon-wash);
}

/* ============ PULL-QUOTE ============ */
.quote { font-size: var(--fs-headline); line-height: 1.25; color: var(--charcoal); margin: 6px 0 16px; }
.quote-attr { font-size: var(--fs-subtitle); color: var(--ink-65); }

/* ============ CTA BAND (centered closing call-to-action, reused across pages) ============ */
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: 14px; }
.cta-band p { margin: 0 auto 28px; }
.cta-band .btn-row { justify-content: center; }

/* ============ TIMELINE ============ */
.timeline { display: flex; flex-direction: column; }
.timeline-row {
  display: grid; grid-template-columns: minmax(84px, max-content) 1fr; gap: var(--sp-lg);
  padding: 24px 0; border-top: 1.5px dashed var(--ink-30);
}
.timeline-row:last-child { border-bottom: 1.5px dashed var(--ink-30); }
.timeline-year { font-size: var(--fs-headline); font-weight: 700; color: var(--cinnamon-deep); white-space: nowrap; }
.timeline-row p { color: var(--ink-75); font-size: var(--fs-body); }
.timeline-row h3 { margin-bottom: 4px; }

/* ============ COURSE LIST (Nähkurse / Workshops) ============ */
.course-list { display: flex; flex-direction: column; }
.course-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-lg);
  flex-wrap: wrap; padding: 28px 0; border-top: 1.5px dashed var(--ink-30);
}
.course-row:last-child { border-bottom: 1.5px dashed var(--ink-30); }
.course-row h3 { margin-bottom: 6px; }
.course-meta { font-size: var(--fs-subtitle); font-weight: 700; color: var(--cinnamon-deep); margin-bottom: 8px; }
.course-meta::before { content: "◆ "; font-size: 0.7em; }
.course-row p { color: var(--ink-75); font-size: var(--fs-body); max-width: 52ch; }
.course-row-text { flex: 1 1 320px; }

/* ============ COURSE CARD GRID (Nähkurse-Katalog) ============ */
.course-card-grid { display: grid; gap: var(--sp-xl); grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .course-card-grid { grid-template-columns: 1fr 1fr; }
}
.course-card {
  border: 1.5px solid var(--ink-30); border-radius: var(--r-card);
  overflow: hidden; background: var(--paper); display: flex; flex-direction: column;
}
.course-card-photo { aspect-ratio: 3 / 2; border-radius: 0; border: none; border-bottom: 1.5px solid var(--ink-30); }
img.course-card-photo { width: 100%; object-fit: cover; }
.course-card-body { padding: var(--sp-lg); display: flex; flex-direction: column; flex: 1; }
.course-card-body .info-list { margin: 12px 0 16px; }
.course-card-body .btn-primary { margin-top: auto; align-self: flex-start; }

/* ============ KURSKALENDER ROW (reused for the Auf-Anfrage list and the calendar's agenda) ============ */
.kurskalender-group + .kurskalender-group { margin-top: 28px; }
.kurskalender-list { display: flex; flex-direction: column; margin-top: 10px; }
.kurskalender-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-md);
  padding: 14px 0; border-top: 1px dashed var(--ink-30);
}
.kurskalender-row:last-child { border-bottom: 1px dashed var(--ink-30); }
.kurskalender-date { flex: 0 0 auto; min-width: 100px; font-weight: 700; font-size: var(--fs-subtitle); color: var(--cinnamon-deep); }
.kurskalender-info { flex: 1 1 200px; }
.kurskalender-info h3 { margin-bottom: 2px; }
.kurskalender-cat { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.icon-sm { width: 18px; height: 18px; color: var(--clay); flex-shrink: 0; }

/* ============ KALENDER (real month calendar — Kurskalender's main view) ============ */
/* Cell wash colors are DESIGN.md's own Weekly Schedule Cell semantics:
   Cinnamon = regelmäßiger Wochentag-Kurs, Sage = Samstag-/Wochenend-Workshop.
   No new hues. Course names live in .kalender-cell-label above 640px; below
   that they're hidden (cells become plain color-coded dots) and the same
   data reappears as readable rows in .kalender-agenda underneath. */
.kalender-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); margin-bottom: 16px; }
.kalender-month { min-width: 10ch; text-align: center; }
.kalender-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; margin-bottom: 6px; }
.kalender-weekdays span { font-size: var(--fs-label); color: var(--ink-65); }
.kalender-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.kalender-cell {
  aspect-ratio: 1; border: 1.5px solid var(--ink-30); border-radius: var(--r-container);
  padding: 6px; display: flex; flex-direction: column; gap: 4px; background: var(--paper); overflow: hidden;
}
.kalender-cell.is-outside { border-style: dashed; opacity: .35; }
.kalender-cell.is-regular { background: var(--cinnamon-wash); }
.kalender-cell.is-workshop { background: var(--sage-wash); }
.kalender-cell.is-past { opacity: .5; }
.kalender-cell.is-today { border-color: var(--cinnamon); border-width: 2px; }
.kalender-daynum { font-weight: 700; font-size: var(--fs-subtitle); }
.kalender-cell-label {
  font-size: var(--fs-label); color: var(--ink-75); line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kalender-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font-size: var(--fs-label); color: var(--ink-65); align-items: center; }
.kalender-dot, .kalender-today-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.kalender-dot.is-regular { background: var(--cinnamon); }
.kalender-dot.is-workshop { background: var(--sage); }
.kalender-today-dot { border: 2px solid var(--cinnamon); }
.kalender-agenda { margin-top: 20px; }
@media (max-width: 640px) {
  .kalender-cell-label { display: none; }
  .kalender-cell { padding: 4px; gap: 2px; }
}

/* ============ INFO LIST (address / hours / phone as label-value rows) ============ */
.info-list { display: flex; flex-direction: column; }
.info-row {
  display: flex; justify-content: space-between; gap: var(--sp-md);
  padding: 13px 0; border-top: 1px dashed var(--ink-30); font-size: var(--fs-body);
}
.info-row:last-child { border-bottom: 1px dashed var(--ink-30); }
.info-row dt { font-weight: 700; color: var(--ink-100); }
.info-row dd { color: var(--ink-75); text-align: right; }
.info-row a:hover { color: var(--clay); }

/* ============ MAP CARD (placeholder pending real map integration) ============ */
.map-card {
  border: 1.5px dashed var(--ink-40); border-radius: var(--r-container);
  background-image: repeating-linear-gradient(45deg, var(--ink-06) 0 6px, transparent 6px 12px);
  background-color: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 8px; padding: var(--sp-xl); min-height: 220px;
}
.map-card svg { width: 32px; height: 32px; color: var(--clay); }
.map-card strong { font-size: var(--fs-title); }
.map-card span { font-size: var(--fs-label); color: var(--ink-65); max-width: 30ch; }

/* ============ FORM ============ */
/* Honeypot: a field real visitors never see or fill (off-screen, not display:none
   — some bots skip display:none fields but still auto-fill this). */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-lg); }
.form-field label { font-size: var(--fs-subtitle); font-weight: 700; color: var(--ink-100); }
.form-field .req { color: var(--cinnamon-deep); }
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--ink-100);
  background: var(--paper); border: 1.5px solid var(--ink-30); border-radius: var(--r-container);
  padding: 11px 14px; transition: border-color 0.18s var(--ease);
  width: 100%;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--ink-45); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--cinnamon); outline: none; }
.form-field textarea { resize: vertical; min-height: 140px; line-height: 1.4; }
.form-field select {
  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='%23201E1D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
  padding-right: 40px;
}

.form-checkbox { display: flex; align-items: flex-start; gap: 10px; margin-bottom: var(--sp-lg); }
.form-checkbox input[type="checkbox"] { accent-color: var(--cinnamon); width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.form-checkbox label { font-size: var(--fs-label); color: var(--ink-75); }
.form-checkbox a { color: var(--clay); border-bottom: 1px dashed var(--clay); }

.form-note { font-size: var(--fs-label); color: var(--ink-65); margin-top: var(--sp-sm); }

.form-success,
.form-error {
  border: 1.5px dashed var(--ink-35); border-radius: var(--r-container);
  padding: var(--sp-xl); text-align: center;
}
.form-success svg,
.form-error svg { width: 32px; height: 32px; color: var(--clay); margin: 0 auto 12px; }

/* ============ FOOTER ============ */
.site-footer { padding: 40px var(--edge) var(--sp-xl); }
.footer-top {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px;
  padding-bottom: var(--sp-lg); border-bottom: 1.5px dashed var(--ink-30);
}
.footer-brand { display: flex; align-items: center; gap: var(--sp-sm); }
.footer-brand img { width: 40px; height: 40px; object-fit: contain; }
.footer-brand span { font-size: var(--fs-headline); font-weight: 700; font-family: var(--font); }
.footer-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-nav a { font-size: var(--fs-body); color: var(--ink-75); }
.footer-nav a:hover { color: var(--clay); }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { font-size: var(--fs-body); color: var(--ink-75); }
.footer-links a:hover { color: var(--clay); }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  margin-top: var(--sp-md); font-size: var(--fs-label); color: var(--ink-65);
}

/* ============ FLOATING WHATSAPP BUTTON ============ */
/* Pinned to the viewport, not the .page card, so it stays put through scroll on every page. */
.whatsapp-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 200;
  width: 56px; height: 56px; border-radius: var(--r-pill);
  background: var(--cinnamon); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lift);
  transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}
.whatsapp-float:hover, .whatsapp-float:focus-visible {
  background: var(--cinnamon-deep); transform: translateY(-2px) scale(1.04);
}
.whatsapp-float svg { width: 28px; height: 28px; }
@media (max-width: 480px) {
  .whatsapp-float { right: 14px; bottom: 14px; width: 52px; height: 52px; }
  .whatsapp-float svg { width: 26px; height: 26px; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}