/* Hund..Katze..Maus. · Katrin Bauer · Stylesheet
   Gebaut von RGN Marketing · rgn-marketing.de */

/* ---------- Schriften (lokal) ---------- */
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage-var.woff2") format("woff2");font-weight:500 800;font-style:normal;font-display:swap;}
@font-face{font-family:"Figtree";src:url("../fonts/figtree-var.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;}

/* ---------- Tokens ---------- */
:root{
  --green:#0E5A2D;
  --green-deep:#0A4322;
  --green-ink:#08331A;
  --yellow:#F8C80A;
  --yellow-hover:#FFD52E;
  --yellow-soft:#FBE38A;
  --yellow-pale:#FDF3C4;
  --cream:#F8F3E6;
  --cream-2:#F1E9D6;
  --paper:#FCF9F1;
  --ink:#18241C;
  --ink-2:#3C4A40;
  --grey:#56625A;
  --line:rgba(24,36,28,.14);
  --line-strong:rgba(24,36,28,.3);
  --on-green:#F8F3E6;
  --on-green-2:rgba(248,243,230,.84);
  --line-on-green:rgba(248,243,230,.24);

  --f-head:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;

  --step--1:.9375rem;
  --step-0:clamp(1.0625rem, 1.03rem + .16vw, 1.15rem);
  --step-1:clamp(1.15rem, 1.09rem + .28vw, 1.375rem);
  --step-2:clamp(1.3rem, 1.18rem + .55vw, 1.75rem);
  --step-3:clamp(1.6rem, 1.38rem + 1vw, 2.375rem);
  --step-4:clamp(2rem, 1.55rem + 2vw, 3.5rem);
  --step-5:clamp(2.5rem, 1.6rem + 4vw, 5rem);

  --gutter:clamp(1.25rem, .8rem + 2.4vw, 3rem);
  --content:min(78rem, 100% - 2 * var(--gutter));
  --section:clamp(4.5rem, 2.8rem + 6vw, 8.5rem);

  --r-img:6px;
  --r-btn:10px;
  --r-card:20px;
  --r-big:26px;
  --r-chip:999px;

  --focus:var(--green);
  --header-h:78px;

  /* Motion-Core (rgn-micro-animationen), Charakter „Ruhig-edel" */
  --e-soft:cubic-bezier(.22,1,.36,1);--e-calm:cubic-bezier(.25,1,.3,1);--e-snap:cubic-bezier(.34,1.56,.64,1);--e-ui:cubic-bezier(.4,0,.2,1);
  --t-soft:.45s;--t-calm:.75s;--t-snap:.50s;--t-ui:.14s;--t-mid:.3s;--t-draw:1.2s;
  --rv-y:10px;--rv-step:70ms;--e-rv:var(--e-calm);--t-rv:var(--t-calm);
}
@supports (animation-timing-function: linear(0,1)){:root{
  --e-soft: linear(0,.0492,.1613,.2979,.4356,.5617,.6701,.759,.8294,.8833,.9233,.9521,.9721,.9857,.9944,.9996,1.0026,1.0039,1.0043,1.0042,1.0037,1.0031,1.0025,1);
  --e-calm: linear(0,.1012,.28,.4507,.5905,.6983,.779,.8387,.8824,.9143,.9376,.9546,.967,.976,.9825,.9873,.9907,.9933,.9951,.9964,.9974,.9981,.9986,1);
  --e-snap: linear(0,.0787,.2535,.4562,.6451,.7995,.9128,.9874,1.0301,1.0493,1.0527,1.0471,1.0372,1.0265,1.0169,1.0091,1.0036,1.0001,.9981,.9973,.9972,.9976,.9982,1);}}
@media (max-width:700px){:root{--rv-y:6px;--rv-step:55ms;--header-h:66px;}}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{color-scheme:light;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1px);overflow-x:clip;}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--f-body);font-size:var(--step-0);line-height:1.6;font-weight:400;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;caret-color:var(--green);accent-color:var(--green);}
img,video{display:block;max-width:100%;height:auto;}
picture{display:contents;}
html:not(.js) video[data-poster]{display:none;}
svg{display:block;}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em;}
p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}
ul,ol{margin:0;padding:0;list-style:none;}
figure{margin:0;}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:600;line-height:1.04;letter-spacing:-.025em;margin:0;text-wrap:balance;}
h2{font-size:var(--step-4);}
h3{font-size:var(--step-2);letter-spacing:-.015em;line-height:1.15;}
h2 em,h3 em{font-style:normal;display:block;color:var(--green);}
p,li,dd,figcaption,blockquote{text-wrap:pretty;}
::selection{background:var(--yellow);color:var(--ink);}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px;}
button,input,select,textarea{font:inherit;color:inherit;}
.num{font-variant-numeric:tabular-nums;}
.nw{white-space:nowrap;}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip{position:absolute;left:12px;top:-80px;z-index:1000;background:var(--ink);color:var(--cream);padding:.75rem 1.1rem;border-radius:var(--r-btn);text-decoration:none;font-weight:600;}
.skip:focus{top:12px;}

.wrap{width:var(--content);margin-inline:auto;}
.section{padding-block:var(--section);}
.section--paper{background:var(--paper);}
.section--cream2{background:var(--cream-2);}
.lead{font-size:var(--step-1);line-height:1.5;color:var(--ink-2);max-width:40rem;}
.head{display:grid;gap:1.25rem;margin-bottom:clamp(2.5rem, 1.8rem + 2.6vw, 4.5rem);max-width:64rem;}

/* Dunkle Flächen: .hero, .promise, .contact (alle tragen .on-green) */
.on-green{color:var(--on-green);--focus:var(--yellow);}
.on-green h2 em,.on-green h3 em{color:var(--yellow);}
.on-green .lead{color:var(--on-green-2);}

/* ---------- Icons ---------- */
.i{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}
.i--fill{fill:currentColor;stroke:none;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.5rem;padding:0 1.5rem;border-radius:var(--r-btn);border:1.5px solid transparent;font-family:var(--f-body);font-weight:650;font-size:1.0625rem;line-height:1.1;text-decoration:none;cursor:pointer;white-space:nowrap;}
.btn .i{width:1.3em;height:1.3em;}
.btn--wa{background:var(--yellow);color:var(--ink);border-color:var(--yellow);}
.btn--wa:hover{background:var(--yellow-hover);border-color:var(--yellow-hover);}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.btn--ghost:hover{border-color:var(--ink);background:rgba(24,36,28,.04);}
.on-green .btn--ghost{color:var(--on-green);border-color:rgba(248,243,230,.55);}
.on-green .btn--ghost:hover{border-color:var(--on-green);background:rgba(248,243,230,.08);}
.btn--sm{min-height:2.75rem;padding:0 1rem;font-size:.98rem;}
.btns{display:flex;flex-wrap:wrap;gap:.75rem;}

