/* =========================================================
HUNDETRAINER MIT HERZ
STARTSEITE

RESPONSIVER GESAMTSTAND
Desktop · Tablet · Smartphone
========================================================= */

/* =========================================================
01 – GRUNDSEITE
========================================================= */

body {
background:
var(--color-surface, #f7f4ef);
}

.site {
width:
100%;

overflow-x:
clip;
}

/* Gemeinsamer Kopf für Standardbereiche */

.section-header {
width:
min(100%, 50rem);

margin:
0 auto
clamp(2.2rem, 5vw, 3.5rem);

text-align:
center;
}

.section-header .eyebrow {
margin:
0
0
0.7rem;

color:
#0f7770;

font-size:
0.8rem;

font-weight:
700;

letter-spacing:
0.13em;

text-transform:
uppercase;
}

.section-header h2 {
margin:
0
0
0.9rem;

color:
#173b50;

font-family:
var(--font-heading, Georgia, serif);

line-height:
1.15;

text-wrap:
balance;
}

.section-header p {
margin-inline:
auto;
}

/* =========================================================
02 – HEADER & NAVIGATION
========================================================= */

.site-header {
position:
sticky;

top:
0;

z-index:
100;

background:
rgba(36, 55, 70, 0.98);

border-bottom:
1px solid
rgba(255, 255, 255, 0.08);

box-shadow:
0 0.2rem 0.7rem
rgba(13, 27, 36, 0.10);
}

.header-inner {
display:
flex;

align-items:
center;

justify-content:
space-between;

gap:
clamp(1rem, 3vw, 2.5rem);

min-height:
5rem;
}

/* Marke */

.brand {
display:
flex;

align-items:
center;

gap:
0.75rem;

flex:
0 0 auto;

color:
#ffffff;

text-decoration:
none;
}

.brand img {
display:
block;

width:
3.75rem;

height:
3.75rem;

object-fit:
contain;
}

.brand__text {
display:
flex;

flex-direction:
column;
}

.brand__text strong {
color:
#ffffff;

font-family:
var(--font-heading, Georgia, serif);

font-size:
1.22rem;

line-height:
1.1;
}

.brand__text span {
margin-top:
0.15rem;

color:
#bfe9e8;

font-size:
0.83rem;
}

/* Navigation */

.main-nav {
display:
flex;

align-items:
center;

justify-content:
flex-end;

gap:
clamp(0.8rem, 2vw, 1.7rem);
}

.main-nav a {
color:
#f7fafb;

font-size:
0.91rem;

font-weight:
600;

line-height:
1.2;

text-decoration:
none;

transition:
color 0.2s ease;
}

.main-nav a {
color:
#8fd7d5;
}

.main-nav a {
outline:
2px solid #ffffff;

outline-offset:
4px;

border-radius:
0.2rem;
}

.main-nav .main-nav__special {
color:
#8fd7d5;
}

.main-nav .main-nav__special {
color:
#ffffff;
}

/* =========================================================
03 – HERO
========================================================= */

.hero {
padding:
0;

color:
#ffffff;

background:
linear-gradient(
135deg,
#29475c 0%,
#365d76 100%
);
}

.hero-grid {
display:
grid;

grid-template-columns:
minmax(0, 0.95fr)
minmax(0, 1.05fr);

align-items:
center;

gap:
clamp(3rem, 7vw, 6rem);

padding-top:
clamp(3.5rem, 7vw, 5.5rem);

padding-bottom:
clamp(3.5rem, 7vw, 5.5rem);
}

/* Hero Text */

.hero__eyebrow {
margin:
0
0
1rem;

color:
#bfe9e8;

font-size:
0.86rem;

font-weight:
700;

letter-spacing:
0.12em;

text-transform:
uppercase;
}

.hero h1 {
max-width:
12ch;

margin:
0
0
1.2rem;

color:
#ffffff;

font-family:
var(--font-heading, Georgia, serif);

font-size:
clamp(2.7rem, 5vw, 4.6rem);

line-height:
1.02;

text-wrap:
balance;
}

.hero h1 span {
color:
#8fd7d5;
}

.hero__lead {
max-width:
34rem;

margin:
0
0
1rem;

color:
#ffffff;

font-family:
var(--font-heading, Georgia, serif);

font-size:
clamp(1.35rem, 2.5vw, 2rem);

line-height:
1.3;
}

.hero__text {
max-width:
35rem;

margin:
0;

color:
rgba(247, 250, 251, 0.88);

font-size:
clamp(1rem, 1.5vw, 1.08rem);

line-height:
1.65;
}

/* Hero Buttons */

.hero .button-group,
#kontakt .button-group {
display:
flex;

flex-wrap:
wrap;

align-items:
center;

gap:
0.75rem;
}

/* Hero Bild */

.hero__media {
overflow:
hidden;

padding:
0.7rem;

background:
rgba(255, 255, 255, 0.10);

border:
1px solid
rgba(255, 255, 255, 0.15);

border-radius:
1rem;

box-shadow:
0 0.9rem 2rem
rgba(15, 31, 42, 0.22);
}

.hero__media img {
display:
block;

width:
100%;

height:
auto;

max-height:
33rem;

object-fit:
cover;

object-position:
center 65%;

border-radius:
0.75rem;
}

/* =========================================================
04 – VERTRAUEN DIREKT UNTER DEM HERO
========================================================= */

.hero-trust {
position:
relative;

padding:
clamp(2.8rem, 5vw, 4.2rem)
0
clamp(3rem, 5.5vw, 4.5rem);

color:
#ffffff;

background:
linear-gradient(
180deg,
#365d76 0%,
#315970 16%,
#2b5068 38%,
#264960 68%,
#203f55 100%
);
}

/* Kopf */

.hero-trust__heading {
width:
min(100%, 48rem);

margin:
0 auto
clamp(2rem, 4vw, 2.8rem);

text-align:
center;
}

.hero-trust__eyebrow {
display:
block;

width:
100%;

margin:
0 auto
0.8rem;

color:
#8fd7d5;

font-size:
clamp(0.88rem, 1.25vw, 1rem);

font-weight:
700;

line-height:
1.35;

letter-spacing:
0.11em;

text-transform:
uppercase;

text-align:
center;
}

.hero-trust__heading h2 {
margin:
0
0
0.75rem;

color:
#ffffff;

font-family:
var(--font-heading, Georgia, serif);

font-size:
clamp(1.75rem, 3vw, 2.5rem);

line-height:
1.15;

text-wrap:
balance;
}

.hero-trust__heading > p {
max-width:
40rem;

margin-inline:
auto;

color:
rgba(255, 255, 255, 0.90);

font-size:
clamp(1rem, 1.35vw, 1.08rem);

line-height:
1.55;
}

/* Kartenraster – Desktop */

.hero-trust__grid {
display:
grid;

grid-template-columns:
repeat(4, minmax(0, 1fr));

gap:
clamp(1rem, 2vw, 1.4rem);
}

/* Vertrauenskarten */

.hero-trust__card {
display:
block;

min-width:
0;

padding:
clamp(1.25rem, 2vw, 1.55rem);

background:
rgba(255, 255, 255, 0.045);

border:
1px solid
rgba(255, 255, 255, 0.20);

border-radius:
0.85rem;
}

/* Hauptbegriff */

.hero-trust__value {
display:
block;

margin-bottom:
0.28rem;

color:
#8fd7d5;

font-family:
var(--font-heading, Georgia, serif);

font-size:
clamp(1.3rem, 1.7vw, 1.6rem);

font-weight:
700;

line-height:
1.18;
}

.hero-trust__card h3 {
margin:
0
0
0.7rem;

color:
#ffffff;

font-family:
var(--font-heading, Georgia, serif);

font-size:
clamp(1.12rem, 1.35vw, 1.28rem);

font-weight:
700;

line-height:
1.28;
}

.hero-trust__card p {
margin:
0;

color:
rgba(255, 255, 255, 0.92);

font-size:
clamp(0.96rem, 1.05vw, 1.06rem);

line-height:
1.55;
}

.hero + .hero-trust {
margin-top:
0;
}

/* =========================================================
TRUST – MITTLERE BREITEN
Tablet hochkant + Smartphone quer
========================================================= */

@media
(min-width: 43rem)
and
(max-width: 69.999rem) {

.hero-trust__heading {
width:
min(92%, 46rem);
}

.hero-trust__grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));

gap:
  1.15rem;

}

.hero-trust__card {
min-height:
13rem;

padding:
  1.35rem;

}

.hero-trust__value {
font-size:
1.35rem;
}

.hero-trust__card h3 {
font-size:
1.08rem;
}

.hero-trust__card p {
font-size:
0.96rem;

line-height:
  1.5;

}

}

/* =========================================================
TRUST – SCHMALE ANSICHT
Smartphone hochkant
========================================================= */

@media (max-width: 42.999rem) {

.hero-trust {
padding:
2.8rem
0
3rem;
}

.hero-trust__heading {
width:
min(90%, 34rem);

margin-bottom:
  1.8rem;

}

.hero-trust__eyebrow {
font-size:
0.78rem;
}

.hero-trust__heading h2 {
font-size:
clamp(1.8rem, 7.5vw, 2.3rem);
}

.hero-trust__heading > p {
font-size:
1rem;
}

.hero-trust__grid {
grid-template-columns:
1fr;

width:
  min(90%, 32rem);

margin-inline:
  auto;

gap:
  0.9rem;

}

.hero-trust__card {
min-height:
0;

padding:
  1.25rem;

}

.hero-trust__value {
font-size:
1.3rem;
}

.hero-trust__card h3 {
font-size:
1.05rem;
}

.hero-trust__card p {
font-size:
0.95rem;

line-height:
  1.5;

}

}

/* =========================================================
05 – LEISTUNGSBEREICH
========================================================= */

.services-section {
position:
relative;

overflow:
hidden;

padding:
clamp(3.8rem, 7vw, 6rem)
0;

background:
radial-gradient(
circle at 50% 0%,
rgba(255, 248, 235, 0.94),
transparent 34rem
),
linear-gradient(
180deg,
#f3e7d6 0%,
#efe0cc 56%,
#ead8c1 100%
);
}

.services-container {
position:
relative;
}

/* Service Kopf */

.services-heading {
position:
relative;

width:
min(100%, 58rem);

margin-inline:
auto;

text-align:
center;
}

.services-heading::before,
.services-heading::after {
content:
"";

position:
absolute;

top:
48%;

width:
clamp(6.5rem, 10vw, 9rem);

height:
clamp(6.5rem, 10vw, 9rem);

background-repeat:
no-repeat;

background-position:
center;

background-size:
contain;

opacity:
0.70;

transform:
translateY(-50%);

pointer-events:
none;
}

.services-heading::before {
left:
-7.2rem;

background-image:
url("/assets/images/service/blatt-links.webp");
}

.services-heading::after {
right:
-7.2rem;

background-image:
url("/assets/images/service/blatt-rechts.webp");
}

