/*
Theme Name: Nadine Putz Fotografie (Kadence Child)
Theme URI: https://nadineputz.at
Description: Individuelles "Album/Tagebuch"-Design fuer Nadine Putz Fotografie, aufbauend auf Kadence.
Author: Nadine Putz Fotografie
Template: kadence
Version: 1.39.0
Text Domain: nadine-putz-child
*/

/* Dieses Stylesheet wird automatisch ueber functions.php geladen.
   Nichts hier muss zusaetzlich in den Customizer eingefuegt werden. */

/* =========================================================
   NADINE PUTZ FOTOGRAFIE
   Zentrales Stylesheet  ·  Design "Album"
   ---------------------------------------------------------
   Fuer WordPress/Kadence: den Inhalt dieser Datei in
   Design > Customizer > Zusaetzliches CSS einfuegen
   (oder als Custom-CSS-Datei per Child-Theme laden).
   ========================================================= */

/* ---------- 1. DESIGN TOKENS ---------- */
/* Farben exakt nach Logo-/Marken-Briefing "Nadine Putz Fotografie".
   Keine weiteren Farben verwenden. Petrol (#24525A) ist ausschliesslich
   fuer Social Media vorgesehen und kommt auf der Website nicht vor. */
:root{
  --paper:#F7F1E6;        /* Creme  - Hintergrund */
  --paper-deep:#EEE3D2;   /* Creme abgesetzt (Tint) - Sektionen */
  --ink:#2B2420;          /* "Schwarz" (dunkles Warmbraun) - Text */
  --clay:#7A5C4F;         /* Clay - Hauptfarbe der Marke */
  --ink-soft:#7A5C4F;     /* Clay - Text weich */
  --rose:#C08D7C;         /* Rose - Akzent hell, Wellenlinie */
  --rose-ink:#7C4A42;     /* Rose (Alt.) - Akzent dunkel, Links, Buttons */
  --line:rgba(122,92,79,0.22);
  --white:#FFFCF7;
}

/* ---------- 1b. KADENCE-PALETTE UEBERSCHREIBEN ---------- */
/* Kadence bringt eine blaue Standard-Palette mit (#2B6CB0 / #F7FAFC / #2D3748)
   und laedt global.min.css NACH diesem Stylesheet. Ohne dieses Mapping
   faerbt Kadence Links, Buttons und Hintergruende blau/petrol.
   Alle neun Palette-Slots werden auf die CI-Farben gelegt. */
:root, body, .wp-site-blocks{
  --global-palette1:#7A5C4F;   /* Clay - Primaer */
  --global-palette2:#7C4A42;   /* Rose (Alt.) - Sekundaer / Hover */
  --global-palette3:#2B2420;   /* Text dunkel */
  --global-palette4:#2B2420;   /* Text */
  --global-palette5:#7A5C4F;   /* Text weich */
  --global-palette6:#C08D7C;   /* Rose - gedaempft */
  --global-palette7:#EEE3D2;   /* Creme abgesetzt */
  --global-palette8:#F7F1E6;   /* Creme - Hintergrund */
  --global-palette9:#FFFCF7;   /* Weiss warm */
  --global-palette-highlight:#7C4A42;
  --global-palette-highlight-alt:#7A5C4F;
  --global-palette-highlight-alt2:#C08D7C;
  --global-palette-btn:#FFFCF7;
  --global-palette-btn-bg:#7A5C4F;
  --global-palette-btn-hover:#FFFCF7;
  --global-palette-btn-bg-hover:#7C4A42;
}

/* ---------- 2. BASIS ---------- */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Newsreader', Georgia, serif; font-size:1.05rem;
  line-height:1.7; -webkit-font-smoothing:antialiased;
}
img{width:100%; display:block; object-fit:cover;}
a, a:visited, a:hover, a:focus{color:inherit; text-decoration:none;}
h1,h2,h3{font-family:'Fraunces', Georgia, serif; font-weight:500; line-height:1.14; letter-spacing:-0.01em;}
.wrap{max-width:1120px; margin:0 auto; padding:0 32px;}
.wrap-narrow{max-width:740px; margin:0 auto; padding:0 32px;}
section{padding:100px 0;}#kapitel,.postkarten,#kapitel + .wp-block-group{padding:100px 0;}.rule{border:none; border-top:1px solid var(--line);}

/* ---------- 3. TEXT-BAUSTEINE ---------- */
.label{
  font-family:'Karla', sans-serif; font-weight:700; font-size:0.7rem;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--rose-ink);
}
.hand{font-family:'Caveat', cursive; font-weight:600; color:var(--rose-ink);}
.textlink{
  font-family:'Karla', sans-serif; font-weight:600; font-size:0.82rem;
  border-bottom:1px solid var(--ink); padding-bottom:2px;
  display:inline-block; transition:opacity .2s ease;
}
.textlink:hover{opacity:0.55;}
.lead{color:var(--ink-soft); font-size:1.08rem;}
.center{text-align:center;}

/* ---------- 4. NAVIGATION ---------- */
nav{padding:28px 0; position:relative; z-index:20;}
/* <nav> bildet durch position+z-index einen eigenen Stacking Context.
   Das Menue-Panel liegt darin - ohne diese Anhebung wuerde der Scrim
   (z-index 40) ueber dem geoeffneten Panel liegen und es abdunkeln. */
