/* =====================================================================
   MosiVox — Stylesheet
   CI aus dem Logo gezogen · ruhig, luftig, „Atem-Phrasierung"
   ===================================================================== */

:root{
  /* Wandfarben aus Lisas Praxis: Vanille & Cognac, wechselnd wie im Raum
     – bewusst nur ein leichter Unterschied zwischen den beiden „Wänden" */
  --paper:      #F5EBD7;   /* Vanille – „Wand A"                    */
  --paper-2:    #EFE4CB;   /* minimal tiefer – „Wand B"             */
  --paper-3:    #EADCBE;   /* Footer, etwas tiefer                  */
  --cognac:     #A15A34;   /* Cognac – Signalton, Akzente           */
  --line:       #E4D3B8;   /* Haarlinien                            */

  /* Schrift-/Grundton (tiefes Cognac-Braun, wärmer als Schwarz) */
  --ink:        #3E2417;   /* Fließtext & Überschrift               */
  --ink-soft:   #785845;   /* gedämpft – Sekundärtext               */
  --ink-faint:  #A5866E;   /* sehr leise – Labels, Meta             */

  /* Logo-Rot – für die Nav-Umrandung */
  --logo-red:   #E5392C;

  /* Spektrum – aus dem MosiVox-Logo (für Logo-Elemente & Spektrum-Strich) */
  --c-purple:   #9878AD;
  --c-blue:     #53A2C6;
  --c-green:    #64B77C;
  --c-gold:     #F6C54A;
  --c-orange:   #E4813E;
  --c-red:      #E5392C;
  --c-pink:     #DB5E78;
  --c-blush:    #EEB8A4;

  /* Schriftfamilien */
  --display: "Comfortaa", system-ui, sans-serif;   /* Überschriften + Wortmarke */
  --sans:    "Mulish", system-ui, -apple-system, sans-serif;  /* Fließtext + UI */
  --serif:   var(--sans);   /* Kompatibilität: früherer „Serif"-Text = jetzt Mulish */

  /* Maße */
  --wrap: 1080px;
  --measure: 40rem;
  --radius: 18px;
  --scroll-off: 7rem;   /* Sprungabstand, damit Überschriften sichtbar bleiben */
}

/* ------------------------------------------------------------- Reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(1.02rem,0.98rem + 0.3vw,1.16rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
::selection{ background:var(--c-gold); color:var(--ink); }

/* ---------------------------------------------------------- Bausteine */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.25rem,5vw,3rem); }
.measure{ max-width:var(--measure); margin-inline:auto; }

.section{ padding-block:clamp(3.5rem,8vw,6.5rem); }
.section--tint{ background:var(--paper-2); }
.section--tint2{ background:var(--paper-3); }

/* Farbspektrum-Strich – die Signatur, echot die Logo-Buchstaben */
.spectrum{
  display:flex; gap:6px; width:100%; max-width:340px;
  margin-block:0;
}
.spectrum span{ flex:1 1 0; height:5px; border-radius:99px; }
.spectrum span:nth-child(1){ background:var(--c-red); }
.spectrum span:nth-child(2){ background:var(--c-orange); }
.spectrum span:nth-child(3){ background:var(--c-gold); }
.spectrum span:nth-child(4){ background:var(--c-green); }
.spectrum span:nth-child(5){ background:var(--c-blue); }
.spectrum span:nth-child(6){ background:var(--c-purple); }
.spectrum span:nth-child(7){ background:var(--c-pink); }
.spectrum span:nth-child(8){ background:var(--c-blush); }
.spectrum--center{ margin-inline:auto; }

/* Abschnitts-Label („Eyebrow") */
.eyebrow{
  font-family:var(--sans);
  font-weight:600;
  font-size:.74rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent,var(--ink-soft));
  display:inline-flex; align-items:center; gap:.7em;
  margin:0 0 1.4rem;
}
.eyebrow::before{
  content:""; width:1.6rem; height:2px; border-radius:2px;
  background:var(--accent,var(--ink-soft));
}

/* Überschriften */
h1,h2,h3{ font-family:var(--display); font-weight:600; color:var(--ink); line-height:1.18; }
h2{
  font-size:clamp(1.55rem,1.2rem + 1.6vw,2.35rem);
  margin:0 0 1.1rem; letter-spacing:-.005em;
}
h3{ font-size:1.2rem; letter-spacing:.01em; margin:0 0 .5rem; }

p{ margin:0 0 1.15rem; }
.lead{ font-size:1.14em; color:var(--ink); }
.muted{ color:var(--ink-soft); }

/* ------------------------------------------------------------- Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-block:.85rem;
}
/* Wortmarke „Lisa Mosinski" – luftig gesetzt (Raum geben) */
.brandmark{ font-family:var(--display); font-weight:600;
  font-size:clamp(1.15rem,1rem + .7vw,1.55rem); letter-spacing:.16em;
  text-decoration:none; line-height:1; color:var(--ink); white-space:nowrap; }
