/* ==========================================================================
   Katzenbetreuung Borken — Design-System (Rebrand nach Vorgabe: Terrakotta/Salbei/
   Anthrazit auf Cremeweiss, Quicksand fuer Headlines, Plus Jakarta Sans fuer
   Fliesstext, grosszuegige Rundungen, sanfte Uebergaenge). Bewusst ohne
   Build-Schritt (kein Tailwind) - Variablennamen wie --font-serif/--color-rose
   sind historisch gewachsen und halten jetzt andere Werte, um nicht alle
   Aufrufstellen umbenennen zu muessen.

   Leitgedanke: echte Fotografie statt Icon-Illustrationen, ein wiederkehrendes
   "Photo-Stack"-Motiv (organisch gerundetes Foto mit farbigem Versatzblock
   dahinter) als eigenstaendige visuelle Handschrift.
   ========================================================================== */

:root {
  /* -- Farben (Vorgabe: Terrakotta/Salbei/Anthrazit auf Cremeweiss) -- */
  --color-cream: #FAFAF7;
  --color-cream-deep: #F3F1EA;
  --color-cream-white: #FFFFFF;
  --color-rose: #F3D9D0;
  --color-rose-soft: #F8E8E2;
  --color-rose-deep: #E07A5F;
  --color-sage: #9FC4AF;
  --color-sage-deep: #81B29A;
  --color-sage-soft: #E3F0E9;
  --color-cocoa: #2F3E46;
  --color-cocoa-soft: #5B6B72;
  --color-cocoa-faint: #8D9BA1;
  --color-cocoa-900: #1E2A30;
  --color-white: #FFFFFF;
  --color-border: rgba(47, 62, 70, 0.12);
  --color-success: #5E8A5A;
  --color-success-bg: #EAF2E6;
  --color-danger: #B9594F;
  --color-danger-bg: #FBEAE8;
  --color-warn: #B8873D;
  --color-warn-bg: #FBF1E0;

  --color-night: var(--color-cocoa-900);
  --color-night-deep: #16201C;
  --color-amber: var(--color-rose-deep);
  --color-amber-deep: #C45F45;
  --gradient-cta: var(--color-amber);
  --gradient-cta-hover: var(--color-amber-deep);
  --gradient-hero: linear-gradient(165deg, var(--color-cream) 0%, var(--color-cream-deep) 100%);

  /* -- Typografie (Vorgabe: Quicksand fuer Headlines, Plus Jakarta Sans fuer
     Fliesstext/UI) -- */
  --font-serif: "Quicksand", "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-sans: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;

  /* -- Abstände (Vorgabe: grosszuegiges Padding, py-16 bis py-24) -- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  /* -- Radien / Schatten (Vorgabe: konsequent grosse Rundungen) -- */
  --radius-sm: 14px; --radius-md: 20px; --radius-lg: 28px; --radius-full: 999px;
  /* Organische, asymmetrische Rundung fuer das Foto-Motiv - erfuellt die
     Vorgabe "organische, abgerundete Form / Blob" fuers Hero-Bild. */
  --radius-organic: 120px 28px 120px 28px;
  --radius-organic-sm: 70px 20px 70px 20px;
  --shadow-sm: 0 2px 10px rgba(47, 62, 70, 0.06);
  --shadow-md: 0 14px 34px -10px rgba(47, 62, 70, 0.16);
  --shadow-lg: 0 32px 70px -22px rgba(47, 62, 70, 0.26);

  /* -- Motion-System: einheitliche Dauer/Easing-Werte -- */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 560ms;
  --dur-reveal: 720ms;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Die Marke lebt von warmem Creme/Kakao — statt eines echten Dark Mode
       bleibt der Hintergrund hell, aber etwas gedämpft, damit Systeme mit
       erzwungenem Dark-UI (z.B. manche mobile Browser) nicht blendend-weiss
       wirken. Text bleibt auf dem hellen Hintergrund gut lesbar. */
    --color-cream: #F3EADC;
    --color-cream-deep: #EBDFCC;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-cocoa);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

p, li { overflow-wrap: break-word; }

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.08;
  margin: 0 0 var(--space-3);
  color: var(--color-cocoa);
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: clamp(2.6rem, 1.9rem + 3.2vw, 4.6rem); font-weight: 500; line-height: 1.02; }
h2 { font-size: clamp(2rem, 1.6rem + 1.8vw, 3.1rem); line-height: 1.08; }
h3 { font-size: 1.35rem; font-weight: 600; }
p { margin: 0 0 var(--space-4); color: var(--color-cocoa-soft); }
.muted { color: var(--color-cocoa-faint); }
.lede { font-size: 1.18rem; line-height: 1.6; max-width: 46ch; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-sage-deep); margin-bottom: var(--space-4);
}
.eyebrow::before { content: ""; width: 20px; height: 1.5px; background: var(--color-sage-deep); display: inline-block; }
.eyebrow-warn { color: var(--color-warn); }
.eyebrow-warn::before { background: var(--color-warn); }

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--color-cocoa); color: #fff;
  padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 100;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2.5px solid var(--color-sage-deep); outline-offset: 3px; border-radius: 4px; }