body.nav-open nav{z-index:50;}
.nav-inner{
  max-width:1120px; margin:0 auto; padding:0 32px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.logo .mark{
  font-family:'Fraunces', serif; font-size:1.15rem; font-weight:500; letter-spacing:0.08em;
}
.logo .mark small{
  display:block; font-family:'Karla', sans-serif; font-size:0.58rem; font-weight:600;
  letter-spacing:0.2em; color:var(--ink-soft); margin-top:2px;
}
.nav-links{display:flex; gap:28px; list-style:none; align-items:center; flex-wrap:wrap;}
.nav-links a{
  font-family:'Karla', sans-serif; font-size:0.75rem; letter-spacing:0.06em;
  text-transform:uppercase; font-weight:600; color:var(--ink-soft);
}
.nav-links a.active, .nav-links a:hover{color:var(--rose-ink);}
.nav-links a.active{border-bottom:1px solid var(--rose-ink); padding-bottom:3px;}

/* Burger-Button: nur mobil sichtbar (siehe Media Query weiter unten).
   Kadence stylt nackte <button>-Elemente mit --global-palette-btn-bg und
   faerbt sie bei hover/focus/active ein - deshalb hier alle Zustaende
   explizit zuruecksetzen, sonst bekommt der Burger einen rose Kasten. */
.nav-toggle,
.nav-toggle:hover,
.nav-toggle:focus,
.nav-toggle:focus-visible,
.nav-toggle:active{
  background:none; background-color:transparent; border:0; box-shadow:none;
  color:var(--clay); text-decoration:none;
}
.nav-toggle{
  display:none; padding:10px; margin:-10px -6px -10px 0;
  cursor:pointer; line-height:0; -webkit-appearance:none; appearance:none;
  border-radius:0;
}
.nav-toggle:focus-visible{outline:1px solid var(--clay); outline-offset:2px;}
.nav-toggle-bars{display:block; width:24px;}
.nav-toggle-bars span{
  display:block; height:1.5px; background:currentColor; border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
.nav-toggle-bars span + span{margin-top:6px;}
body.nav-open .nav-toggle-bars span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
body.nav-open .nav-toggle-bars span:nth-child(2){opacity:0;}
body.nav-open .nav-toggle-bars span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
.nav-scrim{
  position:fixed; inset:0; z-index:40; background:rgba(43,36,32,0.35);
  opacity:0; transition:opacity .3s ease;
}
body.nav-open .nav-scrim{opacity:1;}

/* ---------- 5. SEITENKOPF (Unterseiten) ---------- */
.page-head{padding:70px 32px 30px; text-align:center;}
.page-head .label{display:block; margin-bottom:18px;}
.page-head h1{font-size:clamp(2.1rem,4vw,2.9rem); font-style:italic; margin-bottom:20px;}
.page-head p{color:var(--ink-soft); max-width:520px; margin:0 auto;}

/* ---------- 6. HERO (Startseite: offenes Buch) ---------- */
/* Gleiche Breite und gleicher Seitenabstand wie .wrap - sonst spannt der
   Hero ueber die volle Fensterbreite, waehrend Navigation und alle
   anderen Seiten in 1120px sitzen. Auf breiten Bildschirmen stand die
   Ueberschrift dadurch mehrere hundert Pixel links vom Logo. */
.hero{
  display:grid; grid-template-columns:0.82fr 1fr; min-height:80vh;
  max-width:1120px; margin:0 auto; padding:0 32px;
}
/* Bewusst ohne Trennlinie zwischen Text- und Bildspalte: der Hero soll
   als eine offene Flaeche wirken, nicht als zweigeteilte Seite. */
.hero-text{
  padding:20px 60px 60px 0; display:flex; flex-direction:column; justify-content:center;
}
.hero-text .label{margin-bottom:22px;}
.hero-text h1{font-size:clamp(2.1rem,3.6vw,3.1rem); font-style:italic; font-weight:400; margin-bottom:26px; max-width:460px;}
.hero-text p{color:var(--ink-soft); max-width:400px; margin-bottom:30px; font-size:1rem;}
.hero-sign{margin-top:14px;}
.hero-sign .hand{font-size:1.7rem;}
.hero-img{position:relative; padding:36px 0;}

/* ---------- 7. FOTORAHMEN (eingeklebtes Bild) ---------- */
.frame{background:var(--white); padding:13px; box-shadow:0 16px 36px rgba(43,36,32,0.13);}
.frame.tilt{transform:rotate(0.6deg);}
.frame.tilt-left{transform:rotate(-0.7deg);}
.hero-img .frame{height:auto;}
.hero-img img{height:auto; width:100%; aspect-ratio:4/5; object-fit:cover; min-height:420px;}
/* Sticker/Notizzettel am Foto: dunkles Rose auf warmem Weiss,
   damit er sich klar vom Creme-Hintergrund und vom Bild abhebt. */
.cap{
  position:absolute; bottom:-14px; right:26px; background:var(--rose-ink);
  padding:5px 14px; font-family:'Caveat', cursive; font-size:1.15rem; color:var(--white);
  transform:rotate(-1.5deg); box-shadow:0 6px 16px rgba(43,36,32,0.18);
}

/* ---------- 8. MARGINALIE / ZITATBAND ---------- */
/* Seitliches Padding ist wichtig: .marginalie p hat zwar max-width,
   die greift auf schmalen Bildschirmen aber nicht - der Text lief
   dort bis an den Bildschirmrand. */
.marginalie{
  padding:64px 32px 70px; text-align:center;
}
.marginalie p{
  font-family:'Caveat', cursive; font-size:2rem; color:var(--rose-ink);
  max-width:680px; margin:0 auto; line-height:1.3;
}
/* Namenszeile, wenn die Marginalie eine echte Rezension zitiert. */
.marginalie .who{
  display:block; margin-top:18px;
  font-family:'Karla', sans-serif; font-size:0.75rem;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft);
}

/* ---------- 9. KAPITEL (Wechselblöcke Bild/Text) ---------- */
.kapitel-intro{text-align:center; padding-bottom:20px;}
.kapitel-intro .label{display:block; margin-bottom:16px;}
.kapitel-intro h2{font-size:clamp(1.8rem,3vw,2.4rem); font-style:italic; max-width:600px; margin:0 auto;}
.kapitel{
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:70px;
  padding:70px 0; border-bottom:1px solid var(--line);
}
.kapitel:last-child{border-bottom:none;}
.kapitel.flip .k-img{order:2;}
.kapitel.flip .k-text{order:1;}
.k-img img{aspect-ratio:4/5;}
.k-num{font-family:'Fraunces', serif; font-style:italic; font-size:0.95rem; color:var(--ink-soft); display:block; margin-bottom:14px;}
.k-text h3{font-size:clamp(1.7rem,2.6vw,2.3rem); font-style:italic; margin-bottom:16px;}
.k-text p{color:var(--ink-soft); margin-bottom:22px; max-width:420px;}

/* ---------- 10. JAHRESKREIS (Zeitfaden) ---------- */
.kreis{background:var(--paper-deep);}
.thread{position:relative; margin-top:90px;}
.thread::before{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--ink); opacity:0.22;}
.thread-row{display:flex; justify-content:space-between; gap:6px; align-items:stretch;}
/* Ungerade Eintraege stehen UNTER der Linie, gerade DARUEBER.
   Der Innenabstand muss dafuer mindestens so hoch sein wie der Text
   selbst - im Flex-Layout werden alle Eintraege gleich hoch, und bei zu
   kleinem Abstand laeuft die Mittellinie quer durch die Schrift. */
.t-item{flex:1; text-align:center; position:relative; max-width:130px; padding-top:72px;}
.t-item:nth-child(even){padding-top:0; padding-bottom:72px;}
/* Der Punkt sitzt genau auf der Linie: da alle Eintraege gleich hoch
   sind, entspricht 50% des Eintrags exakt der Mittellinie. */
.t-item::before{content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:7px; height:7px; border-radius:50%; background:var(--rose-ink);}
.t-title{font-family:'Fraunces', serif; font-style:italic; font-size:1rem; margin-bottom:4px;}
.t-sub{font-family:'Karla', sans-serif; font-size:0.72rem; color:var(--ink-soft); line-height:1.4;}
.thread-mobile{display:none;}

/* ---------- 11. ABLAUF (nummerierte Schritte) ---------- */
.ablauf{display:grid; grid-template-columns:repeat(3,1fr); gap:44px; margin-top:56px;}
.step{border-top:1px solid var(--line); padding-top:22px;}
.step .s-num{font-family:'Fraunces', serif; font-style:italic; font-size:1.6rem; color:var(--rose); display:block; margin-bottom:10px;}
.step h4{font-family:'Fraunces', serif; font-style:italic; font-size:1.15rem; font-weight:500; margin-bottom:8px;}
.step p{color:var(--ink-soft); font-size:0.92rem;}

