/* ==========================================================
   Momentwärme – Stylesheet
   Farben & Schriften nach dem Momentwärme-Style-Sheet (Flyer).
   Lokale Schriften (keine externen Requests), kein JavaScript.
   ========================================================== */

/* Breathing (Din Studio) – kommerzielle Lizenz liegt bei der Kundin */
@font-face { font-family: "Breathing"; src: url("../fonts/breathing-lifetime.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }

:root {
  /* Momentwärme-Farbpalette */
  --offwhite:    #F8F1E8;  /* Hintergrund */
  --creme:       #F0E4D8;  /* Sektionen */
  --sand:        #E9D6C4;  /* Flächen */
  --beige:       #E3C8B0;  /* Pinsel-/Dekoelemente */
  --akzent:      #DCAF8D;  /* Buttons / Highlights */
  --mittelbraun: #6D533E;  /* zusätzlicher Braunton */
  --text:        #453524;  /* Fließtext */
  --dunkel:      #18120C;  /* Überschriften / Logo */

  --font-script: "Breathing", "Segoe Script", "Brush Script MT", cursive;
  --font-serif:  "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:   "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 14px;
  --shadow: 0 22px 45px -28px rgba(24, 18, 12, .45);
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(.95rem, .9rem + .2vw, 1.05rem);
  line-height: 1.8;
  color: var(--text);
  background: var(--offwhite);
}

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
strong, b { font-weight: 500; }

a { color: var(--mittelbraun); text-underline-offset: .2em; }
a:hover { color: var(--dunkel); }

:focus-visible { outline: 2px solid var(--mittelbraun); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { color: var(--dunkel); line-height: 1.2; margin: 0 0 .5em; font-weight: 400; }
h3 { font-family: var(--font-serif); font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); font-weight: 500; }
p { margin: 0 0 1.1em; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

.skip-link { position: absolute; left: -999px; top: 8px; background: var(--offwhite); padding: .5em 1em; z-index: 100; }
.skip-link:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.icon { width: 1.2em; height: 1.2em; flex: 0 0 auto; vertical-align: middle; }

/* ---------- Typografie-Bausteine ---------- */

/* Kleine Großbuchstaben-Zeile (Montserrat, gesperrt) */
.eyebrow {
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--mittelbraun);
  margin: 0 0 .9rem;
}

/* Handschrift-Überschriften – nur für emotionale Stellen */
.script-titel {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2.6rem, 1.9rem + 2.8vw, 4.4rem);
  line-height: 1.15;
  color: var(--dunkel);
  margin: 0 0 1.4rem;
}
.script-titel .icon, .script-klein .icon { width: .55em; height: .55em; stroke-width: 1.6; vertical-align: .1em; }
.script-klein {
  font-family: var(--font-script);
  font-size: clamp(2rem, 1.7rem + 1.2vw, 2.6rem);
  font-weight: 400;
  margin: 1.6rem 0 .8rem;
}

/* Pinselstrich hinter einem Wort – wie auf dem Flyer */
.pinsel {
  display: inline-block;
  padding: .05em .55em .1em;
  background: url("../img/pinsel.svg") center / 100% 78% no-repeat;
}

/* Linie – Herz – Linie */
.herz-linie {
  display: flex; align-items: center; gap: 30px;
  width: min(100%, 320px); min-height: 18px;
  margin: 1.1rem auto;
  background: url("../img/herz.svg") center / 18px 18px no-repeat;
}
.herz-linie::before, .herz-linie::after { content: ""; flex: 1; height: 1px; background: var(--text); opacity: .55; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: .8rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; text-align: center;
  color: var(--dunkel);
  background: var(--akzent);
  border: 1px solid var(--akzent);
  border-radius: 999px;
  padding: 1.05em 2.3em;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { background: var(--mittelbraun); border-color: var(--mittelbraun); color: var(--offwhite); }
.btn-ghost { background: transparent; border-color: var(--mittelbraun); color: var(--mittelbraun); }
.btn-ghost:hover { background: var(--mittelbraun); color: var(--offwhite); }
.btn-klein { padding: .85em 1.8em; font-size: .72rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(248, 241, 232, .94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--sand);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 78px; }
.logo { display: block; padding: .4rem 0; }
.logo img { height: clamp(38px, 3.2vw, 50px); width: auto; }

.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(1rem, 2.5vw, 2.6rem); }
.main-nav a {
  font-size: .78rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text); text-decoration: none; padding: .4em 0; border-bottom: 1px solid transparent;
}
.main-nav a:hover { color: var(--dunkel); border-bottom-color: var(--akzent); }

