/* ============================================================
   Elternpflege.info — Design-Prototyp
   Register: Brand. Farbstrategie: Committed (Ton + Lehm).
   Schrift: Faustina (Display) + Atkinson Hyperlegible (Text,
   entwickelt für Menschen mit eingeschränktem Sehvermögen).
   ============================================================ */

:root{
  --paper:      oklch(0.972 0.011 78);
  --paper-2:    oklch(0.945 0.017 74);
  --paper-3:    oklch(0.912 0.022 72);
  --ink:        oklch(0.232 0.026 48);
  --ink-2:      oklch(0.415 0.030 50);
  --umber:      oklch(0.248 0.038 42);
  --umber-2:    oklch(0.315 0.044 40);
  --umber-3:    oklch(0.395 0.046 40);
  --clay:       oklch(0.532 0.148 39);
  --clay-deep:  oklch(0.448 0.136 37);
  --clay-tint:  oklch(0.906 0.040 46);
  --amber:      oklch(0.772 0.132 71);
  --line:       oklch(0.862 0.020 68);
  --line-dark:  oklch(0.372 0.034 42);

  --step--1: clamp(0.90rem, 0.87rem + 0.15vw, 0.98rem);
  --step-0:  clamp(1.06rem, 1.00rem + 0.30vw, 1.22rem);
  --step-1:  clamp(1.35rem, 1.22rem + 0.62vw, 1.72rem);
  --step-2:  clamp(1.72rem, 1.46rem + 1.24vw, 2.55rem);
  --step-3:  clamp(2.15rem, 1.66rem + 2.35vw, 3.75rem);
  --step-4:  clamp(2.55rem, 1.70rem + 4.05vw, 5.40rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-q: cubic-bezier(0.22, 1, 0.36, 1);

  --shell: min(1240px, 100% - 2.5rem);
  --radius: 3px;
}

*,*::before,*::after{ 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(--paper);
  color:var(--ink);
  font-family:"Atkinson Hyperlegible", system-ui, sans-serif;
  font-size:var(--step-0);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:Faustina, Georgia, serif;
  font-weight:600;
  line-height:1.08;
  letter-spacing:-0.015em;
  margin:0;
  text-wrap:balance;
}

p{ margin:0 0 1.15em; max-width:68ch; }
a{ color:inherit; }

/* Bilder werden NIE verzerrt: entweder in Originalproportion (height:auto)
   oder als Ausschnitt (object-fit:cover). Nie object-fit:fill, nie feste
   Höhe ohne cover. Alle verwendeten Fotos liegen im Verhältnis 1600:1067 vor,
   die Container nutzen exakt dieses Verhältnis. */
img{ display:block; max-width:100%; height:auto; object-fit:cover !important; }
:root{ --foto: 1600 / 1067; }

.shell{ width:var(--shell); margin-inline:auto; }
section[id]{ scroll-margin-top:96px; }

.kicker{
  font-size:var(--step--1);
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--clay);
  margin:0 0 1.1rem;
}
.kicker--light{ color:var(--amber); }

/* ---------- Fokus ---------- */
:where(a,button,input,summary,[tabindex]):focus-visible{
  outline:3px solid var(--clay);
  outline-offset:3px;
  border-radius:2px;
}
.on-dark :where(a,button,input):focus-visible{ outline-color:var(--amber); }

.skip{
  position:fixed; top:0; left:50%; transform:translate(-50%,-120%);
  z-index:200; background:var(--clay); color:var(--paper);
  padding:0.85rem 1.5rem; font-weight:700; text-decoration:none;
  transition:transform .3s var(--ease);
}
.skip:focus{ transform:translate(-50%,0); }