/* ---------- 12. MENUEKARTE (Preise) ---------- */
.cat{padding:70px 0; border-bottom:1px solid var(--line);}
.cat:last-of-type{border-bottom:none;}
.cat-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; flex-wrap:wrap; gap:10px;}
.cat-head h2{font-size:clamp(1.6rem,2.6vw,2.1rem); font-style:italic;}
.cat-head .price-from{font-family:'Karla', sans-serif; font-size:0.8rem; color:var(--ink-soft);}
.cat-note{color:var(--ink-soft); max-width:560px; margin-bottom:40px; font-size:0.98rem;}
.item{padding:26px 0; border-bottom:1px dotted var(--line);}
.item:last-child{border-bottom:none;}
.item-row{display:flex; align-items:baseline; gap:10px; margin-bottom:10px;}
.item-name{font-family:'Fraunces', serif; font-style:italic; font-size:1.25rem; white-space:nowrap; display:flex; align-items:center; gap:8px;}
.dots{flex:1; border-bottom:1px dotted var(--ink-soft); opacity:0.5; margin-bottom:6px; min-width:20px;}
.item-price{font-family:'Karla', sans-serif; font-weight:700; font-size:1.15rem; white-space:nowrap;}
.item-includes{
  list-style:none; font-family:'Karla', sans-serif; font-size:0.82rem; color:var(--ink-soft);
  display:flex; flex-wrap:wrap; gap:8px 22px; margin-bottom:14px;
}
.item-includes li::before{content:"— "; color:var(--rose);}
.recommended-tag{
  font-family:'Karla', sans-serif; font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--white); background:var(--rose-ink); padding:2px 8px; border-radius:2px; vertical-align:middle;
}
.bundle{margin-top:20px; padding:34px 30px; background:var(--white); border-left:3px solid var(--rose);}
.bundle-head{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px; margin-bottom:10px;}
.bundle-head h3{font-style:italic; font-size:1.4rem;}
.bundle-save{font-family:'Karla', sans-serif; font-size:0.78rem; color:var(--rose-ink); font-weight:700;}
.bundle p{color:var(--ink-soft); font-size:0.94rem; margin-bottom:14px;}
.extras{background:var(--paper-deep);}
.extras-inner{display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px; margin-top:30px;}
.extras-list{list-style:none; font-family:'Karla', sans-serif; font-size:0.92rem;}
.extras-list li{display:flex; justify-content:space-between; gap:30px; padding:8px 0; min-width:220px;}
.extras-note{color:var(--ink-soft); font-size:0.85rem; max-width:320px;}

/* ---------- 13. MINI-TERMINE ---------- */
.mini-inner{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.mini-img img{aspect-ratio:5/4;}
.mini-text h3{font-size:clamp(1.6rem,2.6vw,2.1rem); font-style:italic; margin-bottom:14px;}
.mini-text p{color:var(--ink-soft); margin-bottom:20px; max-width:420px;}
.mini-dates{margin-bottom:24px;}
.m-row{display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px dotted var(--line); font-family:'Karla', sans-serif; font-size:0.85rem;}
.m-row .free{color:var(--rose-ink); font-weight:700;}
.m-row .full{color:var(--ink-soft); text-decoration:line-through;}
.margin-note{
  font-family:'Caveat', cursive; font-size:1.25rem; color:var(--rose-ink); max-width:380px;
  border-left:2px solid var(--rose); padding-left:16px; line-height:1.35;
}
.saison{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin-top:56px; background:var(--line);}
.saison-card{position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--ink);}
.saison-card img{height:100%; transition:transform .6s ease;}
.saison-card:hover img{transform:scale(1.05);}
.saison-card::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(43,36,32,0) 45%, rgba(43,36,32,0.8) 100%);}
.saison-label{position:absolute; bottom:0; left:0; right:0; z-index:2; padding:22px 18px; color:var(--white);}
.saison-label .s-season{font-family:'Karla', sans-serif; font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; color:#EFD9CE; display:block; margin-bottom:5px;}
.saison-label h4{font-family:'Fraunces', serif; font-style:italic; font-size:1.2rem; font-weight:500;}

/* ---------- 14. POSTKARTEN (Testimonials) ---------- */
.postkarten{background:var(--paper-deep);}
.p-grid{display:flex; gap:44px; justify-content:center; flex-wrap:wrap; margin-top:60px;}
.postcard{width:260px; background:var(--white); padding:22px 20px 26px; box-shadow:0 14px 26px rgba(43,36,32,0.12); position:relative;}
.postcard:nth-child(1){transform:rotate(-2deg);}
.postcard:nth-child(2){transform:rotate(1.5deg); margin-top:20px;}
.postcard:nth-child(3){transform:rotate(-1deg);}
.postcard::before{
  content:""; position:absolute; top:-10px; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:70px; height:22px; background:rgba(192,141,124,0.35);
}
.postcard p{font-family:'Caveat', cursive; font-size:1.25rem; line-height:1.35; margin-bottom:14px;}
.postcard .who{font-family:'Karla', sans-serif; font-size:0.7rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-soft); font-weight:700;}
.postcard .flag{display:block; margin-top:6px; font-family:'Karla', sans-serif; font-size:0.6rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--rose);}

/* ---------- 15. FAQ ---------- */
.faq-item{border-bottom:1px solid var(--line); padding:22px 0;}
.faq-item summary{
  font-family:'Fraunces', serif; font-style:italic; font-size:1.1rem; cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-family:'Karla', sans-serif; font-size:1.3rem; color:var(--rose-ink);}
.faq-item[open] summary::after{content:"–";}
.faq-item p{color:var(--ink-soft); margin-top:14px; font-size:0.95rem; max-width:620px;}

/* ---------- 16. NEWSLETTER ---------- */
.nl{text-align:center;}
.nl h2{font-size:clamp(1.7rem,2.8vw,2.2rem); font-style:italic; margin:16px 0;}
.nl p{color:var(--ink-soft); margin-bottom:32px;}
.nl-form{display:flex; gap:12px; max-width:420px; margin:0 auto; border-bottom:1px solid var(--ink); padding-bottom:10px;}
.nl-form input{flex:1; border:none; background:none; font-family:'Newsreader', serif; font-size:1rem; color:var(--ink); font-style:italic;}
.nl-form input::placeholder{color:var(--ink-soft);}
.nl-form input:focus{outline:none;}
.nl-form button{border:none; background:none; font-family:'Karla', sans-serif; font-weight:700; font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--rose-ink); cursor:pointer;}
.nl-note{margin-top:16px; font-size:0.78rem; color:var(--ink-soft);}

/* MailPoet-Formular auf das Seitendesign umlegen.
   MailPoet bringt eigene Rahmen, Farben und Abstaende mit - hier werden
   sie so zurueckgesetzt, dass das echte Formular exakt aussieht wie das
   Platzhalter-Formular oben (eine Zeile, nur eine Unterstreichung).
   Die Selektoren decken sowohl die aelteren als auch die neuen
   Block-Formulare von MailPoet ab. */