.services-heading__eyebrow {
display:
block;

width:
100%;

margin:
0 auto
0.75rem;

color:
#0d6a63;

font-size:
0.82rem;

font-weight:
700;

line-height:
1.3;

letter-spacing:
0.16em;

text-transform:
uppercase;

text-align:
center;
}

.services-heading__title {
max-width:
54rem;

margin:
0 auto
1rem;

color:
#173b50;

font-family:
var(--font-heading, Georgia, serif);

font-size:
clamp(2rem, 4vw, 3.2rem);

line-height:
1.08;

text-align:
center;

text-wrap:
balance;
}

.services-heading__lead {
max-width:
44rem;

margin-inline:
auto;

color:
#42535c;

font-size:
clamp(1rem, 1.7vw, 1.12rem);

line-height:
1.6;

text-align:
center;
}

/* Ornament */

.services-ornament {
display:
flex;

align-items:
center;

justify-content:
center;

margin:
clamp(2rem, 5vw, 3.2rem)
auto
clamp(1.8rem, 4vw, 2.7rem);
}

.services-ornament img {
display:
block;

width:
min(100%, 34rem);

height:
auto;

opacity:
0.95;
}

/* Besucherfrage */

.services-question {
max-width:
52rem;

margin:
0 auto
clamp(2.5rem, 5vw, 3.7rem);

text-align:
center;
}

.services-question h2 {
margin:
0
0
0.7rem;

color:
#173b50;

font-family:
var(--font-heading, Georgia, serif);

font-size:
clamp(1.8rem, 3vw, 2.65rem);

line-height:
1.15;

text-wrap:
balance;
}

.services-question p {
margin:
0;

color:
#42535c;

font-size:
1.03rem;

line-height:
1.6;
}

/* Kartenraster */

.services-grid {
display:
grid;

grid-template-columns:
repeat(3, minmax(0, 1fr));

gap:
clamp(1.25rem, 2vw, 1.7rem);
}

/* Service Karte */

.service-card {
position:
relative;

isolation:
isolate;

min-width:
0;

aspect-ratio:
1 / 1.08;

overflow:
hidden;

background:
#fffaf3;

border:
1px solid
rgba(105, 82, 54, 0.13);

border-radius:
1.15rem;

box-shadow:
0 0.45rem 1.25rem
rgba(78, 59, 38, 0.09),
0 0.1rem 0.25rem
rgba(78, 59, 38, 0.05);

transition:
transform 0.22s ease,
box-shadow 0.22s ease,
border-color 0.22s ease;
}

.service-card {
transform:
translateY(-6px);

border-color:
rgba(166, 112, 48, 0.30);

box-shadow:
0 1rem 2.1rem
rgba(78, 59, 38, 0.14),
0 0.3rem 0.7rem
rgba(78, 59, 38, 0.07);
}

.service-card__background {
position:
absolute;

inset:
0;

width:
100%;

height:
100%;

object-fit:
cover;

object-position:
center;

z-index:
-3;

pointer-events:
none;

user-select:
none;
}

.service-card::before {
content:
"";

position:
absolute;

inset:
0;

z-index:
-2;

background:
linear-gradient(
90deg,
rgba(255, 251, 244, 0.97) 0%,
rgba(255, 251, 244, 0.93) 38%,
rgba(255, 251, 244, 0.74) 56%,
rgba(255, 251, 244, 0.16) 76%,
transparent 100%
);
}

.service-card::after {
content:
"";

position:
absolute;

inset:
0;

z-index:
-1;

background:
linear-gradient(
180deg,
rgba(255, 252, 247, 0.36) 0%,
transparent 38%
);

pointer-events:
none;
}

.service-card__content {
position:
relative;

z-index:
2;

display:
flex;

flex-direction:
column;

width:
100%;

height:
100%;

padding:
clamp(1.25rem, 2vw, 1.65rem);
}

.service-card__heading {
display:
block;

width:
100%;

margin-bottom:
0.85rem;
}

.service-card__heading h3 {
margin:
0;

max-width:
16rem;

color:
#173b50;

font-family:
var(--font-heading, Georgia, serif);

font-size:
clamp(1.28rem, 1.7vw, 1.55rem);

line-height:
1.18;

text-wrap:
balance;
}

.service-card__hook {
width:
68%;

max-width:
15rem;

margin:
0
0
0.85rem;

color:
#a75716;

font-family:
var(--font-heading, Georgia, serif);

font-size:
0.98rem;

font-weight:
700;

line-height:
1.4;
}

.service-card__text {
width:
62%;

max-width:
15rem;

margin:
0
0
1rem;

color:
#24353d;

font-size:
clamp(0.82rem, 1vw, 0.91rem);

line-height:
1.55;
}

.service-card__more {
display:
inline-flex;

align-items:
center;

align-self:
flex-start;

gap:
0.45rem;

margin-top:
auto;

color:
#0d645b;

font-family:
var(--font-heading, Georgia, serif);

font-size:
0.95rem;

font-weight:
700;

text-decoration:
none;

transition:
gap 0.2s ease,
color 0.2s ease;
}

.service-card__more {
gap:
0.7rem;

color:
#9c5519;
}

/* Abschluss Mensch & Hund */

.services-closing {
position:
relative;

overflow:
hidden;

height:
clamp(7rem, 11vw, 9rem);

margin-top:
clamp(2.3rem, 5vw, 3.8rem);

background:
#eef0df;

border:
1px solid
rgba(108, 118, 78, 0.18);

border-radius:
1rem;

box-shadow:
0 0.45rem 1.2rem
rgba(70, 72, 54, 0.07);
}

.services-closing__background {
position:
absolute;

left:
50%;

top:
50%;

width:
100%;

height:
auto;

min-height:
210%;

object-fit:
cover;

object-position:
center;

transform:
translate(-50%, -50%)
scale(1.05);

pointer-events:
none;

user-select:
none;
}

.services-closing__content {
position:
relative;

z-index:
2;

display:
flex;

flex-direction:
column;

justify-content:
center;

width:
58%;

height:
100%;

margin-left:
clamp(4.5rem, 9vw, 7rem);

padding:
1rem
clamp(1rem, 3vw, 2rem);
}

.services-closing__content strong {
color:
#173b50;

font-family:
var(--font-heading, Georgia, serif);

font-size:
clamp(1.03rem, 1.8vw, 1.3rem);

line-height:
1.32;
}

.services-closing__content span {
margin-top:
0.35rem;

color:
#43545a;

font-size:
0.9rem;
}

/* =========================================================
LEISTUNGSABSCHLUSS – TABLET
mehr Luft für Text
========================================================= */

@media
(min-width: 43rem)
and
(max-width: 63.999rem) {

.services-closing {
height:
auto;

min-height:
  9rem;

}

.services-closing__content {
width:
72%;

min-height:
  9rem;

margin-left:
  2.5rem;

padding:
  1.4rem
  1.5rem;

}

.services-closing__content strong {
font-size:
1.08rem;
}

}

/* =========================================================
LEISTUNGSABSCHLUSS – SMARTPHONE
========================================================= */

@media (max-width: 42.999rem) {

.services-closing {
height:
auto;

min-height:
  8rem;

}

.services-closing__content {
width:
76%;

min-height:
  8rem;

margin-left:
  2.2rem;

padding:
  1.15rem
  0.75rem;

}

.services-closing__content strong {
font-size:
1rem;
}

.services-closing__content span {
font-size:
0.84rem;
}

}

/* =========================================================
06 – VERTIEFENDES VERTRAUEN
ERFAHRUNG, HALTUNG & KONKRETE WEGE
========================================================= */

.experience-trust {
position:
relative;

padding:
clamp(4rem, 7vw, 6rem)
0;

background:
#f7f4ef;
}

.experience-trust__container {
position:
relative;
}

.experience-trust__grid {
display:
grid;

grid-template-columns:
minmax(0, 0.9fr)
minmax(0, 1.1fr);

align-items:
start;

gap:
clamp(2.5rem, 6vw, 5.5rem);
}

/* =========================================================
LINKE SEITE – GESCHICHTE
========================================================= */

.experience-trust__story {
max-width:
34rem;

padding-top:
0.4rem;
}

.experience-trust__eyebrow {
margin:
0
0
0.8rem;

color:
#0f7770;

font-size:
0.82rem;

font-weight:
700;

line-height:
1.35;

letter-spacing:
0.13em;

text-transform:
uppercase;
}

.experience-trust__story h2 {
margin:
0
0
1.4rem;

color:
#173b50;

font-family:
var(--font-heading, Georgia, serif);

font-size:
clamp(2rem, 3.6vw, 3rem);

line-height:
1.1;

text-wrap:
balance;
}

.experience-trust__story p {
margin:
0
0
1rem;

color:
#3f5059;

font-size:
clamp(0.98rem, 1.2vw, 1.06rem);

line-height:
1.68;
}

.experience-trust__story-link {
display:
inline-flex;

align-items:
center;

gap:
0.45rem;

margin-top:
0.45rem;

color:
#0d645b;

font-family:
var(--font-heading, Georgia, serif);

font-size:
1.25rem;;

font-weight:
700;

line-height:
1.4;

text-decoration:
none;

transition:
gap 0.2s ease,
color 0.2s ease;
}

.experience-trust__story-link {
gap:
0.7rem;

color:
#9c5519;
}

.experience-trust__story-link {
outline:
2px solid #0f7770;

outline-offset:
4px;

border-radius:
0.2rem;
}

/* =========================================================
RECHTE SEITE – DREI WEGE
========================================================= */

.experience-trust__paths {
display:
grid;

grid-template-columns:
1fr;

gap:
1rem;
}

.experience-trust__card {
padding:
clamp(1.3rem, 2vw, 1.65rem)
clamp(1.35rem, 2.3vw, 1.85rem);

background:
#fffaf3;

border:
1px solid
rgba(105, 82, 54, 0.14);

border-radius:
1rem;

box-shadow:
0 0.4rem 1.1rem
rgba(78, 59, 38, 0.07);

transition:
transform 0.2s ease,
box-shadow 0.2s ease,
border-color 0.2s ease;
}

.experience-trust__card {
transform:
translateY(-2px);

border-color:
rgba(15, 119, 112, 0.24);

box-shadow:
0 0.7rem 1.5rem
rgba(58, 64, 58, 0.10);
}

.experience-trust__card h3 {
margin:
0
0
0.6rem;

color:
#173b50;

font-family:
var(--font-heading, Georgia, serif);

font-size:
clamp(1.2rem, 1.8vw, 1.45rem);

line-height:
1.25;

text-wrap:
balance;
}

.experience-trust__card p {
max-width:
38rem;

margin:
0
0
0.85rem;

color:
#43545c;

font-size:
0.96rem;

line-height:
1.58;
}

.experience-trust__card-link {
display:
inline-flex;

align-items:
center;

gap:
0.45rem;

color:
#0d645b;

font-family:
var(--font-heading, Georgia, serif);

font-size:
1.25rem;

font-weight:
700;

line-height:
1.4;

text-decoration:
none;

transition:
gap 0.2s ease,
color 0.2s ease;
}

.experience-trust__card-link {
gap:
0.65rem;

color:
#9c5519;
}