/* =====================  KOPFBEREICH  ===================== */
.head{
  position:sticky; top:0; z-index:100;
  background:oklch(0.972 0.011 78 / 0.86);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.head.is-stuck{
  border-bottom-color:var(--line);
  background:oklch(0.972 0.011 78 / 0.96);
}
.head__in{
  display:flex; align-items:center; gap:1.5rem;
  padding-block:clamp(0.7rem, 1.4vw, 1.15rem);
  transition:padding .4s var(--ease);
}
.head.is-stuck .head__in{ padding-block:0.6rem; }

.mark{
  font-family:Faustina, Georgia, serif;
  font-size:clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);
  font-weight:600; letter-spacing:-0.02em;
  text-decoration:none; line-height:1;
  display:flex; align-items:baseline; gap:0.12em;
  margin-right:auto;
}
.mark b{ font-weight:600; }
.mark span{ color:var(--clay); font-weight:600; }
.mark::before{
  content:""; width:0.62em; height:0.62em; margin-right:0.42em;
  border-radius:50%;
  background:
    conic-gradient(from 180deg, var(--clay) 0 62%, var(--clay-tint) 62% 100%);
  align-self:center;
  transition:transform .6s var(--ease);
}
.mark:hover::before{ transform:rotate(140deg); }

.nav{ display:flex; align-items:center; gap:clamp(0.9rem,1.6vw,1.9rem); }
.nav a{
  text-decoration:none;
  font-size:var(--step--1);
  font-weight:400;
  letter-spacing:0.01em;
  padding-block:0.35rem;
  position:relative;
  white-space:nowrap;
  color:var(--ink-2);
  transition:color .25s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--clay);
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ transform:scaleX(1); }
.nav a[aria-current]{ color:var(--ink); font-weight:700; }
.nav a[aria-current]::after{ transform:scaleX(1); }

.btn{
  display:inline-flex; align-items:center; gap:0.6em;
  font-family:inherit; font-size:var(--step--1); font-weight:700;
  text-decoration:none; cursor:pointer;
  padding:0.78em 1.35em;
  border:1.5px solid var(--clay);
  background:var(--clay); color:var(--paper);
  border-radius:var(--radius);
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover{ background:var(--clay-deep); border-color:var(--clay-deep); transform:translateY(-2px); box-shadow:0 10px 22px -12px oklch(0.44 0.14 38 / 0.75); }
.btn:active{ transform:translateY(0); }
.btn--ghost{ background:transparent; color:var(--clay); }
.btn--ghost:hover{ background:var(--clay-tint); color:var(--clay-deep); box-shadow:none; }
.btn--light{ background:var(--paper); border-color:var(--paper); color:var(--umber); }
.btn--light:hover{ background:var(--amber); border-color:var(--amber); color:var(--umber); }
.btn--outline-light{ background:transparent; border-color:oklch(0.75 0.03 60 / 0.5); color:var(--paper); }
.btn--outline-light:hover{ background:oklch(1 0 0 / 0.09); border-color:var(--paper); box-shadow:none; }
.btn--lg{ font-size:var(--step-0); padding:0.9em 1.6em; }

.head .btn{ display:none; }
@media (min-width:1080px){ .head .btn{ display:inline-flex; } }

.nav-toggle{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:46px; height:46px; padding:0 11px;
  background:none; border:1px solid var(--line); border-radius:var(--radius);
  cursor:pointer;
}
.nav-toggle i{ display:block; height:2px; background:var(--ink); transition:transform .4s var(--ease), opacity .3s var(--ease); }
.nav-toggle[aria-expanded="true"] i:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] i:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:899px){
  .nav{
    position:absolute; inset:100% 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:0 1.25rem;
    display:grid; grid-template-rows:0fr;
    transition:grid-template-rows .5s var(--ease), padding .5s var(--ease);
    overflow:hidden;
  }
  .nav > *{ min-height:0; }
  .nav__list{ overflow:hidden; display:flex; flex-direction:column; }
  .nav.is-open{ grid-template-rows:1fr; padding-block:0.5rem 1.5rem; }
  .nav a{ font-size:var(--step-0); padding:0.75rem 0; border-bottom:1px solid var(--line); }
  .nav a::after{ display:none; }
}
@media (min-width:900px){
  .nav-toggle{ display:none; }
  .nav__list{ display:flex; align-items:center; gap:clamp(0.9rem,1.6vw,1.9rem); }
}