.shell { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-5); }
@media (max-width: 640px) { .shell { padding: 0 var(--space-4); } }
.shell-narrow { max-width: 760px; }

section { padding: var(--space-9) 0; }
.section-tight { padding: var(--space-7) 0; }
.section-alt { background: var(--color-cream-deep); }

.section-head { max-width: 620px; margin: 0 0 var(--space-7); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .lede { color: var(--color-cocoa-soft); }

/* ---- Buttons --------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 14px 26px; border-radius: var(--radius-full); border: 1.5px solid transparent;
  font-weight: 600; font-size: 0.95rem; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--gradient-cta); color: #fff; box-shadow: 0 10px 26px -10px rgba(196,95,69,0.5); }
.btn-primary:hover { background: var(--gradient-cta-hover); transform: translateY(-1px); box-shadow: 0 14px 32px -10px rgba(196,95,69,0.6); }
/* Auf dunklem Grund (Hero) braucht der Rand keinen eigenen Kontrast-Trick -
   der Verlauf traegt sich dort von selbst. */
.dark-hero .btn-primary:hover { box-shadow: 0 14px 36px -8px rgba(224,122,95,0.45); }
.btn-secondary { background: transparent; color: var(--color-cocoa); border-color: var(--color-cocoa); }
.btn-secondary:hover { background: var(--color-cocoa); color: var(--color-cream-white); }
.btn-ghost { background: transparent; color: var(--color-cocoa-soft); padding: 10px 14px; border-color: transparent; }
.btn-ghost:hover { color: var(--color-cocoa); background: var(--color-rose-soft); }
.btn-on-dark { border-color: rgba(250,244,235,0.55); color: var(--color-cream); }
.btn-on-dark:hover { background: var(--color-cream); color: var(--color-cocoa-900); }
.btn-sm { padding: 9px 18px; font-size: 0.85rem; }
.btn-lg { padding: 17px 32px; font-size: 1.02rem; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none !important; }
.btn svg { flex-shrink: 0; }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.95rem; color: var(--color-cocoa); position: relative; padding-bottom: 2px; border-bottom: 1.5px solid var(--color-cocoa); }
.link-arrow svg { transition: transform var(--dur-base) var(--ease-standard); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---- Header / Navigation --------------------------------------------- */

/* ---- Liquid Glass ---------------------------------------------------- */
/* Echtes Materialgefuehl statt flacher Transparenz: Blur + Saettigung auf
   dem Hintergrund, ein dem Zeiger folgender Glanzpunkt (--mx/--my, gesetzt
   von initLiquidGlass() in site.js) und ein feiner, mehrfarbiger Rand, der
   Licht einzufangen scheint - im Marken-Creme/Rosé/Salbei statt Lila/Pink.
   Bewusst nur auf wenigen, wirklich erhabenen Flaechen (Nav, Formular-Karte,
   Rechner), nicht ueberall. */
.glass {
  position: relative; isolation: isolate;
  background:
    linear-gradient(165deg, rgba(255,255,255,0.6), rgba(255,255,255,0.22) 45%, rgba(255,255,255,0.08)),
    rgba(250,244,235,0.62);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.75) inset,
    0 -1px 0 rgba(61,46,36,0.06) inset,
    0 24px 54px -24px rgba(61,46,36,0.3);
}
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(460px circle at var(--mx, 30%) var(--my, -10%), rgba(255,255,255,0.65), transparent 62%);
  opacity: 0.9;
}
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,0.95), rgba(255,255,255,0.1) 35%, rgba(224,122,95,0.35) 70%, rgba(129,178,154,0.3));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--color-cream-white); }
}

.site-header.glass {
  position: sticky; top: 0; z-index: 50;
  border-radius: 0; border-bottom: 1px solid rgba(61,46,36,0.08);
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 12px 30px -20px rgba(61,46,36,0.25);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) 0; gap: var(--space-3); }
/* Rein typografisches Logo-Lockup statt Icon+Text — "Hauptwort" gross in der
   Headline-Serife, "Ort" klein und ausgestellt wie ein Etikett daneben. */