/* ---------- Hero ---------- */
.hero { padding: clamp(3rem, 7vw, 6.5rem) 0 clamp(3.5rem, 8vw, 7rem); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.hero-text { text-align: center; }
.hero-logo { margin: 0 auto .6rem; max-width: 560px; }
.hero-logo img { width: 100%; height: auto; }
.hero-unterzeile {
  font-size: clamp(.72rem, .65rem + .35vw, .95rem);
  font-weight: 400; letter-spacing: .32em; text-transform: uppercase; color: var(--dunkel);
  margin: 0;
}
.hero-slogan {
  font-family: var(--font-script);
  font-size: clamp(2.8rem, 2rem + 3.2vw, 5rem);
  line-height: 1.1;
  color: var(--dunkel);
  margin: .4rem 0 .9rem;
}
.hero-themen {
  font-size: clamp(.8rem, .75rem + .25vw, .95rem);
  letter-spacing: .12em;
  color: var(--mittelbraun);
  margin-bottom: 2rem;
}
.hero .btn-row { justify-content: center; }

/* Bogen-Foto wie die Preiskarten */
.hero-bild {
  position: relative;
  max-width: 480px;
  justify-self: center;
  width: 100%;
}
.hero-bild::before {
  content: ""; position: absolute; inset: -6% -14% -4% -10%;
  background: url("../img/pinsel.svg") center / 100% 100% no-repeat;
  transform: rotate(-8deg);
  z-index: -1;
  opacity: .9;
}
.hero-bild img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 1000px 1000px var(--radius) var(--radius);
  box-shadow: var(--shadow);
}

/* ---------- Sektionen ---------- */
.section { padding: clamp(4.5rem, 9vw, 8rem) 0; position: relative; }
.section-creme { background: var(--creme); }
.section-head { text-align: center; max-width: 760px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.section-head p:last-child { margin-bottom: 0; }

/* Polaroid-Rahmen wie auf dem Flyer */
.polaroid {
  background: #fffdf9;
  padding: 14px 14px 52px;
  box-shadow: 0 18px 40px -20px rgba(24, 18, 12, .45);
  max-width: 460px;
  width: 100%;
  justify-self: center;
}
.polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.polaroid-links { transform: rotate(-3deg); }
.polaroid-rechts { transform: rotate(3deg); }

/* ---------- Über mich ---------- */
.about { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.about-text h2:not(.script-titel) {
  font-family: var(--font-script);
  font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3.2rem);
  font-weight: 400;
  margin: 2.2rem 0 1rem;
}
.about-zitat {
  font-family: var(--font-script);
  font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem);
  line-height: 1.25;
  color: var(--mittelbraun);
  margin-top: 2rem;
}