/* =====================  HERO  ===================== */
.hero{
  position:relative;
  background:var(--umber);
  color:var(--paper);
  overflow:hidden;
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute; inset:-10% -10% auto -10%; height:70%;
  background:radial-gradient(60% 80% at 22% 0%, oklch(0.42 0.09 48 / 0.65), transparent 70%);
  z-index:-1;
}
.hero__in{
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  padding-block:clamp(3.5rem, 7vw, 7rem) clamp(3.5rem, 7vw, 6.5rem);
  align-items:center;
}
@media (min-width:960px){
  .hero__in{ grid-template-columns:1.08fr 0.92fr; }
}
.hero h1{
  font-size:var(--step-4);
  letter-spacing:-0.03em;
  line-height:1.02;
  margin-bottom:1.6rem;
  max-width:14ch;
}
.hero h1 em{
  font-style:italic;
  color:var(--amber);
  font-weight:500;
}
.hero__lead{
  font-size:clamp(1.12rem, 1.02rem + 0.42vw, 1.4rem);
  color:oklch(0.86 0.020 70);
  max-width:46ch;
  margin-bottom:2.2rem;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:0.85rem; margin-bottom:2.6rem; }
.hero__claim{
  border-top:1px solid var(--line-dark);
  padding-top:1.3rem;
  font-family:Faustina, Georgia, serif;
  font-size:clamp(1.05rem,0.98rem + 0.35vw,1.3rem);
  font-style:italic;
  color:oklch(0.82 0.03 70);
  max-width:40ch;
  margin:0;
}

.hero__art{ position:relative; }
.hero__frame{
  position:relative;
  border-radius:var(--radius);
  aspect-ratio:var(--foto);
  overflow:hidden;
  box-shadow:0 40px 80px -40px oklch(0.12 0.03 40 / 0.85);
}
.hero__frame img{
  width:100%; height:100%;
  filter:saturate(0.82) contrast(1.04);
}
.hero__frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(200deg, oklch(0.30 0.09 45 / 0.34), oklch(0.22 0.05 40 / 0.10) 55%, oklch(0.22 0.04 40 / 0.55));
  mix-blend-mode:multiply;
}
.hero__cap{
  position:absolute; left:0; bottom:-1px;
  background:var(--paper); color:var(--umber);
  padding:1.1rem 1.4rem 1.15rem;
  max-width:min(300px, 78%);
  border-radius:0 var(--radius) 0 0;
  z-index:2;
}
.hero__cap b{ display:block; font-family:Faustina,Georgia,serif; font-size:1.7rem; line-height:1; margin-bottom:0.35rem; letter-spacing:-0.02em; }
.hero__cap span{ font-size:var(--step--1); line-height:1.45; display:block; color:var(--ink-2); }

/* =====================  EINSTIEGE  ===================== */
.entry{ padding-block:clamp(3.5rem,7vw,6.5rem); }
.entry__head{ max-width:52ch; margin-bottom:clamp(2rem,4vw,3.2rem); }
.entry__head h2{ font-size:var(--step-2); margin-bottom:1rem; }
.entry__head p{ color:var(--ink-2); margin:0; }

.paths{ border-top:1px solid var(--line); }
.path{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(1rem,3vw,2.5rem);
  padding:clamp(1.3rem,2.6vw,2rem) 0.5rem clamp(1.3rem,2.6vw,2rem) 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  position:relative;
  transition:padding-left .5s var(--ease), color .3s var(--ease);
}
.path::before{
  content:""; position:absolute; inset:0 -1.25rem;
  background:var(--clay-tint); opacity:0;
  transform:scaleX(0.97); transform-origin:left;
  transition:opacity .45s var(--ease), transform .45s var(--ease);
  z-index:-1;
}
.path:hover::before{ opacity:0.55; transform:scaleX(1); }
.path:hover{ padding-left:1.1rem; }
.path__no{
  font-family:Faustina,Georgia,serif;
  font-size:clamp(1.5rem,1.1rem + 1.4vw,2.3rem);
  font-weight:500;
  color:var(--clay);
  font-variant-numeric:tabular-nums;
  line-height:1;
  min-width:1.7ch;
}
.path__txt strong{
  display:block;
  font-family:Faustina,Georgia,serif;
  font-weight:600;
  font-size:clamp(1.18rem,1.02rem + 0.7vw,1.62rem);
  letter-spacing:-0.015em;
  line-height:1.18;
  margin-bottom:0.3rem;
}
.path__txt span{ font-size:var(--step--1); color:var(--ink-2); }
.path__go{
  font-size:var(--step--1); font-weight:700; color:var(--clay);
  display:inline-flex; align-items:center; gap:0.5em; white-space:nowrap;
}
.path__go svg{ transition:transform .45s var(--ease); }
.path:hover .path__go svg{ transform:translateX(6px); }
@media (max-width:719px){
  .path{ grid-template-columns:auto 1fr; }
  .path__go{ grid-column:2; }
}