.experience-trust__card-link {
outline:
2px solid #0f7770;

outline-offset:
4px;

border-radius:
0.2rem;
}

/* =========================================================
VERTIEFENDES VERTRAUEN – TABLET
========================================================= */

@media
(min-width: 43rem)
and
(max-width: 63.999rem) {

.experience-trust {
padding:
4rem
0;
}

.experience-trust__grid {
grid-template-columns:
minmax(0, 0.92fr)
minmax(0, 1.08fr);

gap:
  2rem;

}

.experience-trust__story h2 {
font-size:
clamp(1.8rem, 3.5vw, 2.35rem);
}

.experience-trust__card {
padding:
1.25rem;
}

.experience-trust__card h3 {
font-size:
1.16rem;
}

.experience-trust__card p {
font-size:
0.93rem;
}

}

/* =========================================================
VERTIEFENDES VERTRAUEN – SMARTPHONE
========================================================= */

@media (max-width: 42.999rem) {

.experience-trust {
padding:
3.2rem
0;
}

.experience-trust__grid {
grid-template-columns:
1fr;

gap:
  2rem;

}

.experience-trust__story {
width:
min(100%, 34rem);

max-width:
  none;

margin-inline:
  auto;

padding-top:
  0;

}

.experience-trust__eyebrow {
font-size:
0.78rem;
}

.experience-trust__story h2 {
font-size:
clamp(1.9rem, 8vw, 2.4rem);
}

.experience-trust__story p {
font-size:
0.98rem;

line-height:
  1.62;

}

.experience-trust__paths {
width:
min(100%, 34rem);

margin-inline:
  auto;

gap:
  0.9rem;

}

.experience-trust__card {
padding:
1.25rem;
}

.experience-trust__card h3 {
font-size:
1.18rem;
}

.experience-trust__card p {
font-size:
0.94rem;

line-height:
  1.55;

}

}

/* =========================================================
06 – ZITAT
========================================================= */

.section.section--light {
padding:
0;

background:
linear-gradient(
180deg,
#ead8c1 0%,
#e8e2d2 18%,
#e7ecdf 38%,
#e7ecdf 68%,
#edf0e7 84%,
#f7f4ef 100%
);
}

.quote.quote--accent {
width:
100%;

max-width:
55rem;

margin:
0 auto;

padding:
clamp(1.5rem, 3vw, 2.2rem)
clamp(1.5rem, 5vw, 4rem);

text-align:
center;
}

.quote.quote--accent p {
max-width:
40rem;

margin:
0 auto
0.35rem;

color:
#173b50;

font-size:
clamp(1.55rem, 3vw, 2.15rem);

line-height:
1.35;

text-align:
center;
}

.quote.quote--accent cite {
display:
block;

margin:
0;

color:
#0f7770;

font-size:
0.82rem;

font-style:
normal;

line-height:
1.3;

text-align:
center;
}

/* Tablet: Handschrift nicht unnötig quetschen */

@media
(min-width: 43rem)
and
(max-width: 63.999rem) {

.quote.quote--accent {
max-width:
48rem;

padding:
  1.8rem
  2.2rem;

}

.quote.quote--accent p {
max-width:
45rem;

font-size:
  clamp(1.45rem, 3.2vw, 1.8rem);

line-height:
  1.4;

}

}

/* =========================================================
07 – KENNENLERNVIDEO
========================================================= */

.video-section {
padding:
clamp(2.5rem, 5vw, 3.8rem)
0;

background:
linear-gradient(
180deg,
#f7f4ef 0%,
#f3f0e9 100%
);
}

.video-section .section-header {
max-width:
48rem;

margin:
0 auto
clamp(1.5rem, 3vw, 2.1rem);

text-align:
center;
}

.video-section .section-header .eyebrow {
margin:
0
0
0.55rem;

color:
#0f7770;
}

.video-section .section-header h2 {
margin:
0
0
0.7rem;

color:
#173b50;
}

.video-section .section-header p {
max-width:
42rem;

margin-inline:
auto;

color:
#43545c;

font-size:
1rem;

line-height:
1.6;
}

.video-wrapper {
position:
relative;

width:
min(100%, 48rem);

aspect-ratio:
16 / 9;

margin-inline:
auto;

overflow:
hidden;

background:
#20394b;

border:
1px solid
rgba(44, 60, 69, 0.12);

border-radius:
1rem;

box-shadow:
0 0.7rem 1.6rem
rgba(45, 53, 57, 0.14);
}

.video-preview img {
display:
block;

width:
100%;

height:
100%;

object-fit:
cover;

object-position:
center 42%;

transition:
transform 0.35s ease,
filter 0.35s ease;
}

.video-preview::after {
content:
"";

position:
absolute;

inset:
0;

z-index:
1;

background:
linear-gradient(
180deg,
transparent 45%,
rgba(18, 34, 44, 0.52) 100%
);

pointer-events:
none;
}

.video-play {
position:
absolute;

left:
50%;

bottom:
1.25rem;

z-index:
2;

display:
inline-flex;

align-items:
center;

justify-content:
center;

gap:
0.6rem;

min-height:
3rem;

padding:
0.75rem
1.15rem;

color:
#ffffff;

background:
rgba(32, 57, 75, 0.92);

border:
1px solid
rgba(255, 255, 255, 0.34);

border-radius:
999px;

font-size:
0.92rem;

font-weight:
700;

cursor:
pointer;

transform:
translateX(-50%);

backdrop-filter:
blur(5px);

box-shadow:
0 0.4rem 1rem
rgba(0, 0, 0, 0.18);

transition:
background-color 0.2s ease,
transform 0.2s ease;
}

.video-play {
background:
#173b50;

transform:
translateX(-50%)
translateY(-2px);
}

.video-play__icon {
display:
inline-flex;

align-items:
center;

justify-content:
center;

width:
1.8rem;

height:
1.8rem;

padding-left:
0.1rem;

color:
#173b50;

background:
#8fd7d5;

border-radius:
50%;

font-size:
0.72rem;
}

.video-preview img {
transform:
scale(1.015);

filter:
brightness(0.96);
}

.video-wrapper iframe {
display:
block;

width:
100%;

height:
100%;

border:
0;
}

.video-note {
max-width:
48rem;

margin:
0.55rem auto
0;

color:
#71818a;

font-size:
0.82rem;

line-height:
1.4;

text-align:
center;
}

/* =========================================================
08 – MOBILES HUNDETRAINING
REGIONAL & ÜBERREGIONAL
========================================================= */

.regional-section {
position:
relative;

overflow:
hidden;

padding:
clamp(4rem, 7vw, 6rem)
0
0;

color:
#173b50;

background:
linear-gradient(
180deg,
#f7f4ef 0%,
#f3f3e9 14%,
#eef2e3 40%,
#e9efdd 68%,
#e4ecd6 100%
);
}

.regional-section__container {
position:
relative;

z-index:
2;

width:
min(94vw, 88rem);

margin-inline:
auto;
}

.regional-section__header {
width:
min(100%, 60rem);

margin:
0 auto
clamp(3rem, 5vw, 4.25rem);

text-align:
center;
}

.regional-section__eyebrow {
display:
block;

width:
100%;

margin:
0 auto
0.85rem;

color:
#0f7770;

font-size:
clamp(0.8rem, 1vw, 0.92rem);

font-weight:
700;

line-height:
1.4;

letter-spacing:
0.13em;

text-transform:
uppercase;
}

.regional-section__header h2 {
max-width:
52rem;

margin:
0 auto
0.9rem;

color:
#173b50;

font-family:
var(--font-heading, Georgia, serif);

font-size:
clamp(2.1rem, 4vw, 3.3rem);

line-height:
1.12;

text-wrap:
balance;
}

.regional-section__intro {
max-width:
46rem;

margin:
0 auto;

color:
#43545c;

font-size:
clamp(1rem, 1.4vw, 1.15rem);

line-height:
1.6;
}

.regional-section__grid {
display:
grid;

grid-template-columns:
repeat(2, minmax(0, 1fr));

gap:
clamp(1.5rem, 2.5vw, 2.3rem);

align-items:
stretch;
}

.regional-card {
position:
relative;

min-width:
0;

min-height:
clamp(31rem, 35vw, 36rem);

overflow:
hidden;

background-color:
#f7f4eb;

background-repeat:
no-repeat;

background-size:
cover;

background-position:
center bottom;

border:
1px solid
rgba(58, 73, 60, 0.11);

border-radius:
1.35rem;

box-shadow:
0 0.8rem 2rem
rgba(47, 60, 48, 0.10);

transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}

.regional-card {
transform:
translateY(-3px);

box-shadow:
0 1rem 2.4rem
rgba(47, 60, 48, 0.15);
}

.regional-card--local {
background-image:
url("/assets/images/Kontakt/regional-unterwegs.webp");
}

.regional-card--distance {
background-image:
url("/assets/images/Kontakt/ueberregional-unterwegs.webp");
}

.regional-card__content {
position:
relative;

z-index:
2;

width:
51%;

box-sizing:
border-box;

padding-top:
clamp(4rem, 5vw, 5.2rem);

padding-bottom:
clamp(2rem, 3vw, 2.8rem);
}

.regional-card--local
.regional-card__content {
margin-left:
auto;

padding-left:
clamp(1.7rem, 2.6vw, 2.4rem);

padding-right:
clamp(2rem, 3vw, 3rem);
}

.regional-card--distance
.regional-card__content {
margin-right:
auto;

padding-left:
clamp(2rem, 3vw, 3rem);

padding-right:
clamp(1.7rem, 2.6vw, 2.4rem);
}

.regional-card__eyebrow {
margin:
0
0
0.75rem;

color:
#0f7770;

font-size:
clamp(0.74rem, 0.9vw, 0.84rem);

font-weight:
700;

line-height:
1.4;

letter-spacing:
0.08em;

text-transform:
uppercase;
}

.regional-card h3 {
margin:
0
0
1rem;

color:
#173b50;

font-family:
var(--font-heading, Georgia, serif);

font-size:
clamp(1.45rem, 1.9vw, 1.85rem);

line-height:
1.2;

text-wrap:
balance;
}

.regional-card p {
margin:
0
0
0.95rem;

color:
#43545c;

font-size:
clamp(0.92rem, 1vw, 1rem);

font-weight:
500;

line-height:
1.62;
}

.regional-card__link {
display:
inline-flex;

align-items:
center;

gap:
0.45rem;

margin-top:
0.15rem;

color:
#0f7770;

font-size:
clamp(0.87rem, 1vw, 0.96rem);

font-weight:
700;

line-height:
1.4;

text-decoration:
none;
}

.regional-contact {
position:
relative;

z-index:
4;

width:
min(100%, 48rem);

margin:
clamp(3rem, 5vw, 4.2rem)
auto
0;

text-align:
center;
}

.regional-contact__heart {
margin-bottom:
0.65rem;

color:
#d62e27;

font-size:
clamp(1.9rem, 3vw, 2.5rem);

line-height:
1;
}

