/* Unterseiten der hellen Familie im Aussehen der Gestaltung F (Bauvorschlag zwei Gestaltungen v2, Stufe 1; Terminal W).
   Geladen von rahmen/f-stil.inc nach style.css und f-rahmen.css. Die Seiten selbst bleiben unveraendert (Texte je
   einmal); hier stehen nur Regeln, die ihre Klassen wie die F-Startseite darstellen, mit den Bausteinen von F:
   Karten (weiss mit Linie und Schatten, Salbei ohne), Rundung --f-radius/--f-radius-klein, Eyebrow in Terra,
   Fraunces fuer Ueberschriften, Knoepfe mit 7 px Rundung. Dunkelmodus ueber data-theme (f-rahmen.css). */

/* ---------- 1. Werte von style.css auf F legen (hell und dunkel ueber die F-Variablen aus f-rahmen.css).
   :root.dark: Seitenskripte setzen html.dark noch selbst; die F-Werte gelten trotzdem. ---------- */
:root,:root.dark{
  --clr-primary:var(--accent);--clr-primary-light:color-mix(in srgb,var(--accent) 80%,var(--surface));
  --clr-primary-pale:var(--soft);--clr-accent:var(--f-streifen);--clr-accent-pale:var(--peach);
  --clr-bg:var(--paper);--clr-bg-warm:var(--paper);--clr-surface:var(--surface);--clr-dark:#1f3b30;
  --clr-text:var(--ink);--clr-text-body:var(--ink);--clr-text-muted:var(--muted);--clr-border:var(--line);
  --shadow-sm:none;--shadow-md:var(--f-schatten);--shadow-lg:var(--f-schatten);--shadow-xl:var(--f-schatten);
  --radius-sm:6px;--radius-md:7px;--radius-lg:var(--f-radius-klein);--radius-xl:var(--f-radius)}
:root[data-theme=dark],:root[data-theme=dark].dark{--clr-dark:#0c1711;--clr-accent:#e5a27c}

/* ---------- 2. Schrift und Ueberschriften wie auf der F-Startseite (site.css + refinement.css) ---------- */
body{background:var(--paper);color:var(--ink);font-family:'Outfit',sans-serif;line-height:1.7}
body::after{display:none}   /* Kornraster der hellen Familie: F hat keines */
h1,h2,h3,h4{color:var(--ink)}
h1,h2{font-family:'Fraunces',Georgia,serif;font-weight:400;letter-spacing:-.035em;line-height:1.17;text-wrap:balance}
h1 em,h2 em{font-style:normal;color:var(--accent)}
h3{font-family:'Outfit',sans-serif;font-weight:500;letter-spacing:-.02em}
a{text-underline-offset:5px}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--terra);outline-offset:4px}
.container{max-width:1160px}
.skip-nav{z-index:60;border-radius:7px}   /* Sprunglink der Seiten bleibt (ausserhalb des Kopf-Blocks), ueber dem F-Kopf */

/* ---------- 3. Seitenkopf wie die Unterseiten von F (Fassung B: .page-hero) -- linksbuendig, ohne Verlauf ---------- */
.subpage-hero{text-align:left;padding:56px 0 44px}
.subpage-hero .hero-bg{display:none}
.subpage-hero h1{font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:1.15;margin-bottom:0;max-width:960px}
.subpage-hero .lead{margin:22px 0 0;max-width:700px;font-size:1.12rem;line-height:1.65;color:var(--muted);text-wrap:pretty}
.subpage-hero .badge{margin-bottom:18px}
/* Kopf und Inhalt an derselben linken Kante: Lesebreite wie der Inhalt darunter */
.subpage-hero .container{max-width:800px}
body:has(.subpage-content--wide) .subpage-hero .container{max-width:900px}
body:has(.subpage-content--pricing) .subpage-hero .container{max-width:1120px}

/* Ueber mich: Foto links, Text rechts wie die Karte "Hi, ich bin Alexander" der F-Startseite (f.css .f-ich).
   Das Bild traegt margin-top als style-Attribut, darum !important. */
.about-intro{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:32px;align-items:center;text-align:left;margin-bottom:24px}
.about-intro .badge{grid-column:2;justify-self:start}
.about-intro .about-photo{grid-column:1;grid-row:1 / span 3;width:150px;height:150px;margin:0!important;border:0;box-shadow:none}
.about-intro h1,.about-intro .lead{grid-column:2}
.about-intro h1{hyphens:manual}   /* sonst "Prax-ido" am Handy; die Woerter hier passen ohne Trennung */
@media (max-width:600px){
  .about-intro{grid-template-columns:1fr}
  .about-intro .badge,.about-intro h1,.about-intro .lead{grid-column:1}
  .about-intro .about-photo{grid-row:auto;width:110px;height:110px;margin-bottom:18px!important}
}

/* Eyebrow-Pille (Fassung B: .pill/.badge) */
.badge{border-radius:50px;padding:4px 11px;background:var(--peach);color:var(--peach-ink);font-size:.73rem;font-weight:600;letter-spacing:.08em}

/* ---------- 4. Karten wie F: weiss mit feiner Linie und Schatten, Rundung --f-radius ---------- */
.legal-card,.story-card,.glass-card,.vision-card,.pricing-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--f-radius);
  box-shadow:var(--f-schatten)}