/* ---------- Aktion: Portfolioshooting ---------- */
.aktion { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.aktion .eyebrow { margin-top: -.6rem; }
.zielgruppen { list-style: none; padding: 0; margin: 1.8rem 0 .5rem; display: flex; flex-wrap: wrap; gap: 1.5rem 2.2rem; }
.zielgruppen li {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  font-family: var(--font-script); font-size: 1.9rem; line-height: 1.2; color: var(--dunkel);
}
.kreis {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 3.1rem; height: 3.1rem; border-radius: 50%;
  background: var(--beige); color: var(--dunkel);
}
.kreis .icon { width: 1.45rem; height: 1.45rem; }
.zielgruppen .kreis { width: 4.4rem; height: 4.4rem; }
.zielgruppen .kreis .icon { width: 2.1rem; height: 2.1rem; }

.icon-liste { list-style: none; padding: 0; margin: 0 0 1rem; }
.icon-liste li { display: flex; align-items: center; gap: 1.1rem; margin-bottom: .9rem; }
.aktion .btn { margin-top: 1.4rem; }

/* ---------- Pakete ---------- */
.section-pakete {
  background:
    linear-gradient(rgba(24, 18, 12, .45), rgba(24, 18, 12, .55)),
    image-set(url("../img/hintergrund-pakete-1066.webp") type("image/webp"), url("../img/hintergrund-pakete.jpg") type("image/jpeg")) center 70% / cover no-repeat,
    var(--dunkel);
}
.section-head-hell, .section-head-hell .script-titel { color: var(--offwhite); }
.section-head-hell .eyebrow { color: var(--beige); }

.pakete-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 1.6vw, 1.6rem); align-items: stretch; }

/* Bogen-Karte wie die Preiskarten */
.paket {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  background: var(--offwhite);
  border-radius: 1000px 1000px 6px 6px;
  box-shadow: inset 0 0 0 7px var(--offwhite), inset 0 0 0 8px rgba(109, 83, 62, .7), 0 26px 50px -26px rgba(0, 0, 0, .6);
  padding: 16px 16px 1.8rem;
}
.paket-bild { width: 100%; margin-bottom: .8rem; }
.paket-bild img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 30%;
  border-radius: 1000px 1000px 4px 4px;
}
.paket-name {
  font-family: var(--font-script);
  font-size: clamp(2.3rem, 1.9rem + 1vw, 2.9rem);
  font-weight: 400;
  margin: 0 0 .2rem;
}
.paket-fuer { font-size: .82rem; line-height: 1.5; margin: 0; padding: 0 .6rem; min-height: 2.5em; }
.paket .herz-linie { width: 85%; margin: .9rem auto; }
.paket-art { font-size: 1.1rem; font-weight: 500; letter-spacing: .04em; color: var(--dunkel); margin: 0 0 .5rem; }
.paket-eckdaten {
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  margin-bottom: 1rem; width: 100%;
}
.paket-dauer { display: flex; flex-direction: column; align-items: center; gap: .2rem; font-size: .78rem; line-height: 1.3; padding-right: .9rem; border-right: 1px solid rgba(69, 53, 36, .45); }
.paket-dauer .icon { width: 2.4rem; height: 2.4rem; padding: .45rem; border-radius: 50%; background: var(--beige); }
.paket-preis { font-family: var(--font-script); font-size: clamp(2.2rem, 1.9rem + .8vw, 2.7rem); line-height: 1; color: var(--dunkel); white-space: nowrap; }
.paket-leistungen { list-style: none; padding: 0 .4rem; margin: 0; text-align: left; width: 100%; }
.paket-leistungen li { display: flex; align-items: center; gap: .8rem; font-size: .82rem; line-height: 1.45; margin-bottom: .7rem; }
.paket-leistungen .icon { width: 2.3rem; height: 2.3rem; padding: .5rem; border-radius: 50%; background: var(--beige); }
.paket-text { font-size: .85rem; padding: 0 .4rem; }
.paket-slogan {
  font-family: var(--font-script);
  font-size: clamp(1.45rem, 1.3rem + .4vw, 1.7rem);
  line-height: 1.25;
  color: var(--dunkel);
  margin: 0 0 1.2rem;
  padding: 0 .4rem;
}
.paket .btn { margin-top: auto; }

.fineprint { text-align: center; color: var(--creme); font-size: .88rem; max-width: 720px; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; }

/* ---------- Galerie ---------- */
.galerie { list-style: none; padding: 0; margin: 0; columns: 4 240px; column-gap: clamp(.6rem, 1.2vw, 1.1rem); }
.galerie li { break-inside: avoid; margin-bottom: clamp(.6rem, 1.2vw, 1.1rem); overflow: hidden; border-radius: 6px; background: var(--sand); }
.galerie img { width: 100%; height: auto; transition: transform .6s ease; }
.galerie li:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .galerie img { transition: none; } }