.brand { display: flex; align-items: center; white-space: nowrap; min-width: 0; flex-shrink: 1; }
.brand-word { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; color: var(--color-cocoa); letter-spacing: -0.01em; }
.main-nav ul { display: flex; gap: var(--space-5); }
.main-nav a { font-size: 0.93rem; font-weight: 500; color: var(--color-cocoa-soft); position: relative; padding: 4px 0; }
.main-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1.5px;
  background: var(--color-sage-deep); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-standard);
}
.main-nav a:hover::after, .main-nav a.is-active::after { transform: scaleX(1); }
.main-nav a.is-active { color: var(--color-cocoa); }
.header-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.link-account { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 600; color: var(--color-cocoa-soft); white-space: nowrap; }
.link-account:hover { color: var(--color-cocoa); }
.nav-toggle { display: none; background: none; border: none; color: var(--color-cocoa); padding: 6px; cursor: pointer; border-radius: 8px; flex-shrink: 0; }
.mobile-nav { display: none; }

@media (max-width: 900px) {
  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-nav.is-open {
    display: block; border-top: 1px solid rgba(61,46,36,0.08);
    animation: slideDown var(--dur-base) var(--ease-standard);
  }
  .mobile-nav ul { display: flex; flex-direction: column; padding: var(--space-4) var(--space-5); gap: var(--space-1); }
  .mobile-nav a { display: block; padding: var(--space-3) 0; font-weight: 500; color: var(--color-cocoa-soft); border-bottom: 1px solid var(--color-border); }
  .mobile-nav a.is-active { color: var(--color-cocoa); font-weight: 600; }
  .mobile-nav li:last-child a { border-bottom: none; margin-top: var(--space-2); }
}
@media (max-width: 560px) {
  .header-actions .link-account span { display: none; }
}
@media (max-width: 420px) {
  .header-actions .btn { display: none; }
  .brand { font-size: 1.05rem; }
}
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Foto-Stack: wiederkehrendes Bildmotiv ------------------------------- */
/* Organisch gerundetes Foto + farbiger Versatzblock dahinter. Varianten
   (rose/sage) wechseln sich zwischen Sektionen ab statt immer gleich zu sein. */

.photo-stack { position: relative; isolation: isolate; }
.photo-stack::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--color-rose-soft);
  border-radius: var(--radius-organic);
  transform: translate(22px, 22px);
}
.photo-stack.stack-sage::before { background: var(--color-sage-soft); }
.photo-stack.stack-cocoa::before { background: var(--color-cocoa); opacity: 0.16; }
.photo-stack.stack-amber::before { background: var(--gradient-cta); }
.photo-stack.stack-left::before { transform: translate(-22px, 22px); }

.photo-frame {
  position: relative; z-index: 1; display: block; overflow: hidden;
  border-radius: var(--radius-organic); box-shadow: var(--shadow-lg);
  background: var(--color-cream-deep);
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 900ms var(--ease-emphasized); }
.photo-stack:hover .photo-frame img { transform: scale(1.045); }
.photo-frame.ratio-portrait img { aspect-ratio: 3/4; }
.photo-frame.ratio-square img { aspect-ratio: 1/1; }
.photo-frame.ratio-wide img { aspect-ratio: 4/3; }

.photo-caption { margin-top: var(--space-3); font-family: var(--font-sans); font-weight: 500; font-size: 0.85rem; color: var(--color-cocoa-faint); padding-left: 2px; }

@media (max-width: 640px) {
  :root { --radius-organic: 72px 16px 72px 16px; }
  .photo-stack::before { transform: translate(14px, 14px); }
}

/* ---- Hero -------------------------------------------------------------- */

.hero { position: relative; z-index: 1; padding: var(--space-7) 0 var(--space-9); overflow: visible; }
.hero-grid { display: grid; grid-template-columns: 1fr 0.86fr; gap: var(--space-8); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: var(--space-6); } }

.hero-copy h1 { margin-bottom: var(--space-5); }
.hero-sub { font-size: 1.15rem; max-width: 460px; margin-bottom: var(--space-6); color: var(--color-cocoa-soft); }
.hero-actions { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-6); }
.hero-note { display: flex; align-items: center; gap: var(--space-2); font-size: 0.88rem; color: var(--color-cocoa-soft); padding-top: var(--space-5); border-top: 1px solid var(--color-border); max-width: 420px; }
.hero-note svg { color: var(--color-sage-deep); flex-shrink: 0; }