.regional-contact h3 {
margin:
0
0
0.35rem;

color:
#173b50;

font-family:
var(--font-heading, Georgia, serif);

font-size:
clamp(1.6rem, 2.7vw, 2.15rem);

line-height:
1.2;
}

.regional-contact__lead {
margin:
0
0
0.75rem;

color:
#0f7770;

font-family:
var(--font-heading, Georgia, serif);

font-size:
clamp(1.05rem, 1.6vw, 1.28rem);

font-weight:
700;
}

.regional-contact__text {
max-width:
40rem;

margin:
0 auto
1.5rem;

color:
#43545c;

font-size:
clamp(1rem, 1.15vw, 1.08rem);

line-height:
1.6;
}

.regional-contact__actions {
display:
flex;

flex-wrap:
wrap;

align-items:
center;

justify-content:
center;

gap:
clamp(0.65rem, 1.2vw, 0.9rem);
}

.regional-section__landscape {
position:
relative;

z-index:
1;

width:
100%;

height:
clamp(11rem, 19vw, 17rem);

margin-top:
clamp(-1rem, -1vw, -0.25rem);

overflow:
hidden;

background-image:
url("/assets/images/Kontakt/waldrand.webp");

background-repeat:
no-repeat;

background-size:
100% auto;

background-position:
center 60%;
}

.regional-section__landscape::before {
content:
"";

position:
absolute;

inset:
0 0 auto 0;

z-index:
2;

height:
clamp(5rem, 9vw, 8rem);

background:
linear-gradient(
180deg,
#e4ecd6 0%,
rgba(228, 236, 214, 0.94) 20%,
rgba(228, 236, 214, 0.72) 42%,
rgba(228, 236, 214, 0.38) 68%,
rgba(228, 236, 214, 0) 100%
);
}

/* =========================================================
REGION – TABLET HOCHKANT
Karten untereinander, Grafik sichtbar
========================================================= */

@media
(min-width: 43rem)
and
(max-width: 62.5rem) {

.regional-section__container {
width:
min(92vw, 56rem);
}

.regional-section__grid {
grid-template-columns:
1fr;

gap:
  1.5rem;

}

.regional-card {
width:
100%;

max-width:
  48rem;

min-height:
  31rem;

margin-inline:
  auto;

}

.regional-card__content {
width:
55%;
}

}

/* =========================================================
REGION – SMARTPHONE
echte Bildausschnitte statt leerer Fläche
========================================================= */

@media (max-width: 42.999rem) {

.regional-section {
padding-top:
3.2rem;
}

.regional-section__container {
width:
min(92vw, 34rem);
}

.regional-section__header {
margin-bottom:
2.2rem;
}

.regional-section__header h2 br {
display:
none;
}

.regional-section__grid {
grid-template-columns:
1fr;

gap:
  1.25rem;

}

.regional-card {
min-height:
0;

padding-top:
  48%;

background-color:
  #f7f4eb;

background-repeat:
  no-repeat;

border-radius:
  1.2rem;

}

/*

Die Bilder werden mobil bewusst vergrößert.

So verschwinden die großen leeren Flächen,

die auf den Screenshots sichtbar waren.
*/

.regional-card--local {
background-size:
150% auto;

background-position:
  26% 18%;

}

.regional-card--distance {
background-size:
145% auto;

background-position:
  74% 20%;

}

.regional-card__content,
.regional-card--local
.regional-card__content,
.regional-card--distance
.regional-card__content {
width:
100%;

margin:
  0;

padding:
  1.5rem
  1.4rem
  1.8rem;

background:
  #f7f4eb;

}

.regional-card h3 br {
display:
none;
}

.regional-contact {
margin-top:
3rem;

padding-inline:
  0.5rem;

}

.regional-contact__actions {
flex-direction:
column;
}

.regional-contact__actions .btn {
width:
100%;

max-width:
  20rem;

}

.regional-section__landscape {
height:
8.5rem;

margin-top:
  -0.25rem;

background-size:
  auto 20rem;

background-position:
  center 59%;

}

.regional-section__landscape::before {
height:
4.5rem;
}

}

/* =========================================================
09 – NEWSLETTER
========================================================= */

.newsletter-section {
position:
relative;

z-index:
2;

margin-top:
clamp(-6rem, -7vw, -4.5rem);

padding:
clamp(4.5rem, 6vw, 5.5rem)
0
clamp(4rem, 7vw, 6rem);

overflow:
hidden;

background:
linear-gradient(
180deg,
rgba(228, 236, 214, 0.16) 0%,
rgba(228, 236, 214, 0.46) 7%,
rgba(232, 239, 218, 0.72) 13%,
rgba(238, 241, 224, 0.90) 20%,
#f7f4ef 32%,
#f5f2e9 100%
),
url("/assets/images/Kontakt/waldrand.webp")
top center
/ 100% auto
no-repeat,
#f5f2e9;
}

.newsletter-section__container {
position:
relative;

z-index:
3;

width:
min(94vw, 92rem);

margin-inline:
auto;
}

.newsletter-band {
position:
relative;

display:
grid;

grid-template-columns:
30% 40% 30%;

min-height:
clamp(34rem, 42vw, 43rem);

overflow:
hidden;

background:
#f7f1e5;

border:
1px solid
rgba(67, 72, 54, 0.12);

border-radius:
1.4rem;

box-shadow:
0 0.9rem 2.4rem
rgba(47, 55, 45, 0.12);
}

.newsletter-band__image {
position:
relative;

z-index:
1;

min-width:
0;

overflow:
hidden;
}

.newsletter-band__image img {
display:
block;

width:
100%;

height:
100%;

object-fit:
cover;
}

.newsletter-band__image--left img {
object-position:
center 38%;
}

.newsletter-band__image--right img {
object-position:
center 46%;
}

.newsletter-band__image--left::after,
.newsletter-band__image--right::after {
content:
"";

position:
absolute;

inset:
0;

z-index:
2;

pointer-events:
none;
}

.newsletter-band__image--left::after {
background:
linear-gradient(
90deg,
transparent 64%,
rgba(247, 241, 229, 0.45) 78%,
#f7f1e5 100%
);
}

.newsletter-band__image--right::after {
background:
linear-gradient(
270deg,
transparent 64%,
rgba(247, 241, 229, 0.45) 78%,
#f7f1e5 100%
);
}

.newsletter-band__content {
position:
relative;

z-index:
5;

display:
flex;

flex-direction:
column;

align-items:
center;

padding:
clamp(4.5rem, 6vw, 6rem)
clamp(1.6rem, 3vw, 3rem)
clamp(8rem, 11vw, 10rem);

text-align:
center;
}

.newsletter-band__eyebrow {
margin:
0
0
1rem;

color:
#526a3b;

font-size:
clamp(0.78rem, 1vw, 0.92rem);

font-weight:
700;

line-height:
1.4;

letter-spacing:
0.13em;

text-transform:
uppercase;
}

.newsletter-band__content h2 {
margin:
0
0
clamp(1.1rem, 2vw, 1.5rem);

color:
#173b50;

font-family:
var(--font-heading, Georgia, serif);

font-size:
clamp(2rem, 3.6vw, 3.2rem);

line-height:
1.1;

text-wrap:
balance;
}

.newsletter-band__button {
display:
inline-flex;

align-items:
center;

justify-content:
center;

width:
min(100%, 27rem);

min-height:
4rem;

padding:
0.95rem
1.5rem;

margin:
0 auto
clamp(1.5rem, 2.5vw, 2rem);

color:
#ffffff;

background:
linear-gradient(
135deg,
#285c28 0%,
#436f28 100%
);

border:
1px solid
rgba(46, 76, 35, 0.28);

border-radius:
0.85rem;

box-shadow:
0 0.55rem 1.2rem
rgba(55, 72, 39, 0.20);

font-size:
clamp(0.95rem, 1.3vw, 1.1rem);

font-weight:
700;

line-height:
1.2;

text-decoration:
none;

text-transform:
uppercase;
}

.newsletter-band__divider {
display:
flex;

align-items:
center;

justify-content:
center;

gap:
0.6rem;

width:
min(100%, 18rem);

margin:
0 auto
clamp(1.2rem, 2vw, 1.6rem);

color:
#66784c;
}

.newsletter-band__divider span(
.newsletter-band__divider-symbol
) {
flex:
1;

height:
1px;

background:
rgba(102, 120, 76, 0.34);
}

.newsletter-band__divider-symbol {
font-size:
0.72rem;
}

.newsletter-band__text {
max-width:
31rem;

margin:
0 auto
1rem;

color:
#43545c;

font-size:
clamp(0.98rem, 1.25vw, 1.1rem);

line-height:
1.65;
}

.newsletter-band__note {
margin:
0;

color:
#526a3b;

font-size:
clamp(0.84rem, 1vw, 0.94rem);

line-height:
1.5;
}

.newsletter-band__abschluss {
position:
absolute;

left:
0;

right:
0;

bottom:
0;

z-index:
6;

height:
clamp(5.8rem, 9vw, 8rem);

overflow:
hidden;

pointer-events:
none;
}

.newsletter-band__abschluss img {
display:
block;

width:
102%;

height:
calc(100% + 1.4rem);

max-width:
none;

margin-left:
-1%;

object-fit:
cover;

object-position:
center bottom;

transform:
translateY(0.85rem);
}

.newsletter-band__abschluss::before {
content:
"";

position:
absolute;

inset:
0 0 auto 0;

z-index:
2;

height:
2.8rem;

background:
linear-gradient(
180deg,
#f7f1e5 0%,
rgba(247, 241, 229, 0.82) 32%,
rgba(247, 241, 229, 0.32) 68%,
transparent 100%
);
}

.newsletter-form-anchor {
scroll-margin-top:
6rem;
}

/* Newsletter Tablet */

@media
(min-width: 43rem)
and
(max-width: 65.625rem) {

.newsletter-section {
margin-top:
-4.5rem;

padding-top:
  4.5rem;

}

.newsletter-section__container {
width:
min(94vw, 64rem);
}

.newsletter-band {
grid-template-columns:
28% 44% 28%;

min-height:
  36rem;

}

.newsletter-band__content {
padding-top:
4rem;

padding-inline:
  1.4rem;

}

}

/* Newsletter Smartphone */

@media (max-width: 42.999rem) {

.newsletter-section {
margin-top:
-2.5rem;

padding:
  3rem
  0
  3.5rem;

}

.newsletter-section__container {
width:
min(92vw, 34rem);
}

.newsletter-band {
display:
flex;

flex-direction:
  column;

min-height:
  0;

border-radius:
  1.1rem;

}

.newsletter-band__image--left {
height:
21rem;
}

.newsletter-band__image--left img {
object-position:
center 31%;
}

.newsletter-band__image--left::after {
background:
linear-gradient(
180deg,
transparent 67%,
#f7f1e5 100%
);
}

.newsletter-band__content {
order:
2;

padding:
  2rem
  1.4rem
  2.4rem;

}

.newsletter-band__content h2 br {
display:
none;
}

.newsletter-band__button {
width:
100%;

max-width:
  24rem;

}

.newsletter-band__image--right {
order:
3;

height:
  22rem;

}

.newsletter-band__image--right::after {
background:
linear-gradient(
180deg,
#f7f1e5 0%,
transparent 28%
);
}

.newsletter-band__abschluss {
position:
relative;

order:
  4;

height:
  5.5rem;

}

.newsletter-band__abschluss img {
width:
102%;

height:
  calc(100% + 0.8rem);

margin-left:
  -1%;

transform:
  translateY(0.45rem);

}

}