.nl .mailpoet_form{
  max-width:460px; margin:0 auto; padding:0; background:none; border:0;
}
/* MailPoet legt die Gestaltung des Formulars als ID-Regel ins Seitenhaupt:
   #mailpoet_form_1 { background: ...; border-radius: 4px; color: ...; }
   Gegen eine ID kommt man mit Klassen nicht an - daher hier ausnahmsweise
   !important. Ohne das legt MailPoet einen weissen Kasten ueber das
   Seitendesign, an dessen Kante das Eingabefeld direkt klebt.
   Gilt nur innerhalb der Newsletter-Box; anderswo bleibt das Formular
   so, wie du es in MailPoet eingerichtet hast. */
.nl .mailpoet_form{
  background:none !important;
  border-radius:0 !important;
  color:inherit !important;
  text-align:center !important;
}
.nl .mailpoet_form .mailpoet_paragraph{ margin-bottom:0 !important; }
.nl .mailpoet_form .mailpoet_form_column{ padding:0 !important; }
/* Auch die Textfarben kommen aus MailPoets ID-Regeln - der Hinweis stuende
   sonst in einem Schwarz, das sonst nirgends auf der Seite vorkommt. */
.nl .mailpoet_form_paragraph,
.nl .mailpoet_form_paragraph span{ color:var(--ink-soft) !important; }
.nl .mailpoet_form_paragraph a{ color:var(--rose-ink) !important; }
/* Etwas mehr Luft zwischen dem Einleitungstext und dem Eingabefeld. */
.nl .wrap-narrow > p{ margin-bottom:34px; }
.nl .mailpoet_form_form,
.nl .mailpoet_form .mailpoet_form_columns{
  display:block; background:none; border:0; padding:0; margin:0; width:100%;
}
/* Die Spalte ist die einzige gemeinsame Klammer um Feld und Knopf. Sie wird
   zur umbruchfaehigen Reihe: Absaetze nehmen je eine ganze Zeile ein, Feld
   und Knopf teilen sich die uebrige. */
.nl .mailpoet_form .mailpoet_form_column{
  display:flex; flex-direction:row; flex-wrap:wrap; align-items:flex-end;
  justify-content:center; gap:12px;
  background:none; border:0; padding:0; margin:0; width:100%;
}
.nl .mailpoet_form_column > p.mailpoet_form_paragraph{ flex:0 0 100%; }
/* Ueberschrift und Einleitung kommen aus der Theme-Box darueber - die ist je
   Seite eigens getextet. Bringt das MailPoet-Formular beides selbst mit,
   stuende sonst alles ein zweites Mal da. Der letzte Absatz (Datenschutz)
   bleibt stehen, weil dort der Link zur Datenschutzerklaerung drin ist.
   Hat das Formular nur einen einzigen Absatz, ist das genau dieser - dann
   wird nichts ausgeblendet. */
.nl .mailpoet-heading{ display:none; }
.nl .mailpoet_form_column > p.mailpoet_form_paragraph:first-of-type:not(:last-of-type){ display:none; }
/* Eingabefeld und Knopf nebeneinander, als Gruppe mittig.
   Achtung: der Spaltencontainer traegt selbst die Klasse mailpoet_paragraph
   und muss ausgenommen werden, sonst faellt das ganze Formular in sich zusammen. */
.nl div.mailpoet_paragraph:not(.mailpoet_form_columns){
  flex:0 0 auto; margin:0; padding:0;
}
/* Das Eingabefeld nimmt den freien Platz, der Knopf nur, was er braucht.
   :first-of-type als Rueckfalloption fuer Browser ohne :has(). */
.nl .mailpoet_form_column > div.mailpoet_paragraph:first-of-type,
.nl div.mailpoet_paragraph:has(.mailpoet_text){ flex:1 1 auto; min-width:0; }
.nl .mailpoet_text,
.nl .mailpoet_form input[type="email"],
.nl .mailpoet_form input[type="text"]{
  width:100%; border:0; border-bottom:1px solid var(--ink); border-radius:0;
  background:none; box-shadow:none; padding:0 0 10px;
  font-family:'Newsreader', serif; font-size:1rem; font-style:italic; color:var(--ink);
}
.nl .mailpoet_text::placeholder,
.nl .mailpoet_form input::placeholder{color:var(--ink-soft); opacity:1;}
.nl .mailpoet_text:focus,
.nl .mailpoet_form input:focus{outline:none; border-bottom-color:var(--rose-ink);}
.nl .mailpoet_submit,
.nl .mailpoet_form input[type="submit"],
.nl .mailpoet_form button[type="submit"]{
  border:0; border-bottom:1px solid var(--ink); border-radius:0;
  background:none; box-shadow:none; padding:0 0 10px; cursor:pointer;
  font-family:'Karla', sans-serif; font-weight:700; font-size:0.78rem;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--rose-ink);
  white-space:nowrap;
}
.nl .mailpoet_submit:hover,
.nl .mailpoet_form input[type="submit"]:hover{background:none; color:var(--clay);}
/* Erfolgs- und Fehlermeldung von MailPoet */
.nl .mailpoet_message{margin-top:14px;}
.nl .mailpoet_validate_success{color:var(--rose-ink); font-family:'Karla', sans-serif; font-size:0.85rem;}
.nl .mailpoet_validate_error{color:var(--clay); font-family:'Karla', sans-serif; font-size:0.85rem;}
/* Pflicht-Checkbox (Datenschutz) steht unter der Zeile */
.nl .mailpoet_checkbox_label,
.nl div.mailpoet_paragraph.mailpoet_checkbox_paragraph{
  display:block; text-align:left; font-family:'Karla', sans-serif;
  font-size:0.78rem; color:var(--ink-soft); margin-top:14px;
}
/* Der Datenschutzhinweis aus dem Formular ersetzt den Hinweis der Theme-Box. */
.nl .mailpoet_form_column > p.mailpoet_form_paragraph:last-of-type{
  margin:18px 0 0; font-size:0.78rem; color:var(--ink-soft);
}
.nl .mailpoet_form_paragraph span{ font-family:inherit; font-size:inherit; }
.nl:has(.mailpoet_form_paragraph) .nl-note{ display:none; }

@media (max-width:640px){
  .nl .mailpoet_form_column > div.mailpoet_paragraph{flex:0 0 100%;}
  .nl .mailpoet_form .mailpoet_form_column{gap:18px;}
  .nl .mailpoet_submit,
  .nl .mailpoet_form input[type="submit"]{width:100%; text-align:center;}
}