.hero-art { position: relative; }
.hero-art .photo-stack { max-width: 420px; margin-inline: auto; }
@media (min-width: 901px) {
  /* Das Foto "blutet" dezent unten aus der Hero-Section heraus — hebt den
     Abschnitt von der gleichfoermigen Baukasten-Optik ab. hero hat dafuer
     z-index:1, damit der Ueberlapp sichtbar ueber der folgenden Section liegt. */
  .hero-art .photo-stack { margin-bottom: -64px; }
}

/* ---- Hero (helles Cremeweiss mit sanftem Verlauf, Terrakotta-Akzente) ---- */
/* Klassenname ".dark-hero" ist historisch (fruehere dunkle Version) und wird
   aus den 8 Seiten, die sie referenzieren, nicht mehr einzeln umbenannt -
   zaehlt inhaltlich jetzt als "hervorgehobener Hero-Abschnitt". */

.dark-hero { background: var(--gradient-hero); color: var(--color-cocoa); overflow: hidden; }
.dark-hero .badge-sage { background: var(--color-sage-soft); color: var(--color-sage-deep); border: 1px solid rgba(129,178,154,0.3); }
.dark-hero .btn-secondary { border-color: var(--color-cocoa); color: var(--color-cocoa); }
.dark-hero .btn-secondary:hover { background: var(--color-cocoa); color: #fff; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 9px 10px;
  border-radius: var(--radius-full); background: var(--color-cream-white);
  border: 1px solid var(--color-border); color: var(--color-cocoa); font-size: 0.85rem; font-weight: 500;
  margin-bottom: var(--space-5); box-shadow: var(--shadow-sm);
}
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-amber); flex-shrink: 0; }

.stat-row { display: flex; flex-wrap: wrap; gap: var(--space-7); margin-top: var(--space-7); }
.stat-row .stat-value { font-family: var(--font-serif); font-weight: 600; font-size: 2.1rem; color: var(--color-amber); line-height: 1; }
.stat-row .stat-label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--color-cocoa-soft); margin-top: 6px; }

/* Dezente, unscharfe Lichtakzente im hellen Hero - gibt Tiefe ohne zu stoeren. */
.hero-float { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.hero-float span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.35; }
.hero-float .f1 { top: -10%; right: -4%; width: 360px; height: 360px; background: var(--color-rose-deep); animation: floatSlow 11s var(--ease-standard) infinite; }
.hero-float .f2 { bottom: -15%; left: -6%; width: 320px; height: 320px; background: var(--color-sage); opacity: 0.3; animation: floatSlow 13s var(--ease-standard) infinite reverse; }
.hero-float .f3 { top: 40%; left: 30%; width: 220px; height: 220px; background: var(--color-rose); opacity: 0.3; animation: floatSlow 9s var(--ease-standard) infinite; animation-delay: 0.6s; }
@keyframes floatSlow { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-18px) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .hero-float span { animation: none !important; } }

.dark-hero .hero-grid, .dark-hero .shell { position: relative; z-index: 1; }

/* ---- Scroll-Reveal ------------------------------------------------------ */
/* Nur verstecken, wenn JS auch laeuft (html.js, siehe inline-Skript im
   <head> in inc/layout.php) - ohne JS oder bei Ladefehlern bleibt jeder
   Inhalt sofort sichtbar statt dauerhaft unsichtbar. */

html.js [data-reveal] { opacity: 0; }
html.js [data-reveal="fade"] { opacity: 1; }
html.js [data-reveal="up"] { transform: translateY(28px); }
html.js [data-reveal="scale"] { transform: scale(0.96); }
/* Muss spezifischer sein als "html.js [data-reveal]" oben (gleiche Anzahl
   Klassen/Attribute reicht nicht - das zusaetzliche Element "html" dort
   gewinnt sonst gegen Quellreihenfolge), daher hier ebenfalls mit html.js
   praefixiert. */
html.js [data-reveal].is-revealed { opacity: 1; transform: none; transition: opacity var(--dur-reveal) var(--ease-emphasized), transform var(--dur-reveal) var(--ease-emphasized); }

html.js [data-reveal-group] > * { opacity: 0; transform: translateY(20px); }
html.js [data-reveal-group].is-revealed > * {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-emphasized), transform var(--dur-slow) var(--ease-emphasized);
}
[data-reveal-group].is-revealed > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-group].is-revealed > *:nth-child(2) { transition-delay: 90ms; }
[data-reveal-group].is-revealed > *:nth-child(3) { transition-delay: 180ms; }
[data-reveal-group].is-revealed > *:nth-child(4) { transition-delay: 270ms; }
[data-reveal-group].is-revealed > *:nth-child(5) { transition-delay: 360ms; }
[data-reveal-group].is-revealed > *:nth-child(6) { transition-delay: 450ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-group] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- Merkmalsliste (ersetzt generische Icon-Karten-Trust-Strips) --------- */