/* Motion-Core: Hover und Druck */
.btn,[data-lift]{transition:transform var(--t-ui) var(--e-ui),box-shadow var(--t-ui) var(--e-ui),background-color var(--t-ui) var(--e-ui),border-color var(--t-ui) var(--e-ui);}
@media (hover:hover){.btn:hover,[data-lift]:hover{transform:translateY(-2px);}}
.btn:active,[data-lift]:active{transform:translateY(0);transition-duration:60ms;}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:900;background:var(--cream);border-bottom:1px solid transparent;transition:border-color var(--t-mid) var(--e-ui);}
.site-header.is-scrolled{border-bottom-color:var(--line);}
.site-header__in{width:min(84rem, 100% - 2 * var(--gutter));margin-inline:auto;height:var(--header-h);display:flex;align-items:center;gap:1rem;}
.brand{display:block;flex:none;line-height:0;margin-right:auto;}
.brand img{height:54px;width:auto;}
.nav{display:none;}
.nav ul{display:flex;gap:clamp(1rem, .3rem + 1.1vw, 1.75rem);}
.nav a{display:block;text-decoration:none;font-weight:550;font-size:1rem;color:var(--ink);padding-block:.5rem;background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 100%/0 2px;transition:background-size var(--t-mid) var(--e-ui);}
.nav a:hover{background-size:100% 2px;}
.hbtn{display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;flex:none;border-radius:var(--r-btn);border:1.5px solid var(--line-strong);color:var(--ink);}
.hbtn .i{width:1.3rem;height:1.3rem;}
.hbtn:hover{border-color:var(--ink);}
.btn__long{display:none;}
@media (min-width:600px){.btn__long{display:inline;}.btn__short{display:none;}}
@media (min-width:1120px){.nav{display:block;margin-left:auto;margin-right:.75rem;}.hbtn{display:none;}.brand{margin-right:0;}}
@media (max-width:700px){.brand img{height:44px;}.site-header__in{gap:.6rem;}.site-header .btn{min-height:2.75rem;padding:0 1rem;}}
/* Unter 360 px: Logo und WhatsApp-Knopf etwas schmaler, damit der Knopf ganz in der Kopfzeile bleibt */
@media (max-width:359px){.brand{display:flex;align-items:center;min-height:44px;}.brand img{height:40px;}.site-header__in{gap:.45rem;}.site-header .btn{padding:0 .75rem;gap:.45rem;font-size:.9375rem;}}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;background:var(--green-ink);overflow:hidden;}
.hero__media{position:absolute;inset:0;z-index:-2;}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:62% 30%;}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(90deg, rgba(8,51,26,.9) 0%, rgba(8,51,26,.76) 32%, rgba(8,51,26,.28) 58%, rgba(8,51,26,0) 76%),
  linear-gradient(0deg, rgba(8,51,26,.62) 0%, rgba(8,51,26,0) 30%);}
/* Tablet/kleiner PC: Claim läuft in zwei Zeilen weiter nach rechts, Verlauf deshalb breiter */
@media (min-width:801px) and (max-width:1279px){.hero::before{background:
  linear-gradient(90deg, rgba(8,51,26,.9) 0%, rgba(8,51,26,.8) 42%, rgba(8,51,26,.42) 66%, rgba(8,51,26,0) 86%),
  linear-gradient(0deg, rgba(8,51,26,.62) 0%, rgba(8,51,26,0) 30%);}}
.hero__in{width:min(84rem, 100% - 2 * var(--gutter));margin-inline:auto;min-height:clamp(640px, calc(100svh - var(--header-h)), 900px);display:flex;flex-direction:column;justify-content:center;padding-block:clamp(2.5rem, 1.5rem + 3vw, 4.5rem) clamp(2rem, 1.5rem + 2vw, 3rem);}
.hero__text{max-width:52rem;}
.hero h1{font-family:var(--f-body);font-weight:650;font-size:var(--step-0);line-height:1.35;letter-spacing:.005em;color:var(--yellow);max-width:46rem;margin-bottom:1.1rem;}
/* Claim auf allen Breiten in zwei Zeilen (Florian 13.10.2026): „Mehr Freiraum für deinen Hund, / mehr Freiraum für dich.“
   Pinselstrich schmal und dicht unter „Freiraum“, damit der Abstand zur zweiten Zeile klein bleibt. */
.claim{font-family:var(--f-head);font-weight:500;font-size:var(--step-5);line-height:1;letter-spacing:-.035em;margin:0 0 1.6rem;color:var(--on-green);}
.claim__l{display:block;}
.claim__l + .claim__l{margin-top:.1em;}
.mark{position:relative;display:inline-block;}
.mark__brush{position:absolute;left:-.03em;top:calc(100% - .07em);width:calc(100% + .07em);height:.14em;overflow:visible;pointer-events:none;}
.mark__brush path{fill:var(--yellow);}
html.js .mark__brush{clip-path:inset(0 100% 0 0);}
html.js .mark.is-drawn .mark__brush{clip-path:inset(0 0 0 0);transition:clip-path var(--t-draw) var(--e-calm) .35s;}
.hero__sub{font-size:1rem;line-height:1.55;color:var(--on-green-2);max-width:34rem;margin-bottom:1.25rem;}
.hero__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem;margin-bottom:1.75rem;font-size:1.0625rem;color:var(--on-green);}
.hero__price strong{font-family:var(--f-head);font-weight:600;font-size:1.875rem;letter-spacing:-.02em;line-height:1;}
.hero__price small{font-size:.9375rem;color:var(--on-green-2);}
.hero__facts{display:grid;grid-template-columns:repeat(2,max-content);gap:.6rem 2.25rem;width:fit-content;max-width:100%;margin-top:clamp(2rem, 1.2rem + 2vw, 3rem);padding-top:1.35rem;border-top:1px solid var(--line-on-green);font-size:1rem;font-weight:550;color:var(--on-green);}
@media (min-width:1120px){.hero__facts{grid-template-columns:repeat(4,max-content);}}
.hero__facts li{display:flex;align-items:center;gap:.55rem;}
.hero__facts .i{color:var(--yellow);stroke-width:2;}
/* Faktenzeile liegt ab 801 px auf dem Foto: weicher dunkler Streifen dahinter, Text ≥ 4,5 : 1 */
@media (min-width:801px){.hero__facts{position:relative;}.hero__facts::before{content:"";position:absolute;z-index:-1;pointer-events:none;top:-2.75rem;bottom:-2.25rem;left:-100vw;right:-100vw;background:linear-gradient(180deg, rgba(8,51,26,0), rgba(8,51,26,.66) 38%, rgba(8,51,26,.66) 72%, rgba(8,51,26,0));}}
@media (max-width:800px){
  .hero{display:flex;flex-direction:column;}
  .hero__media{position:relative;inset:auto;width:100%;aspect-ratio:4/3;max-height:50svh;}
  .hero__media img{object-position:50% 20%;}
  .hero::before{display:none;}
  .hero__media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg, rgba(8,51,26,0) 40%, rgba(8,51,26,.55) 60%, rgba(8,51,26,.92) 80%, var(--green-ink) 97%);}
  .hero__in{min-height:0;margin-top:-4rem;padding-top:0;padding-bottom:2.75rem;}
  .hero__sub{font-size:1rem;}
  .hero__facts{grid-template-columns:minmax(0,1fr);gap:.7rem;margin-top:2.25rem;}
}
@media (max-width:440px){.hero .btns .btn{flex:1 1 100%;}}
/* Handy: Claim in genau zwei Zeilen. 9,07 = Breite der längeren Zeile je px Schriftgröße (gemessen),
   95,2vw − 1,6rem = Inhaltsbreite bis 1466 px, 0,97 = Reserve für Safari/Firefox. */
