/*
Theme Name: Nathalie Daxelhofer
Theme URI: https://nathalie-daxelhofer.com
Description: Child Theme für nathalie-daxelhofer.com. One-Pager plus Rechtsseiten. Nichts lädt von fremden Servern, keine Cookies, kein LocalStorage.
Author: Nathalie Daxelhofer
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
Text Domain: nathalie-daxelhofer
*/

/* ---------- Tokens ---------- */
:root{
  --paper:#f4efe7;
  --ink:#1f1c19;
  --muted:#6b6259;
  --legal:#3d3730;
  --rose:#a8506b;
  --rose-light:#c98a9a;
  --rose-fill:#f2dcdf;
  --rose-border:#e3c3c8;
  --hair:rgba(31,28,25,.18);
  --line:rgba(31,28,25,.35);
  --btn-text:#fff7f4;
  --placeholder:#9a8f83;
  --font-display:'Gilda Display',Georgia,serif;
  --font-body:'Brygada 1918',Georgia,serif;
  --font-mono:'Xanh Mono',monospace;
  /* Beschriftungen: echte Strichstärke. Xanh Mono hat nur eine Stärke und
     ist am Handy zu dünn. Zum Zurückdrehen hier wieder var(--font-mono)
     eintragen und die font-weight-Angaben auf 400 setzen. */
  --font-label:'Brygada 1918',Georgia,serif;
  --radius:14px;
}

/* ---------- Grundlagen ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink)}
body{
  font-family:var(--font-body);
  font-size:19px;
  line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rose-light);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--rose);text-decoration-color:var(--rose)}
input,textarea,select,button{font-family:inherit}
input::placeholder,textarea::placeholder{color:var(--placeholder)}
input:focus,textarea:focus{outline:none;border-color:var(--ink)}
::selection{background:var(--rose-fill)}
[hidden]{display:none !important}

.nd-skip{position:absolute;left:-9999px;top:0}
.nd-skip:focus{left:16px;top:16px;z-index:10;background:var(--paper);padding:10px 16px;border:1px solid var(--ink)}

/* ---------- Layout ---------- */
.nd-main{min-height:100vh;background:var(--paper);color:var(--ink)}
.nd-wrap{max-width:1120px;margin:0 auto;padding:0 clamp(20px,5vw,56px)}

.nd-mono{font-family:var(--font-label);font-weight:600;font-size:15px;letter-spacing:.04em}
.nd-mono-sm{font-family:var(--font-label);font-weight:500;font-size:15px;letter-spacing:.04em}
.nd-up{text-transform:uppercase}
.nd-muted{color:var(--muted)}

/* Kopfzeile */
.nd-head{padding-top:28px}
.nd-headbar{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--hair)}
.nd-headbar a{text-decoration:none;color:inherit}
.nd-headbar a:hover{color:var(--rose)}

/* Hero */
.nd-hero{display:flex;flex-wrap:wrap;gap:clamp(32px,5vw,72px);align-items:flex-end;padding:clamp(56px,9vw,120px) 0 clamp(48px,7vw,96px)}
.nd-hero__col{flex:3 1 420px;min-width:0}
/* „Seelenkommunikation" muss auf einer Zeile stehen, ungetrennt.
   Gemessen: das Wort ist in Gilda Display 9,924-mal so breit wie die
   Schriftgröße, in Georgia als Rückfall 9,706-mal. Gilda ist also der
   engere Fall. --h1-fit rechnet aus der verfügbaren Breite die größte
   Schriftgröße, bei der das Wort noch hineinpasst, mit dem Teiler 10,1
   als Sicherheitszuschlag von rund zwei Prozent. Die Typo-Skala des
   Handoffs bleibt die Obergrenze, greifen tut immer der kleinere Wert.
   Silbentrennung ist ausdrücklich abgeschaltet. */
.nd-h1{
  --h1-fit:calc((min(100vw,1120px) - 2 * clamp(20px,5vw,56px)) / 10.1);
  margin:0;font-family:var(--font-display);font-weight:400;
  font-size:min(clamp(46px,7.4vw,104px), var(--h1-fit));
  line-height:.98;letter-spacing:-.015em;text-wrap:balance;
  -webkit-hyphens:none;hyphens:none;overflow-wrap:normal
}
.nd-h1 em{font-style:italic;font-weight:300;color:var(--rose)}
/* Der Satz unter der Überschrift, im Stil des Janika-Zitats. */
.nd-heroline{margin:32px 0 0;max-width:720px;font-family:var(--font-display);font-weight:400;font-style:italic;font-size:clamp(30px,3.6vw,46px);line-height:1.1;letter-spacing:-.01em;text-wrap:balance;color:var(--rose)}
.nd-hero__intro{margin:36px 0 0;max-width:560px;font-size:clamp(20px,2vw,24px);line-height:1.5;font-weight:300;text-wrap:pretty}
.nd-hero__intro--folge{margin-top:20px}
/* Sprung zur Buchung. Gleiche Gestalt wie der Senden-Button des Formulars.
   Kein Scroll-Effekt, ein normaler Anker. */