.feature-rule-list { display: flex; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.feature-rule-list .feature-item {
  flex: 1; display: flex; flex-direction: column; gap: 6px; padding: var(--space-6) var(--space-5);
  border-left: 1px solid var(--color-border);
}
.feature-rule-list .feature-item:first-child { border-left: none; }
.feature-rule-list .feature-num { font-family: var(--font-sans); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--color-sage-deep); }
.feature-rule-list .feature-title { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 500; color: var(--color-cocoa); }
.feature-rule-list .feature-desc { font-size: 0.92rem; color: var(--color-cocoa-soft); margin: 0; }
@media (max-width: 760px) {
  .feature-rule-list { flex-direction: column; border-left: none; border-right: none; }
  .feature-rule-list .feature-item { border-left: none; border-top: 1px solid var(--color-border); padding: var(--space-5) 0; }
  .feature-rule-list .feature-item:first-child { border-top: none; }
}

/* ---- Editorial-Reihen (Leistungen, Ueber mich) --------------------------- */

.editorial-row { display: grid; grid-template-columns: 0.86fr 1fr; gap: var(--space-8); align-items: center; }
.editorial-row.is-reverse { grid-template-columns: 1fr 0.86fr; }
.editorial-row.is-reverse .editorial-photo { order: 2; }
@media (max-width: 900px) {
  .editorial-row, .editorial-row.is-reverse { grid-template-columns: 1fr; gap: var(--space-6); }
  .editorial-row.is-reverse .editorial-photo { order: 0; }
}
.editorial-row + .editorial-row { margin-top: var(--space-9); }
.editorial-row .editorial-photo .photo-stack { max-width: 460px; }
.editorial-row.is-reverse .editorial-photo .photo-stack { margin-left: auto; }


/* ---- Icon-Karten (Leistungen) ------------------------------------------- */

.icon-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 900px) { .icon-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .icon-card-grid { grid-template-columns: 1fr; } }
.icon-card {
  background: var(--color-cream-white); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-6); transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.icon-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.icon-card .icon-card-mark {
  width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; margin-bottom: var(--space-4);
  background: linear-gradient(155deg, rgba(224,122,95,0.16), rgba(129,178,154,0.16)); color: var(--color-amber-deep);
  transition: transform var(--dur-base) var(--ease-emphasized);
}
.icon-card:hover .icon-card-mark { transform: scale(1.08) rotate(-3deg); }
.icon-card h3 { font-size: 1.08rem; margin-bottom: 6px; }
.icon-card p { font-size: 0.92rem; margin-bottom: var(--space-4); }
.icon-card .link-arrow { font-size: 0.88rem; border-bottom-width: 1px; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--radius-full); font-size: 0.78rem; font-weight: 600; }
.badge-sage { background: var(--color-sage-soft); color: var(--color-sage-deep); }
.badge-rose { background: var(--color-rose-soft); color: #8c5b56; }

/* ---- Bewertungen (Pfoten-Rating statt Sternen) ---------------------------- */

.paw-rating { display: inline-flex; gap: 3px; }
.paw-rating .paw { color: var(--color-border); }
.paw-rating .paw.is-filled { color: var(--color-amber); }
.testimonial-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
@media (max-width: 760px) { .testimonial-grid { grid-template-columns: 1fr; } }
.testimonial-card {
  background: var(--color-cream-white); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4);
}
.testimonial-card .testimonial-quote { font-size: 1.02rem; line-height: 1.6; margin: 0; }
.testimonial-card .testimonial-meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.testimonial-card .testimonial-author { font-weight: 600; font-size: 0.92rem; }
.testimonial-card .testimonial-author-detail { font-size: 0.86rem; color: var(--color-cocoa-soft); margin-left: 6px; font-weight: 400; }

/* ---- Dunkle Kontrast-Section ---------------------------------------------- */

.dark-section { background: var(--color-cocoa-900); color: var(--color-cream); }
.dark-section h2, .dark-section h3 { color: var(--color-cream); }
.dark-section p { color: #cdbfae; }
.dark-section .eyebrow { color: var(--color-rose); }
.dark-section .eyebrow::before { background: var(--color-rose); }
.quote-block { max-width: 760px; }
.quote-block q { display: block; margin-top: var(--space-2); font-family: var(--font-serif); font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem); font-weight: 500; line-height: 1.3; quotes: none; }
.quote-block q::before, .quote-block q::after { content: ""; }