/* ---------- 17. FRIENDS CLUB ---------- */
.club{background:var(--ink); color:var(--paper);}
.club .label{color:var(--rose);}
.club h2, .club h3{color:var(--white);}
.club p{color:rgba(247,241,230,0.72);}
.club .hand{color:#E3B7A6;}
.perks{display:grid; grid-template-columns:repeat(2,1fr); gap:44px; margin-top:60px;}
.perk{border-top:1px solid rgba(247,241,230,0.22); padding-top:22px;}
.perk .p-num{font-family:'Fraunces', serif; font-style:italic; font-size:1.5rem; color:var(--rose); display:block; margin-bottom:10px;}
.perk h4{font-family:'Fraunces', serif; font-style:italic; font-size:1.2rem; color:var(--white); font-weight:500; margin-bottom:8px;}
.perk p{font-size:0.94rem;}
.club-steps{
  display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:56px;
  font-family:'Karla', sans-serif; font-size:0.85rem; color:rgba(247,241,230,0.8);
}
.club-steps span{border:1px solid rgba(247,241,230,0.3); padding:10px 20px;}

/* ---------- 18. KONTAKTFORMULAR ---------- */
.kontakt-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start;}
.form-field{margin-bottom:26px;}
.form-field label{display:block; font-family:'Karla', sans-serif; font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); margin-bottom:8px;}
.form-field input, .form-field select, .form-field textarea{
  width:100%; border:none; border-bottom:1px solid var(--line); background:none; padding:8px 0;
  font-family:'Newsreader', serif; font-size:1rem; color:var(--ink);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{outline:none; border-bottom-color:var(--rose-ink);}
.form-field textarea{resize:vertical; min-height:100px;}
.checkbox-row{display:flex; gap:10px; align-items:flex-start; font-size:0.85rem; color:var(--ink-soft); margin-bottom:26px;}
.checkbox-row input{width:auto; margin-top:6px;}
.btn-send{
  font-family:'Karla', sans-serif; font-weight:700; font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase;
  background:var(--rose-ink); color:var(--white); border:none; padding:15px 34px; cursor:pointer; transition:background .2s ease;
}
.btn-send:hover{background:var(--ink);}
/* .btn-send auf einem Gutenberg-Button-Block: die Klasse landet am
   .wp-block-button-Wrapper, nicht am <a> selbst - daher hier gezielt
   den inneren Link stylen (z.B. Download-Button auf freien Seiten). */
.wp-block-button.btn-send{background:none; padding:0;}
.wp-block-button.btn-send .wp-block-button__link{
  font-family:'Karla', sans-serif; font-weight:700; font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase;
  background:var(--rose-ink); color:var(--white); border:none; padding:15px 34px; transition:background .2s ease;
}
.wp-block-button.btn-send .wp-block-button__link:hover{background:var(--ink); color:var(--white);}
/* Auch als Bloecke nutzbar: im Original ein <dl>, auf der freien
   Seite Absaetze mit den Klassen k-titel / k-wert. */
.kontakt-info .k-titel,
.kontakt-info dt{font-family:'Karla', sans-serif; font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:700; color:var(--rose-ink); margin-bottom:5px;}
.kontakt-info .k-wert,
.kontakt-info dd{margin-bottom:24px; color:var(--ink-soft);}

/* ---------- 19. GALERIE ---------- */
.galerie{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:50px;}
.galerie img{aspect-ratio:3/4; transition:opacity .3s ease;}
/* Genau zwei Bilder sollen sich die Breite teilen, statt links zu kleben und
   rechts eine leere dritte Spalte offen zu lassen. Zaehlt automatisch mit -
   sobald ein drittes Bild dazukommt, greift wieder das Dreierraster. */
.galerie:has(figure:nth-of-type(2):last-of-type){ grid-template-columns:repeat(2,1fr); }
/* Genau vier Bilder (z.B. Ueber-mich-Seite: Studio + 3 Fotos) als
   2x2-Raster statt 3+1 mit Luecke. */
.galerie:has(figure:nth-of-type(4):last-of-type),
.galerie:has(img:nth-of-type(4):last-of-type){ grid-template-columns:repeat(2,1fr); }
/* Zwoelf Bilder werden zum Viererraster - drei volle Reihen ohne Rest.
   Nur ab Tablet aufwaerts: die Regel ist spezifischer als die Handy-Regel
   weiter unten und wuerde sonst auch dort greifen - vier Spalten auf einem
   375px-Display waeren 78px breite Kacheln. */
@media(min-width:901px){
  .galerie:has(figure:nth-of-type(12):last-of-type){ grid-template-columns:repeat(4,1fr); }
}
.galerie img:hover{opacity:0.85;}

/* ---------- 20. CTA-BAND ---------- */
.cta-band{background:var(--paper-deep); text-align:center; padding:90px 0;}
.cta-band h2{font-size:clamp(1.7rem,2.8vw,2.2rem); font-style:italic; margin-bottom:16px;}
.cta-band p{color:var(--ink-soft); max-width:460px; margin:0 auto 28px;}

/* ---------- 21. FOOTER ---------- */
footer{padding:60px 0 34px; border-top:1px solid var(--line);}
.f-inner{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; align-items:flex-start;}
.f-inner .logo .mark{font-size:1.3rem;}
.f-links{display:flex; gap:40px; flex-wrap:wrap; font-family:'Karla', sans-serif;}
.f-col h4{font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:12px; font-weight:700;}
.f-col a{display:block; font-size:0.85rem; margin-bottom:9px; color:var(--ink-soft);}
.f-col a:hover{color:var(--rose-ink);}
.f-bottom{
  margin-top:44px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-family:'Karla', sans-serif; font-size:0.74rem; color:var(--ink-soft);
}

/* ---------- 22. RESPONSIVE ---------- */
@media (max-width:900px){
  /* --- Burger-Menue --- */
  .nav-toggle{display:block;}
  nav{padding:20px 0;}
  .nav-links{
    position:fixed; top:0; right:0; bottom:0; z-index:50;
    width:min(320px, 84vw);
    background:var(--paper); border-left:1px solid var(--line);
    box-shadow:-18px 0 40px rgba(43,36,32,0.16);
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    gap:0; flex-wrap:nowrap; overflow-y:auto;
    padding:92px 32px 40px;
    transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1);
    visibility:hidden;
  }
  body.nav-open .nav-links{transform:none; visibility:visible;}
  body.nav-open{overflow:hidden;}
  .nav-links li{width:100%; border-bottom:1px solid var(--line);}
  .nav-links li:last-child{border-bottom:none; margin-top:22px;}
  .nav-links a{display:block; padding:16px 0; font-size:0.82rem; letter-spacing:0.1em;}
  .nav-links a.active{border-bottom:none; padding-bottom:16px;}
  .nav-links li:last-child a{
    padding:14px 18px; border:1px solid var(--clay); color:var(--clay); text-align:center;
  }

  /* Mobil zuerst das Bild, dann der Text: Besucher sehen sofort eine
     Fotografie statt nur Fliesstext. Das Bild ist bewusst niedriger,
     damit die Ueberschrift knapp darunter noch angeschnitten wird. */
  .hero{grid-template-columns:1fr; min-height:0; max-width:none; padding:0;}
  .hero-img{order:-1; padding:22px 24px 0;}
  .hero-img img{min-height:0; height:auto; max-height:52vh; width:100%; object-fit:cover;}
  .hero-img .frame{height:auto;}
  .hero-text{border-right:none; padding:34px 24px 50px;}
  .marginalie{padding:48px 22px 52px;}
  .kapitel{grid-template-columns:1fr; gap:32px; padding:40px 0;}
  /* Seitenkopf mobil kompakter halten. */
  .page-head{padding:48px 22px 24px;}
  /* Der Abschnitt direkt unter dem Seitenkopf braucht keinen zweiten
     Abstand nach oben - sonst klafft mobil eine grosse Luecke, weil
     Abschnitt UND Bild-Text-Block je einen mitbringen. */
  .np-blocks .page-head + .np-section{padding-top:0;}
  .kapitel.flip .k-img, .kapitel.flip .k-text{order:0;}
  .mini-inner, .kontakt-grid{grid-template-columns:1fr; gap:40px;}
  .ablauf{grid-template-columns:1fr; gap:28px;}
  .perks{grid-template-columns:1fr; gap:26px;}
  .saison{grid-template-columns:repeat(2,1fr);}
  .galerie{grid-template-columns:repeat(2,1fr);}
  .thread{display:none;}
  .thread-mobile{display:block; margin-top:50px; position:relative; padding-left:26px;}
  .thread-mobile::before{content:""; position:absolute; left:4px; top:4px; bottom:4px; width:1px; background:var(--line);}
  .tm-item{position:relative; padding-bottom:28px;}
  .tm-item::before{content:""; position:absolute; left:-26px; top:6px; width:7px; height:7px; border-radius:50%; background:var(--rose-ink);}
}
@media (max-width:640px){
  section{padding:64px 0;}#kapitel,.postkarten,#kapitel + .wp-block-group{padding:64px 0;}  /* Nur links/rechts - ein Kurzschreibweise-padding wuerde hier die
     vertikalen Abstaende von .page-head mit ueberschreiben, und der
     Seitenkopf klebte dann direkt am Menue. */
  .wrap, .wrap-narrow{padding-left:22px; padding-right:22px;}
  .item-name{font-size:1.05rem;}
  .item-price{font-size:1rem;}
  .postcard{width:82%; margin-top:0 !important; transform:none !important;}
  .frame.tilt, .frame.tilt-left{transform:none;}
}