.brandmark--sm{ font-size:1.05rem; letter-spacing:.14em; }
.brandmark--img{ display:inline-flex; align-items:center; }
.brandmark--img img{ height:34px; width:auto; display:block; }
.brandmark--img-sm img{ height:24px; }
@media (max-width:520px){ .brandmark--img img{ height:27px; } }

.nav{ display:flex; align-items:flex-start; flex-wrap:wrap; justify-content:flex-end; gap:.5rem;
  font-family:var(--sans); font-weight:600; font-size:.78rem; }
.nav a{ box-sizing:border-box; width:9rem; min-height:4.4rem; text-decoration:none;
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--ink); line-height:1.25; white-space:normal;
  border:1.6px solid var(--logo-red); border-radius:16px; padding:.5rem .55rem;
  transition:background .2s ease, color .2s ease, transform .15s ease; }
.nav a:hover{ background:var(--logo-red); color:#fff; transform:translateY(-1px); }
.nav a.is-logo img{ height:16px; width:auto; display:block; }
.nav a.is-logo:hover{ background:transparent; transform:translateY(-1px); }
@media (max-width:860px){
  .site-header{ position:static; }
  .site-header__inner{ flex-direction:column; align-items:flex-start; gap:.85rem; }
  .nav{ justify-content:flex-start; }
}
@media (max-width:520px){
  .nav{ width:100%; }
  .nav a{ width:calc(50% - .25rem); }
}

/* Sprung-Offset, damit die Überschrift nach dem Nav-Klick sichtbar bleibt */
section[id]{ scroll-margin-top:var(--scroll-off); }
@media (max-width:860px){ section[id]{ scroll-margin-top:1.5rem; } }

/* Ring-i: i-Punkte werden zu kleinen Kringeln (in Überschriften & Wortmarke) */
.ri{ position:relative; }
.ri__d{ position:absolute; left:50%; top:-.04em; transform:translateX(-50%);
  width:.19em; height:.19em; border:.052em solid currentColor; border-radius:50%;
  box-sizing:border-box; }

/* Umlaute: die zwei Punkte über ä/ö/ü werden zu zwei Kringeln
   – auf gleicher Höhe wie die i-Kringel */
.ri2{ position:relative; }
.ri2 .ri__d2{ position:absolute; top:-.04em; width:.16em; height:.16em;
  border:.048em solid currentColor; border-radius:50%; box-sizing:border-box; }
.ri2 .ri__d2--l{ left:calc(50% - .17em); }
.ri2 .ri__d2--r{ left:calc(50% + .01em); }

/* --------------------------------------------------------------- Hero */
.hero{ padding-block:clamp(4rem,11vw,8rem) clamp(3rem,7vw,5rem); }
.hero__logo{ height:clamp(48px,7vw,84px); width:auto; margin:0 0 1.9rem; }
.hero__eyebrow{
  font-family:var(--sans); font-weight:600; font-size:.82rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--ink-faint);
  margin:0 0 1.6rem;
}

/* Seiten-Überschriften: Schrift wie in der Navigation (Quicksand), einfarbig */
.section-title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.9rem,1.35rem + 2.5vw,3rem);
  line-height:1.16; letter-spacing:0; margin:0 0 1.1rem; max-width:100%;
  color:var(--ink);
}
.hero h1{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2rem,1.3rem + 4.2vw,3.7rem);
  line-height:1.16; letter-spacing:0; margin:0 0 1.4rem; max-width:16ch;
}
.hero h1 em{
  display:block; font-family:var(--sans); font-style:italic; font-weight:500;
  font-size:.56em; line-height:1.2; color:var(--ink-soft); margin-top:.35em; letter-spacing:0;
}
.hero__sub{ font-size:1.16rem; color:var(--ink-soft); max-width:44ch; margin:0 0 2.2rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }

/* Buttons */
.btn{
  font-family:var(--sans); font-weight:600; font-size:.98rem; letter-spacing:.01em;
  text-decoration:none; border:none; cursor:pointer;
  padding:.85rem 1.5rem; border-radius:99px; display:inline-flex; align-items:center; gap:.5em;
  transition:transform .18s ease, background .2s ease, box-shadow .2s ease;
}
.btn--solid{ background:var(--ink); color:var(--paper); }
.btn--solid:hover{ background:var(--logo-red); transform:translateY(-2px); box-shadow:0 10px 24px -12px rgba(229,57,44,.5); }
.btn--ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); }
.btn--ghost:hover{ box-shadow:inset 0 0 0 1.5px var(--ink); transform:translateY(-2px); }