/* ---------- Ablauf ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps li { counter-increment: step; text-align: center; padding: 1rem; }
.steps li::before {
  content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 3.4rem; height: 3.4rem; margin: 0 auto 1rem;
  border-radius: 50%; background: var(--beige);
  font-family: var(--font-serif); font-size: 1.6rem; color: var(--dunkel);
}
.steps h3 { font-size: 1.55rem; }
.steps p { font-size: .92rem; }

/* ---------- Kontakt ---------- */
.contact { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.kontakt-liste { margin-top: 1.8rem; }
.kontakt-liste a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--akzent); }
.kontakt-liste a:hover { color: var(--dunkel); border-bottom-color: var(--dunkel); }
.kontakt-abschluss {
  font-family: var(--font-script);
  font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem);
  line-height: 1.25;
  color: var(--mittelbraun);
  margin-top: 2rem;
}
.kontakt-abschluss .icon { width: .6em; height: .6em; stroke-width: 1.6; }
.kontakt-bild { width: 100%; max-width: 420px; justify-self: center; margin: 0; }
.kontakt-bild img { display: block; width: 100%; height: auto; border-radius: var(--radius); }

/* ---------- Footer ---------- */
.site-footer { background: var(--text); color: var(--creme); padding: 3.5rem 0 2rem; font-size: .85rem; }
.site-footer a { color: var(--creme); text-decoration: none; }
.site-footer a:hover { color: var(--akzent); }
.footer-grid { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; }
.footer-logo { width: 120px; height: auto; }
.footer-claim { font-family: var(--font-script); font-size: 1.8rem; line-height: 1.3; color: var(--beige); margin: 0; text-align: center; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, auto); gap: .3rem 2rem; letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; }
.footer-bottom { margin-top: 2.2rem; padding-top: 1.5rem; border-top: 1px solid rgba(240, 228, 216, .2); color: var(--beige); font-size: .75rem; text-align: center; }