@media (max-width:800px){
  .claim{font-size:min(calc(10.18vw - .172rem), 3.25rem);}
}

/* ---------- Über Katrin ---------- */
.about{display:grid;gap:clamp(2.5rem, 1.5rem + 4vw, 6rem);grid-template-columns:minmax(0,1fr);align-items:start;}
@media (min-width:900px){.about{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);}}
.about__photo img{border-radius:var(--r-img);width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;}
.about__photo figcaption{margin-top:.7rem;font-size:var(--step--1);color:var(--ink-2);}
@media (max-width:899px){.about__photo{max-width:30rem;}}
/* Spaltenregel (Florian 12.10.2026): rechts deutlich länger als links → linke Spalte läuft mit und endet bündig. */
@media (min-width:900px) and (min-height:600px){
  .about__photo{position:sticky;top:calc(var(--header-h) + 1.25rem);}
  .about__photo img{max-height:calc(100vh - var(--header-h) - 2.5rem);}
}
/* Tablet hochkant (700–899 px): Foto links neben Überschrift und Text, gleich hoch und bündig. Die Zeitleiste läuft darunter über die volle Breite. */
@media (min-width:700px) and (max-width:899px){
  .about{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:2.5rem;row-gap:0;}
  .about__text{display:contents;}
  .about__text > *{grid-column:2;}
  .about__text > p:last-of-type{margin-bottom:0;}
  .about__text .tl{grid-column:1 / -1;}
  .about__photo{grid-column:1;grid-row:1 / span 4;max-width:none;align-self:stretch;position:relative;min-height:22rem;}
  .about__photo img{position:absolute;inset:0;height:100%;aspect-ratio:auto;}
}
.about__text h2{margin-bottom:1.5rem;}
.about__text .lead{margin-bottom:1.4rem;}
.about__text p{max-width:38rem;}
.tl{margin:2.5rem 0 0;border-top:1px solid var(--line);}
.tl__row{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:1.25rem;padding:1.1rem 0;border-bottom:1px solid var(--line);}
.tl dt{font-family:var(--f-head);font-weight:600;font-size:1.375rem;letter-spacing:-.02em;color:var(--green);line-height:1.3;}
.tl dd{margin:0;color:var(--ink-2);}
@media (max-width:480px){.tl__row{grid-template-columns:minmax(0,1fr);gap:.15rem;}}

/* ---------- Vormittag ---------- */
.day{--dot:2.5rem;position:relative;}
.step{position:relative;display:grid;grid-template-columns:var(--dot) minmax(0,1fr);column-gap:1.25rem;padding-bottom:clamp(3rem, 2rem + 3vw, 5rem);}
.step:last-child{padding-bottom:0;}
.step::before,.step::after{content:"";position:absolute;left:calc(var(--dot) / 2 - 1px);top:1.6rem;bottom:-.4rem;width:2px;}
.step::before{background:var(--line);}
.step::after{background:var(--green);transform-origin:top;transform:scaleY(0);transition:transform var(--t-draw) var(--e-calm) .2s;}
.step.is-on::after{transform:scaleY(1);}
.step:last-child::before,.step:last-child::after{display:none;}
.step__dot{position:relative;z-index:1;display:flex;justify-content:center;padding-top:.35rem;}
.step__dot span{width:16px;height:16px;border-radius:50%;background:var(--paper);border:2px solid var(--green);transition:background-color var(--t-mid) var(--e-ui);}
.step.is-on .step__dot span{background:var(--yellow);}
.step__body{display:grid;gap:1.75rem;grid-template-columns:minmax(0,1fr);align-items:start;}
.step__time{display:block;font-family:var(--f-head);font-weight:600;font-size:var(--step-3);letter-spacing:-.03em;line-height:1;color:var(--green);margin-bottom:.7rem;}
.step h3{margin-bottom:.75rem;}
.step p{color:var(--ink-2);max-width:34rem;}
.step__media img,.step__media video{border-radius:var(--r-img);width:100%;}
.step__media--portrait{max-width:22rem;}
.step__media--video{max-width:17rem;}
.step__media--wide{max-width:30rem;}
.step__media figcaption{margin-top:.6rem;font-size:var(--step--1);color:var(--ink-2);}
.step__fact{display:none;}
@media (min-width:900px){.day{--dot:3rem;}}
/* Ab Tablet stehen die Schritte nebeneinander (Florian 12.10.2026: am PC Bilder weit rechts, viel Leerraum,
   Spalten nicht synchron). Subgrid hält Text- und Bildreihe auf einer Linie. Handy bleibt einspaltig. */
@media (min-width:768px){
  .day{--gap:clamp(1.75rem, .5rem + 1.6vw, 2.75rem);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);row-gap:1.4rem;}
  .step{grid-row:span 3;display:grid;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);padding-bottom:0;}
  .step::before,.step::after{left:calc(16px + .7rem);right:calc(.7rem - var(--gap));top:calc(.35rem + 7px);bottom:auto;width:auto;height:2px;}
  .step::after{transform-origin:left;transform:scaleX(0);transition-duration:.7s;}
  .step.is-on::after{transform:scaleX(1);}
  .step:nth-child(2n) .step__dot span{transition-delay:.85s;}
  .step__dot{justify-content:flex-start;}
  .step__body{display:contents;}
  .step p{font-size:1.0625rem;}
  .step__media{max-width:none;width:100%;}
  .step__media img,.step__media video{aspect-ratio:1;height:auto;object-fit:cover;}
  .step__media--wide img{object-position:44% 50%;}
  .step__fact{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:.35rem;aspect-ratio:1;padding:clamp(1.25rem, .6rem + 1vw, 1.75rem);border-radius:var(--r-img);background:var(--green);color:var(--on-green);}
  .step__fact-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 12%;}
  .step__fact::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg, rgba(8,51,26,.16) 0%, rgba(8,51,26,.42) 26%, rgba(8,51,26,.88) 48%, rgba(8,51,26,.94) 100%);}
  .step__fact-k{font-size:1rem;font-weight:600;color:var(--on-green);}
  .step__fact-n{font-family:var(--f-head);font-weight:600;font-size:clamp(2.6rem, 1rem + 2.4vw, 3.6rem);line-height:1;letter-spacing:-.035em;color:var(--yellow);}
  .step__fact-t{font-size:1rem;color:var(--on-green-2);}
}
/* Tablet: 2 × 2, Linie nur innerhalb einer Reihe */
@media (min-width:768px) and (max-width:1129px){
  .step:nth-child(2n)::before,.step:nth-child(2n)::after{display:none;}
  .step:nth-child(n+3){margin-top:clamp(2rem, 1rem + 2vw, 3rem);}
  .step__media img,.step__media video,.step__fact{aspect-ratio:4/3;}
}
/* PC: alle vier nebeneinander (ab 1130 px, darunter zu eng für gleich viele Zeilen), die Linie zeichnet sich nacheinander */
@media (min-width:1130px){
  .day{grid-template-columns:repeat(4,minmax(0,1fr));}
  .step:nth-child(2)::after{transition-delay:.9s;}
  .step:nth-child(3)::after{transition-delay:1.6s;}
  .step:nth-child(3) .step__dot span{transition-delay:1.55s;}
  .step:nth-child(4) .step__dot span{transition-delay:2.25s;}
}
html:not(.js) .step::after{transform:scaleY(1);}