/* -------------------------------------------------- Atem-Phrasierung */
/* Kurze Zeilen wie gesprochene Sprache: weiter Zeilenabstand,
   sanftes Erscheinen beim Scrollen.                                    */
.verse{ margin:0 auto; }
.verse .line{
  display:block; margin:0;
  font-family:var(--serif);
  font-size:clamp(1.12rem,1.02rem + 0.5vw,1.32rem);
  line-height:1.95; color:var(--ink);
}
.verse .line--soft{ color:var(--ink-soft); }
.verse .line--strong{ font-weight:600; }
.verse .line + .break{ height:.9rem; }
.verse--center{ text-align:center; }
.verse--center .line{ max-width:52ch; margin-inline:auto; }

/* Reveal – Zeilen atmen nacheinander ein */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* Kicker-Satz (der eine große Gedanke pro Abschnitt) – bewusst kleiner als die Überschrift */
.kicker{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.2rem,1.02rem + 0.9vw,1.62rem);
  line-height:1.4; color:var(--ink-soft); max-width:28ch; margin:0 0 1.4rem;
}
.kicker--center{ margin-inline:auto; text-align:center; }

/* --------------------------------------------------------- Werkzeugkoffer */
.callout{
  margin-top:2.4rem;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(1.4rem,3vw,2rem);
  display:flex; gap:1.2rem; align-items:flex-start;
  box-shadow:0 14px 40px -28px rgba(76,33,18,.35);
}
.callout__mark{
  flex:0 0 auto; width:2.9rem; height:2.9rem; border-radius:14px;
  display:grid; place-items:center; background:color-mix(in srgb,var(--c-gold) 26%,var(--paper));
}
.callout__mark svg{ width:1.5rem; height:1.5rem; }
.callout h3{ margin:.15rem 0 .35rem; }
.callout p{ margin:0; color:var(--ink-soft); }

/* --------------------------------------------------------- Zwei Spalten */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.split--reading{ grid-template-columns:.85fr 1.15fr; }
@media (max-width:820px){ .split,.split--reading{ grid-template-columns:1fr; } }

/* --------------------------------------------------------- Credential */
.cred{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.6rem,3.5vw,2.4rem);
  background:var(--paper);
  border-top:4px solid var(--c-blue);
}
.cred .badge{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--sans); font-weight:600; font-size:.8rem; letter-spacing:.06em;
  color:var(--c-blue); text-transform:uppercase; margin-bottom:.9rem;
}
.cred .badge svg{ width:1.05rem; height:1.05rem; }

/* --------------------------------------------------------------- Credo */
.credo{ list-style:none; margin:0; padding:0; max-width:34rem; }
.credo li{
  position:relative; padding-left:1.7rem; margin:0 0 1rem;
  font-family:var(--serif); font-size:clamp(1.1rem,1rem+0.5vw,1.28rem); line-height:1.6;
}
.credo li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:.6rem; height:.6rem; border-radius:99px;
}
.credo li:nth-child(1)::before{ background:var(--c-red); }
.credo li:nth-child(2)::before{ background:var(--c-orange); }
.credo li:nth-child(3)::before{ background:var(--c-green); }
.credo li:nth-child(4)::before{ background:var(--c-blue); }
.credo li:nth-child(5)::before{ background:var(--c-purple); }
.credo li:nth-child(6)::before{ background:var(--c-pink); }
.credo__coda{
  font-family:var(--serif); font-style:italic; color:var(--ink-soft);
  font-size:clamp(1.15rem,1rem+0.7vw,1.4rem); line-height:1.5; margin-top:1.8rem;
}

/* ------------------------------------------------------------- Kontakt */
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }

.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-family:var(--sans); font-weight:500; font-size:.86rem;
  letter-spacing:.02em; color:var(--ink-soft); margin-bottom:.4rem; }