/* =====================  90-TAGE-PLAN  ===================== */
.plan{
  background:var(--umber);
  color:var(--paper);
  padding-block:clamp(4rem,8vw,7.5rem);
  position:relative;
  overflow:hidden;
}
.plan::before{
  content:""; position:absolute; inset:auto -20% -30% -20%; height:60%;
  background:radial-gradient(50% 100% at 70% 100%, oklch(0.40 0.08 45 / 0.5), transparent 70%);
}
.plan__head{ position:relative; max-width:56ch; margin-bottom:clamp(2.5rem,5vw,4rem); }
.plan__head h2{ font-size:var(--step-3); margin-bottom:1.1rem; }
.plan__head p{ color:oklch(0.83 0.025 70); margin:0; }

.track{ position:relative; }
.track__rail{
  position:absolute; left:9px; top:0.7em; bottom:0.7em; width:2px;
  background:var(--line-dark);
}
.track__fill{
  position:absolute; left:9px; top:0.7em; width:2px;
  background:linear-gradient(var(--amber), var(--clay));
  transform-origin:top;
  will-change:transform, height;
  height:0;
}
@media (min-width:840px){
  .track__rail,.track__fill{ left:calc(9px + 0px); }
}

.part{ position:relative; padding-left:clamp(2.4rem,4vw,3.4rem); }
.part + .part{ margin-top:clamp(2.4rem,4vw,3.6rem); }
.part__label{
  position:relative;
  font-size:var(--step--1); font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--amber);
  margin-bottom:1.4rem;
}
.part__label::before{
  content:""; position:absolute;
  left:calc(-1 * clamp(2.4rem,4vw,3.4rem) + 3px); top:0.35em;
  width:16px; height:16px; border-radius:50%;
  background:var(--umber); border:2px solid var(--amber);
  box-shadow:0 0 0 5px var(--umber);
}
.chapters{
  display:grid;
  border-top:1px solid var(--line-dark);
}
@media (min-width:760px){
  .chapters{ grid-template-columns:1fr 1fr; }
  .chapter:nth-child(odd):not(:last-child){ border-right:1px solid var(--line-dark); }
}
.chapter{ border-bottom:1px solid var(--line-dark); }

.chapter{
  background:var(--umber);
  padding:clamp(1.2rem,2.4vw,1.75rem) clamp(1.1rem,2.2vw,1.6rem);
  text-decoration:none;
  display:block;
  position:relative;
  transition:background .4s var(--ease);
}
.chapter:hover{ background:var(--umber-2); }
.chapter__no{
  font-size:0.82rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:oklch(0.68 0.05 60); display:block; margin-bottom:0.55rem;
}
.chapter h3{
  font-size:clamp(1.12rem,1rem + 0.5vw,1.38rem);
  margin-bottom:0.5rem;
  transition:color .3s var(--ease);
}
.chapter:hover h3{ color:var(--amber); }
.chapter p{ font-size:var(--step--1); color:oklch(0.79 0.025 68); margin:0; max-width:44ch; }

.plan__foot{
  position:relative;
  margin-top:clamp(2.5rem,5vw,4rem);
  padding-left:clamp(2.4rem,4vw,3.4rem);
  display:flex; flex-wrap:wrap; gap:0.85rem; align-items:center;
}