/* ---- Prozess / Timeline -------------------------------------------------- */

.process-steps { display: flex; flex-direction: column; }
.process-step { display: grid; grid-template-columns: 88px 1fr; gap: var(--space-5); padding: var(--space-6) 0; border-top: 1px solid var(--color-border); }
.process-step:last-child { padding-bottom: 0; }
.process-step .step-num { font-family: var(--font-serif); font-size: 2.4rem; font-weight: 400; color: var(--color-rose-deep); line-height: 1; }
.process-step h3 { margin: 0 0 var(--space-2); font-size: 1.2rem; }
.process-step p { font-size: 0.96rem; margin-bottom: 0; max-width: 56ch; }
@media (max-width: 560px) { .process-step { grid-template-columns: 52px 1fr; } .process-step .step-num { font-size: 1.8rem; } }

/* ---- Alltags-Einblicke (Demo-Updates, echte Fotos) ------------------------ */

.update-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 900px) { .update-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .update-grid { grid-template-columns: 1fr; } }
.update-card { position: relative; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4/5; }
.update-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-emphasized); }
.update-card:hover img { transform: scale(1.05); }
.update-card .update-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-5);
  background: linear-gradient(180deg, rgba(36,26,20,0) 45%, rgba(36,26,20,0.82) 100%);
}
.update-card .update-badge { align-self: flex-start; margin-bottom: auto; }
.update-card .update-title { color: #fff; font-family: var(--font-serif); font-size: 1.05rem; margin-bottom: 2px; }
.update-card .update-desc { color: #e9e0d4; font-size: 0.84rem; margin: 0; }

/* ---- Preise -------------------------------------------------------------- */

.pricing-table { display: grid; }
.pricing-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) 0; border-top: 1px solid var(--color-border);
}
.pricing-table .pricing-row:last-child { border-bottom: 1px solid var(--color-border); }
.pricing-row .pricing-label { font-family: var(--font-serif); font-weight: 500; font-size: 1.12rem; }
.pricing-row .pricing-desc { font-size: 0.88rem; color: var(--color-cocoa-faint); margin-top: 2px; }
.pricing-row .pricing-amount { font-family: var(--font-serif); font-size: 1.35rem; white-space: nowrap; color: var(--color-cocoa); }
.pricing-amount.on-request { color: var(--color-cocoa-faint); font-size: 0.95rem; font-family: var(--font-sans); font-weight: 600; }
.pricing-note { margin-top: var(--space-6); padding: var(--space-5); background: var(--color-sage-soft); border-radius: var(--radius-md); font-size: 0.9rem; color: var(--color-sage-deep); }