/* =========================================================
10 – HUNDE-HOROSKOP
========================================================= */

.horoscope-section {
position:
relative;

width:
100%;

margin:
0;

padding:
clamp(1.4rem, 2.5vw, 2.4rem)
0
clamp(3rem, 5vw, 5rem);

overflow:
hidden;

background:
linear-gradient(
155deg,
#ebe7dd 0%,
#d9d8d2 8%,
#9aa4aa 18%,
#536b79 31%,
#2d5368 48%,
#1c455b 68%,
#143b50 84%,
#14374b 100%
);
}

.horoscope-section__container {
width:
min(94vw, 92rem);

margin-inline:
auto;
}

.horoscope-card {
position:
relative;

width:
100%;

aspect-ratio:
1.5 / 1;

overflow:
hidden;

border-radius:
1.5rem;

background:
#153d57;

box-shadow:
0 1.25rem 3.2rem
rgba(8, 28, 44, 0.24);
}

.horoscope-card__background {
position:
absolute;

inset:
0;

z-index:
0;

display:
block;

width:
100%;

height:
100%;

object-fit:
cover;

object-position:
center center;

pointer-events:
none;
}

/* Desktop Text */

.horoscope-card__content {
position:
absolute;

top:
29%;

left:
8.2%;

z-index:
2;

width:
31%;

max-width:
31rem;

color:
#334b58;
}

.horoscope-card__eyebrow {
margin:
0
0
0.9rem;

color:
#8a623b;

font-size:
clamp(0.72rem, 0.9vw, 0.9rem);

font-weight:
700;

line-height:
1.4;

letter-spacing:
0.11em;

text-transform:
uppercase;
}

.horoscope-card__content h2 {
margin:
0
0
1rem;

color:
#173b50;

font-family:
var(--font-heading, Georgia, serif);

font-size:
clamp(2rem, 3vw, 3.15rem);

line-height:
1.07;

text-wrap:
balance;
}

.horoscope-card__lead {
margin:
0
0
1.15rem;

color:
#986840;

font-family:
var(--font-heading, Georgia, serif);

font-size:
clamp(1rem, 1.35vw, 1.25rem);

font-weight:
700;

line-height:
1.45;
}

.horoscope-card__text {
margin:
0
0
0.85rem;

color:
#39515e;

font-size:
clamp(0.9rem, 1.05vw, 1.02rem);

font-weight:
600;

line-height:
1.62;
}

/* Desktop Aktionsfläche */

.horoscope-card__action {
position:
absolute;

left:
56.2%;

top:
45.8%;

z-index:
2;

width:
38.4%;

height:
43.5%;

box-sizing:
border-box;

display:
flex;

flex-direction:
column;

align-items:
center;

justify-content:
flex-start;

padding:
10.5%
5.5%
5%;

color:
#ffffff;

text-align:
center;
}

.horoscope-card__features {
width:
100%;

display:
grid;

grid-template-columns:
repeat(3, minmax(0, 1fr));

align-items:
start;

column-gap:
4%;

margin:
0
0
7.5%;
}

.horoscope-feature {
min-width:
0;

display:
flex;

flex-direction:
column;

align-items:
center;

color:
#ffffff;

font-size:
clamp(10px, 0.82vw, 15px);

font-weight:
700;

line-height:
1.12;

text-align:
center;
}

.horoscope-feature__icon {
display:
inline-flex;

align-items:
center;

justify-content:
center;

width:
clamp(28px, 2.25vw, 40px);

height:
clamp(28px, 2.25vw, 40px);

margin-bottom:
8px;

color:
#45e2dc;

border:
2px solid #39d9d4;

border-radius:
50%;

font-size:
clamp(16px, 1.25vw, 22px);
}

.horoscope-card__button {
display:
flex;

align-items:
center;

justify-content:
center;

width:
94%;

min-height:
44px;

box-sizing:
border-box;

padding:
11px
18px;

color:
#ffffff;

background:
linear-gradient(
90deg,
#10aaa6 0%,
#10a9a5 48%,
#0f9998 100%
);

border:
1px solid
rgba(100, 239, 230, 0.95);

border-radius:
9px;

font-size:
clamp(11px, 0.92vw, 16px);

font-weight:
800;

line-height:
1.1;

text-align:
center;

text-decoration:
none;

text-transform:
uppercase;
}

.horoscope-card__note {
width:
94%;

margin:
6.5%
auto
0;

color:
rgba(255, 255, 255, 0.96);

font-size:
clamp(11px, 0.86vw, 15px);

font-weight:
500;

line-height:
1.42;

text-align:
center;
}

/* =========================================================
HOROSKOP – SCHMALER MODUS
Tablet hochkant + Smartphone

Desktopgrafik wird nicht mehr sklavisch nachgebaut.
Das Bild ist hier Atmosphäre.
Die Inhalte werden zu echten HTML-Karten.
========================================================= */

@media (max-width: 56.25rem) {

.horoscope-section {
padding:
1.5rem
0
3.5rem;
}

.horoscope-section__container {
width:
min(92vw, 46rem);
}

.horoscope-card {
display:
flex;

flex-direction:
  column;

align-items:
  center;

gap:
  1.5rem;

aspect-ratio:
  auto;

min-height:
  0;

padding:
  clamp(12rem, 34vw, 18rem)
  clamp(1.1rem, 4vw, 2rem)
  2rem;

border-radius:
  1.25rem;

}

/*

Das Bild wird im schmalen Modus bewusst

nur noch als atmosphärische Illustration benutzt.
*/

.horoscope-card__background {
object-fit:
cover;

object-position:
  63% top;

opacity:
  0.72;

}

/*

Abdunklung schafft Ruhe hinter dem echten HTML.
*/

.horoscope-card::after {
content:
"";

position:
  absolute;

inset:
  0;

z-index:
  1;

background:
  linear-gradient(
    180deg,
    rgba(5, 29, 50, 0.05) 0%,
    rgba(5, 29, 50, 0.10) 28%,
    rgba(5, 29, 50, 0.58) 48%,
    rgba(5, 29, 50, 0.90) 100%
  );

pointer-events:
  none;

}

.horoscope-card__content {
position:
relative;

top:
  auto;

left:
  auto;

z-index:
  3;

width:
  min(100%, 38rem);

max-width:
  none;

box-sizing:
  border-box;

padding:
  clamp(1.4rem, 4vw, 2rem);

color:
  #334b58;

background:
  rgba(248, 241, 229, 0.93);

border:
  1px solid
  rgba(255, 255, 255, 0.58);

border-radius:
  1rem;

box-shadow:
  0 0.6rem 1.5rem
  rgba(0, 0, 0, 0.12);

}

.horoscope-card__content h2 {
font-size:
clamp(1.9rem, 5.5vw, 2.6rem);
}

.horoscope-card__lead {
font-size:
clamp(1rem, 2.6vw, 1.15rem);
}

.horoscope-card__text {
font-size:
clamp(0.92rem, 2.25vw, 1rem);

line-height:
  1.55;

}

/*

Der zweite längere Absatz ist im schmalen Modus

verzichtbar. Die Aussage bleibt vollständig:

Überschrift + Einführung + Hinweis + CTA.
*/

.horoscope-card__content
.horoscope-card__text {
display:
none;
}

.horoscope-card__action {
position:
relative;

left:
  auto;

top:
  auto;

right:
  auto;

bottom:
  auto;

z-index:
  3;

width:
  min(100%, 38rem);

height:
  auto;

max-width:
  none;

box-sizing:
  border-box;

padding:
  clamp(1.4rem, 4vw, 2rem);

color:
  #ffffff;

background:
  rgba(4, 38, 67, 0.90);

border:
  1px solid
  rgba(57, 217, 212, 0.52);

border-radius:
  1rem;

backdrop-filter:
  blur(4px);

box-shadow:
  0 0.6rem 1.5rem
  rgba(0, 0, 0, 0.16);

}

.horoscope-card__features {
margin-bottom:
1.4rem;
}

.horoscope-feature {
font-size:
0.82rem;
}

.horoscope-feature__icon {
width:
2.5rem;

height:
  2.5rem;

font-size:
  1.1rem;

}

.horoscope-card__button {
width:
100%;

min-height:
  3.4rem;

padding:
  0.9rem
  1rem;

font-size:
  clamp(0.85rem, 2.4vw, 1rem);

white-space:
  normal;

}

.horoscope-card__note {
width:
min(100%, 32rem);

margin-top:
  1rem;

font-size:
  0.86rem;

line-height:
  1.5;

}

}

/* Smartphone noch kompakter */

@media (max-width: 42.999rem) {

.horoscope-card {
padding-top:
clamp(10rem, 42vw, 14rem);
}

.horoscope-card__features {
grid-template-columns:
1fr;

gap:
  0.8rem;

}

.horoscope-feature {
flex-direction:
row;

justify-content:
  flex-start;

gap:
  0.8rem;

text-align:
  left;

}

.horoscope-feature__icon {
flex:
0 0 auto;

margin-bottom:
  0;

}

.horoscope-card__action {
align-items:
stretch;
}

}

/* =========================================================
11 – FOOTER
========================================================= */

.site-footer {
position:
relative;

z-index:
2;

width:
100%;

margin:
0;

padding:
clamp(2.8rem, 6vw, 4.5rem)
0
1.5rem;

color:
rgba(255, 255, 255, 0.82);

background:
#20394b;
}

.footer-grid {
display:
grid;

grid-template-columns:
minmax(0, 1.5fr)
minmax(0, 0.8fr)
minmax(0, 0.8fr);

gap:
clamp(2rem, 5vw, 4rem);
}

.site-footer h3,
.site-footer h4 {
margin:
0
0
0.9rem;

color:
#ffffff;

font-family:
var(--font-heading, Georgia, serif);

line-height:
1.2;
}

.site-footer h3 {
font-size:
clamp(1.2rem, 2vw, 1.5rem);
}

.site-footer h4 {
font-size:
1rem;
}

.site-footer p {
max-width:
30rem;

margin:
0
0
0.55rem;

color:
rgba(255, 255, 255, 0.78);

font-size:
0.9rem;

line-height:
1.6;
}

.site-footer a {
color:
#8bd5d1;

text-decoration:
none;
}

.footer-bottom {
margin-top:
clamp(2rem, 5vw, 3rem);

padding-top:
1.25rem;

color:
rgba(255, 255, 255, 0.58);

font-size:
0.8rem;

border-top:
1px solid
rgba(255, 255, 255, 0.14);
}

/* Footer Tablet */

@media
(min-width: 43rem)
and
(max-width: 57.999rem) {

.footer-grid {
grid-template-columns:
1.4fr
1fr;
}

.footer-grid >  {
grid-column:
1 / -1;
}

}