/* ---------- Versprechen (dunkelgrün) ---------- */
.promise{background:var(--green);display:grid;grid-template-columns:minmax(0,1fr);}
@media (min-width:960px){.promise{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);}}
.promise__text{padding:var(--section) var(--gutter);display:grid;align-content:center;}
.promise__inner{max-width:46rem;margin-left:auto;width:100%;}
.promise blockquote{margin:0 0 clamp(2.5rem, 2rem + 2vw, 3.75rem);}
.promise blockquote p{font-family:var(--f-head);font-weight:500;font-size:clamp(1.9rem, 1.35rem + 2.5vw, 3.75rem);line-height:1.04;letter-spacing:-.03em;margin:0 0 1.1rem;}
.promise blockquote em{font-style:normal;color:var(--yellow);}
.promise cite{font-style:normal;color:var(--on-green-2);font-size:1rem;}
.promise h2{font-size:var(--step-3);margin-bottom:1rem;}
.promise__intro{color:var(--on-green-2);max-width:38rem;margin-bottom:2rem;}
.promise__cols{display:grid;gap:2rem;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line-on-green);padding-top:2rem;}
@media (min-width:640px){.promise__cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem;}}
.promise h3{font-size:var(--step-1);margin-bottom:.6rem;color:var(--on-green);}
.promise__cols p{color:var(--on-green-2);font-size:1.0625rem;}
.promise__photo{position:relative;min-height:24rem;}
.promise__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;}
@media (max-width:959px){.promise__photo{min-height:0;aspect-ratio:4/3.6;order:-1;}}

/* ---------- Preise ---------- */
.prices{display:grid;gap:clamp(2.5rem, 1.5rem + 4vw, 6rem);grid-template-columns:minmax(0,1fr);align-items:start;}
@media (min-width:700px){.prices{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);}}
@media (min-width:700px) and (max-width:959px){.prices{column-gap:2.5rem;}}
.plist{border-top:1.5px solid var(--ink);}
.plist__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem 1.5rem;padding:1.6rem 0;border-bottom:1px solid var(--line);}
.plist__row h3{font-size:var(--step-2);}
.plist__price{font-family:var(--f-head);font-weight:600;font-size:var(--step-2);letter-spacing:-.02em;text-align:right;white-space:nowrap;line-height:1.1;margin:0;}
.plist__unit{display:block;margin-top:.2rem;font-family:var(--f-body);font-weight:500;font-size:.9375rem;letter-spacing:0;color:var(--ink-2);}
.plist__row > p:not(.plist__price){grid-column:1 / -1;color:var(--ink-2);max-width:38rem;margin:0;}
.plist__row--main{padding-top:2rem;}
.plist__row--main h3{font-size:var(--step-3);}
.plist__row--main .plist__price{font-size:var(--step-4);}
.hl{background:linear-gradient(transparent 62%, var(--yellow-soft) 62%, var(--yellow-soft) 92%, transparent 92%);padding:0 .06em;}
.incl{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:.35rem;font-size:1rem;font-weight:550;}
.incl li{display:flex;align-items:center;gap:.45rem;}
.incl .i{color:var(--green);stroke-width:2;}
.pnote{margin-top:1.75rem;display:grid;gap:.75rem;font-size:1rem;color:var(--ink-2);max-width:40rem;}
.pnote p{margin:0;}
.pnote strong{color:var(--ink);font-weight:650;}
.prices__photo img{border-radius:var(--r-img);width:100%;aspect-ratio:3/4;object-fit:cover;}
.prices__photo figcaption{margin-top:.7rem;font-size:var(--step--1);color:var(--ink-2);}
@media (max-width:699px){.prices__photo{max-width:26rem;}}
@media (max-width:520px){.plist__row{grid-template-columns:minmax(0,1fr);}.plist__price{text-align:left;}}
@media (min-width:960px){#preise .head{margin-inline:auto;text-align:center;justify-items:center;}}
/* Ab 1024 px stehen die Hinweise als eigene Zeile mittig unter Liste und Foto. */
@media (min-width:1024px){
  .prices{row-gap:clamp(2.25rem, 1rem + 2vw, 3.25rem);}
  .prices > div:first-child{display:contents;}
  .prices .plist{grid-column:1;grid-row:1;}
  .prices__photo{grid-column:2;grid-row:1;}
  .prices .pnote{grid-column:1 / -1;grid-row:2;max-width:none;margin-top:0;padding-top:1.75rem;border-top:1px solid var(--line);justify-items:center;text-align:center;}
  .prices .pnote p{max-width:48rem;}
}
/* 700–1023 px: Die linke Spalte (Preisliste und Hinweise) ist deutlich länger als das Foto, dort läuft das Foto mit.
   Die Hinweise bleiben in dieser Breite in der linken Spalte: Ein mitlaufendes Foto würde eine volle Zeile darunter überdecken. */
@media (min-width:700px) and (max-width:1023px) and (min-height:640px){.prices__photo{position:sticky;top:calc(var(--header-h) + 1.25rem);}}

/* Vergleich */
.cmp{margin-top:clamp(4rem, 3rem + 4vw, 7.5rem);}
.cmp h3{font-size:var(--step-3);margin-bottom:1rem;max-width:32ch;}
.cmp__lead{color:var(--ink-2);max-width:42rem;margin-bottom:clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);}
.ctable{width:100%;border-collapse:separate;border-spacing:0;font-size:1rem;}
.ctable th,.ctable td{text-align:left;vertical-align:top;padding:1.05rem 1.15rem;border-bottom:1px solid var(--line);}
.ctable thead th{font-weight:650;font-size:1rem;color:var(--ink-2);vertical-align:bottom;border-bottom:1.5px solid var(--ink);}
.ctable tbody th{font-weight:650;width:22%;color:var(--ink);}
.ctable td{color:var(--grey);width:39%;}
.ctable .us{background:var(--paper);color:var(--ink);border-left:1.5px solid var(--green);border-right:1.5px solid var(--green);}
.ctable thead .us{border-top:1.5px solid var(--green);border-radius:var(--r-card) var(--r-card) 0 0;border-bottom-color:var(--green);padding-top:1.1rem;}
.ctable tbody tr:last-child .us{border-bottom:1.5px solid var(--green);border-radius:0 0 var(--r-card) var(--r-card);}
.ctable thead .us img{height:46px;width:auto;}
.ctable td.us{font-weight:550;}
.cmp__note{margin-top:1.1rem;font-size:var(--step--1);color:var(--ink-2);max-width:52rem;}
@media (max-width:820px){
  .ctable{font-size:.9375rem;}
  .ctable th,.ctable td{padding:.9rem .8rem;}
  .ctable thead .us img{height:40px;}
}
/* Handy (Florian 12.10.2026: lange Liste mit wiederholten Etiketten gefiel nicht): derselbe Zwei-Spalten-Vergleich
   wie am PC. Kopfzeile mit Logo läuft beim Scrollen mit, jede Zeile hat ihr Thema als kleine Überschrift. */