.calculator { border-radius: var(--radius-lg); padding: var(--space-6); }
.calculator:not(.glass) { background: var(--color-cream-white); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
.calculator-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-5); }
@media (max-width: 640px) { .calculator-grid { grid-template-columns: 1fr; } }
.calculator-result { border-top: 1px dashed var(--color-border); padding-top: var(--space-4); }
.calc-line { display: flex; justify-content: space-between; font-size: 0.92rem; padding: 6px 0; color: var(--color-cocoa-soft); }
.calc-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--space-3); margin-top: var(--space-2); border-top: 1px solid var(--color-border); font-family: var(--font-serif); font-size: 1.4rem; }
.calc-disclaimer { font-size: 0.78rem; color: var(--color-cocoa-faint); margin-top: var(--space-3); margin-bottom: 0; }
.voucher-feedback { font-size: 0.82rem; margin-top: 6px; min-height: 1.2em; }
.voucher-feedback.is-success { color: var(--color-sage-deep); }
.voucher-feedback.is-error { color: #9c4238; }

/* ---- Formulare ------------------------------------------------------------ */

.field { margin-bottom: var(--space-4); }
.field label { display: block; font-size: 0.86rem; font-weight: 600; color: var(--color-cocoa); margin-bottom: 6px; }
.field .hint { font-size: 0.8rem; color: var(--color-cocoa-faint); margin-top: 4px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }

.input, select.input, textarea.input {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border);
  background: var(--color-cream-white); color: var(--color-cocoa); font-family: inherit; font-size: 0.96rem;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.input:focus, select.input:focus, textarea.input:focus {
  outline: none; border-color: var(--color-sage-deep); box-shadow: 0 0 0 4px rgba(110,130,96,0.16);
}
textarea.input { resize: vertical; min-height: 90px; }
.input.has-error { border-color: var(--color-danger); }
.field-error { font-size: 0.8rem; color: var(--color-danger); margin-top: 4px; }
.honeypot-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.checkbox-row { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 0.88rem; color: var(--color-cocoa-soft); }
.checkbox-row input { margin-top: 3px; }

/* Mehrstufiger Anfrage-Wizard */
.wizard { border-radius: var(--radius-lg); overflow: hidden; }
.wizard:not(.glass) { background: var(--color-cream-white); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
.wizard-progress { display: flex; gap: 6px; padding: var(--space-5) var(--space-6) 0; }
.wizard-progress .bar { flex: 1; height: 4px; border-radius: var(--radius-full); background: var(--color-border); overflow: hidden; }
.wizard-progress .bar span { display: block; height: 100%; background: var(--color-sage-deep); width: 0%; transition: width var(--dur-slow) var(--ease-emphasized); }
.wizard-progress .bar.is-done span, .wizard-progress .bar.is-current span { width: 100%; }
.wizard-steps-label { display: flex; justify-content: space-between; padding: var(--space-2) var(--space-6) 0; font-size: 0.78rem; color: var(--color-cocoa-faint); font-weight: 600; }
.wizard-body { padding: var(--space-6); min-height: 280px; }
.wizard-step { animation: stepIn var(--dur-base) var(--ease-standard); }
@keyframes stepIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .wizard-step { animation: none; } }
/* Ohne JS bleiben alle vier Schritte sichtbar untereinander (siehe
   kontakt.php: die Fieldsets haben dort kein "hidden") und der echte
   Absenden-Button am Ende von Schritt 4 reicht zum Abschicken - die
   Zurueck/Weiter-Steuerung waere ohne JS wirkungslos, daher erst zeigen,
   wenn html.js (assets/js/early.js) bestaetigt, dass JS laeuft. */
.wizard-footer { display: none; justify-content: space-between; padding: var(--space-5) var(--space-6); border-top: 1px solid var(--color-border); background: var(--color-cream); }
html.js .wizard-footer { display: flex; }
.cat-entry { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4); position: relative; background: var(--color-cream); }
.cat-entry .remove-cat { position: absolute; top: 10px; right: 10px; }
.summary-group { margin-bottom: var(--space-5); }
.summary-group h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-sage-deep); margin-bottom: var(--space-2); }
.summary-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--color-border); font-size: 0.92rem; }
.summary-row .k { color: var(--color-cocoa-faint); }

.wizard-success { text-align: center; padding: var(--space-7) var(--space-6); }
.wizard-success .success-icon {
  width: 72px; height: 72px; border-radius: 50%; background: var(--color-sage-soft); color: var(--color-sage-deep);
  display: grid; place-items: center; margin: 0 auto var(--space-5); animation: popIn var(--dur-slow) var(--ease-emphasized);
}
@keyframes popIn { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wizard-success .success-icon { animation: none; } }

.form-banner { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); font-size: 0.92rem; margin-bottom: var(--space-5); }
.form-banner.error { background: var(--color-danger-bg); color: #7a2f27; }
.form-banner.demo-notice { background: var(--color-warn-bg); color: #7a5a22; }

/* ---- Accordion (FAQ) ------------------------------------------------------ */

.faq-panel { border-radius: var(--radius-lg); padding: var(--space-2) var(--space-6); }
.faq-panel .accordion-item:last-child { border-bottom: none; }
.accordion-item { border-bottom: 1px solid rgba(61,46,36,0.1); }
.accordion-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) 0; background: none; border: none; text-align: left; cursor: pointer;
  font-family: var(--font-serif); font-size: 1.1rem; font-weight: 500; color: var(--color-cocoa);
}
.accordion-trigger .chev { color: var(--color-sage-deep); transition: transform var(--dur-base) var(--ease-standard); flex-shrink: 0; }
.accordion-item.is-open .accordion-trigger .chev { transform: rotate(90deg); }
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-emphasized); }
.accordion-panel-inner { padding: 0 0 var(--space-5); color: var(--color-cocoa-soft); font-size: 0.95rem; max-width: 760px; }

/* ---- Kalender (Verfuegbarkeit) --------------------------------------------- */