/* =====================  CHECKLISTEN  ===================== */
.lists{ padding-block:clamp(4rem,8vw,7rem); background:var(--paper-2); }
.lists__head{ display:grid; gap:2rem; margin-bottom:clamp(2.2rem,4.5vw,3.5rem); }
@media (min-width:900px){ .lists__head{ grid-template-columns:1fr 1fr; align-items:end; } }
.lists__head h2{ font-size:var(--step-3); }
.lists__head p{ color:var(--ink-2); margin:0; }

.sheets{
  display:grid; gap:clamp(0.9rem,1.8vw,1.25rem);
  grid-template-columns:repeat(auto-fit, minmax(275px, 1fr));
}
.sheet{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.4rem 1.4rem 1.25rem;
  text-decoration:none;
  display:flex; flex-direction:column;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.sheet::before{
  content:""; position:absolute; top:-6px; left:14px; right:14px; height:6px;
  background:var(--paper-3); border-radius:3px 3px 0 0;
  transition:transform .45s var(--ease);
}
.sheet:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 40px -26px oklch(0.30 0.05 45 / 0.6);
  border-color:var(--clay);
}
.sheet:hover::before{ transform:translateY(-3px); }
.sheet h3{ font-size:1.22rem; margin-bottom:0.55rem; }
.sheet p{ font-size:var(--step--1); color:var(--ink-2); margin:0 0 1.15rem; flex:1; }
.sheet__dl{
  font-size:0.9rem; font-weight:700; color:var(--clay);
  display:inline-flex; align-items:center; gap:0.5em;
}
.sheet__dl svg{ transition:transform .4s var(--ease); }
.sheet:hover .sheet__dl svg{ transform:translateY(3px); }

/* =====================  BEITRÄGE  ===================== */
.journal{ padding-block:clamp(4rem,8vw,7rem); }
.journal__head{ display:flex; flex-wrap:wrap; gap:1.5rem; align-items:end; justify-content:space-between; margin-bottom:clamp(2rem,4vw,3rem); }
.journal__head h2{ font-size:var(--step-3); }

.posts{ display:grid; gap:clamp(1.4rem,3vw,2.2rem); }
@media (min-width:780px){ .posts{ grid-template-columns:repeat(3,1fr); } }

.post{ text-decoration:none; display:flex; flex-direction:column; }
.post--lead{ grid-column:1/-1; }
@media (min-width:780px){
  .post--lead{ grid-column:1/-1; display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(1.5rem,3vw,2.8rem); align-items:center; }
}
.post__img{
  overflow:hidden; border-radius:var(--radius);
  aspect-ratio:var(--foto); margin-bottom:1.1rem; background:var(--paper-3);
}
.post--lead .post__img{ margin-bottom:0; }
.post__img img{
  width:100%; height:100%;
  transition:transform 1s var(--ease), filter .6s var(--ease);
  filter:saturate(0.88);
}
/* gleichmäßiger Zoom, verändert das Seitenverhältnis nicht */
.post:hover .post__img img{ transform:scale(1.04); filter:saturate(1); }
.post__cat{
  font-size:0.82rem; font-weight:700; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--clay); margin-bottom:0.6rem; display:block;
}
.post h3{
  font-size:clamp(1.22rem,1.06rem + 0.65vw,1.6rem);
  margin-bottom:0.6rem;
  transition:color .3s var(--ease);
}
.post--lead h3{ font-size:clamp(1.6rem,1.25rem + 1.6vw,2.5rem); }
.post:hover h3{ color:var(--clay); }
.post p{ font-size:var(--step--1); color:var(--ink-2); margin:0; }
.post__meta{ font-size:0.85rem; color:var(--ink-2); margin-top:0.9rem; display:block; }

/* =====================  NÜTZLICHES  ===================== */
.useful{ padding-block:clamp(4rem,8vw,7rem); background:var(--paper-2); }
.useful__grid{ display:grid; gap:clamp(2.2rem,4.5vw,4rem); }
@media (min-width:900px){ .useful__grid{ grid-template-columns:0.95fr 1.05fr; } }
.useful h2{ font-size:var(--step-2); margin-bottom:1.2rem; }
.useful__lead{ color:var(--ink-2); }