/* Footer Smartphone */

@media (max-width: 42.999rem) {

.footer-grid {
grid-template-columns:
1fr;

gap:
  2rem;

}

}

/* =========================================================
12 – VISUELLER SEITENABSCHLUSS
========================================================= */

.site-closing {
position:
relative;

z-index:
1;

width:
100%;

max-width:
none;

margin:
0;

padding:
0;

overflow:
hidden;

line-height:
0;

background:
#0f2f49;
}

.site-closing img {
display:
block;

width:
100%;

max-width:
none;

height:
auto;

margin:
0;

padding:
0;

object-fit:
contain;

object-position:
center top;
}

/* =========================================================
13 – ERZIEHUNGSRATGEBER / FREEBIE
========================================================= */

.freebie-section {
background:
#f7f4ef;
}

.freebie-box {
max-width:
68rem;

margin-inline:
auto;

padding:
clamp(1.8rem, 4vw, 3rem);

background:
linear-gradient(
145deg,
#fffdf9 0%,
#fbf7f0 100%
);

border:
1px solid
rgba(79, 67, 52, 0.12);

border-radius:
1.25rem;

box-shadow:
0 0.5rem 1.5rem
rgba(62, 53, 42, 0.08);
}

.freebie-heading {
max-width:
46rem;

margin:
0 auto
clamp(1.8rem, 4vw, 2.8rem);

text-align:
center;
}

.freebie-heading .eyebrow {
margin-bottom:
0.6rem;

color:
#0f7770;

font-size:
0.82rem;

font-weight:
700;

letter-spacing:
0.13em;

text-transform:
uppercase;
}

.freebie-heading h2 {
margin:
0;

color:
#173b50;

font-family:
var(--font-heading, Georgia, serif);

font-size:
clamp(1.9rem, 3vw, 2.75rem);

line-height:
1.15;

text-wrap:
balance;
}

.freebie-layout {
display:
grid;

grid-template-columns:
minmax(0, 0.85fr)
minmax(0, 1.35fr)
minmax(0, 0.8fr);

align-items:
center;

gap:
clamp(1.5rem, 4vw, 3rem);
}

.freebie-dog-wrap,
.freebie-cover-wrap {
display:
flex;

align-items:
center;

justify-content:
center;
}

.freebie-dog {
display:
block;

width:
min(100%, 16rem);

height:
auto;

object-fit:
contain;
}

.freebie-content {
min-width:
0;
}

.freebie-content > p {
margin:
0
0
1.25rem;

color:
#2e414a;

font-size:
clamp(1rem, 1.4vw, 1.08rem);

line-height:
1.65;
}

.freebie-benefits {
display:
grid;

gap:
0.7rem;

margin:
0
0
1.5rem;

padding:
0;

list-style:
none;
}

.freebie-benefits li {
position:
relative;

padding-left:
1.65rem;

color:
#31444c;

font-size:
0.96rem;

line-height:
1.45;
}

.freebie-benefits li::before {
content:
"✓";

position:
absolute;

left:
0;

color:
#0f7770;

font-weight:
700;
}

.freebie-button {
display:
inline-flex;

align-items:
center;

justify-content:
center;

min-height:
3rem;

padding:
0.85rem
1.25rem;

color:
#ffffff;

background:
#0f9fa3;

border:
0;

border-radius:
0.55rem;

font-size:
0.98rem;

font-weight:
700;

cursor:
pointer;
}

.freebie-cover {
display:
block;

width:
min(100%, 12.5rem);

height:
auto;

object-fit:
contain;

border-radius:
0.25rem;

box-shadow:
0 0.75rem 1.5rem
rgba(44, 38, 31, 0.17);

transform:
rotate(1deg);
}

/* Brevo */

.freebie-form-area {
max-width:
42rem;

margin:
clamp(1.5rem, 4vw, 2.5rem)
auto
0;
}

.freebie-form-area[hidden] {
display:
none !important;
}

.freebie-form-area .sib-form {
padding:
0 !important;

background:
transparent !important;
}

.freebie-form-area .sib-form-container {
width:
100%;
}

.freebie-form-area #sib-container {
width:
100% !important;

max-width:
42rem !important;

margin-inline:
auto !important;

padding:
clamp(1.2rem, 3vw, 1.8rem) !important;

background:
#fcfaf7 !important;

border:
1px solid #ded8d0 !important;

border-radius:
0.8rem !important;
}

/* =========================================================
FREEBIE – TABLET
========================================================= */

@media
(min-width: 43rem)
and
(max-width: 57.999rem) {

.freebie-layout {
grid-template-columns:
minmax(0, 0.85fr)
minmax(0, 1.15fr);
}

.freebie-cover-wrap {
grid-column:
1 / -1;
}

.freebie-cover {
width:
11rem;
}

}

/* =========================================================
FREEBIE – SMARTPHONE
========================================================= */

@media (max-width: 42.999rem) {

.freebie-box {
padding:
1.5rem
1.2rem;
}

.freebie-layout {
grid-template-columns:
1fr;

gap:
  1.5rem;

text-align:
  center;

}

.freebie-dog {
width:
min(80%, 14rem);
}

.freebie-content {
max-width:
30rem;

margin-inline:
  auto;

}

.freebie-content > p {
text-align:
left;
}

.freebie-benefits {
width:
fit-content;

margin:
  0 auto
  1.5rem;

text-align:
  left;

}

.freebie-button {
width:
100%;
}

.freebie-cover {
width:
10rem;

transform:
  none;

}

}

/* =========================================================
14 – KONTAKT
========================================================= */

#kontakt {
padding:
clamp(4rem, 8vw, 6.5rem)
0;

background:
#f7f4ef;
}

.contact-box {
max-width:
68rem;

margin-inline:
auto;

padding:
clamp(2rem, 5vw, 3.5rem);

color:
#ffffff;

background:
linear-gradient(
135deg,
#29475c 0%,
#365d76 100%
);

border-radius:
1rem;

box-shadow:
0 0.7rem 1.6rem
rgba(30, 48, 60, 0.14);
}

.contact-box .hero__eyebrow {
margin:
0
0
0.65rem !important;

color:
#7fd5d0;
}

.contact-box h2 {
max-width:
38rem;

margin:
0
0
1rem;

color:
#ffffff;

font-family:
var(--font-heading, Georgia, serif);

font-size:
clamp(1.9rem, 3.5vw, 2.8rem);

line-height:
1.12;

text-wrap:
balance;
}

.contact-box > p(.hero__eyebrow) {
max-width:
42rem;

margin:
0;

color:
rgba(255, 255, 255, 0.88);

font-size:
clamp(0.98rem, 1.4vw, 1.06rem);

line-height:
1.65;
}

/* =========================================================
15 – ALLGEMEINES RESPONSIVE
========================================================= */

/* Mittlere Desktops */

@media
(min-width: 64rem)
and
(max-width: 78rem) {

.services-heading {
width:
min(100%, 52rem);
}

.services-heading::before {
left:
-5.6rem;
}

.services-heading::after {
right:
-5.6rem;
}

.services-heading::before,
.services-heading::after {
width:
6.5rem;

height:
  6.5rem;

}

}

/* Serviceblätter bei schmaleren Breiten weg */

@media (max-width: 63.999rem) {

.services-heading::before,
.services-heading::after {
display:
none;
}

}

/* Navigation */

@media (max-width: 70rem) {

.header-inner {
align-items:
flex-start;

padding-top:
  0.75rem;

padding-bottom:
  0.75rem;

}

.main-nav {
flex-wrap:
wrap;

gap:
  0.55rem
  1rem;

}

}

/* Tablet Leistungen */

@media
(min-width: 43rem)
and
(max-width: 57.999rem) {

.services-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}

.services-grid .service-card {
grid-column:
1 / -1;

width:
  calc(50% - 0.7rem);

justify-self:
  center;

}

.service-card__hook {
width:
72%;
}

.service-card__text {
width:
68%;
}

}

/* Smartphone allgemein */

@media (max-width: 42.999rem) {

.site-header {
position:
relative;
}

.header-inner {
flex-direction:
column;

align-items:
  stretch;

gap:
  0.75rem;

}

.brand {
justify-content:
center;
}

.main-nav {
justify-content:
center;

padding-bottom:
  0.35rem;

}

.main-nav a {
font-size:
0.85rem;
}

/* Hero */

.hero-grid {
grid-template-columns:
1fr;

gap:
  2.25rem;

padding-top:
  2.75rem;

padding-bottom:
  3rem;

}

.hero h1 {
font-size:
clamp(2.2rem, 10vw, 3.2rem);

max-width:
  13em;

}

.hero .button-group,
#kontakt .button-group {
display:
grid;

grid-template-columns:
  1fr;

max-width:
  24rem;

}

.hero .button-group .btn,
#kontakt .button-group .btn {
width:
100%;
}

/* Leistungen */

.services-section {
padding:
3rem
0;
}

.services-heading {
padding-inline:
1rem;
}

.services-grid {
grid-template-columns:
1fr;
}

.service-card {
aspect-ratio:
auto;

min-height:
  29rem;

}

.service-card__hook {
width:
72%;
}

.service-card__text {
width:
68%;

font-size:
  0.9rem;

}

/* Video */

.video-section {
padding:
3rem
0;
}

.video-wrapper {
aspect-ratio:
4 / 3;

border-radius:
  0.8rem;

}

.video-preview img {
object-position:
center;
}

/* Kontakt */

#kontakt {
padding:
3rem
0;
}

.contact-box {
padding:
1.7rem
1.35rem;
}

}

/* Sehr kleine Smartphones */

@media (max-width: 28rem) {

.service-card {
min-height:
31rem;
}

.service-card__hook {
width:
78%;
}

.service-card__text {
width:
74%;
}

}

/* =========================================================
16 – REDUZIERTE BEWEGUNG
========================================================= */

@media (prefers-reduced-motion: reduce) {

.service-card,
.service-card__more,
.video-preview img,
.video-play,
.freebie-button,
.site-footer a,
.main-nav a,
.regional-card,
.regional-card__link,
.newsletter-band__button,
.horoscope-card__button {
transition:
none;
}

.service-card,
.freebie-button,
.regional-card {
transform:
none;
}

.video-preview img {
transform:
none;
}

.video-play {
transform:
translateX(-50%);
}

}

/* =========================================================
GOOGLE-REZENSIONEN
========================================================= */

.experience-reviews {
margin-top: clamp(4rem, 7vw, 6rem);
padding-top: 0;
}

/* ---------------------------------------------------------
Überschrift
--------------------------------------------------------- */

.experience-reviews__heading {
width: min(100%, 50rem);

margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);

text-align: center;
}

.experience-reviews__eyebrow {
margin: 0 0 0.8rem;

color: #0f7770;

font-size: 0.85rem;
font-weight: 700;
line-height: 1.35;

letter-spacing: 0.12em;
text-transform: uppercase;
}