.nd-cta{display:inline-flex;align-items:center;white-space:nowrap;margin:36px 0 0;border:1px solid var(--rose);background:var(--rose);color:var(--btn-text);padding:14px 32px;font-size:18px;border-radius:999px;text-decoration:none;min-height:44px;transition:all 180ms ease}
.nd-cta:hover{background:var(--ink);border-color:var(--ink);color:var(--btn-text);text-decoration:none}
.nd-cta:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.nd-cta--mitte{margin-top:28px}
.nd-hero__lang{margin:28px 0 0;font-family:var(--font-label);font-weight:500;font-size:16px;color:var(--legal);letter-spacing:.02em}
.nd-hero__lang span{color:var(--ink)}

/* Sektionen */
/* Randnotiz-Spalte und Spalten-Abstand schmaler als im Handoff (dort
   180/220px und bis 64px Abstand). Grund: der Textblock begann sonst erst
   bei 34 % der Bildschirmbreite, gemessen 494px von 1440px. Jetzt fängt er
   rund 70px weiter links an, die Randnotizen bleiben erhalten. */
.nd-section{border-top:1px solid var(--hair);padding:clamp(48px,6vw,80px) 0;display:flex;flex-wrap:wrap;gap:clamp(20px,2.4vw,40px)}
.nd-section--plain{display:block}
.nd-note{flex:1 1 150px;max-width:170px;font-family:var(--font-label);font-weight:600;font-size:16px;line-height:1.35;letter-spacing:.04em;text-transform:uppercase;color:var(--rose);padding-top:6px}
.nd-body{flex:4 1 460px;min-width:0;max-width:720px}
.nd-body--stack{display:grid;gap:56px}
.nd-body--stack-48{display:grid;gap:48px}
.nd-row{display:flex;flex-wrap:wrap;gap:clamp(20px,2.4vw,40px)}

/* Gilda Display gibt es nur in einer Stärke. Statt gefälschtem Fettdruck,
   der die Buchstaben seitlich verdoppelt, wird die Kontur gleichmäßig um
   einen halben Pixel nach außen gezogen. Zum Zurückdrehen --display-stroke
   auf 0 setzen. */
:root{--display-stroke:.5px}
h2.nd-h2{margin:0 0 18px;font-family:var(--font-display);font-weight:400;font-size:clamp(34px,3.6vw,46px);line-height:1.05;color:var(--rose);-webkit-text-stroke:var(--display-stroke) currentColor}
h3.nd-h3{margin:0 0 10px;font-family:var(--font-display);font-weight:400;font-size:26px;line-height:1.15;color:var(--rose);-webkit-text-stroke:var(--display-stroke) currentColor}
h3.nd-h3--28{font-size:28px;line-height:1.1}
h3.nd-h3--story{margin:32px 0 0;font-family:var(--font-display);font-weight:400;font-size:clamp(30px,3.2vw,38px);line-height:1.1;color:var(--rose);-webkit-text-stroke:var(--display-stroke) currentColor}
.nd-p{margin:0 0 20px;text-wrap:pretty}
.nd-p:last-child{margin-bottom:0}
.nd-p--28{margin:0 0 28px}
.nd-p--36{margin:0 0 36px}
.nd-strongline{font-weight:500}

/* Listen mit Gedankenstrich */
.nd-dashlist{margin:0 0 24px;padding:0;list-style:none;display:grid;gap:8px}
.nd-dashlist li{display:flex;gap:14px}
.nd-dashlist li span:first-child{color:var(--rose-light);flex:none}

/* Bilder */
.nd-figure{margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.nd-figure--hero{margin:0 0 clamp(48px,7vw,96px)}
.nd-frame{width:100%;min-width:0;max-width:100%;overflow:hidden;border-radius:var(--radius)}
.nd-frame img{width:100%;height:100%;object-fit:cover}
.nd-frame--21x9{aspect-ratio:21/9}
.nd-frame--21x9 img{object-position:center bottom}
.nd-frame--3x4{aspect-ratio:3/4}
.nd-frame--9x16{aspect-ratio:9/16}
.nd-frame--calimero img{object-position:50% 10%}
.nd-caption{font-family:var(--font-label);font-weight:500;font-size:15px;color:var(--legal)}
.nd-photos__label{margin:36px 0 12px;font-family:var(--font-label);font-weight:500;font-size:15px;color:var(--legal)}
.nd-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:16px}
.nd-figure--portrait{margin:20px 0 8px;gap:12px}