@media (max-width:640px){
  .ctable,.ctable thead,.ctable tbody{display:block;width:100%;}
  .ctable tr{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);column-gap:0;}
  .ctable th,.ctable td{display:block;width:auto;padding:0;border:0;}
  .ctable thead{position:sticky;top:var(--header-h);z-index:2;background:var(--paper);}
  .ctable thead tr{align-items:end;padding:.65rem 0 .8rem;border-bottom:1.5px solid var(--ink);}
  .ctable thead th{border:0;padding:0;}
  .ctable thead th:first-child{display:none;}
  .ctable thead .us{display:flex;justify-content:flex-start;padding:0 .9rem 0 0;border:0;border-radius:0;}
  .ctable thead .us img{height:40px;}
  .ctable thead th:last-child{align-self:stretch;display:flex;align-items:flex-end;font-size:.875rem;line-height:1.25;padding:0 0 .15rem .9rem;border-left:1px solid var(--line-strong);}
  .ctable tbody tr{row-gap:.6rem;padding:1.05rem 0 1.1rem;border-bottom:1px solid var(--line);}
  .ctable tbody tr:last-child{border-bottom:0;padding-bottom:.25rem;}
  .ctable tbody th{grid-column:1 / -1;width:auto;font-family:var(--f-head);font-weight:600;font-size:1.0625rem;letter-spacing:-.01em;line-height:1.2;}
  .ctable td{font-size:.875rem;line-height:1.45;}
  .ctable td.us{padding:0 .9rem 0 0;border:0;border-radius:0;}
  .ctable tbody tr:last-child .us{border:0;border-radius:0;}
  .ctable td:not(.us){padding:0 0 0 .9rem;border-left:1px solid var(--line-strong);font-size:.875rem;}
}
/* Kleine Handys: etwas engerer Abstand zum Mittelstrich und kleinere Schrift */
@media (max-width:400px){
  .ctable td.us,.ctable thead .us{padding-right:.75rem;}
  .ctable td:not(.us),.ctable thead th:last-child{padding-left:.75rem;}
}
@media (max-width:389px){
  .ctable tr{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);}
  .ctable td:not(.us){font-size:.8125rem;}
}
@media (max-width:339px){.ctable tr{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);}}

/* ---------- Stammgruppe + Galerie ---------- */
.pack{display:grid;gap:clamp(1rem, .6rem + 1.4vw, 2rem);grid-template-columns:repeat(2,minmax(0,1fr));}
.dog img{border-radius:var(--r-img);width:100%;aspect-ratio:4/5;object-fit:cover;}
.dog figcaption{margin-top:.8rem;display:grid;gap:.1rem;}
.dog__name{font-family:var(--f-head);font-weight:600;font-size:var(--step-2);letter-spacing:-.02em;line-height:1.1;}
.dog__role{color:var(--ink-2);font-size:1rem;}
.invite{grid-column:1 / -1;border:1.5px dashed var(--green);border-radius:var(--r-card);padding:clamp(1.75rem, 1.2rem + 2vw, 3rem);display:grid;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:start;gap:1rem;background:var(--paper);}
.invite__dog{width:clamp(4.5rem, 3.5rem + 3vw, 6rem);height:auto;color:var(--green);margin-bottom:-.25rem;}
.invite h3{font-size:var(--step-3);}
.invite p{color:var(--ink-2);max-width:28rem;margin:0;}
@media (max-width:400px){.invite{padding-inline:1.1rem;}.invite .btn{width:100%;padding-inline:.85rem;font-size:1rem;white-space:normal;text-align:center;}}
@media (min-width:900px){
  .pack{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;}
  .dog--monti{grid-column:1 / span 6;}
  .dog--elenor{grid-column:7 / span 5;margin-top:clamp(3rem, 1rem + 5vw, 7rem);}
  .invite{grid-column:1 / -1;margin-top:.5rem;}
}
@media (min-width:1280px){
  .dog--monti{grid-column:1 / span 5;}
  .dog--elenor{grid-column:6 / span 3;}
  .invite{grid-column:9 / span 4;align-self:end;margin-top:0;}
}

/* Laufleiste: alle Hunde, die mitfahren (Katrin 18.10.2026). Zwei gleiche Listen laufen nebeneinander je um
   ihre eigene Breite nach links, dadurch nahtlos. Läuft nur im Sichtbereich ([data-loop]), hält bei Maus darüber
   und per Knopf an; bei reduzierter Bewegung wird daraus eine wischbare Leiste. */
.rudel{--pw:clamp(11.5rem, 9.5rem + 5vw, 15rem);--rg:clamp(.75rem, .5rem + .8vw, 1.25rem);margin-top:clamp(3.5rem, 2.5rem + 3vw, 5.5rem);}
.rudel__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.75rem 1.5rem;margin-bottom:clamp(1.25rem, 1rem + 1vw, 2rem);}
.rudel__head h3{font-size:var(--step-3);}
.rudel__stop{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.5rem 1.05rem;border:1.5px solid var(--green);border-radius:999px;background:transparent;color:var(--green);font:inherit;font-size:.9375rem;font-weight:600;cursor:pointer;transition:background var(--t-ui) var(--e-ui),color var(--t-ui) var(--e-ui);}
.rudel__stop .i{width:18px;height:18px;stroke-width:2.4;}
@media (hover:hover){.rudel__stop:hover{background:var(--green);color:var(--on-green);}}
.rudel__band{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab;margin-inline:calc(50% - 50vw);-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent);}
.rudel__band::-webkit-scrollbar{display:none;}
.rudel__band.is-dragging{cursor:grabbing;user-select:none;}
.rudel__band img{-webkit-user-drag:none;pointer-events:none;}
.rudel__spur{display:flex;align-items:flex-start;gap:var(--rg);padding:0 var(--rg) 0 0;margin:0;list-style:none;flex:none;}
.pup{margin:0;width:var(--pw);}
.pup--duo{width:calc(var(--pw) * 2 + var(--rg));}
.pup__duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--rg);}
.pup img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-img);background:var(--cream-2, #EFE7D3);}
.pup figcaption{margin-top:.7rem;display:grid;gap:.1rem;}
.pup__name{font-family:var(--f-head);font-weight:600;font-size:var(--step-1);letter-spacing:-.015em;line-height:1.15;}
.pup__tag{color:var(--ink-2);font-size:.9375rem;line-height:1.4;}
@media (prefers-reduced-motion:reduce){
  .rudel__band{overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);-webkit-mask-image:none;mask-image:none;}
  .rudel__spur--kopie,.rudel__stop{display:none;}
  .pup{scroll-snap-align:start;}
}
.gal{margin-top:clamp(4rem, 3rem + 4vw, 7.5rem);}
.gal h3{font-size:var(--step-3);margin-bottom:.9rem;}
.gal__lead{color:var(--ink-2);max-width:40rem;margin-bottom:clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);}
.gallery{columns:2;column-gap:clamp(.75rem, .5rem + .8vw, 1.25rem);}
@media (min-width:700px){.gallery{columns:3;}}
@media (min-width:1100px){.gallery{columns:4;}}
.gallery > *{break-inside:avoid;margin:0 0 clamp(.75rem, .5rem + .8vw, 1.25rem);}
.gallery img,.gallery video{border-radius:var(--r-img);width:100%;}
.vplay{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:var(--r-img);overflow:hidden;line-height:0;}
.vplay__btn{position:absolute;left:50%;top:50%;width:4.25rem;height:4.25rem;margin:-2.125rem 0 0 -2.125rem;border-radius:50%;background:var(--yellow);color:var(--ink);display:grid;place-items:center;box-shadow:0 6px 18px -8px rgba(8,51,26,.28);transition:transform var(--t-ui) var(--e-ui),opacity var(--t-mid) var(--e-ui);}
.vplay__btn svg{width:1.5rem;height:1.5rem;margin-left:4px;}
@media (hover:hover){.vplay:hover .vplay__btn{transform:scale(1.06);}}
.vplay.is-playing .vplay__btn{opacity:0;}