.experience-reviews__heading h2 {
margin: 0 0 1.3rem;

color: #173b50;

font-family: var(--font-heading, Georgia, serif);

font-size: clamp(2rem, 3.6vw, 3rem);
line-height: 1.12;

text-wrap: balance;
}

/* ---------------------------------------------------------
Große Sterne über den Rezensionen
--------------------------------------------------------- */

.experience-reviews__google-rating {
display: flex;
flex-direction: column;
align-items: center;

gap: 0.45rem;

color: #596971;

font-size: 0.95rem;
font-weight: 600;
}

.experience-reviews__stars {
display: block;

color: #e4a12b;

font-size: clamp(1.6rem, 2.5vw, 2rem);
line-height: 1;

letter-spacing: 0.08em;
}

/* ---------------------------------------------------------
Drei Rezensionen nebeneinander
--------------------------------------------------------- */

.experience-reviews__grid {
display: grid;

grid-template-columns: repeat(3, minmax(0, 1fr));

width: min(100%, 72rem);
margin-inline: auto;

gap: clamp(1rem, 2vw, 1.5rem);

align-items: stretch;
}

/* ---------------------------------------------------------
Rezension-Karte
--------------------------------------------------------- */

.experience-review {
display: flex;
flex-direction: column;

min-width: 0;

padding: clamp(1.4rem, 2.2vw, 1.8rem);

background: #fffaf3;

border: 1px solid rgba(105, 82, 54, 0.14);
border-radius: 1rem;

box-shadow:
0 0.45rem 1.25rem rgba(78, 59, 38, 0.08);
}

/* ---------------------------------------------------------
Name
--------------------------------------------------------- */

.experience-review__header {
margin-bottom: 1rem;
}

.experience-review__name {
display: block;

margin-bottom: 0.55rem;

color: #173b50;

font-family: var(--font-heading, Georgia, serif);

font-size: 1.12rem;
font-weight: 700;
line-height: 1.3;
}

/* ---------------------------------------------------------
Sterne in jeder Karte
--------------------------------------------------------- */

.experience-review__stars {
color: #e4a12b;

font-size: 1.15rem;
line-height: 1;

letter-spacing: 0.06em;
}

/* ---------------------------------------------------------
Text
--------------------------------------------------------- */

.experience-review > p,
.experience-review__additional p {
margin: 0;

color: #43545c;

font-size: 0.96rem;
line-height: 1.65;
}

.experience-review__additional {
padding-top: 0.9rem;
}

.experience-review__additional p + p {
margin-top: 0.9rem;
}

/* ---------------------------------------------------------
Weiterlesen
--------------------------------------------------------- */

.experience-review__details {
margin-top: auto;
padding-top: 1rem;
}

.experience-review__details summary {
display: inline-flex;
align-items: center;

color: #0d645b;

font-size: 1rem;
font-weight: 700;
line-height: 1.4;

list-style: none;

cursor: pointer;
}

.experience-review__details summary::-webkit-details-marker {
display: none;
}

.experience-review__details summary::after {
content: "↓";

margin-left: 0.45rem;

color: #e4a12b;

font-size: 1.05rem;

transition: transform 0.2s ease;
}

.experience-review__details[open] summary::after {
transform: rotate(180deg);
}

.experience-review__details summary {
color: #173b50;
}

.experience-review__details summary {
outline: 2px solid #0f7770;
outline-offset: 4px;

border-radius: 0.2rem;
}

/* ---------------------------------------------------------
Link zu allen Rezensionen
--------------------------------------------------------- */

.experience-reviews__footer {
display: flex;
justify-content: center;

margin-top: clamp(2.2rem, 4vw, 3rem);
}

.experience-reviews__all {
display: inline-flex;
align-items: center;
justify-content: center;

gap: 0.5rem;

min-height: 2.8rem;

padding: 0.7rem 1.2rem;

color: #0d645b;
background: transparent;

border: 1px solid rgba(15, 119, 112, 0.35);
border-radius: 999px;

font-size: 1rem;
font-weight: 700;
line-height: 1.3;

text-decoration: none;

transition:
color 0.2s ease,
background-color 0.2s ease,
border-color 0.2s ease,
gap 0.2s ease;
}

.experience-reviews__all {
gap: 0.7rem;

color: #173b50;

background: rgba(143, 215, 213, 0.13);

border-color: rgba(15, 119, 112, 0.55);
}

.experience-reviews__all {
outline: 2px solid #0f7770;
outline-offset: 4px;
}

/* =========================================================
TABLET
========================================================= */

@media
(min-width: 43rem)
and
(max-width: 63.999rem) {

.experience-reviews__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.experience-review {
grid-column: 1 / -1;

width: min(100%, 32rem);

justify-self: center;

}

}

/* =========================================================
SMARTPHONE
========================================================= */

@media (max-width: 42.999rem) {

.experience-reviews {
margin-top: 3.2rem;
padding-top: 2.7rem;
}

.experience-reviews__heading {
margin-bottom: 2.2rem;
}

.experience-reviews__heading h2 {
font-size: clamp(1.9rem, 8vw, 2.4rem);
}

.experience-reviews__stars {
font-size: 1.55rem;
}

.experience-reviews__grid {
grid-template-columns: 1fr;

width: min(100%, 34rem);

margin-inline: auto;

gap: 1rem;

}

.experience-review {
padding: 1.3rem;
}

.experience-review {
grid-column: auto;

width: auto;

}

.experience-reviews__all {
width: min(100%, 22rem);
}

}

/* =========================================================
17 – FARBWELT HMH
BLAUE MARKENWELT · WARME BEIGE KARTEN

Dieser Bereich steuert ausschließlich die Farbdramaturgie.
Layout, Abstände, Größen und Responsive-Verhalten
bleiben unangetastet.
========================================================= */

 {
/* Blaue Markenwelt */
--hmh-blue-deep: #203f55;
--hmh-blue-strong: #294f67;
--hmh-blue-medium: #5f7f91;
--hmh-blue-soft: #9fb4bf;
--hmh-blue-mist: #c8d5da;
--hmh-blue-pale: #dce5e8;

/* Warme Inhaltsflächen */
--hmh-beige: #fffaf3;
--hmh-beige-soft: #f7f1e5;

/* Akzente */
--hmh-turquoise: #0f7770;
--hmh-turquoise-light: #8fd7d5;
--hmh-orange: #e4a12b;

/* Text */
--hmh-text-dark: #173b50;
--hmh-text-body: #354b56;
}

/* =========================================================
GRUNDSEITE
========================================================= */

body {
background:
var(--hmh-blue-pale);
}

/* =========================================================
HERO + ERSTER VERTRAUENSBEREICH
bleiben die tiefste seriöse Markenebene
========================================================= */

.hero {
background:
linear-gradient(
135deg,
#29475c 0%,
#365d76 100%
);
}

.hero-trust {
background:
linear-gradient(
180deg,
#365d76 0%,
#315970 16%,
#2b5068 38%,
#264960 68%,
#203f55 100%
);
}

/* =========================================================
LEISTUNGEN
helles, ruhiges Rauchblau
========================================================= */

.services-section {
background:
radial-gradient(
circle at 50% 0%,
rgba(232, 240, 243, 0.96),
transparent 34rem
),
linear-gradient(
180deg,
#dce5e8 0%,
#cfdbdf 52%,
#c5d3d8 100%
);
}

/* Servicekarten bleiben bewusst warm */

.service-card {
background:
var(--hmh-beige);
}

/* Abschlusskarte ebenfalls warm statt grünlich */

.services-closing {
background:
#f4eee3;

border-color:
rgba(105, 82, 54, 0.14);
}

/* =========================================================
ERFAHRUNG, HALTUNG & REZENSIONEN
etwas kräftigeres Blau als Leistungen
========================================================= */

.experience-trust {
background:
linear-gradient(
180deg,
#b9cbd2 0%,
#aec3cb 48%,
#a5bbc4 100%
);
}

/* Die sechs inhaltlichen Karten bleiben warm */

.experience-trust__card,
.experience-review {
background:
var(--hmh-beige);
}

/* Texte auf dem blauen Hintergrund */

.experience-trust__story h2,
.experience-reviews__heading h2 {
color:
var(--hmh-text-dark);
}

.experience-trust__story p {
color:
#304852;
}

.experience-reviews__google-rating {
color:
#405965;
}

/* Sterne bleiben unser warmer Akzent */

.experience-reviews__stars,
.experience-review__stars {
color:
var(--hmh-orange);
}

/* =========================================================
ZITAT
ruhiger Übergang innerhalb derselben Farbfamilie
========================================================= */

.section.section--light {
background:
linear-gradient(
180deg,
#a5bbc4 0%,
#b6c8cf 35%,
#c9d6db 70%,
#d8e2e5 100%
);
}

/* =========================================================
KENNENLERNVIDEO
wieder heller
========================================================= */

.video-section {
background:
linear-gradient(
180deg,
#d8e2e5 0%,
#dfe7e9 100%
);
}

/* =========================================================
ERZIEHUNGSRATGEBER
blaue Außenwelt · warme Inhaltskarte
========================================================= */

.freebie-section {
background:
linear-gradient(
180deg,
#dfe7e9 0%,
#d3dfe3 100%
);
}

.freebie-box {
background:
linear-gradient(
145deg,
#fffdf9 0%,
#fbf7f0 100%
);
}

/* =========================================================
REGIONAL & ÜBERREGIONAL
etwas satter, damit die hellen Bildkarten tragen
========================================================= */

.regional-section {
background:
linear-gradient(
180deg,
#c8d6db 0%,
#b9cbd2 28%,
#a9c0c9 62%,
#9db6c0 100%
);
}

/*

Die beiden regionalen Bildkarten bleiben warm.

Ihre vorhandenen Hintergrundbilder werden nicht verändert.
*/

.regional-card {
background-color:
#f7f1e7;
}

/* Übergang zum Landschaftsbild an neue Farbwelt anpassen */

.regional-section__landscape::before {
background:
linear-gradient(
180deg,
#9db6c0 0%,
rgba(157, 182, 192, 0.94) 20%,
rgba(157, 182, 192, 0.72) 42%,
rgba(157, 182, 192, 0.38) 68%,
rgba(157, 182, 192, 0) 100%
);
}

/* =========================================================
NEWSLETTER
blaue Außenwelt · warme große Inhaltskarte
========================================================= */

.newsletter-section {
background:
linear-gradient(
180deg,
rgba(157, 182, 192, 0.18) 0%,
rgba(166, 190, 199, 0.52) 8%,
rgba(184, 203, 210, 0.78) 16%,
#c9d7dc 28%,
#d3dfe3 55%,
#dce5e8 100%
),
url("/assets/images/Kontakt/waldrand.webp")
top center
/ 100% auto
no-repeat,
#d3dfe3;
}

.newsletter-band {
background:
var(--hmh-beige-soft);
}

/*

Die vorhandenen weichen Übergänge der Newsletterbilder

müssen zur warmen Karte passen – deshalb bleiben sie beige.
*/

.newsletter-band__image--left::after {
background:
linear-gradient(
90deg,
transparent 64%,
rgba(247, 241, 229, 0.45) 78%,
#f7f1e5 100%
);
}