.starter{ list-style:none; margin:0; padding:0; counter-reset:s; }
.starter li{
  counter-increment:s;
  display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:baseline;
  padding:0.85rem 0;
  border-bottom:1px solid var(--line);
  font-size:clamp(1.05rem,0.98rem + 0.35vw,1.22rem);
}
.starter li:first-child{ border-top:1px solid var(--line); }
.starter li::before{
  content:counter(s,decimal-leading-zero);
  font-family:Faustina,Georgia,serif; font-size:0.95em; color:var(--clay);
  font-variant-numeric:tabular-nums;
}
.note{
  margin-top:2rem;
  background:var(--umber);
  color:oklch(0.87 0.02 70);
  padding:clamp(1.4rem,3vw,2rem);
  border-radius:var(--radius);
}
.note h3{ color:var(--paper); font-size:1.3rem; margin-bottom:0.8rem; }
.note p{ font-size:var(--step--1); margin:0 0 0.9rem; }
.note ul{ margin:0; padding-left:1.15rem; font-size:var(--step--1); }
.note li{ margin-bottom:0.3rem; }
.note li::marker{ color:var(--amber); }

/* =====================  NEWSLETTER  ===================== */
.letter{
  background:var(--clay);
  color:var(--paper);
  padding-block:clamp(3.5rem,7vw,6rem);
}
.letter__grid{ display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:center; }
@media (min-width:900px){ .letter__grid{ grid-template-columns:1fr 1fr; } }
.letter h2{ font-size:var(--step-2); margin-bottom:1rem; }
.letter p{ color:oklch(0.94 0.03 62); margin:0; }

.form{ display:grid; gap:0.9rem; }
.field{ display:grid; gap:0.4rem; }
.field label{ font-size:var(--step--1); font-weight:700; }
.field input[type=text],.field input[type=email]{
  font-family:inherit; font-size:var(--step-0);
  padding:0.85em 1em;
  border:1.5px solid oklch(1 0 0 / 0.4);
  background:oklch(1 0 0 / 0.1);
  color:var(--paper);
  border-radius:var(--radius);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.field input::placeholder{ color:oklch(1 0 0 / 0.6); }
.field input:focus{ background:oklch(1 0 0 / 0.18); border-color:var(--paper); }
.consent{ display:flex; gap:0.7rem; align-items:flex-start; font-size:var(--step--1); line-height:1.5; }
.consent input{ width:1.35em; height:1.35em; margin-top:0.15em; accent-color:var(--umber); flex:none; }

/* =====================  FUSS  ===================== */
.foot{
  background:var(--umber);
  color:oklch(0.80 0.025 68);
  padding-block:clamp(3rem,6vw,4.5rem) 2rem;
  font-size:var(--step--1);
}
.foot__grid{ display:grid; gap:2.5rem; margin-bottom:3rem; }
@media (min-width:760px){ .foot__grid{ grid-template-columns:1.6fr 1fr 1fr; } }
.foot h4{ color:var(--paper); font-size:1.05rem; margin-bottom:1rem; letter-spacing:0; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:0.55rem; }
.foot a{ text-decoration:none; transition:color .25s var(--ease); }
.foot a:hover{ color:var(--amber); }
.foot .mark{ color:var(--paper); margin-bottom:1rem; }
.foot .mark span{ color:var(--amber); }
.foot__note{ max-width:44ch; margin:0; }
.foot__bar{
  border-top:1px solid var(--line-dark);
  padding-top:1.5rem;
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  font-size:0.85rem;
}
.foot__bar ul{ display:flex; flex-wrap:wrap; gap:1.25rem; }

/* =====================  BEWEGUNG  ===================== */
[data-rise]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay:var(--d, 0ms);
}
[data-rise].is-in{ opacity:1; transform:none; }