/* ---------- 23. BEWEGUNG (dezente Animationen) ----------
   Grundsatz: nichts blinkt, nichts springt. Inhalte steigen beim Scrollen
   sanft auf, Fotos legen sich wie im Album leicht schraeg hin. Alles laeuft
   ueber opacity/transform (GPU) und respektiert die Systemeinstellung
   "Bewegung reduzieren". Ohne JavaScript bleibt alles sichtbar. */

@media (prefers-reduced-motion: no-preference){

  /* --- Scroll-Reveal: sanft aufsteigen und einblenden --- */
  .np-anim .np-reveal{
    opacity:0; transform:translateY(18px);
    transition:opacity .85s ease, transform .85s cubic-bezier(.22,.61,.36,1);
  }
  .np-anim .np-reveal.is-in{opacity:1; transform:none;}

  /* Gestaffelt, damit Karten/Schritte/Galerien nacheinander eintrudeln */
  .np-anim .np-reveal[data-np-d="1"]{transition-delay:.10s;}
  .np-anim .np-reveal[data-np-d="2"]{transition-delay:.20s;}
  .np-anim .np-reveal[data-np-d="3"]{transition-delay:.30s;}
  .np-anim .np-reveal[data-np-d="4"]{transition-delay:.40s;}
  .np-anim .np-reveal[data-np-d="5"]{transition-delay:.50s;}

  /* --- Seitenkopf & Hero: gleich beim Laden einblenden (ohne Observer) --- */
  .np-anim .page-head > *,
  .np-anim .hero-text > *{
    opacity:0; animation:npFadeUp .9s cubic-bezier(.22,.61,.36,1) forwards;
  }
  .np-anim .page-head > :nth-child(1),
  .np-anim .hero-text > :nth-child(1){animation-delay:.05s;}
  .np-anim .page-head > :nth-child(2),
  .np-anim .hero-text > :nth-child(2){animation-delay:.16s;}
  .np-anim .page-head > :nth-child(3),
  .np-anim .hero-text > :nth-child(3){animation-delay:.27s;}
  .np-anim .page-head > :nth-child(4),
  .np-anim .hero-text > :nth-child(4){animation-delay:.38s;}
  .np-anim .hero-text > :nth-child(5){animation-delay:.49s;}
  @keyframes npFadeUp{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}

  /* --- Fotorahmen: legen sich beim Erscheinen leicht schraeg hin --- */
  @media (min-width:641px){
    .np-anim .np-reveal .frame.tilt{transform:rotate(0deg); transition:transform 1s cubic-bezier(.22,.61,.36,1) .12s;}
    .np-anim .np-reveal.is-in .frame.tilt{transform:rotate(0.6deg);}
    .np-anim .np-reveal .frame.tilt-left{transform:rotate(0deg); transition:transform 1s cubic-bezier(.22,.61,.36,1) .12s;}
    .np-anim .np-reveal.is-in .frame.tilt-left{transform:rotate(-0.7deg);}
  }

  /* --- Sticker am Foto: klebt sich zum Schluss fest --- */
  .np-anim .np-reveal .cap{
    opacity:0; transform:rotate(-7deg) scale(.94);
    transition:opacity .5s ease .55s, transform .6s cubic-bezier(.34,1.4,.64,1) .55s;
  }
  .np-anim .np-reveal.is-in .cap{opacity:1; transform:rotate(-1.5deg) scale(1);}

  /* --- Textlinks: winziger Schubs nach vorne, passend zum Pfeil --- */
  .textlink{transition:opacity .2s ease, transform .2s ease;}
  .textlink:hover{transform:translateX(3px);}
  .nav-links .textlink:hover{transform:none;}

  /* --- Galeriebilder: unmerkliches Naeherkommen beim Hover --- */
  .galerie img{transition:opacity .3s ease, transform .5s cubic-bezier(.22,.61,.36,1);}
  .galerie img:hover{transform:scale(1.015);}

  /* --- FAQ: Antwort faehrt beim Aufklappen weich aus --- */
  /* Statt "+" gegen "–" zu tauschen, dreht sich hier dasselbe Plus zum Kreuz. */
  .faq-item summary::after{display:inline-block; transition:transform .3s cubic-bezier(.22,.61,.36,1);}
  .faq-item[open] summary::after{content:"+"; transform:rotate(45deg);}
  .faq-item[open] p{animation:npFaqIn .4s ease both;}
  @keyframes npFaqIn{from{opacity:0; transform:translateY(-5px);} to{opacity:1; transform:none;}}
}

/* ---------- 24. STANDARDSEITEN, RECHTSLINKS, EMBEDS ----------
   Seiten ohne eigenes "NP -" Template (Impressum, Datenschutz,
   Cookie-Richtlinie) laufen ueber page.php und geben den ganz normalen
   WordPress-Inhalt aus. Damit der nicht nackt wirkt, bekommt er hier
   dieselbe Typografie wie der Rest der Seite. */

.np-page{padding-bottom:40px;}
.np-page h2{font-family:'Fraunces',serif; font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,3vw,2.1rem); color:var(--ink); margin:44px 0 14px;}
.np-page h3{font-family:'Fraunces',serif; font-style:italic; font-weight:400;
  font-size:1.25rem; color:var(--ink); margin:32px 0 10px;}