.avail-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.avail-day { aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center; font-size: 0.78rem; background: var(--color-cream-deep); color: var(--color-cocoa-faint); }
.avail-day.is-available { background: var(--color-sage-soft); color: var(--color-sage-deep); font-weight: 600; }
.avail-day.is-full { background: var(--color-rose-soft); color: #8c5b56; }
.avail-day.is-blocked { background: var(--color-cream-deep); color: var(--color-cocoa-faint); text-decoration: line-through; }
.avail-legend { display: flex; gap: var(--space-5); margin-top: var(--space-4); font-size: 0.82rem; flex-wrap: wrap; }
.avail-legend span { display: inline-flex; align-items: center; gap: 6px; }
.avail-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* ---- Footer --------------------------------------------------------------- */

.site-footer { background: var(--color-cocoa-900); color: var(--color-cream); padding: var(--space-8) 0 var(--space-5); margin-top: var(--space-8); }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); padding-bottom: var(--space-7); }
@media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-inner { grid-template-columns: 1fr; } }
.footer-brand { display: flex; flex-direction: column; gap: 6px; }
.footer-brand .brand-word { color: var(--color-cream); font-size: 1.35rem; }
.footer-tagline { font-size: 0.85rem; color: #ab9b8b; margin-top: 4px; }
.footer-heading { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #ab9b8b; margin-bottom: var(--space-3); }
.footer-col ul li { margin-bottom: var(--space-2); font-size: 0.92rem; color: #e3dccd; }
.footer-col a:hover { color: var(--color-rose); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.82rem; color: #8a7a6a; }

/* ---- Legal pages / einfache Textseiten ------------------------------------ */

.prose { max-width: 720px; }
.prose h2 { margin-top: var(--space-7); }
.prose ul { list-style: disc; padding-left: 1.3em; margin-bottom: var(--space-4); }
.prose li { margin-bottom: var(--space-2); color: var(--color-cocoa-soft); }

.notice-box { padding: var(--space-5); border-radius: var(--radius-md); background: var(--color-warn-bg); color: #7a5a22; font-size: 0.92rem; margin-bottom: var(--space-6); }

.legal-pending {
  text-align: center; padding: var(--space-8) var(--space-6); border-radius: var(--radius-lg);
  background: var(--color-cream-white); border: 1px solid var(--color-border); max-width: 520px; margin: var(--space-7) auto 0;
}
.legal-pending-icon {
  width: 54px; height: 54px; border-radius: 16px; margin: 0 auto var(--space-5); display: grid; place-items: center;
  background: linear-gradient(155deg, rgba(224,122,95,0.16), rgba(129,178,154,0.16)); color: var(--color-amber-deep);
}
.legal-pending h2 { margin: 0 0 var(--space-3); font-size: 1.2rem; }
.legal-pending p { margin: 0; color: var(--color-cocoa-soft); font-size: 0.95rem; }
.legal-pending-inline {
  display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5); border-radius: var(--radius-md);
  background: var(--color-cream-white); border: 1px solid var(--color-border); margin: var(--space-3) 0 var(--space-5);
}
.legal-pending-inline svg { flex-shrink: 0; color: var(--color-amber-deep); margin-top: 2px; }
.legal-pending-inline p { margin: 0; color: var(--color-cocoa-soft); font-size: 0.92rem; }

/* ---- Kundencenter (Login/Registrierung/Konto) ----------------------------- */

.auth-card { max-width: 440px; margin: 0 auto; padding: var(--space-7) var(--space-6); border-radius: var(--radius-lg); }
.auth-card:not(.glass) { background: var(--color-cream-white); border: 1px solid var(--color-border); }
.auth-switch { text-align: center; font-size: 0.9rem; color: var(--color-cocoa-soft); margin: var(--space-5) 0 0; }
.auth-switch a { color: var(--color-amber-deep); font-weight: 600; }

.empty-state-card { padding: var(--space-6); border-radius: var(--radius-md); background: var(--color-cream-white); border: 1px solid var(--color-border); text-align: center; }

.konto-list { display: flex; flex-direction: column; gap: var(--space-4); }
.konto-card { padding: var(--space-5); border-radius: var(--radius-md); background: var(--color-cream-white); border: 1px solid var(--color-border); }
.konto-card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.konto-card-body > div { margin-bottom: 4px; }
.konto-notes { margin: var(--space-2) 0 0; font-size: 0.9rem; color: var(--color-cocoa-soft); }

.status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 700; }
.status-new { background: #E3EDFA; color: #2E5FA3; }
.status-in_progress { background: #FBF1E0; color: #8a6a24; }
.status-needs_info { background: #FBEAE8; color: #9c4238; }
.status-confirmed { background: var(--color-sage-soft); color: var(--color-sage-deep); }
.status-rejected { background: #eee; color: #777; }
.status-completed { background: #E3EADB; color: #4e6a3f; }
.status-cancelled { background: #eee; color: #999; text-decoration: line-through; }