.legal-card{padding:44px 48px}
.story-card{padding:40px 44px}
.glass-card{backdrop-filter:none}
.perspective-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--f-radius-klein);box-shadow:none}
.perspective-card:hover{transform:none;box-shadow:var(--f-schatten)}
.perspective-icon{color:var(--terra)}
.contact-box{background:var(--soft);border:0;border-radius:var(--f-radius-klein)}

/* Rechtstexte: Abschnitte wie .prose von F */
.legal-section h2,.impressum-section h2{font-family:'Fraunces',Georgia,serif;font-weight:400;color:var(--ink);font-size:clamp(1.45rem,2.2vw,1.85rem);
  line-height:1.25;letter-spacing:-.03em;border-bottom:0;padding-bottom:0;margin-bottom:16px}
.legal-section h3{font-family:'Outfit',sans-serif;font-weight:500;color:var(--ink)}
.legal-section+.legal-section{margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}
.legal-section p,.legal-list,.legal-section li{color:var(--ink)}
.legal-link{color:var(--accent);text-underline-offset:4px}
.legal-link:hover{color:var(--ink)}
.legal-footer{border-top-color:var(--line);color:var(--muted)}
/* .subpage-content davor: einige Seiten (sicherheit) setzen den Rahmen im eigenen <style>-Block */
.draft-note,.subpage-content .draft-note{background:var(--peach);color:var(--peach-ink);border:0;border-left:3px solid var(--terra);border-radius:8px;padding:20px 24px}

/* Seiten ohne .subpage-hero (funktionen, faq, hilfe): Kopfabstand und Mittelung stehen als style-Attribut im
   Abschnitt (8rem fuer den festen Kopf der hellen Familie). Im F-Rahmen klebt der Kopf, darum wie die anderen
   Unterseiten: 56 px oben, Titel und Einleitung linksbuendig. */
.section[style*="padding-top: 8rem"]{padding-top:56px!important;min-height:0!important}
.section[style*="padding-top: 8rem"] h1,
.section[style*="padding-top: 8rem"] h1 + p,
.section[style*="padding-top: 8rem"] .container > div[style*="text-align: center"]{text-align:left!important}
.section[style*="padding-top: 8rem"] h1{font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:1.15}
@media (max-width:768px){.section[style*="padding-top: 8rem"]{padding-top:36px!important}}

/* ---------- Formularfelder wie die Newsletter-Karte von F (newsletter-karte.css: .f-feld input) ---------- */
.form-group input:not([type=checkbox]):not([type=radio]),.form-group select,.form-group textarea,
.umf-email,.modal input[type=email],.modal input[type=text]{min-height:48px;box-sizing:border-box;padding:11px 14px;border:1px solid var(--line);
  border-radius:7px;background:var(--paper);color:var(--ink);font:inherit;box-shadow:none}
.form-group input:focus-visible,.umf-email:focus-visible,.modal input:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 40%,transparent);
  outline-offset:1px;border-color:var(--accent)}
.form-group label{color:var(--ink);font-weight:600}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}

/* ---------- 5. Knoepfe wie F: Rundung 7 px, ohne Schatten und ohne Sprung ---------- */
.btn{border-radius:7px;font-weight:500;min-height:48px;padding:12px 22px;box-shadow:none}
.btn:hover{transform:none}
.btn-primary{background:var(--accent);color:var(--accent-text);border:1px solid var(--accent);box-shadow:none}
.btn-primary:hover{background:var(--accent);color:var(--accent-text);filter:brightness(1.06);box-shadow:none;transform:none}
.btn-outline,.btn-print{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-outline:hover,.btn-print:hover{background:transparent;border-color:var(--accent);color:var(--accent);transform:none}
.btn-sm{min-height:40px;padding:8px 16px;font-size:.85rem}

/* ---------- 6. download.html: das dunkle Band "Kostenlos starten" wird eine Salbei-Karte (F: Karten statt Baender) ---------- */
.download{background:transparent;color:var(--ink);padding:64px 0}
.download::before{display:none}
.download-inner{max-width:760px;background:var(--soft);border-radius:var(--f-radius);padding:44px 48px}
.download-inner h2{color:var(--ink)}
.download-inner>p,.download-social-proof,.download-note{color:var(--muted)}
.download-note a,.download-inner>p a{color:var(--accent)}
.badge--on-dark{background:var(--peach);color:var(--peach-ink);border-color:transparent}
.btn-light{background:var(--accent);color:var(--accent-text);border:1px solid var(--accent);box-shadow:none}
.btn-light:hover{background:var(--accent);color:var(--accent-text);filter:brightness(1.06);box-shadow:none;transform:none}
.btn-mac{background:transparent;color:var(--ink);border:1px solid var(--ink);box-shadow:none}
.btn-mac:hover{background:transparent;color:var(--accent);border-color:var(--accent);box-shadow:none;transform:none}

@media (max-width:768px){
  .download{padding:40px 0}
  .download-inner{padding:28px 22px}
  .subpage-hero{padding:36px 0 28px}
  .legal-card,.story-card{padding:28px 22px}
}
/* style.css nimmt dem .container unter 481 px den Rand auf 1rem zurueck, dem Inhalt (.subpage-content) nicht:
   Kopf und Karte stehen dann um 8 px versetzt. Beide auf denselben Rand. */
@media (max-width:480px){
  .subpage-hero .container,.subpage-content{padding-inline:1rem}
}