/* Einwilligungs-Box */
.nd-consentbox{background:var(--rose-fill);border:1px solid var(--rose-border);border-radius:var(--radius);padding:28px clamp(20px,3vw,32px)}
.nd-consentbox h3{margin:0 0 14px;font-family:var(--font-label);font-size:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.nd-consentbox__quote{margin:0 0 18px;padding-left:20px;border-left:1px solid var(--rose-light);font-style:italic;font-weight:300;font-size:21px;line-height:1.45}

/* Preisraster */
.nd-prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}
.nd-price{position:relative;background:var(--rose-fill);border:1px solid var(--rose-border);border-radius:var(--radius);padding:clamp(28px,3vw,40px);display:flex;flex-direction:column;gap:22px}
/* Ganze Karte anklickbar: der Link im Kartennamen legt sich unsichtbar über
   die Karte. Ein einziger Link, damit Vorlesesoftware nicht dreimal
   dasselbe ansagt. Ohne JavaScript springt er zum Formular, mit JavaScript
   wählt er zusätzlich das Format aus. */
.nd-price--klick{cursor:pointer;transition:border-color 180ms ease}
.nd-price--klick:hover{border-color:var(--rose)}
.nd-price__link{color:inherit;text-decoration:none}
.nd-price__link::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.nd-price--klick:hover .nd-price__link{color:var(--rose)}
.nd-price__link:focus-visible{outline:none}
.nd-price--klick:focus-within{border-color:var(--ink)}
.nd-price--klick:focus-within .nd-price__link{outline:2px solid var(--ink);outline-offset:3px}
.nd-price__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.nd-price__name{font-family:var(--font-label);font-weight:600;font-size:17px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.nd-price__value{font-family:var(--font-display);font-weight:400;font-size:44px;line-height:1}
.nd-price--fill .nd-price__value{color:var(--rose)}
.nd-price p{margin:0;text-wrap:pretty}
.nd-price p.nd-sub{color:var(--legal);font-size:17px}

/* Nummerierte Schritte und Zeilen mit Haarlinien */
.nd-steps{margin:0;padding:0;list-style:none;display:grid;gap:0}
.nd-steps li{display:flex;gap:20px;padding:14px 0;border-top:1px solid var(--hair)}
.nd-steps li:last-child{border-bottom:1px solid var(--hair)}
.nd-steps__num{font-family:var(--font-label);font-weight:600;font-size:16px;color:var(--rose);flex:none;width:24px;padding-top:5px}
.nd-lines{margin:0 0 32px;padding:0;list-style:none;display:grid;gap:0}
.nd-lines li{padding:14px 0;border-top:1px solid var(--hair)}
.nd-lines li:last-child{border-bottom:1px solid var(--hair)}
.nd-lines strong,.nd-dl dt{font-weight:500}
.nd-dl{margin:0;display:grid;gap:16px}
.nd-dl dt{display:inline}
.nd-dl dd{display:inline;margin:0}

/* Geschichte */
.nd-story{flex:4 1 460px;min-width:0;max-width:720px;display:grid;gap:22px;font-size:20px;line-height:1.6}
.nd-story p{margin:0;text-wrap:pretty}
/* Janika-Zitat: kleiner als die Zwischenüberschriften, damit es als Zitat
   und nicht als Überschrift gelesen wird. Vorher bis 52px. */
.nd-quote{margin:16px 0;padding:0;font-family:var(--font-display);font-weight:400;font-style:italic;font-size:clamp(24px,2.8vw,34px);line-height:1.25;letter-spacing:-.01em;text-wrap:balance;color:var(--rose)}
.nd-story__punch{margin:12px 0;font-family:var(--font-display);font-weight:400;font-size:clamp(30px,3.4vw,42px);line-height:1.15;color:var(--rose)}

/* Stimmen */
.nd-quotes{display:grid;gap:16px}
.nd-quotecard{margin:0;padding:28px clamp(20px,3vw,32px);background:var(--rose-fill);border:1px solid var(--rose-border);border-radius:var(--radius);display:flex;flex-direction:column;gap:18px}
.nd-quotecard p{margin:0;font-family:var(--font-display);font-size:clamp(21px,2vw,25px);line-height:1.35;color:var(--ink);text-wrap:pretty}
.nd-quotecard footer{font-family:var(--font-label);font-weight:500;font-size:15px;color:var(--legal)}
/* Sterne, gezeichnet statt Emoji, damit sie zur Typografie passen. */
.nd-sterne{display:flex;gap:4px;line-height:0}
.nd-sterne svg{width:18px;height:18px;fill:var(--rose);display:block}
.nd-quotes__note{margin:24px 0 0;font-size:16px;color:var(--muted);text-wrap:pretty}

/* Formular */
.nd-form{display:grid;gap:28px}
.nd-field2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px}
.nd-label{display:grid;gap:8px}
.nd-label__text,.nd-legend{font-family:var(--font-label);font-weight:600;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--rose)}
.nd-input{border:0;border-bottom:1px solid var(--line);background:transparent;padding:8px 0;font-size:19px;color:var(--ink);width:100%;border-radius:0}
.nd-input:focus{border-bottom-color:var(--ink)}
.nd-textarea{border:1px solid var(--line);background:transparent;padding:12px 14px;font-size:19px;line-height:1.5;color:var(--ink);width:100%;resize:vertical;border-radius:0}
.nd-fieldset{border:0;margin:0;padding:0;display:grid;gap:10px}
.nd-chips{display:flex;flex-wrap:wrap;gap:8px}
.nd-chip{display:inline-flex}
.nd-chip input{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.nd-chip span{border:1px solid var(--line);background:transparent;color:var(--ink);padding:9px 18px;font-size:17px;border-radius:999px;cursor:pointer;transition:all 180ms ease;display:inline-flex;align-items:center;min-height:44px;text-align:left}
.nd-chip input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.nd-chip input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}
.nd-checks{display:grid;gap:14px;padding-top:8px;border-top:1px solid var(--hair);font-size:17px;line-height:1.55;color:var(--ink)}
.nd-check{display:flex;gap:14px;align-items:flex-start;cursor:pointer}
.nd-check input{margin-top:5px;accent-color:var(--rose);flex:none;width:16px;height:16px}
.nd-submitrow{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.nd-submit{border:1px solid var(--rose);background:var(--rose);color:var(--btn-text);padding:14px 32px;font-size:18px;border-radius:999px;cursor:pointer;transition:all 180ms ease;min-height:44px}
.nd-submit:hover{background:var(--ink);border-color:var(--ink)}
.nd-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nd-error{margin:0;color:var(--rose);font-size:17px}
.nd-error ul{margin:8px 0 0;padding-left:20px}
.nd-sent{border:1px solid var(--rose-light);padding:32px;font-family:var(--font-display);font-size:30px;font-weight:300;line-height:1.2}

/* Rechtliches auf der Startseite */
.nd-legalnotes{flex:4 1 460px;min-width:0;max-width:720px;display:grid;gap:28px;font-size:18px;line-height:1.6;color:var(--ink)}
.nd-legalnotes h3{margin:0 0 8px;font-family:var(--font-label);font-size:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--rose)}
.nd-legalnotes p{margin:0;text-wrap:pretty}