/* ---------- Unterseiten (Impressum, Datenschutz, Danke) ---------- */
.page { padding: clamp(3.5rem, 8vw, 6rem) 0; min-height: 60vh; }
.page .container { max-width: 860px; }
.page h1 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.2rem, 1.8rem + 2vw, 3.2rem); }
.page h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); margin-top: 2em; }
.page blockquote {
  background: var(--creme); border-left: 4px solid var(--akzent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.2rem 1.5rem; margin: 1.5rem 0 2rem;
}
.page blockquote p:last-child { margin-bottom: 0; }
.page-center { text-align: center; }

/* ==========================================================
   Responsive
   ========================================================== */
@media (min-width: 1700px) {
  :root { --container: 1400px; }
}

@media (max-width: 1180px) {
  .pakete-grid { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; gap: 2rem; }
}

@media (max-width: 960px) {
  .hero-grid, .about, .aktion, .contact { grid-template-columns: 1fr; }
  .hero-bild { max-width: 380px; order: -1; }
  .about-bild { max-width: 360px; }
  .aktion .polaroid { max-width: 360px; order: -1; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer-links { grid-template-columns: repeat(3, auto); justify-content: center; }
}

@media (max-width: 680px) {
  html { scroll-padding-top: 110px; }
  .site-header .container { flex-direction: column; justify-content: center; gap: .1rem; min-height: 0; padding-top: .5rem; padding-bottom: .45rem; }
  .logo img { height: 34px; }
  .main-nav ul { gap: 1.1rem; }
  .main-nav a { font-size: .68rem; letter-spacing: .12em; }
  .pakete-grid { grid-template-columns: minmax(0, 380px); }
  .galerie { columns: 2; }
  .steps { grid-template-columns: 1fr; }
  .hero-bild { max-width: 300px; }
  .zielgruppen { justify-content: center; }
  .footer-links { grid-template-columns: repeat(2, auto); }
}

/* ---------- Feinschliff ---------- */
.section-head-hell { text-shadow: 0 1px 18px rgba(24, 18, 12, .75), 0 0 2px rgba(24, 18, 12, .5); }
.paket-dauer > span { white-space: normal; }
.contact .script-titel { font-size: clamp(2.4rem, 1.9rem + 1.6vw, 3.3rem); }

/* ---------- Größen für die Handschrift „Breathing“ (läuft größer als übliche Script-Fonts) ---------- */
.script-titel { font-size: clamp(2.1rem, 1.6rem + 2vw, 3.4rem); line-height: 1.35; }
.script-klein { font-size: clamp(1.6rem, 1.4rem + .8vw, 2rem); line-height: 1.35; }
.hero-text { container-type: inline-size; }
.hero-slogan { font-size: clamp(1.5rem, .9rem + 2.4vw, 2.8rem); font-size: clamp(1.3rem, 6.8cqi, 2.8rem); line-height: 1.3; margin: .8rem 0 1rem; }
.about-text h2:not(.script-titel) { font-size: clamp(1.8rem, 1.5rem + 1.2vw, 2.5rem); line-height: 1.35; }
.about-zitat { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); line-height: 1.7; }
.zielgruppen li { font-size: 1.5rem; }
.paket-name { font-size: clamp(1.8rem, 1.5rem + .8vw, 2.2rem); line-height: 1.4; }
.paket-preis { font-size: clamp(1.8rem, 1.6rem + .6vw, 2.1rem); }
.paket-slogan { font-size: clamp(1.15rem, 1.05rem + .3vw, 1.35rem); line-height: 1.45; }
.kontakt-abschluss { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); line-height: 1.45; }
.contact .script-titel { font-size: clamp(2rem, 1.6rem + 1.3vw, 2.8rem); }
.footer-claim { font-size: 1.45rem; }
.page-gross { font-size: clamp(2.8rem, 2rem + 3vw, 4.2rem); }
.pinsel { padding: .1em .6em .15em; }
.footer-claim { line-height: 1.5; }
@media (max-width: 680px) {
  .contact .script-titel { font-size: 1.85rem; line-height: 1.5; }
  .zielgruppen { gap: 1rem 1.4rem; }
  .zielgruppen li { font-size: 1.3rem; }
  .zielgruppen .kreis { width: 3.6rem; height: 3.6rem; }
}

/* ---------- Tablets & Touch ---------- */
/* Galerie: 3 Spalten auf Tablets hochkant, 4 ab ca. 1000 px */
.galerie { columns: 4 200px; }
@media (max-width: 680px) { .galerie { columns: 2; } }

/* Kontakt-Überschrift an die Spaltenbreite anpassen (bleibt einzeilig) */
.contact-info { container-type: inline-size; }
.contact .script-titel { font-size: clamp(2rem, 1.6rem + 1.3vw, 2.8rem); font-size: clamp(1.25rem, 6.4cqi, 2.8rem); }

/* Tablet hochkant: größeres Startbild, Bilder & Text mittig */
@media (min-width: 681px) and (max-width: 960px) {
  .hero-bild { max-width: 440px; }
  .about-bild, .aktion .polaroid { max-width: 400px; }
  .pakete-grid { grid-template-columns: repeat(2, minmax(0, 340px)); }
}

/* Touch-Geräte: größere Tippflächen, kein Hover-Zoom */
@media (pointer: coarse) {
  .main-nav a { display: inline-block; padding: .75em 0; }
  .footer-links a { display: inline-block; padding: .35em 0; }
  .link-button { padding: .4em 0; }
}
@media (hover: none) {
  .galerie li:hover img { transform: none; }
}

/* Herz hängt am Pinselstrich und bricht nie allein in die nächste Zeile */
.mit-herz .pinsel { position: relative; margin-right: .75em; }
.mit-herz .pinsel::after {
  content: ""; position: absolute; right: -.75em; top: .25em;
  width: .5em; height: .5em;
  background: url("../img/herz.svg") center / contain no-repeat;
}