/* ---------- Weg in die Gruppe ---------- */
.steps{counter-reset:s;display:grid;gap:0 clamp(1.5rem, 1rem + 2vw, 3rem);grid-template-columns:minmax(0,1fr);}
@media (min-width:700px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1100px){.steps{grid-template-columns:repeat(4,minmax(0,1fr));}}
.steps li{counter-increment:s;border-top:1.5px solid var(--ink);padding:1.4rem 0 2.25rem;}
/* Ziffern als Blickfang (Florian 13.10.2026: „1, 2, 3 sieht zu stumpf aus“): groß, kräftig, mit dem gelben Pinselstrich
   aus dem Claim. Der Strich zieht sich beim Einblenden auf. Bildschirmleser bekommen die Ziffer nicht (Liste zählt schon). */
.steps li::before{content:counter(s, decimal-leading-zero);content:counter(s, decimal-leading-zero) / "";display:table;font-family:var(--f-head);font-weight:800;font-size:clamp(3.25rem, 2.5rem + 2.4vw, 4.75rem);line-height:.8;letter-spacing:-.045em;color:var(--green);margin:0 0 1.25rem -.03em;padding:0 .14em .12em .02em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath fill='%23F8C80A' d='M4.6 9.8C52 5.2 104 3.6 156 4.1c48 .4 94 2.6 139.6 6.3 3.7.3 4.4 5.4.6 6-45.5 5.3-96 7.4-147 6.9-48-.5-96-2.6-143.1-6.2-4.4-.3-5.6-6.9-1.5-7.3z'/%3E%3C/svg%3E") no-repeat 0 100% / 100% .3em;}
html.js .steps li::before{background-size:0 .3em;}
html.js .steps li.rv-in::before{background-size:100% .3em;transition:background-size var(--t-draw) var(--e-calm) calc(var(--rv-d,0ms) + .3s);}
.steps h3{font-size:var(--step-1);margin-bottom:.6rem;}
.steps p{color:var(--ink-2);font-size:1.0625rem;}
.fit{display:grid;gap:clamp(2.5rem, 1.5rem + 4vw, 6rem);grid-template-columns:minmax(0,1fr);align-items:center;margin-top:clamp(3rem, 2rem + 3vw, 5.5rem);}
@media (min-width:900px){.fit{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);}}
@media (min-width:900px) and (max-width:1099px){.fit{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem, 1rem + 2vw, 3rem);}}
.fit__photo img{border-radius:var(--r-img);width:100%;aspect-ratio:3/4;object-fit:cover;}
@media (max-width:899px){.fit__photo{max-width:26rem;}}
/* Tablet hochkant (700–899 px): Foto links neben der Liste, gleich hoch und bündig. */
@media (min-width:700px) and (max-width:899px){
  .fit{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:2.5rem;align-items:stretch;}
  .fit__photo{max-width:none;position:relative;min-height:22rem;}
  .fit__photo img{position:absolute;inset:0;height:100%;aspect-ratio:auto;}
}
.fit h3{font-size:var(--step-3);margin-bottom:1.25rem;}
.checks{display:grid;border-top:1px solid var(--line);margin-bottom:1.75rem;}
.checks li{display:grid;grid-template-columns:1.75rem minmax(0,1fr);gap:.9rem;padding:1rem 0;border-bottom:1px solid var(--line);color:var(--ink-2);}
.checks svg{width:1.75rem;height:1.75rem;margin-top:.05rem;}
.checks svg circle{fill:var(--yellow);}
.checks svg path{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;}
html.js .checks svg path{stroke-dashoffset:1;}
html.js .checks li.rv-in svg path{stroke-dashoffset:0;transition:stroke-dashoffset var(--t-soft) var(--e-calm) calc(var(--rv-d,0ms) + 250ms);}
.checks strong{color:var(--ink);font-weight:650;}

/* ---------- Katzen und Kleintiere ---------- */
.cats{display:grid;gap:clamp(2.5rem, 1.5rem + 4vw, 6rem);grid-template-columns:minmax(0,1fr);align-items:start;}
@media (min-width:960px){.cats{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);}}
.cats__art{display:grid;gap:2rem;justify-items:start;}
.cats__art img{width:min(100%, 24rem);}
@media (max-width:959px){.cats__art{order:2;}.cats__art img{width:min(60%, 15rem);}}
/* Tablet hochkant (700–959 px): Herz und Zitat nebeneinander statt untereinander. */
@media (min-width:700px) and (max-width:959px){
  .cats__art{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2.5rem;}
  .cats__art img{width:15rem;}
}
@media (min-width:960px) and (min-height:640px){.cats__art{position:sticky;top:calc(var(--header-h) + 1.25rem);}}
.quote{margin:0;max-width:26rem;border-top:1px solid var(--line);padding-top:1.5rem;}
.quote p{font-family:var(--f-head);font-weight:500;font-size:var(--step-1);line-height:1.35;letter-spacing:-.01em;margin-bottom:.8rem;}
.quote footer{color:var(--ink-2);font-size:1rem;}
.cats h2{margin-bottom:1.25rem;}
.cats .lead{margin-bottom:2rem;}
.plist--small .plist__row h3{font-size:var(--step-1);}
.plist--small .plist__price{font-size:var(--step-1);}
.extra{margin-top:2rem;padding:clamp(1.4rem, 1.1rem + 1vw, 2rem);border-radius:var(--r-card);background:var(--yellow-pale);}
.extra h3{font-size:var(--step-1);margin-bottom:.45rem;}
.extra p{color:var(--ink-2);font-size:1.0625rem;}

