/* Flotte Pfoten Hamburg, Sara Dallmer. Gestaltung siehe DESIGN.md (Schiefer aus dem Logo, Therapie-Blau und Igelball-Orange aus den Fotos, Raleway und Source Sans). */
@font-face{font-family:"Raleway";font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/raleway-var-latin.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/source-sans-3-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/source-sans-3-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600 700;font-display:swap;src:url(/assets/fonts/source-sans-3-latin-600-normal.woff2) format("woff2")}

:root{
  color-scheme:light only;
  --tinte:#1f3440; --text:#2b3e49; --leise:#53656f; --schiefer:#517681; --schiefer-d:#3a5e6c; --nebel:#e9f0f3; --nebel2:#d6e3e8; --linie:#c9d8de;
  --orange:#bf4f1c; --orange-d:#9f3f12; --weiss:#fff;
  --kopf:"Raleway",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --sans:"Source Sans 3","Source Sans Pro",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --rand:clamp(20px,5vw,56px); --abschnitt:clamp(56px,8vw,112px); --breite:1200px; --r:6px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--weiss);color:var(--text);font:400 1.125rem/1.68 var(--sans);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:var(--schiefer-d);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--tinte);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:3px}
h1,h2,h3{font-family:var(--kopf);font-weight:700;color:var(--tinte);line-height:1.12;margin:0 0 .6em;text-wrap:balance;hyphens:auto;-webkit-hyphens:auto;letter-spacing:-.015em}
h1{font-size:clamp(1.85rem,5vw,3.7rem);letter-spacing:-.025em}
h2{font-size:clamp(1.55rem,3vw,2.25rem)}
h3{font-size:1.25rem;letter-spacing:-.005em}
p{margin:0 0 1.1em}
.wrap{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.lesen{max-width:38em}
.lesen > :last-child{margin-bottom:0}
.klein{font-size:.9375rem;color:var(--leise)}
.skip{position:absolute;left:-999px;top:8px;background:var(--tinte);color:#fff;padding:10px 16px;z-index:50;border-radius:4px}
.skip:focus{left:8px}
.pult-r{display:contents}

/* Hinweisleiste */
.hinweisleiste{background:var(--orange);color:#fff;text-align:center;padding:10px var(--rand);font:600 1rem var(--sans)}
.hinweisleiste a{color:#fff}

/* Kopf */
.kopf{background:#fff;position:sticky;top:0;z-index:20;border-bottom:1px solid transparent;transition:border-color .25s ease}
.kopf.unten{border-bottom-color:var(--linie)}
.kopf-in{max-width:var(--breite);margin:0 auto;padding:10px var(--rand);display:flex;align-items:center;gap:28px}
.marke{display:block;flex:none;line-height:0}
.marke img{width:clamp(120px,14vw,168px);height:auto}
.nav{margin-left:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;align-items:center}
.nav a{display:block;padding:10px 12px;color:var(--tinte);text-decoration:none;font:600 .9375rem/1 var(--kopf);white-space:nowrap;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--schiefer)}
.nav a[aria-current="page"]{border-bottom-color:var(--orange)}
.nav .nav-kontakt{margin-left:10px}
.nav .nav-kontakt a{background:var(--orange);color:#fff;border-radius:var(--r);padding:12px 18px;border:0}
.nav .nav-kontakt a:hover{background:var(--orange-d)}
.nav .nav-kontakt a[aria-current="page"]{background:var(--tinte)}
.menue-knopf{display:none}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:12px 24px;border-radius:var(--r);border:2px solid var(--orange);background:var(--orange);color:#fff;font:700 1rem/1.2 var(--kopf);text-decoration:none;cursor:pointer;transition:background .18s ease,border-color .18s ease}
.knopf:hover{background:var(--orange-d);border-color:var(--orange-d);color:#fff;text-decoration:none}
.knopf:active{transform:translateY(1px)}
.knopf.hell{background:transparent;color:var(--tinte);border-color:var(--tinte)}
.knopf.hell:hover{background:var(--tinte);color:#fff;border-color:var(--tinte)}
.darm .knopf.hell,.kontakt-band .knopf.hell{color:#fff;border-color:#fff}
.darm .knopf.hell:hover{background:#fff;color:var(--tinte)}
.knopf svg{flex:none}
.leise{display:inline-flex;align-items:center;gap:6px;font:700 1rem var(--kopf);text-decoration:none}
.leise:hover{text-decoration:underline}
.weiter{margin-top:1.6em}

/* Startseite: Text links auf Nebelblau, Foto rechts bis zum Rand */
.hero{background:var(--nebel)}
.hero-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:stretch}
.hero-text{padding:clamp(40px,7vw,104px) clamp(24px,4vw,64px) clamp(40px,7vw,96px) max(var(--rand),calc((100vw - var(--breite)) / 2 + var(--rand)));align-self:center}
.hero h1{margin-bottom:.45em}
.hero .unterzeile{font:600 clamp(1.1rem,1.8vw,1.35rem)/1.4 var(--kopf);color:var(--schiefer-d);margin:0 0 1.2em;max-width:24em}
.hero .lesen{font-size:1.1875rem;color:var(--tinte);max-width:30em}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.8em}
.hero-bild{margin:0;min-height:100%;position:relative}
.hero-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:22% 62%}
.eckdaten{background:var(--tinte);color:#fff}
.eckdaten dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0 auto}
.eckdaten dl > div{padding:22px 24px 22px 0}
.eckdaten dt{font:700 .8125rem/1.2 var(--kopf);letter-spacing:.08em;text-transform:uppercase;color:#a9c3cf;margin:0 0 4px}
.eckdaten dd{margin:0;font-size:1.0625rem;line-height:1.45}
.eckdaten a{color:#fff;text-decoration:none;font-weight:600}
.eckdaten a:hover{text-decoration:underline;color:#fff}

/* Seitenkopf */
.seitenkopf{background:var(--nebel);padding:clamp(40px,6vw,88px) 0;position:relative;overflow:hidden}
.seitenkopf-raster{display:grid;gap:clamp(24px,5vw,72px);align-items:center}
.seitenkopf.mit-bild .seitenkopf-raster{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.seitenkopf h1{margin-bottom:.3em}
.seitenkopf .unterzeile{font:600 clamp(1.05rem,1.7vw,1.3rem)/1.4 var(--kopf);color:var(--schiefer-d);margin:0;max-width:28em}
.seitenkopf .lead{max-width:36em;margin:1em 0 0}
.seitenkopf .bild img{width:100%;max-height:480px;object-fit:cover;border-radius:var(--r)}
.seitenkopf:not(.mit-bild)::after{content:"";position:absolute;right:max(var(--rand),calc((100vw - var(--breite)) / 2 + var(--rand)));bottom:-8%;width:clamp(200px,34vw,460px);aspect-ratio:2244/979;background:url(/assets/img/bildmarke-1-960.webp) center/contain no-repeat;opacity:.55;pointer-events:none}

/* Abschnitte */
.abschnitt{padding:clamp(44px,6vw,84px) 0}
.inhalt > .abschnitt:first-child{padding-top:clamp(40px,6vw,80px)}
.raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:clamp(20px,5vw,72px);align-items:start}
.raster > h2{position:sticky;top:104px;margin:0;hyphens:manual;font-size:clamp(1.5rem,2.6vw,2rem)}
.zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,88px);align-items:center}
.bild{margin:0}
.bild img{width:100%;border-radius:var(--r)}
.bild figcaption,.galerie figcaption{font-size:.9375rem;color:var(--leise);margin-top:8px;line-height:1.4}
.text.mit-bild .bild img{aspect-ratio:4/3;object-fit:cover}
.text.gross .lesen{max-width:30em}
.text.gross .lesen p{font:500 clamp(1.3rem,2.4vw,1.8rem)/1.4 var(--kopf);color:var(--tinte);letter-spacing:-.01em}

/* Vorstellung: Foto links, Text rechts */
.vorstellung{background:#fff}
.vorstellung .zwei{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.vorstellung .bild img{aspect-ratio:4/5;object-position:50% 25%}

/* Angebot: zwei große Flächen, Foto bis zum Rand */
.angebotskopf{padding:clamp(40px,6vw,80px) 0 clamp(20px,3vw,36px);background:#fff}
.angebotskopf h2{margin:0;font-size:clamp(1.7rem,3.6vw,2.7rem)}
.angebot{padding:0;background:var(--nebel)}
.angebot .wrap{max-width:none;padding:0;gap:0}
.angebot .bild{height:100%;min-height:360px;position:relative}
.angebot .bild img{position:absolute;inset:0;height:100%;border-radius:0;aspect-ratio:auto;object-position:50% 28%}
.angebot .lesen{padding:clamp(32px,6vw,88px) clamp(24px,5vw,72px);max-width:none}
.angebot .lesen > *{max-width:30em}
.angebot + .angebot{background:var(--nebel2)}
.angebot + .angebot .bild{order:2}
.angebot h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}

/* Darm: dunkle Fläche */
.darm{background:var(--tinte);color:#e4edf1}
.darm h2{color:#fff;font-size:clamp(1.8rem,4vw,3rem);max-width:16em}
.darm a{color:#fff}
.darm .lesen{font-size:1.1875rem;max-width:34em}

/* Listen */
.liste{border-top:1px solid var(--linie)}
.zeilenliste{list-style:none;margin:0;padding:0}
.zeilenliste li{padding:14px 0 14px 34px;border-bottom:1px solid var(--linie);position:relative}
.zeilenliste li:first-child{padding-top:0}
.zeilenliste li::before{content:"";position:absolute;left:0;top:calc(14px + .75em);width:16px;height:2px;background:var(--orange)}
.zeilenliste li:first-child::before{top:.75em}
.listenkopf{font:700 1.125rem var(--kopf);color:var(--tinte)}
.inhalt > .liste + .liste{padding-top:0}

/* Preise */
.preisliste{list-style:none;margin:0;padding:0;border-top:2px solid var(--tinte)}
.preisliste li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:clamp(20px,3vw,32px) 0;border-bottom:1px solid var(--linie)}
.preis-text h3{margin:0 0 .15em;font-size:clamp(1.2rem,2vw,1.5rem)}
.preis-text p{margin:.3em 0 0;max-width:36em}
.preis-text .dauer{font:600 .9375rem var(--kopf);color:var(--schiefer-d);margin:0}
.preis{margin:0;font:800 clamp(2rem,5vw,3.4rem)/1 var(--kopf);color:var(--schiefer-d);letter-spacing:-.03em;white-space:nowrap}
.preis-fuss{margin:16px 0 0;color:var(--leise);font-size:1rem}

/* Hinweis */
.hinweis{padding:clamp(32px,5vw,64px) 0}
.hinweis-box{background:var(--nebel);border-left:4px solid var(--schiefer);padding:clamp(20px,3vw,36px)}
.hinweis-box h2{font-size:1.2rem;margin-bottom:.4em}
.hinweis-box .lesen{max-width:46em;font-size:1rem;color:var(--text)}

/* Anfahrt */
.wegliste{list-style:none;margin:1.4em 0 0;padding:0}
.wegliste li{padding:12px 0 12px 34px;border-top:1px solid var(--linie);position:relative}
.wegliste li::before{content:"";position:absolute;left:0;top:calc(12px + .75em);width:16px;height:2px;background:var(--orange)}
.weg-karte{background:var(--nebel);padding:clamp(24px,4vw,44px);border-radius:var(--r)}
.adresse{display:flex;gap:12px;align-items:flex-start;font-size:1.1875rem;line-height:1.5}
.adresse svg{flex:none;margin-top:4px;color:var(--orange)}

/* Galerie: Spalten, damit Hoch- und Querformat nicht beschnitten werden */
.galerie-raster{columns:3;column-gap:20px}
.galerie-raster figure{break-inside:avoid;margin:0 0 20px}
.galerie-raster.n1{columns:1;max-width:560px}
.galerie-raster.n2{columns:2}
.nur-bild .bild.breit img{max-height:640px;object-fit:cover}
.galerie h2{margin-bottom:1em}

/* Fragen */
.faq{background:var(--nebel)}
.faq-liste{border-top:1px solid var(--schiefer)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font:700 1.125rem/1.35 var(--kopf);color:var(--tinte)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:28px;height:28px;border:1.5px solid var(--tinte);border-radius:50%;position:relative}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:7px;right:7px;top:12px;height:2px;background:var(--tinte);transition:transform .2s ease}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq .antwort{padding:0 44px 22px 0;max-width:38em}

/* Blog */
.kopfzeile{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.post-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.post-liste a{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--linie);text-decoration:none;color:var(--tinte);border-radius:var(--r);overflow:hidden}
.post-liste a:hover{border-color:var(--tinte)}
.post-liste img{aspect-ratio:3/2;object-fit:cover;width:100%}
.post-text{display:block;padding:18px 20px 22px}
.post-text time{display:block;font-size:.9375rem;color:var(--leise)}
.post-text b{display:block;font:700 1.2rem/1.25 var(--kopf);margin:4px 0}
.leer{color:var(--leise)}

/* Kontakt-Band */
.kontakt-band{background:var(--tinte);color:#e4edf1}
.kontakt-band h2{color:#fff}
.kontakt-band .lesen a{color:#fff}
.band-wege{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.tel-link,.mail-link{display:inline-flex;gap:10px;align-items:center;color:#fff;text-decoration:none;font:700 1.125rem var(--kopf)}
.tel-link:hover,.mail-link:hover{text-decoration:underline;color:#fff}

/* Kontakt */
.kontakt{background:#fff}
.kontakt .zwei{align-items:start}
.wege{list-style:none;margin:0 0 1.6em;padding:0}
.wege li{border-top:1px solid var(--linie)}
.wege li:last-child{border-bottom:1px solid var(--linie)}
.wege a{display:flex;gap:14px;align-items:flex-start;padding:16px 0;text-decoration:none;color:var(--tinte);font-size:1.125rem}
.wege a:hover{color:var(--schiefer-d)}
.wege svg{flex:none;margin-top:4px;color:var(--orange)}
.wege b{display:block;font:700 .9375rem var(--kopf);color:var(--schiefer-d)}
.kontaktform{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;background:var(--nebel);padding:clamp(22px,4vw,40px);border-radius:var(--r)}
.form-titel{grid-column:1/-1;font-size:1.4rem;margin:0}
.feld{display:flex;flex-direction:column;gap:6px;min-width:0}
.ganz{grid-column:1/-1}
.feld label{font:700 .9375rem var(--kopf);color:var(--tinte)}
.feld input:not([type=checkbox]),.feld textarea{font:400 1.0625rem var(--sans);padding:12px 14px;border:1.5px solid #8fa5af;border-radius:4px;background:#fff;color:var(--tinte);width:100%}
.feld input:focus,.feld textarea:focus{outline:3px solid var(--orange);outline-offset:1px;border-color:var(--tinte)}
.feld.ungueltig input,.feld.ungueltig textarea{border-color:#a32a00;border-width:2px}
.feld.ungueltig .zustimmung{color:#a32a00}
.zustimmung{display:flex;gap:12px;align-items:flex-start;font:400 .9375rem/1.5 var(--sans)!important;color:var(--text)!important}
.zustimmung input{flex:none;width:22px;height:22px;margin-top:2px;accent-color:var(--orange)}
.honig{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.form-status{margin:0;font:600 1rem var(--sans)}
.form-status.fehler{color:#a32a00}
.formular-erfolg{grid-column:1/-1;padding:8px 0}
.formular-erfolg p:first-child{font:700 1.5rem var(--kopf);color:var(--tinte)}

/* Rechtstexte, Sitemap */
.recht h2{font-size:1.35rem;margin-top:1.6em}
.recht h2:first-child{margin-top:0}
.recht .lesen{max-width:44em;font-size:1.0625rem}
.smliste{columns:2;padding-left:1.2em}
.smliste li{margin-bottom:8px}

/* Fuß */
.fuss{background:var(--tinte);color:#cfdde4;font-size:1rem}
.fuss a{color:#fff;text-decoration:none}
.fuss a:hover{text-decoration:underline}
.fuss h2{font:700 .8125rem var(--kopf);letter-spacing:.08em;text-transform:uppercase;color:#a9c3cf;margin:0 0 .8em}
.fuss-raster{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:clamp(24px,4vw,56px);padding-top:clamp(40px,6vw,72px);padding-bottom:40px}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:6px}
.fuss-marke img{width:min(240px,100%);margin-bottom:16px}
.fuss-marke p{margin:0}
.fuss-marke b{display:block;font:700 1.25rem var(--kopf);color:#fff}
.fnt{display:block;background:#fff;border-radius:var(--r);padding:10px 12px;width:min(190px,100%);margin-bottom:18px}
.fuss-unten{padding-top:18px;padding-bottom:28px;border-top:1px solid #3b5160;font-size:.9375rem;color:#a9c3cf}

.leiste{display:none}

@media (max-width:1180px){
  .menue-knopf{display:inline-flex;align-items:center;gap:10px;margin-left:auto;min-height:46px;padding:8px 16px;background:#fff;border:2px solid var(--tinte);border-radius:var(--r);color:var(--tinte);font:700 .9375rem var(--kopf);cursor:pointer}
  .menue-knopf i{width:18px;height:12px;border-top:2px solid var(--tinte);border-bottom:2px solid var(--tinte);position:relative}
  .menue-knopf i::before{content:"";position:absolute;left:0;right:0;top:3px;height:2px;background:var(--tinte)}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--linie);box-shadow:0 14px 24px -16px rgba(31,52,64,.3);margin:0;padding:8px var(--rand) 22px}
  .nav.offen{display:block}
  .nav ul{flex-direction:column;align-items:stretch;gap:0}
  .nav a{padding:14px 2px;font-size:1.0625rem;border-bottom:1px solid var(--linie)}
  .nav .nav-kontakt{margin:14px 0 0}
  .nav .nav-kontakt a{text-align:center;border-bottom:0}
}
@media (max-width:980px){
  .hero-raster{grid-template-columns:1fr}
  .hero-text{padding:36px var(--rand) 36px}
  .hero-bild{min-height:0;aspect-ratio:3/2}
  .eckdaten dl{grid-template-columns:1fr}
  .eckdaten dl > div{padding:14px 0;border-bottom:1px solid #3b5160}
  .eckdaten dl > div:last-child{border-bottom:0}
  .seitenkopf.mit-bild .seitenkopf-raster,.zwei,.vorstellung .zwei,.raster{grid-template-columns:1fr}
  .raster > h2{position:static}
  .vorstellung .bild img{aspect-ratio:3/2}
  .angebot .bild{min-height:0;aspect-ratio:3/2}
  .angebot + .angebot .bild{order:0}
  .angebot .lesen{padding:28px var(--rand) 40px}
  .galerie-raster{columns:2}
  .fuss-raster{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:1.0625rem;padding-bottom:64px}
  .kontaktform{grid-template-columns:1fr;padding:20px}
  .smliste,.galerie-raster,.galerie-raster.n2{columns:1}
  .galerie-raster.n1{max-width:none}
  .fuss-raster{grid-template-columns:1fr}
  .preisliste li{grid-template-columns:1fr;gap:6px}
  .preis{font-size:2.2rem}
  .faq .antwort{padding-right:0}
  .leiste{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--tinte);padding:6px 6px calc(6px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .25s ease}
  .leiste.da{transform:none}
  .leiste a{display:flex;flex-direction:column;align-items:center;gap:2px;color:#fff;text-decoration:none;font:600 .875rem var(--sans);padding:6px 0;min-height:48px;justify-content:center}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.kopf,.leiste,.fuss,.kontaktform{display:none}body{background:#fff}.hero,.seitenkopf,.kontakt-band,.darm{background:#fff;color:#000}}