.field input,.field textarea{
  width:100%; font-family:var(--serif); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:.8rem .95rem; transition:border-color .2s, box-shadow .2s;
}
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--c-orange);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c-orange) 22%,transparent);
}
.field textarea{ min-height:8rem; resize:vertical; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.info-list{ list-style:none; margin:0; padding:0; font-family:var(--serif); }
.info-list li{ display:flex; gap:.85rem; align-items:flex-start; margin-bottom:1.15rem; }
.info-list .ic{ flex:0 0 auto; width:2.2rem; height:2.2rem; border-radius:10px; display:grid; place-items:center;
  background:var(--paper-2); }
.info-list .ic svg{ width:1.15rem; height:1.15rem; color:var(--ink); }
.info-list a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
.info-list a:hover{ border-color:var(--ink); }
.info-list .k{ font-family:var(--sans); font-weight:600; font-size:.76rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:.15rem; }

.form-note{ font-size:.9rem; color:var(--ink-soft); margin-top:.4rem; }
.form-status{ font-family:var(--sans); font-weight:600; padding:.9rem 1.1rem; border-radius:12px; margin-bottom:1.3rem; }
.form-status--ok{ background:color-mix(in srgb,var(--c-green) 18%,var(--paper)); color:#2f6b45; }
.form-status--err{ background:color-mix(in srgb,var(--c-red) 15%,var(--paper)); color:#8f2f26; }

/* -------------------------------------------------------------- Footer */
.site-footer{ background:var(--paper-3); border-top:1px solid var(--line);
  padding-block:clamp(2.5rem,6vw,4rem); }
.site-footer__top{ display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:space-between; align-items:flex-start; }
.site-footer .brandmark{ font-size:1.35rem; }
.foot-tag{ font-family:var(--sans); color:var(--ink-soft); font-size:.9rem; margin:.5rem 0 0; }
.foot-links{ display:flex; gap:1.4rem; font-family:var(--sans); font-size:.9rem; font-weight:500; }
.foot-links a{ color:var(--ink-soft); text-decoration:none; }
.foot-links a:hover{ color:var(--ink); }
.foot-legal{ margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--line);
  font-family:var(--sans); font-size:.82rem; color:var(--ink-faint); }

/* placeholder-Markierung für noch offene Inhalte */
.todo{ background:color-mix(in srgb,var(--c-gold) 32%,transparent); border-radius:4px;
  padding:0 .25em; box-decoration-break:clone; }

/* Fokus sichtbar für Tastatur */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--c-purple); outline-offset:2px; border-radius:6px;
}

/* Portrait-Platzhalter */
.portrait{
  aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden;
  background:
     radial-gradient(120% 100% at 20% 0%, color-mix(in srgb,var(--c-blush) 55%,var(--paper)), transparent 60%),
     radial-gradient(120% 100% at 100% 100%, color-mix(in srgb,var(--c-purple) 30%,var(--paper)), transparent 55%),
     var(--paper-2);
  display:grid; place-items:center; text-align:center;
  border:1px solid var(--line);
}
.portrait span{ font-family:var(--sans); font-weight:500; color:var(--ink-soft); font-size:.9rem; padding:1rem; }

/* --------------------------------------------------- Kontakt-Karte */
.contact-name{ font-family:var(--display); font-weight:600; font-size:1.35rem; color:var(--ink); margin:0 0 .15rem; }
.contact-role{ margin:0 0 1rem; }
.contact-addr{ margin:0 0 1rem; line-height:1.55; }
.contact-lines{ margin:0 0 1.3rem; line-height:1.8; }
.contact-lines a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
.contact-lines a:hover{ border-color:var(--ink); }
.contact-card .btn{ margin-bottom:1.5rem; }
.contact-note{ margin:0 0 1.6rem; color:var(--ink-soft); }
.anfahrt__h{ font-family:var(--sans); font-weight:700; font-size:.9rem; color:var(--ink);
  margin:0 0 .55rem; padding-top:1.3rem; border-top:1px solid var(--line); }
.anfahrt p{ margin:0 0 .5rem; line-height:1.55; }

/* --------------------------------------------------- Rechtstexte */
.legal{ max-width:var(--measure); margin-top:1.5rem; }
.legal h2{ font-family:var(--display); font-size:1.15rem; margin:2rem 0 .6rem; color:var(--ink); }
.legal h2:first-of-type{ margin-top:1rem; }
.legal p{ margin:0 0 1rem; line-height:1.65; }
.legal ul{ margin:0 0 1rem 1.1rem; padding:0; line-height:1.6; }
.legal li{ margin:0 0 .35rem; }
.legal a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.legal a:hover{ color:var(--cognac); }
.legal .todo-note{ background:color-mix(in srgb,var(--c-gold) 30%,var(--paper));
  border-radius:10px; padding:.7rem .9rem; font-size:.92rem; color:var(--ink); }

/* --------------------------------------------------- Kooperation */
.coop{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.4rem,4vw,2.6rem); align-items:center;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--paper);
  padding:clamp(1.4rem,3.5vw,2.2rem); }
@media(max-width:640px){ .coop{ grid-template-columns:1fr; } }
.coop__logo{ text-decoration:none; display:block; }
.coop__logo img{ max-height:84px; width:auto; display:block; }
.coop__ph{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:180px; min-height:78px; padding:.9rem 1.2rem; border:1.5px dashed var(--line);
  border-radius:12px; font-family:var(--display); font-weight:600; color:var(--ink);
  letter-spacing:.02em; text-align:center; line-height:1.2; }
.coop__ph small{ font-family:var(--sans); font-weight:500; font-size:.7rem; color:var(--ink-soft);
  letter-spacing:0; margin-top:.4rem; }
.coop__text p{ margin:0 0 .85rem; }
.coop__note{ font-size:.9rem; color:var(--ink-soft); }
.coop__text .btn{ margin-top:.3rem; }