/* Tablets (auch quer): Kontaktspalten untereinander */
@media (max-width: 1180px) {
  .contact { grid-template-columns: 1fr; max-width: 820px; }
}
/* Schmale Handys: Handschrift-Überschriften etwas kleiner, damit sie einzeilig bleiben */
@media (max-width: 480px) {
  .script-titel { font-size: 1.8rem; }
}

/* ---------- Rundes Logo über dem Schriftzug ---------- */
.hero-rundlogo { display: block; width: clamp(84px, 8vw, 124px); height: auto; margin: 0 auto 1.1rem; }

/* ---------- Über mich: zweites Foto leicht gedreht dahinter ---------- */
.about-bilder { position: relative; width: 100%; max-width: 500px; justify-self: center; }
.about-bilder .about-bild { position: relative; z-index: 1; max-width: none; }
.about-bilder.mit-zweitbild { padding: 9% 17% 0 0; }
.about-bild-hinten {
  position: absolute; top: 0; right: 0; z-index: 0;
  width: 66%; max-width: none;
  transform: rotate(7deg);
  padding: 10px 10px 38px;
}
@media (max-width: 960px) {
  .about-bilder { max-width: 400px; }
}

/* ---------- Pakete: alle Karten gleich breit, Inhalte auf gleicher Höhe ---------- */
.pakete-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .pakete-grid { grid-template-columns: repeat(2, minmax(0, 360px)); } }
@media (min-width: 681px) and (max-width: 960px) { .pakete-grid { grid-template-columns: repeat(2, minmax(0, 340px)); } }
@media (max-width: 680px) { .pakete-grid { grid-template-columns: minmax(0, 380px); } }
@supports (grid-template-rows: subgrid) {
  /* Jede Karte nutzt das Zeilenraster des Grids: Bild, Name, Zielgruppe, Linie, Art,
     Dauer/Preis, Leistungen, Text, Linie, Slogan, Button liegen kartenübergreifend auf einer Höhe. */
  .paket {
    display: grid;
    grid-row: span 11;
    grid-template-rows: subgrid;
    row-gap: 0;
    justify-items: center;
    align-items: start;
  }
  .paket > .paket-leistungen, .paket > .paket-text { justify-self: stretch; }
  .paket > .btn { align-self: end; }
  .paket-fuer { min-height: 0; }
}