.np-page h4{font-family:'Karla',sans-serif; text-transform:uppercase;
  letter-spacing:.14em; font-size:.76rem; color:var(--clay); margin:26px 0 8px;}
.np-page p, .np-page li{font-family:'Newsreader',serif; font-size:1.02rem;
  line-height:1.85; color:var(--ink); margin-bottom:14px;}
.np-page ul, .np-page ol{padding-left:22px; margin-bottom:20px;}
.np-page li{margin-bottom:6px;}
.np-page a{color:var(--rose-ink); text-underline-offset:3px;}
.np-page a:hover{color:var(--clay);}
.np-page table{width:100%; border-collapse:collapse; margin:20px 0; font-size:.95rem;}
.np-page th, .np-page td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line);}
.np-page th{font-family:'Karla',sans-serif; text-transform:uppercase;
  letter-spacing:.1em; font-size:.72rem; color:var(--clay);}
.np-page img{max-width:100%; height:auto;}
.np-page hr{border:0; border-top:1px solid var(--line); margin:36px 0;}
.np-page blockquote{border-left:2px solid var(--rose); padding-left:18px;
  margin:24px 0; font-style:italic; color:var(--ink-soft);}

/* Rechtslinks im Footer - jetzt echte Links statt reiner Text */
.f-legal a{color:inherit; text-decoration:none; border-bottom:1px solid transparent;}
.f-legal a:hover{border-bottom-color:currentColor;}

/* Externe Einbettungen (Calendly): erst nach Klick laden.
   Vorher steht hier eine Karte im Album-Stil - kein Fremd-Request, kein Cookie. */
/* Der Buchungskalender darf breiter sein als der Lesetext drumherum -
   ab etwa 900px zeigt Calendly Monat und Uhrzeiten nebeneinander statt
   untereinander, das ist deutlich leichter zu lesen. */
.np-embed{border:1px solid var(--line); background:var(--white); border-radius:2px;
  max-width:1000px; margin:0 auto;}
.np-embed-ph{padding:38px 30px; text-align:center;}
.np-embed-ph h4{font-family:'Fraunces',serif; font-style:italic; font-weight:400;
  font-size:1.3rem; color:var(--ink); margin-bottom:12px;}
.np-embed-ph p{font-family:'Newsreader',serif; font-size:.98rem; line-height:1.75;
  color:var(--ink-soft); max-width:46ch; margin:0 auto;}
.np-embed-ph a{color:var(--rose-ink);}
.np-embed-btn{margin-top:22px; font-family:'Karla',sans-serif; text-transform:uppercase;
  letter-spacing:.14em; font-size:.74rem; font-weight:600;
  background:var(--clay); color:var(--paper); border:0; border-radius:2px;
  padding:14px 26px; cursor:pointer; transition:background .25s ease, transform .2s ease;}
.np-embed-btn:hover{background:var(--rose-ink); transform:translateY(-1px);}
.np-embed-btn:focus-visible{outline:2px solid var(--rose-ink); outline-offset:3px;}
/* Hoehe hier statt im Skript, damit sie je nach Bildschirm anders sein kann.
   Schmal braucht Calendly mehr Hoehe, weil dann alles untereinander steht. */
.np-embed .calendly-inline-widget{background:var(--white); min-width:320px; height:740px;}
@media(max-width:900px){
  .np-embed .calendly-inline-widget{height:1040px;}
}

/* ---------- 21. FREITEXT AUS DEM WP-EDITOR ---------- */
/* Alles, was im Block-Editor der jeweiligen Seite steht, landet hier.
   Bleibt der Editor leer, wird der ganze Abschnitt gar nicht ausgegeben. */
.np-freitext{ padding:70px 0; }
.np-freitext .wrap-narrow{ max-width:720px; }
.np-freitext h2{
  font-family:'Fraunces', serif; font-style:italic; font-weight:400;
  font-size:2rem; color:var(--ink); margin:0 0 18px;
}
.np-freitext h3{
  font-family:'Fraunces', serif; font-style:italic; font-weight:400;
  font-size:1.5rem; color:var(--ink); margin:34px 0 14px;
}
.np-freitext h4{
  font-family:'Karla', sans-serif; font-size:1rem; font-weight:600;
  letter-spacing:0.04em; color:var(--ink); margin:28px 0 10px;
}
.np-freitext p{ color:var(--ink-soft); line-height:1.75; margin:0 0 18px; }
.np-freitext ul, .np-freitext ol{ color:var(--ink-soft); line-height:1.75; padding-left:22px; margin:0 0 18px; }
.np-freitext li{ margin-bottom:8px; }
.np-freitext a{ color:var(--rose-ink); }
.np-freitext img{ max-width:100%; height:auto; border-radius:2px; }
.np-freitext blockquote{
  border-left:2px solid var(--rose); padding-left:22px; margin:26px 0;
  font-family:'Fraunces', serif; font-style:italic; color:var(--ink);
}
@media(max-width:760px){ .np-freitext{ padding:50px 0; } }


/* ---------- KONTAKTFORMULAR: Rueckmeldung & Spamschutz ---------- */

/* Honigtopf: fuer Menschen unsichtbar, fuer Bots ein gefundenes Fressen.
   Bewusst NICHT display:none - manche Bots ignorieren genau das. */
.np-hp{
  position:absolute !important; left:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}

.np-formmeldung{
  margin:0 0 30px; padding:18px 22px; border-radius:2px;
  font-family:'Newsreader', serif; font-size:1rem; line-height:1.6;
  border-left:3px solid var(--clay); background:var(--paper-deep); color:var(--ink);
}
.np-formmeldung strong{ font-weight:600; }
.np-formmeldung a{ color:var(--rose-ink); }
.np-formmeldung.np-ok{ border-left-color:var(--clay); }
.np-formmeldung.np-fehler{ border-left-color:var(--rose-ink); background:var(--white); }

/* =========================================================
   FREIE SEITEN IM BLOCK-EDITOR
   ---------------------------------------------------------
   Template "NP - Freie Seite (volle Breite)".
   Das bestehende Design zielt auf Klassen (.kapitel, .frame,
   .postcard ...) - die bringen die Block-Vorlagen mit. Hier
   steht nur, was Gutenberg zusaetzlich mitbringt und was
   deshalb noch angeglichen werden muss.
   ========================================================= */

/* Gilt bewusst OHNE .np-blocks davor: dieselben Regeln muessen auch im
   Block-Editor greifen, und dort gibt es diesen Wrapper nicht. Sie treffen
   ausschliesslich Gutenberg-Markup (.wp-block-*), koennen also auf den
   normalen Textseiten nichts kaputt machen.

   Die wichtigste davon: Gutenberg schiebt in jede Gruppe einen
   zusaetzlichen Behaelter. Dadurch haette z. B. .kapitel nur EIN Kind
   statt der zwei Spalten und das Grid faellt zusammen. display:contents
   macht den Behaelter fuer das Layout durchsichtig. */
.wp-block-group__inner-container{ display:contents; }