/* Katzengalerie (Fotos von Katrin, 18.10.2026) */
.katzen-gal{margin-top:clamp(4rem, 3rem + 4vw, 7rem);}
.katzen-gal h3{font-size:var(--step-3);margin-bottom:clamp(1.25rem, 1rem + 1vw, 2rem);}
.katzen-gal__grid{--kg:clamp(.75rem, .5rem + .8vw, 1.25rem);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--kg);align-items:start;}
@media (min-width:700px){.katzen-gal__grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
.kat{margin:0;}
.kat img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-img);}
.kat--breit{grid-column:span 2;container-type:inline-size;}
.kat--breit img{aspect-ratio:auto;height:calc((100cqi - var(--kg)) / 2);}
.kat figcaption{margin-top:.5rem;font-size:var(--step--1);color:var(--ink-2);}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:clamp(2.5rem, 1.5rem + 4vw, 6rem);grid-template-columns:minmax(0,1fr);align-items:start;}
@media (min-width:960px){.faq{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);}}
.faq__head h2{margin-bottom:1.25rem;}
.faq__head p{color:var(--ink-2);margin-bottom:1.5rem;max-width:26rem;}
.faq__photo{margin-top:2.5rem;max-width:26rem;}
.faq__photo img{border-radius:var(--r-img);width:100%;}
.faq__photo figcaption{margin-top:.6rem;font-size:var(--step--1);color:var(--ink-2);}
@media (max-width:959px){.faq__photo{display:none;}}
@media (min-width:960px) and (min-height:640px){.faq__head{position:sticky;top:calc(var(--header-h) + 1.25rem);}}
@media (min-width:960px) and (max-height:759px){.faq__photo{margin-top:1.75rem;max-width:19rem;}}
.acc{border-top:1.5px solid var(--ink);}
.acc__item{border-bottom:1px solid var(--line);}
.acc__item h3{font:inherit;letter-spacing:0;line-height:inherit;}
.acc__btn{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;padding:1.3rem 0;background:none;border:0;text-align:left;cursor:pointer;font-family:var(--f-head);font-weight:600;font-size:var(--step-1);letter-spacing:-.015em;line-height:1.3;color:var(--ink);}
.acc__icon{flex:none;width:2rem;height:2rem;border-radius:var(--r-chip);border:1.5px solid var(--line-strong);display:grid;place-items:center;margin-top:-.1rem;transition:background-color var(--t-mid) var(--e-ui),border-color var(--t-mid) var(--e-ui);}
.acc__icon svg{width:.9rem;height:.9rem;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;}
.acc__icon .v{transition:transform var(--t-mid) var(--e-ui);transform-origin:center;}
.acc__btn[aria-expanded="true"] .acc__icon{background:var(--yellow);border-color:var(--yellow);}
.acc__btn[aria-expanded="true"] .acc__icon .v{transform:scaleY(0);}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-mid) var(--e-ui);}
.acc__panel > div{overflow:hidden;}
.acc__panel p{color:var(--ink-2);max-width:42rem;padding-right:3rem;}
.acc__panel p:last-child{padding-bottom:1.5rem;}
.acc__item.is-open .acc__panel{grid-template-rows:1fr;}
html:not(.js) .acc__panel{grid-template-rows:1fr;}
html:not(.js) .acc__icon{display:none;}
@media (max-width:600px){.acc__panel p{padding-right:0;}}

/* ---------- Kontakt + Einsatzgebiet (dunkelgrün) ---------- */
.contact{background:var(--green);padding-bottom:var(--section);}
.contact__top{position:relative;isolation:isolate;padding-block:var(--section) clamp(4rem, 3rem + 4vw, 7rem);}
.contact__media{position:absolute;inset:0;z-index:-1;overflow:hidden;}
.contact__media img{width:100%;height:100%;object-fit:cover;object-position:42% 40%;}
.contact__media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg, rgba(14,90,45,0) 72%, var(--green) 100%),
  linear-gradient(90deg, rgba(8,51,26,.9) 0%, rgba(8,51,26,.8) 50%, rgba(8,51,26,.62) 100%);}
@media (max-width:959px){
  .contact__media{bottom:auto;height:min(100%, 46rem);}
  .contact__media img{object-position:46% 40%;}
  .contact__media::after{background:linear-gradient(180deg, rgba(8,51,26,.84) 0%, rgba(8,51,26,.84) 62%, var(--green) 100%);}
}
.contact .area{margin-top:0;}
.contact__grid{display:grid;gap:clamp(2.5rem, 1.5rem + 4vw, 6rem);grid-template-columns:minmax(0,1fr);align-items:start;}
@media (min-width:960px){.contact__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);}}
.contact h2{margin-bottom:1.25rem;}
.ways{display:grid;margin-top:2.25rem;border-top:1px solid var(--line-on-green);}
.ways li{border-bottom:1px solid var(--line-on-green);}
.ways a{display:flex;align-items:center;gap:1rem;padding:1.05rem 0;text-decoration:none;}
.ways a:hover .ways__v{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;}
.ways .i{width:1.5rem;height:1.5rem;color:var(--yellow);}
.ways__txt{display:grid;}
.ways__k{font-size:.9375rem;color:var(--on-green-2);}
.ways__v{font-weight:650;font-size:1.1875rem;text-underline-offset:.25em;color:var(--on-green);}
.addr{margin-top:1.75rem;font-style:normal;color:var(--on-green-2);font-size:1rem;line-height:1.6;}