/* ---------- Galerie: weitere Seiten ---------- */
.galerie-mehr { text-align: center; margin: clamp(2rem, 4vw, 3rem) 0 0; }
.pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; margin-top: clamp(2rem, 4vw, 3rem); font-size: .85rem; font-weight: 500; letter-spacing: .08em; }
.pager a, .pager span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; height: 2.75rem; padding: 0 .9rem; border-radius: 999px;
  text-decoration: none; color: var(--text); border: 1px solid var(--beige);
}
.pager a:hover { background: var(--beige); color: var(--dunkel); }
.pager .pager-aktiv { background: var(--akzent); border-color: var(--akzent); color: var(--dunkel); }
.galerie-seite { min-height: 70vh; }
/* Gleiche Kartenhöhe auch über mehrere Reihen (Tablet/Handy): variable Textbereiche mit Mindesthöhe */
.paket > .paket-bild { justify-self: stretch; }
.paket-fuer { min-height: 3em; }
.paket-leistungen { min-height: 9.6rem; }
.paket-slogan { min-height: 5.8em; display: flex; align-items: center; justify-content: center; }
@supports (grid-template-rows: subgrid) { .paket { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 680px) {
  .about-bilder { max-width: calc(100% - 18px); justify-self: start; }
}

/* ---------- Galerie: festes Raster 4×2 (Desktop/Tablet) bzw. 2×4 (Handy), Blättern ohne JavaScript ---------- */
.galerie { columns: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.6rem, 1.2vw, 1.1rem); }
.galerie li { margin: 0; }
.galerie img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
@media (max-width: 680px) { .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.galerie-blaettern { position: relative; }
.galerie-seiten .galerie { display: none; }
.galerie-blaettern .pager label {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; height: 2.75rem; padding: 0 .9rem; border-radius: 999px;
  color: var(--text); border: 1px solid var(--beige); cursor: pointer; user-select: none;
}
.galerie-blaettern .pager label:hover { background: var(--beige); color: var(--dunkel); }
.galerie-blaettern .pager .pager-pfeil { display: none; }

/* ---------- Anfahrtskosten (unter den Paketkarten) ---------- */
.anfahrt {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--offwhite);
  border-radius: 6px;
  box-shadow: inset 0 0 0 7px var(--offwhite), inset 0 0 0 8px rgba(109, 83, 62, .7), 0 26px 50px -26px rgba(0, 0, 0, .6);
  padding: clamp(16px, 2vw, 28px) clamp(16px, 4vw, 56px) clamp(16px, 2vw, 28px) clamp(16px, 2vw, 28px);
}
.anfahrt-bild img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 1000px 1000px 4px 4px;
}
.anfahrt-text { text-align: center; padding: 1rem 0; }
.anfahrt-titel { font-family: var(--font-script); font-weight: 400; font-size: clamp(2rem, 1.6rem + 1.4vw, 3rem); line-height: 1.35; margin: 0; }
.anfahrt .herz-linie { width: min(85%, 340px); margin: 1rem auto 1.2rem; }
.anfahrt-intro { max-width: 34rem; margin: 0 auto; }
.anfahrt-intro p { margin-bottom: .6em; }
.anfahrt-punkte { display: inline-block; text-align: left; margin: 1.2rem auto .4rem; }
.anfahrt-punkte .icon { width: 1.45rem; height: 1.45rem; }
.anfahrt-punkte li > span:last-child .icon { width: 1.15em; height: 1.15em; vertical-align: -.2em; stroke-width: 1.8; }
.anfahrt-abschluss {
  font-family: var(--font-script);
  font-size: clamp(1.45rem, 1.2rem + .9vw, 2rem);
  line-height: 1.45; color: var(--dunkel);
  max-width: 30rem; margin: 0 auto;
}
@media (max-width: 760px) {
  .anfahrt { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; padding: 16px 16px 1.5rem; }
  .anfahrt-bild { max-width: 360px; width: 100%; justify-self: center; }
}
@media (min-width: 761px) and (max-width: 1180px) {
  .anfahrt { max-width: 752px; margin-left: auto; margin-right: auto; }
}

/* Über mich: beide Fotos sichtbar – hinteres oben rechts, vorderes tiefer links, kleine Überlappung */
.about-bilder.mit-zweitbild { padding: 0; max-width: 560px; }
.about-bilder.mit-zweitbild .about-bild { width: 60%; margin-top: 16%; }
.about-bilder.mit-zweitbild .about-bild-hinten { width: 52%; top: 0; right: 0; transform: rotate(6deg); }
@media (max-width: 960px) {
  .about-bilder.mit-zweitbild { max-width: 480px; }
}
@media (max-width: 680px) {
  .about-bilder.mit-zweitbild { max-width: calc(100% - 14px); justify-self: center; }
}
/* Gespiegelt: Laura sitzt im hinteren Foto links – daher hinteres Foto links oben, vorderes rechts tiefer */
.about-bilder.mit-zweitbild .about-bild { margin-left: auto; transform: rotate(3deg); }
.about-bilder.mit-zweitbild .about-bild-hinten { left: 0; right: auto; transform: rotate(-6deg); }

/* ---------- Rundes Logo groß und transparent hinter dem Schriftzug ----------
   Das große „M“ im Rundlogo steht auf Höhe des Schriftzugs (vertikal mittig dahinter),
   der Bogentext „Fotografie von Laura“ läuft unter dem Schriftzug durch.
   Maße relativ zur Breite: Rundlogo R = min(330px, 59cqi) breit (767 × 790, M-Mitte bei 43,7 % der Höhe = 0,45 R),
   Schriftzug min(560px, 100cqi) breit (2326 × 506, Höhe S = 0,2175 × Breite).
   --hoch hebt das Rundlogo leicht an, damit der Bogentext Luft zur Herz-Trennlinie hat. */