/* Footer */
.nd-footer{border-top:1px solid var(--hair);padding:32px 0 48px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--font-label);font-weight:500;font-size:15px;color:var(--legal)}
.nd-footer a{color:var(--muted);text-decoration:none}
.nd-footer a:hover{color:var(--ink)}
.nd-footer nav{display:flex;gap:18px;flex-wrap:wrap}

/* Rechtsseiten */
.nd-legalpage{padding:clamp(48px,6vw,80px) 0;display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,64px);border-top:1px solid var(--hair)}
.nd-legalpage__body{flex:4 1 460px;min-width:0;max-width:720px;font-size:18px;line-height:1.6;color:var(--ink)}
.nd-legalpage__body h1{margin:0 0 32px;font-family:var(--font-display);font-weight:400;font-size:clamp(34px,3.6vw,46px);line-height:1.05;color:var(--rose);-webkit-text-stroke:var(--display-stroke) currentColor}
.nd-legalpage__body h2{margin:36px 0 12px;font-family:var(--font-display);font-weight:400;font-size:26px;line-height:1.15;color:var(--rose);-webkit-text-stroke:var(--display-stroke) currentColor}
.nd-legalpage__body h3{margin:28px 0 10px;font-family:var(--font-label);font-size:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--rose)}
.nd-legalpage__body p{margin:0 0 16px;text-wrap:pretty}
.nd-legalpage__body ul{margin:0 0 16px;padding-left:20px;display:grid;gap:6px}
.nd-legalpage__body blockquote{margin:16px 0;padding:20px clamp(18px,3vw,28px);background:var(--rose-fill);border:1px solid var(--rose-border)}
.nd-legalpage__body blockquote p:last-child{margin-bottom:0}
.nd-legalpage__body strong{font-weight:500}
.nd-back{margin:40px 0 0;font-family:var(--font-label);font-weight:600;font-size:16px;letter-spacing:.04em}

/* Responsiv */
@media (max-width:700px){
  body{font-size:18px}
  .nd-story{font-size:19px}
  .nd-note{max-width:none;flex-basis:100%;padding-top:0;font-size:17px}
  .nd-price__value{font-size:38px}
  .nd-sent{font-size:26px;padding:24px}
}