.newsletter-band__image--right::after {
background:
linear-gradient(
270deg,
transparent 64%,
rgba(247, 241, 229, 0.45) 78%,
#f7f1e5 100%
);
}

/* Newsletter-Akzente weg vom alten Grün */

.newsletter-band__eyebrow,
.newsletter-band__note {
color:
var(--hmh-turquoise);
}

.newsletter-band__button {
background:
linear-gradient(
135deg,
#0f7770 0%,
#0d645b 100%
);

border-color:
rgba(13, 100, 91, 0.35);

box-shadow:
0 0.55rem 1.2rem
rgba(15, 84, 79, 0.18);
}

.newsletter-band__divider {
color:
#567c7b;
}

.newsletter-band__divider span(
.newsletter-band__divider-symbol
) {
background:
rgba(86, 124, 123, 0.30);
}

/* =========================================================
HOROSKOP
bewusst dunkelster atmosphärischer Moment
========================================================= */

.horoscope-section {
background:
linear-gradient(
155deg,
#9fb4bf 0%,
#738f9e 12%,
#536f80 25%,
#355c72 42%,
#234d64 60%,
#173f56 78%,
#0f3048 100%
);
}

/* =========================================================
KONTAKT
ruhiger Übergang zurück ins tiefe Markenblau
========================================================= */

#kontakt {
background:
linear-gradient(
180deg,
#9fb4bf 0%,
#819eac 35%,
#668696 100%
);
}

.contact-box {
background:
linear-gradient(
135deg,
#29475c 0%,
#365d76 100%
);
}

/* =========================================================
FOOTER & SEITENABSCHLUSS
tiefes Blau
========================================================= */

.site-footer {
background:
#20394b;
}

.site-closing {
background:
#0f2f49;
}

/* =========================================================
SMARTPHONE
warme Kartenflächen beibehalten
========================================================= */

@media (max-width: 42.999rem) {

.regional-card,
.regional-card__content,
.regional-card--local .regional-card__content,
.regional-card--distance .regional-card__content {
background-color:
#f7f1e7;
}

.newsletter-band__image--left::after {
background:
linear-gradient(
180deg,
transparent 67%,
#f7f1e5 100%
);
}

.newsletter-band__image--right::after {
background:
linear-gradient(
180deg,
#f7f1e5 0%,
transparent 28%
);
}

}

/* =========================================================
   RUHIGER DESKTOP-HEADER
   Hundetrainer mit Herz
   ========================================================= */

/* =========================================================
   HMH – RUHIGER MARKENHEADER
   inklusive Dropdown „Wissenswertes“
   ========================================================= */

.site-header {
  position: relative;
  z-index: 1000;

  width: 100%;

  background: rgba(31, 53, 68, 0.98);

  border-top:
    6px solid
    #c8efec;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.08);
}


/* =========================================================
   INNERER HEADER
   ========================================================= */

.site-header .header-inner {
  width: min(94vw, 92rem);

  min-height: 7rem;

  margin-inline: auto;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: clamp(2rem, 3vw, 3.5rem);
}


/* =========================================================
   MARKE
   ========================================================= */

.site-header .brand {
  display: inline-flex;

  align-items: center;

  gap: 1rem;

  flex: 0 0 auto;

  color: #ffffff;

  text-decoration: none;
}


.site-header .brand img {
  display: block;

  width: 6rem;
  height: 6rem;

  object-fit: contain;

  flex: 0 0 auto;
}


.site-header .brand__text {
  display: flex;

  flex-direction: column;

  justify-content: center;
}


.site-header .brand__text strong {
  color: #ffffff;

  font-family:
    var(--font-heading, Georgia, serif);

  font-size: 1.42rem;

  font-weight: 700;

  line-height: 1.05;

  white-space: nowrap;
}


.site-header .brand__text span {
  margin-top: 0.28rem;

  color: #bfe9e8;

  font-size: 0.9rem;

  font-weight: 500;

  line-height: 1.2;

  white-space: nowrap;
}


/* =========================================================
   HAUPTNAVIGATION
   ========================================================= */

.site-header .main-nav {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  gap: clamp(1.4rem, 2.4vw, 2.5rem);

  flex: 1 1 auto;
}


.site-header .main-nav__primary {
  display: flex;

  align-items: center;

  gap: clamp(1rem, 1.55vw, 1.5rem);
}


.site-header .main-nav__primary > a {
  position: relative;

  display: inline-flex;

  align-items: center;

  color: rgba(255, 255, 255, 0.93);

  font-size: 0.95rem;

  font-weight: 650;

  line-height: 1.2;

  text-decoration: none;

  white-space: nowrap;

  transition:
    color 0.18s ease;
}


.site-header .main-nav__primary > a::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: -0.45rem;

  height: 2px;

  background: #8fd7d5;

  transform: scaleX(0);

  transform-origin: center;

  transition:
    transform 0.18s ease;
}


.site-header .main-nav__primary > a:hover {
  color: #ffffff;
}


.site-header .main-nav__primary > a:hover::after {
  transform: scaleX(1);
}


/* =========================================================
   HUNDEHOROSKOP
   bewusst besonders, aber nicht dominant
   ========================================================= */

.site-header .main-nav__horoscope {
  color: #d8f3f1 !important;
}


.site-header .main-nav__horoscope span {
  margin-left: 0.32rem;

  color: #e4a12b;

  font-size: 0.9rem;
}


/* =========================================================
   DROPDOWN „WISSENSWERTES“
   ========================================================= */

.site-header .main-nav__dropdown {
  position: relative;

  flex: 0 0 auto;
}


.site-header .main-nav__dropdown summary {
  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  color: rgba(255, 255, 255, 0.93);

  font-size: 0.95rem;

  font-weight: 650;

  line-height: 1.2;

  white-space: nowrap;

  cursor: pointer;

  list-style: none;
}


.site-header .main-nav__dropdown summary::-webkit-details-marker {
  display: none;
}


.site-header .main-nav__dropdown summary::marker {
  display: none;
}


.site-header .main-nav__dropdown-arrow {
  color: #8fd7d5;

  font-size: 0.75rem;

  transition:
    transform 0.18s ease;
}


.site-header .main-nav__dropdown[open]
.main-nav__dropdown-arrow {
  transform: rotate(180deg);
}


.site-header .main-nav__dropdown-menu {
  position: absolute;

  top: calc(100% + 1rem);
  left: 50%;

  transform: translateX(-50%);

  width: 20rem;

  padding: 0.55rem;

  background:
    #fffaf3;

  border:
    1px solid
    rgba(105, 82, 54, 0.16);

  border-radius: 1rem;

  box-shadow:
    0 1rem 2.5rem
    rgba(0, 0, 0, 0.22);
}


.site-header .main-nav__dropdown-menu::before {
  content: "";

  position: absolute;

  top: -0.42rem;
  left: 50%;

  width: 0.8rem;
  height: 0.8rem;

  background: #fffaf3;

  border-top:
    1px solid
    rgba(105, 82, 54, 0.16);

  border-left:
    1px solid
    rgba(105, 82, 54, 0.16);

  transform:
    translateX(-50%)
    rotate(45deg);
}


.site-header .main-nav__dropdown-item {
  position: relative;

  z-index: 1;

  display: flex;

  flex-direction: column;

  gap: 0.18rem;

  padding:
    0.85rem
    1rem;

  color: #173b50;

  text-decoration: none;

  border-radius: 0.7rem;

  transition:
    background 0.16s ease;
}


.site-header .main-nav__dropdown-item:hover {
  background:
    rgba(143, 215, 213, 0.18);
}


.site-header .main-nav__dropdown-item strong {
  color: #173b50;

  font-size: 0.94rem;

  line-height: 1.25;
}


.site-header .main-nav__dropdown-item span {
  color: #526872;

  font-size: 0.8rem;

  font-weight: 500;

  line-height: 1.35;
}


/* =========================================================
   PREISE + TELEFON
   ========================================================= */

.site-header .main-nav__actions {
  display: flex;

  align-items: center;

  gap: 0.7rem;

  flex: 0 0 auto;
}


.site-header .main-nav__prices,
.site-header .main-nav__phone {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 2.9rem;

  padding:
    0.72rem
    1.15rem;

  border-radius: 999px;

  font-size: 0.94rem;

  font-weight: 800;

  line-height: 1;

  text-decoration: none;

  white-space: nowrap;

  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}


/* Preise */

.site-header .main-nav__prices {
  color: #d7f1f0;

  background:
    transparent;

  border:
    1px solid
    rgba(143, 215, 213, 0.78);
}


.site-header .main-nav__prices:hover {
  color: #ffffff;

  background:
    rgba(143, 215, 213, 0.1);

  border-color:
    #8fd7d5;

  transform:
    translateY(-1px);
}


/* Telefonnummer */

.site-header .main-nav__phone {
  color: #f5ae6c;

  background:
    rgba(217, 120, 50, 0.08);

  border:
    2px solid
    #d97832;
}


.site-header .main-nav__phone:hover {
  color: #ffffff;

  background:
    #d97832;

  border-color:
    #d97832;

  transform:
    translateY(-1px);
}


/* =========================================================
   MITTLERE DESKTOPBREITEN
   ========================================================= */

@media
  (min-width: 70rem)
  and
  (max-width: 86rem) {

  .site-header .header-inner {
    width: 96vw;

    gap: 1.3rem;
  }


  .site-header .brand img {
    width: 5.2rem;
    height: 5.2rem;
  }


  .site-header .brand__text strong {
    font-size: 1.22rem;
  }


  .site-header .brand__text span {
    font-size: 0.82rem;
  }


  .site-header .main-nav {
    gap: 1.2rem;
  }


  .site-header .main-nav__primary {
    gap: 0.9rem;
  }


  .site-header .main-nav__primary > a,
  .site-header .main-nav__dropdown summary,
  .site-header .main-nav__prices,
  .site-header .main-nav__phone {
    font-size: 0.86rem;
  }

}


/* =========================================================
   TABLET / MOBILE
   vorläufige stabile Darstellung
   endgültiges mobiles Menü später
   ========================================================= */

@media (max-width: 69.99rem) {

  .site-header .header-inner {
    width: 90vw;

    min-height: auto;

    flex-direction: column;

    align-items: flex-start;

    gap: 1rem;

    padding:
      0.8rem
      0
      1rem;
  }


  .site-header .brand img {
    width: 5rem;
    height: 5rem;
  }


  .site-header .main-nav {
    width: 100%;

    flex-direction: column;

    align-items: flex-start;

    gap: 1rem;
  }


  .site-header .main-nav__primary {
    width: 100%;

    flex-wrap: wrap;

    gap:
      0.8rem
      1.15rem;
  }


  .site-header .main-nav__actions {
    width: 100%;

    justify-content: flex-start;

    flex-wrap: wrap;
  }


  .site-header .main-nav__dropdown-menu {
    left: 0;

    transform: none;

    width: min(20rem, 82vw);
  }


  .site-header .main-nav__dropdown-menu::before {
    left: 2rem;

    transform:
      rotate(45deg);
  }

}