/* Formular-Karte: helle Insel, vollständiger Gegen-Scope */
#anfrage{scroll-margin-top:1rem;}
.form{background:var(--cream);border-radius:var(--r-card);padding:clamp(1.5rem, 1rem + 2vw, 2.75rem);display:grid;grid-template-columns:minmax(0,1fr);gap:1.15rem;--focus:var(--green);color:var(--ink);}
.form h3,.form p,.form label,.form legend,.form span,.form button{color:var(--ink);}
.form h3{font-size:var(--step-2);}
.form .form__intro,.form .form__legal,.form .opt{color:var(--ink-2);}
.form__intro{font-size:1rem;margin:0;}
.form a{color:var(--green);font-weight:600;}
.field{display:grid;gap:.4rem;}
.field label,.field legend{font-weight:650;font-size:.98rem;padding:0;}
.opt{font-weight:400;}
.field input,.field textarea{width:100%;min-height:3.25rem;padding:.8rem 1rem;border:1.5px solid var(--line-strong);border-radius:var(--r-btn);background:var(--paper);color:var(--ink);font-size:1.0625rem;transition:border-color var(--t-ui) var(--e-ui),box-shadow var(--t-ui) var(--e-ui);}
.field textarea{min-height:7.5rem;resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:#6B756E;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(14,90,45,.22);}
.field.is-invalid input,.field.is-invalid textarea{border-color:#B3261E;}
.form .field__err{display:none;color:#B3261E;font-size:.9rem;font-weight:600;}
.field.is-invalid .field__err{display:block;}
.row2{display:grid;gap:1.15rem;grid-template-columns:minmax(0,1fr);}
@media (min-width:560px){.row2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
fieldset.field{border:0;padding:0;margin:0;min-width:0;}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;}
.chip{position:relative;}
.chip input{position:absolute;opacity:0;width:1px;height:1px;}
.form .chip label{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 1.1rem;border-radius:var(--r-chip);border:1.5px solid var(--line-strong);background:var(--paper);font-weight:550;font-size:1rem;cursor:pointer;transition:background-color var(--t-ui) var(--e-ui),border-color var(--t-ui) var(--e-ui),color var(--t-ui) var(--e-ui);}
.form .chip input:checked + label{background:var(--green);border-color:var(--green);color:var(--on-green);}
.chip input:focus-visible + label{outline:3px solid var(--green);outline-offset:2px;}
.form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;margin-top:.25rem;}
@media (max-width:400px){.form__actions .btn{flex:1 1 100%;padding-inline:1rem;font-size:1rem;white-space:normal;text-align:center;}}
.form .form__alt{display:inline-flex;align-items:center;min-height:2.75rem;background:none;border:0;padding:0;cursor:pointer;font-weight:650;color:var(--ink);text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:1.5px;text-underline-offset:.28em;}
.form__legal{font-size:.9375rem;margin:0;}
.form__ok{display:none;align-items:flex-start;gap:.7rem;padding:1rem 1.1rem;border-radius:var(--r-btn);background:rgba(14,90,45,.09);font-size:1rem;}
.form__ok.is-on{display:flex;}
.form__ok .i{color:var(--green);margin-top:.15rem;}

.area{margin-top:clamp(4rem, 3rem + 4vw, 7rem);padding-top:clamp(2.5rem, 2rem + 2vw, 4rem);border-top:1px solid var(--line-on-green);display:grid;gap:clamp(2.5rem, 1.5rem + 4vw, 6rem);grid-template-columns:minmax(0,1fr);align-items:center;}
@media (min-width:1024px){.area{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);}}
.area h3{font-size:var(--step-3);margin-bottom:1rem;}
.area p{color:var(--on-green-2);max-width:34rem;}
.towns{columns:11rem 3;column-gap:1.5rem;margin:1.75rem 0 1.5rem;border-top:1px solid var(--line-on-green);}
.towns li{break-inside:avoid;padding:.65rem 0;border-bottom:1px solid var(--line-on-green);display:flex;align-items:center;gap:.55rem;font-weight:550;}
.towns .i{color:var(--yellow);width:1.1em;height:1.1em;}
.area__map{max-width:44rem;}
.area__map svg,.area__map img{width:100%;height:auto;}
.area__map img{background:var(--cream);border-radius:var(--r-card);}
.area__map figcaption{margin-top:.25rem;font-size:var(--step--1);color:var(--on-green-2);}
.area__map figcaption a{display:inline-flex;align-items:center;min-height:2.75rem;color:inherit;text-underline-offset:.2em;}

/* ---------- Footer ---------- */
.site-footer{background:var(--cream);padding-block:clamp(3.5rem, 2.5rem + 3vw, 5.5rem) 2rem;font-size:1rem;}
.foot{display:grid;gap:2.5rem;grid-template-columns:minmax(0,1fr);}
@media (min-width:800px){.foot{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);}}
.foot__brand img{height:72px;width:auto;margin-bottom:1rem;}
.foot p{color:var(--ink-2);max-width:24rem;}
.foot h2{font-family:var(--f-body);font-size:1rem;font-weight:650;letter-spacing:0;color:var(--ink);margin-bottom:.9rem;}
.foot ul{display:grid;gap:.45rem;}
.foot a{text-decoration:none;color:var(--ink-2);display:inline-block;padding:.3rem 0;margin:-.3rem 0;}
.foot a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;}
.foot address{font-style:normal;color:var(--ink-2);line-height:1.7;}
.foot__bar{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;color:var(--ink-2);font-size:.9375rem;}
.foot__bar ul{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;}
.foot__bar a{color:var(--ink-2);display:inline-block;padding:.3rem 0;margin:-.3rem 0;}
@media (max-width:800px),(pointer:coarse){
  .foot ul{gap:0;}
  .foot a,.foot__bar a{display:inline-flex;align-items:center;min-height:2.75rem;padding:0;margin:0;}
  .foot__bar ul{gap:0 1.5rem;}
}

/* ---------- Rechtsseiten / 404 ---------- */
.legal{padding-block:clamp(3rem, 2rem + 4vw, 6rem) var(--section);}
.legal__in{width:min(46rem, 100% - 2 * var(--gutter));margin-inline:auto;}
.legal h1{font-size:var(--step-4);margin-bottom:2rem;}
.legal h2{font-size:var(--step-2);margin:2.6rem 0 .9rem;}
.legal h3{font-size:var(--step-1);margin:1.8rem 0 .6rem;}
.legal p,.legal li{color:var(--ink-2);}
.legal ul{list-style:disc;padding-left:1.2rem;margin-bottom:1em;}
.legal a{color:var(--green);font-weight:550;overflow-wrap:anywhere;}
.legal a.btn{color:var(--ink);font-weight:650;overflow-wrap:normal;margin-block:.4rem 1rem;}
.legal code{font-size:.92em;background:var(--cream-2);padding:.1em .35em;border-radius:var(--r-img);overflow-wrap:anywhere;}
.legal__tabelle{width:100%;border-collapse:collapse;margin:.6rem 0 .8rem;font-size:.9375rem;}
.legal__tabelle th,.legal__tabelle td{text-align:left;vertical-align:top;padding:.7rem .75rem;border-bottom:1px solid var(--line);}
.legal__tabelle th{font-weight:650;color:var(--ink);background:var(--cream-2);}
.legal__tabelle td{color:var(--ink-2);}
.legal__tabelle td:first-child{font-weight:650;color:var(--ink);white-space:nowrap;}
@media (max-width:640px){
  .legal__tabelle thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .legal__tabelle,.legal__tabelle tbody,.legal__tabelle tr,.legal__tabelle td{display:block;width:100%;}
  .legal__tabelle tr{border:1px solid var(--line);border-radius:var(--r-btn);padding:.4rem .9rem;margin-bottom:.75rem;background:var(--paper);}
  .legal__tabelle td{border:0;padding:.35rem 0;}
  .legal__tabelle td::before{content:attr(data-label);display:block;font-size:.8125rem;font-weight:650;color:var(--grey);}
}
.legal__hinweis{font-size:.9375rem;}
.back{display:inline-flex;align-items:center;gap:.45rem;min-height:2.75rem;margin-bottom:1.5rem;color:var(--ink);text-decoration:none;font-weight:650;}
.e404 h1 em{font-style:normal;display:block;color:var(--green);}
.e404{min-height:56svh;display:grid;align-content:center;justify-items:start;gap:1.25rem;}
.e404 p{color:var(--ink-2);max-width:34rem;}

/* ---------- Reveal (Motion-Core) ---------- */
html.js [data-reveal]:not([data-reveal="hook"]){opacity:0;transform:translate3d(0,var(--rv-y),0);}
html.js [data-reveal="fade"]{transform:none;}
html.js [data-reveal]:not([data-reveal="hook"]).rv-in{opacity:1;transform:none;transition:opacity var(--t-rv) var(--e-rv) var(--rv-d,0ms),transform var(--t-rv) var(--e-rv) var(--rv-d,0ms);}
[data-loop],[data-loop] *,[data-loop]::before,[data-loop]::after,[data-loop] *::before,[data-loop] *::after{animation-play-state:paused;}
[data-loop].loop-run,[data-loop].loop-run *,[data-loop].loop-run::before,[data-loop].loop-run::after,[data-loop].loop-run *::before,[data-loop].loop-run *::after{animation-play-state:running;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  html.js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important;}
  html.js .mark__brush{clip-path:none!important;transition:none!important;}
  html.js .steps li::before{background-size:100% .3em!important;}
  html.js .checks svg path{stroke-dashoffset:0!important;transition:none!important;}
  .step::after{transform:scaleY(1)!important;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important;}
}

@media print{.site-header,.hero__media,.form,.btns,.gallery{display:none!important;}body{background:#fff;}.on-green,.promise,.contact{background:#fff!important;color:#000!important;}}