/* Hundephysiotherapie Geldern – Übergangsseite
   Farben und Schrift (Open Sans) aus dem bisherigen Webauftritt übernommen.
   Schriften werden lokal ausgeliefert (keine Verbindung zu Google Fonts). */

@font-face{font-family:"Open Sans";src:url(../fonts/open-sans-latin-300-normal.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url(../fonts/open-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url(../fonts/open-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url(../fonts/open-sans-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --blue:#6ba6ca;   /* Hauptfarbe alte Website */
  --mid:#336699;
  --navy:#003366;   /* Footer-/Akzentfarbe alte Website */
  --ice:#deeffc;
  --line:#d8e5f0;
  --text:#1d2b3a;
  --muted:#4f6075;
  --radius:18px;
  --shadow:0 24px 60px rgba(0,51,102,.14);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:"Open Sans",Arial,Helvetica,sans-serif;font-size:1.0625rem;line-height:1.7;color:var(--text);background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:var(--mid);text-underline-offset:3px}
a:hover{color:var(--navy)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
h1,h2,h3{color:var(--navy);line-height:1.2;margin:0}
p{margin:0 0 1em}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:10;background:#fff;padding:8px 14px}

/* Kopfzeile */
.topbar{background:var(--navy);color:#cfe0ef}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:84px}
.topbar .logo img{width:250px}
.topbar nav{display:flex;gap:24px;font-size:.9rem}
.topbar nav a{color:#fff;text-decoration:none;opacity:.85}
.topbar nav a:hover{opacity:1;text-decoration:underline}

/* Hinweisband */
.notice{background:var(--blue);color:var(--navy);font-size:.92rem;text-align:center;padding:9px 16px;font-weight:600}

/* Hero */
.hero{position:relative;background:linear-gradient(180deg,var(--ice) 0%,#f4f9fd 55%,#fff 100%);padding:80px 0 88px;overflow:hidden}
.hero::after{content:"";position:absolute;right:-180px;top:-180px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(107,166,202,.22),rgba(107,166,202,0) 70%);pointer-events:none}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:64px;align-items:start}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mid);margin-bottom:18px}
h1{font-weight:300;font-size:clamp(1.35rem,2.4vw,1.85rem);letter-spacing:-.01em}
h1 strong{display:block;font-weight:600;font-size:clamp(2.1rem,4.4vw,3.25rem);margin-bottom:.2em}
.lead{font-size:1.28rem;color:var(--muted);margin-top:26px;max-width:36em}
.quick{display:none;gap:10px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:999px;font-weight:600;text-decoration:none;transition:background .2s,color .2s}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--mid);color:#fff}
.btn-outline{border:1.5px solid var(--navy);color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}

/* Kontaktkarte */
.card{background:var(--navy);color:#fff;border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.hero .card{margin-top:88px} /* gleicher Wert wie der Abschnittsabstand (88px) */
.card h2{color:#fff;font-size:1.15rem;font-weight:600;margin-bottom:4px}
.card .sub{color:#cfe0ef;font-size:.9rem;margin-bottom:18px}
.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:.95rem}
.contact-list li{display:flex;gap:14px;align-items:flex-start}
.contact-list svg{flex:0 0 18px;width:18px;height:18px;color:var(--blue);margin-top:3px}
.contact-list .label{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.contact-list a{color:#fff;font-weight:600;text-decoration:none;word-break:break-word}
.contact-list a:hover{text-decoration:underline}
.card .btn{width:100%;margin-top:22px;padding:12px 18px;background:var(--blue);color:var(--navy)}
.card .btn:hover{background:#fff;color:var(--navy)}

/* Abschnitte */
section{padding:88px 0;scroll-margin-top:16px}
.section-head{max-width:640px;margin-bottom:40px}
.section-head h2{font-weight:300;font-size:clamp(1.7rem,3vw,2.2rem)}
.section-head p{color:var(--muted);margin-top:14px}

.services{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.services li{position:relative;padding:24px 24px 24px 60px;border:1px solid var(--line);border-radius:14px;background:#fff;font-weight:600;color:var(--navy)}
.services li::before{content:"";position:absolute;left:24px;top:28px;width:18px;height:18px;border-radius:50%;background:var(--ice);box-shadow:inset 0 0 0 5px var(--blue)}
.services-note{margin-top:28px;color:var(--muted)}

.location{background:var(--ice)}
.location-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tile{background:#fff;border-radius:14px;padding:28px}
.tile h3{font-size:1rem;margin-bottom:10px}
.tile svg{width:26px;height:26px;color:var(--mid);margin-bottom:14px}
.tile p{margin:0}
.tile a{font-weight:600}

.legal h2{font-weight:300;font-size:clamp(1.7rem,3vw,2.2rem);margin-bottom:28px}
.legal h3{font-size:1rem;margin:28px 0 6px}
.legal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 56px}
.legal p{color:var(--text)}

/* Fußzeile */
.footer{background:var(--navy);color:#cfe0ef;padding:40px 0;font-size:.92rem}
.footer .wrap{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:center}
.footer a{color:#fff}
.footer nav{display:flex;gap:24px}

/* Unterseiten (Datenschutz, Fehlerseite) */
.page{padding:72px 0 96px}
.page .wrap{max-width:820px}
.page h1{font-size:clamp(2rem,4vw,2.6rem);margin-bottom:12px}
.page h2{font-size:1.25rem;font-weight:600;margin:40px 0 10px}
.page h3{font-size:1.05rem;font-weight:600;margin:24px 0 6px}
.page ul{padding-left:1.2em}
.page .meta{color:var(--muted)}

/* Fehlerseite */
.error-page{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--ice) 0%,#f4f9fd 55%,#fff 100%);padding:96px 0 112px}
.error-page::after{content:"";position:absolute;left:-200px;bottom:-220px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(107,166,202,.2),rgba(107,166,202,0) 70%);pointer-events:none}
.error-box{position:relative;z-index:1;max-width:720px;margin:0 auto;text-align:center}
.error-signet{width:96px;height:96px;margin:0 auto 28px;border-radius:50%;box-shadow:var(--shadow)}
.error-box h1{font-weight:300;font-size:clamp(1.9rem,4vw,2.75rem)}
.error-box .lead{margin:22px auto 0}
.error-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:36px}

/* Responsiv */
@media (max-width:960px){
  .hero .wrap{grid-template-columns:1fr;gap:40px}
  .hero .card{margin-top:0}
  .quick{display:flex}
  .services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .location-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .topbar nav{display:none}
  .topbar .logo img{width:210px}
  .hero{padding:56px 0 64px}
  section{padding:64px 0}
  .error-page{padding:64px 0 80px}
  .error-actions .btn{width:100%}
  .services{grid-template-columns:1fr}
  .card{padding:28px 24px}
  .legal-grid{grid-template-columns:1fr}
  .wrap{padding:0 20px}
}
@media print{
  .topbar,.notice,.quick,.card .btn,.footer nav{display:none}
  .card{background:none;color:#000;box-shadow:none;border:1px solid #999}
  .card h2,.contact-list a,.contact-list .label{color:#000}
}