/* Abstaende: das alte CSS haengt an <section>, Gutenberg liefert <div>. */
.np-section{ padding:100px 0; }
.np-section.np-tint{ background:var(--paper-deep); }
.np-section.np-narrow .wrap{ max-width:760px; }
.np-blocks > .np-section:first-child{ padding-top:40px; }

figure.wp-block-image{ margin:0; }
figure.wp-block-image img{ width:100%; display:block; }
.frame figure.wp-block-image{ line-height:0; }

/* Ueberschriften im Album-Stil (Gutenberg-Klassen mitnehmen). */
h2.wp-block-heading{
  font-family:'Fraunces', serif; font-style:italic; font-weight:400;
  font-size:clamp(1.8rem,3vw,2.4rem); line-height:1.14;
}
h3.wp-block-heading{ font-family:'Fraunces', serif; font-style:italic; font-weight:400; }
h4.wp-block-heading{ font-family:'Fraunces', serif; font-style:italic; font-weight:500; }

/* .label und .textlink sind hier <p> statt <span>. */
p.label{ display:block; margin-bottom:16px; }
/* .page-head p ist spezifischer als .label und wuerde die Ueberzeile
   sonst clay statt rose einfaerben. */
.page-head p.label{ color:var(--rose-ink); margin-bottom:18px; }
p.textlink{ border-bottom:0; padding-bottom:0; display:block; margin-top:22px; }
p.textlink a{
  font-family:'Karla', sans-serif; font-weight:600; font-size:0.82rem;
  border-bottom:1px solid var(--ink); padding-bottom:2px;
  display:inline-block; transition:opacity .2s ease;
}
p.textlink a:hover{ opacity:0.55; }

.m-row{ align-items:baseline; }
.m-row p{ margin:0; }
.postcard p:last-of-type{ margin-bottom:0; }
.cta-band p.textlink{ margin-top:0; }
/* margin:0 auto, NICHT margin:0 - sonst rutscht das Zitat aus der Mitte,
   weil .marginalie p oben eine Maximalbreite von 680px setzt. */
.marginalie p{ margin:0 auto; }
/* Saison-Karten: zwischen .saison-card und <img> liegt jetzt eine <figure>.
   Ohne Hoehe wuerde das Bild in sich zusammenfallen. */
.saison-card figure.wp-block-image{ height:100%; }
/* Kadence faerbt nackte <h4> ueber eine h4{color:...}-Regel ein, die
   staerker ist als die Vererbung von .saison-label. Der Titel stand
   dadurch dunkelbraun auf dem dunklen Verlauf - das war schon vor dem
   Umbau so und ist hier korrigiert. */
.saison-label h4{ color:var(--white); }
/* .club-steps stylt im Original <span>; als Block sind es Absaetze. */
.club-steps p{ border:1px solid rgba(247,241,230,0.3); padding:10px 20px; margin:0 !important; }
details.faq-item summary{ cursor:pointer; }
details.faq-item p{ margin-top:14px; }

/* Nur im Frontend: Absatzabstaende innerhalb der freien Seiten.
   Bewusst nur oben und unten. Ein "margin:0 0 18px" wuerde auch links und
   rechts auf 0 setzen und damit jedes "margin:0 auto" ueberschreiben, mit dem
   Seitenkopf, Zitat, CTA-Band und Einbettungs-Platzhalter zentriert werden -
   die Absaetze rutschen dann aus der Mitte. */
.np-blocks p{ margin-top:0; margin-bottom:18px; }
.np-blocks p:last-child{ margin-bottom:0; }

@media(max-width:900px){
  .np-section{ padding:64px 0; }
}


/* ---------- WEIHNACHTSMINIS: HINTERGRUNDANIMATION ---------- */
/* Die Animation ist auf 1920x1080 gezeichnet. Das Skript rechnet die
   Buehne formatfuellend auf die Containergroesse herunter und setzt dafuer
   --np-wm-scale/-x/-y. */
.np-wm-hero{ background:var(--paper); }
.np-wm-stage{
  position:relative; width:100%; max-width:1600px; margin:0 auto;
  aspect-ratio:12/5; max-height:min(760px, 70vh);
  overflow:hidden; background:#F4EFE6;
}
.np-wm-stage > div{
  transform: translate(var(--np-wm-x,0px), var(--np-wm-y,0px)) scale(var(--np-wm-scale,1));
  transform-origin: 0 0;
}
@media(max-width:900px){
  .np-wm-stage{ aspect-ratio:16/10; max-height:min(300px, 42vh); }
}

/* ---------- PREISE ALS BLOCK-SEITE ----------
   Die Preise-Seite ist eine normale Block-Seite (Template "Freie Seite").
   Gutenberg haengt Absaetzen eigene Abstaende an und schiebt einen
   Behaelter in jede Gruppe - deshalb hier Nachfahren- statt Kind-Selektoren
   und !important, damit die Preiskarte wie das Original-Layout aussieht. */
.preise-karte .cat-head h2,
.preise-karte .cat-head p,
.preise-karte .item-row p,
.preise-karte .bundle-head h3,
.preise-karte .bundle-head p{ margin:0 !important; }
.preise-karte .cat-head h2.wp-block-heading{ font-size:clamp(1.6rem,2.6vw,2.1rem); }
.preise-karte .cat-head{ margin-bottom:10px !important; }
.preise-karte .cat-note{ margin:0 0 40px !important; }
.preise-karte .item .item-row{ margin:0 0 10px !important; }
.preise-karte .item ul.item-includes{ margin:0 0 14px 20px !important; padding-left:0; }
.preise-karte p.textlink{ margin:0 !important; padding-bottom:3px; }
.preise-karte .bundle-head{ margin:0 0 10px !important; }
.preise-karte .bundle p.bundle-text{ margin:0 0 14px !important; }
.preise-karte .bundle .bundle-row{ margin:0 !important; }
.preise-karte .bundle p.textlink{ margin-top:14px !important; padding-bottom:0; }
.preise-karte .bundle .item-row p.item-name{ font-size:1.25rem; color:var(--ink); }
.preise-karte .bundle .item-row p.item-price{ font-size:1.15rem; color:var(--ink); }
.preise-karte .bundle-head p.bundle-save{ font-size:0.78rem; color:var(--rose-ink); }
.extras-row{ display:flex; justify-content:space-between; gap:30px; padding:8px 0; min-width:220px; }
.extras-row p{ margin:0 !important; }
.extras-inner .extras-list, .extras-inner p.extras-note{ margin:0 !important; }
.extras p.label{ margin:0; line-height:29.9px; }
.produkte-galerie{ margin-top:36px; }
.produkte-note{ max-width:720px; margin-top:24px; padding-bottom:21px; }
.produkte-note p{ color:var(--ink-soft); }
.preise-faq .kapitel-intro{ padding-bottom:44px; }
.preise-cta p.textlink{ padding-bottom:10px; }
.np-section.np-narrow.preise-faq .wrap{ max-width:720px; }
@media(max-width:640px){ .preise-karte .bundle .item-row p.item-name{ font-size:1.05rem; } .preise-karte .bundle .item-row p.item-price{ font-size:1rem; } }