[data-stagger] > *{
  opacity:0; transform:translateY(18px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
[data-stagger].is-in > *{ opacity:1; transform:none; }

.hero__in [data-rise]{ transition-duration:1.05s; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-rise],[data-stagger] > *{ opacity:1 !important; transform:none !important; }
  .track__fill{ height:100% !important; }
}


/* WordPress content templates */
.wp-content-shell{padding-block:clamp(3.5rem,7vw,6rem)}
.wp-content-card{background:var(--paper);border:1px solid var(--line);padding:clamp(1.3rem,4vw,3rem);box-shadow:0 22px 50px -38px oklch(0.28 0.04 45 / .45)}
.wp-content-card h1{font-size:var(--step-3);margin-bottom:1rem}.wp-content-card h2{font-size:var(--step-2);margin:2.2rem 0 1rem}.wp-content-card h3{font-size:var(--step-1);margin:1.7rem 0 .75rem}
.wp-content-card p,.wp-content-card li{max-width:75ch}.wp-content-card a{color:var(--clay);font-weight:700}.wp-content-card img{height:auto;max-width:100%;object-fit:cover}.wp-content-card .post-list{display:grid;gap:1rem;margin-top:2rem}.wp-content-card .post-list article{border-top:1px solid var(--line);padding-top:1rem}
.archive-card{overflow:hidden}.archive-intro{font-size:var(--step-0);color:var(--muted);margin-top:.35rem}.post-list--cards{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.35rem!important}.wp-content-card .post-list--cards .post-teaser{padding:0;border:1px solid var(--line);background:oklch(0.99 0.006 78);display:flex;flex-direction:column;min-height:100%;box-shadow:0 16px 34px oklch(0.25 0.04 45 / .08);overflow:hidden}.post-teaser__image{display:block;aspect-ratio:3/2;background:var(--clay-tint);color:var(--clay);overflow:hidden}.post-teaser__image img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .35s var(--ease)}.post-teaser:hover .post-teaser__image img{transform:scale(1.035)}.post-teaser__image span{height:100%;display:grid;place-items:center;font-family:var(--font-serif);font-size:3rem;font-weight:700}.post-teaser__body{padding:1.05rem 1.15rem 1.2rem;display:flex;flex-direction:column;flex:1}.post-teaser__meta{margin:0 0 .45rem;color:var(--muted);font-size:.88rem;font-weight:700}.wp-content-card .post-teaser h2{font-size:clamp(1.25rem,2.5vw,1.65rem);margin:0 0 .65rem}.post-teaser__body p{margin-bottom:.9rem}.post-teaser__more{margin-top:auto;align-self:flex-start}