.hero-marke {
  --rund: min(330px, 59cqi);
  --hoch: calc(var(--rund) * .06);
  --schrift-h: calc(min(560px, 100cqi) * .2175);
  position: relative;
  padding-top: calc(var(--rund) * .45 + var(--hoch) - var(--schrift-h) / 2);
}
.hero-marke .hero-rundlogo {
  position: absolute; left: 50%; top: 0; z-index: 0;
  width: var(--rund); height: auto; margin: 0;
  transform: translateX(-50%);
  opacity: .13;
  pointer-events: none;
}
.hero-marke .hero-logo { position: relative; z-index: 1; margin-bottom: 0; }

/* Fotos als <picture> (WebP + JPEG-Rückfall): der Rahmen selbst beeinflusst das Layout nicht */
picture { display: contents; }

/* Sehr dezente Zeile unter dem Logo – Teil der Hauptüberschrift (h1) für Suchmaschinen.
   Absolut positioniert, damit das große Rundlogo dahinter nicht verrutscht.
   Abstand nach unten = Teil des Rundlogos unterhalb des Schriftzugs (1,03 R − 0,45 R − Anhebung − S/2). */
.hero-marke { margin-bottom: calc(var(--rund) * .58 - var(--hoch) - var(--schrift-h) / 2 + .6rem); }
.hero-zusatz {
  position: absolute; left: 0; right: 0; top: calc(100% + .15rem);
  font-family: var(--font-sans); font-size: clamp(.58rem, .54rem + .15vw, .66rem); font-weight: 400;
  letter-spacing: .06em; line-height: 1.4; text-transform: none;
  color: color-mix(in srgb, var(--mittelbraun) 72%, var(--offwhite));
}

/* Fotos schützen (ohne JavaScript): Rechtsklick, Ziehen und langes Antippen treffen nicht das Bild,
   sondern den Rahmen – „Bild speichern unter …“ erscheint so nicht. Logos (SVG) bleiben ausgenommen.
   Kein echter Schutz (Screenshots, Entwicklerwerkzeuge), nur gegen beiläufiges Speichern. */
img:not([src$=".svg"]) {
  pointer-events: none;
  user-select: none; -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* ---------- Galerie-Seiten (beim Build erzeugt) ---------- */
#gs-1:checked ~ .galerie-seiten .gs-1 { display: grid; }
#gs-1:checked ~ .pager .pn-1 { background: var(--akzent); border-color: var(--akzent); color: var(--dunkel); }
#gs-1:checked ~ .pager .pz-1, #gs-1:checked ~ .pager .pw-1 { display: inline-flex; }
#gs-1:focus-visible ~ .pager .pn-1 { outline: 2px solid var(--mittelbraun); outline-offset: 3px; }
#gs-2:checked ~ .galerie-seiten .gs-2 { display: grid; }
#gs-2:checked ~ .pager .pn-2 { background: var(--akzent); border-color: var(--akzent); color: var(--dunkel); }
#gs-2:checked ~ .pager .pz-2, #gs-2:checked ~ .pager .pw-2 { display: inline-flex; }
#gs-2:focus-visible ~ .pager .pn-2 { outline: 2px solid var(--mittelbraun); outline-offset: 3px; }
#gs-3:checked ~ .galerie-seiten .gs-3 { display: grid; }
#gs-3:checked ~ .pager .pn-3 { background: var(--akzent); border-color: var(--akzent); color: var(--dunkel); }
#gs-3:checked ~ .pager .pz-3, #gs-3:checked ~ .pager .pw-3 { display: inline-flex; }
#gs-3:focus-visible ~ .pager .pn-3 { outline: 2px solid var(--mittelbraun); outline-offset: 3px; }