/* Amazon-Produktbereich auf "Nützliche Produkte" */
.amazon-shop-box{
  margin:clamp(2rem,4vw,3.5rem) 0;
  padding:clamp(1.2rem,3vw,2rem);
  border:1px solid var(--line);
  background:oklch(0.985 0.009 78);
  box-shadow:0 16px 36px oklch(0.25 0.04 45 / 0.08);
}
.amazon-shop-box .affiliate-note{
  max-width:none;
  margin:0 0 1.2rem;
  padding:.9rem 1rem;
  background:oklch(0.96 0.04 145);
  border-left:4px solid oklch(0.48 0.11 145);
  color:oklch(0.28 0.06 145);
  font-size:var(--step--1);
}
.amazon-shop-head{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);
  gap:clamp(1rem,3vw,2rem);
  align-items:end;
  margin-bottom:1.25rem;
}
.amazon-shop-head h2{margin:0 0 .55rem;}
.amazon-shop-head p{margin:0;}
.amazon-product-search label{
  display:block;
  margin-bottom:.45rem;
  font-weight:700;
  color:var(--umber);
}
.amazon-product-search div{
  display:flex;
  gap:.55rem;
}
.amazon-product-search input[type="search"]{
  min-width:0;
  flex:1;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  padding:.82rem .9rem;
  font:inherit;
}
.amazon-product-search button,
.amazon-load-products{
  border:0;
  background:var(--clay);
  color:#fff;
  padding:.82rem 1rem;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.amazon-product-search button:hover,
.amazon-load-products:hover{background:var(--clay-deep);}
.amazon-load-products:disabled{opacity:.7; cursor:wait;}
.amazon-consent-panel{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
  padding:1rem;
  border:1px dashed var(--line-dark);
  background:var(--paper);
}
.amazon-consent-panel p{margin:0; max-width:72ch;}
.amazon-products-target[hidden],
.amazon-consent-panel[hidden]{display:none!important;}
.amazon-product-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
  margin-top:1.3rem;
}
.amazon-product-card{
  display:flex;
  flex-direction:column;
  min-height:100%;
  border:1px solid var(--line);
  background:#fff;
}
.amazon-product-image{
  display:grid;
  place-items:center;
  aspect-ratio:4/3;
  background:linear-gradient(135deg,var(--paper-2),#fff);
  overflow:hidden;
  text-decoration:none;
}
.amazon-product-image img{
  width:100%;
  height:100%!important;
  object-fit:contain!important;
  padding:1rem;
}
.amazon-product-image span{
  display:grid;
  place-items:center;
  width:4rem;
  height:4rem;
  border-radius:999px;
  background:var(--clay-tint);
  color:var(--clay-deep);
  font-family:Faustina, Georgia, serif;
  font-size:2rem;
  font-weight:700;
}
.amazon-product-body{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:.7rem;
  padding:1rem;
}
.amazon-product-body h3{
  font-family:"Atkinson Hyperlegible", system-ui, sans-serif;
  font-size:1.02rem;
  line-height:1.25;
  letter-spacing:0;
}
.amazon-product-body p{
  margin:0;
  font-size:var(--step--1);
  line-height:1.55;
}
.amazon-product-button{
  margin-top:auto;
  display:inline-flex;
  justify-content:center;
  text-align:center;
  text-decoration:none;
  background:var(--umber);
  color:#fff;
  padding:.72rem .9rem;
  font-weight:700;
}
.amazon-product-button:hover{background:var(--umber-2);}
@media (max-width:900px){
  .amazon-shop-head{grid-template-columns:1fr; align-items:start;}
  .amazon-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:620px){
  .amazon-product-grid{grid-template-columns:1fr;}
  .amazon-product-search div{flex-direction:column;}
  .amazon-consent-panel{display:block;}
  .amazon-consent-panel .amazon-load-products{width:100%; margin-top:.4rem;}
}


.amazon-shop-layout{
  display:grid;
  grid-template-columns:minmax(150px,220px) minmax(0,1fr);
  gap:clamp(1rem,3vw,1.7rem);
  align-items:start;
}
.amazon-category-nav{
  position:sticky;
  top:1rem;
  display:flex;
  flex-direction:column;
  gap:.45rem;
  padding:1rem;
  border:1px solid var(--line);
  background:#fff;
}
.amazon-category-nav strong{
  color:var(--umber);
  margin-bottom:.25rem;
}
.amazon-category-nav a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--line);
  padding:.35rem 0;
  font-size:var(--step--1);
}
.amazon-category-nav a:hover{
  color:var(--clay-deep);
}
.amazon-category-grid{
  display:flex;
  flex-direction:column;
  gap:clamp(1.2rem,3vw,2rem);
}
.amazon-product-category{
  scroll-margin-top:1.2rem;
  padding-top:.2rem;
}
.amazon-category-heading{
  border-top:1px solid var(--line);
  padding-top:1rem;
  margin-top:.4rem;
}
.amazon-category-heading h3{
  margin:0 0 .35rem;
  color:var(--umber);
}
.amazon-category-heading p{
  max-width:70ch;
  margin:0;
}
.amazon-product-body h4{
  margin:0;
  font-family:"Atkinson Hyperlegible", system-ui, sans-serif;
  font-size:1.02rem;
  line-height:1.25;
  letter-spacing:0;
}
.product-buying-guide{
  margin:clamp(1.5rem,3vw,2.5rem) 0;
  padding:clamp(1rem,3vw,1.6rem);
  border:1px solid var(--line);
  background:var(--paper-2);
}
.product-buying-guide h2{margin-top:0;}
@media (max-width:900px){
  .amazon-shop-layout{grid-template-columns:1fr;}
  .amazon-category-nav{
    position:static;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .amazon-category-nav strong{grid-column:1/-1;}
}
@media (max-width:620px){
  .amazon-category-nav{grid-template-columns:1fr;}
}