/* Ich mag Media: Aussehen für das Gespräch mit Mia, den Fragebogen und die Rechtsseiten.
   Wie die Webseite ich-mag-media.de: dunkler Kopf mit „ich mag media.", große Überschriften in
   Bricolage Grotesque, Text in Instrument Sans, Papierweiß, Magenta als Akzent, runde Knöpfe.
   Alle Farben stehen im ersten Block, der dunkle Modus direkt darunter. Die Klasse .dunkel setzt
   dieselben Farben für einen dunklen Abschnitt auf heller Seite (wie der obere Teil der Webseite). */

:root{
  color-scheme: light;
  --anzeige: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --schrift: "Instrument Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --hand: var(--anzeige);

  --grund: #fafaf7;
  --flaeche: #ffffff;
  --nebel: #f1f0eb;
  --tinte: #20232a;
  --leise: #5c626e;
  --linie: #e3e2dc;
  --linie-stark: #cfcdc5;

  --beere: #c4306c;
  --beere-tief: #a3245a;
  --hell: #ff78ac;
  --koralle: #ff6f52;
  --rose: #fbedf3;
  --rose-stark: #f6d9e6;
  --knopf: #c4306c;
  --knopf-hover: #a8275b;
  --knopf-text: #ffffff;
  --knopf-dunkel: #17191e;

  --nacht: #0f1114;
  --navy: #17191e;
  --band: #ff78ac;
  --spur: #e3e2dc;
  --marker: transparent;

  /* Mias Kugel */
  --kugel-aussen: #f6d9e6;
  --kugel-koerper: #c4306c;
  --kugel-innen: #ff78ac;
  --kugel-glanz: #ffe3ee;
  --kugel-funke: #ff6f52;
  --kugel-ring: #c4306c;

  --fokus: rgba(196,48,108,.22);
  --fehler: #b3261e;
  --gut: #166534;
  --rund: 18px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --grund: #0f1114;
    --flaeche: #17191e;
    --nebel: #1d2026;
    --tinte: #f1f0eb;
    --leise: #a3a8b2;
    --linie: #2a2e36;
    --linie-stark: #3d424c;
    --beere: #ff78ac;
    --beere-tief: #ff9cc2;
    --rose: #2a1720;
    --rose-stark: #40202f;
    --knopf: #c4306c;
    --knopf-hover: #d63d7c;
    --knopf-text: #ffffff;
    --knopf-dunkel: #f1f0eb;
    --spur: #2a2e36;
    --kugel-aussen: #3a1a2a;
    --kugel-glanz: #ffd1e2;
    --kugel-ring: #ff78ac;
    --fokus: rgba(255,120,172,.25);
    --fehler: #ff8a80;
    --gut: #86efac;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --grund: #0f1114;
  --flaeche: #17191e;
  --nebel: #1d2026;
  --tinte: #f1f0eb;
  --leise: #a3a8b2;
  --linie: #2a2e36;
  --linie-stark: #3d424c;
  --beere: #ff78ac;
  --beere-tief: #ff9cc2;
  --rose: #2a1720;
  --rose-stark: #40202f;
  --knopf: #c4306c;
  --knopf-hover: #d63d7c;
  --knopf-text: #ffffff;
  --knopf-dunkel: #f1f0eb;
  --spur: #2a2e36;
  --kugel-aussen: #3a1a2a;
  --kugel-glanz: #ffd1e2;
  --kugel-ring: #ff78ac;
  --fokus: rgba(255,120,172,.25);
  --fehler: #ff8a80;
  --gut: #86efac;
}
/* Dunkler Abschnitt, egal ob die Seite hell oder dunkel ist */
.dunkel{
  color-scheme: dark;
  --flaeche: #17191e;
  --nebel: #1d2026;
  --tinte: #fafaf7;
  --leise: #a3a8b2;
  --linie: rgba(255,255,255,.1);
  --linie-stark: rgba(255,255,255,.22);
  --beere: #ff78ac;
  --beere-tief: #ff9cc2;
  --rose: rgba(255,120,172,.13);
  --rose-stark: rgba(255,120,172,.24);
  --knopf-dunkel: #fafaf7;
  --spur: rgba(255,255,255,.14);
  --kugel-aussen: #3a1a2a;
  --kugel-glanz: #ffd1e2;
  --kugel-ring: #ff78ac;
  --fokus: rgba(255,120,172,.25);
  background:var(--nacht); color:var(--tinte);
}

/* ======= Grundlagen ======= */
*{box-sizing:border-box; margin:0}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{background:var(--grund); color:var(--tinte); font-family:var(--schrift); font-size:16.5px; line-height:1.6;
     padding-inline:16px; overflow-x:clip; -webkit-font-smoothing:antialiased}
a{color:var(--beere); text-underline-offset:3px}
img{max-width:100%}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--beere); outline-offset:3px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ======= Kopf: dunkle Leiste wie auf der Webseite ======= */
.kopf{margin-inline:calc(50% - 50vw); padding:15px max(16px, calc(50vw - var(--breite, 760px) / 2)); display:flex; align-items:center;
      justify-content:space-between; gap:2px 16px; flex-wrap:wrap; background:var(--navy); color:#fafaf7;
      border-bottom:1px solid rgba(255,255,255,.08)}
.marke{font-family:var(--anzeige); font-weight:800; font-size:1.42rem; line-height:1.1; letter-spacing:-.035em; color:#fafaf7;
       text-decoration:none; white-space:nowrap}
.marke em{font-style:normal; color:var(--hell)}
.kopf-sub{font-size:.86rem; color:#a3a8b2}

/* ======= Schrift ======= */
h1,h2,h3,h4{font-family:var(--anzeige)}
h1{font-size:1.9rem; line-height:1.05; font-weight:800; letter-spacing:-.035em; margin-bottom:10px; text-wrap:balance}
h2{font-size:1.4rem; line-height:1.15; font-weight:750; letter-spacing:-.025em; margin-bottom:6px; text-wrap:balance}
h3{font-weight:700; letter-spacing:-.01em}
.hint{color:var(--leise); font-size:.98rem; margin-bottom:18px}
.lead{font-size:1.12rem; line-height:1.55; color:var(--leise); max-width:58ch}
/* Kleine Zeile über der Überschrift: Magenta wie „Perückenstudio in Augsburg · Online" */
.handzeile{font-family:var(--anzeige); font-weight:650; font-size:.95rem; line-height:1.3; color:var(--beere); letter-spacing:-.005em}
/* Großbuchstaben-Zeile wie „WEBSEITEN, PORTALE UND WERBUNG IM DACH-RAUM" */
.eyebrow{font-size:.78rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--leise)}
/* Unterschrift */
.notiz{font-family:var(--anzeige); font-weight:750; font-size:1.05rem; line-height:1.2; color:var(--beere); letter-spacing:-.01em}
/* Hervorgehobene Wörter: in Pink, wie „Seiten mit Charakter." */
.markiert{color:var(--beere)}
.dunkel .markiert{color:var(--hell)}

/* ======= Karten ======= */
.card{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--rund); padding:28px 26px}
@media (max-width:520px){ .card{padding:22px 18px} }

/* ======= Eingaben ======= */
label{display:block; font-weight:600; margin:18px 0 6px; font-size:.95rem}
label small{font-weight:400; color:var(--leise)}
input[type=text],input[type=email],input[type=tel],input[type=password],textarea,select{
  width:100%; padding:13px 15px; border:1.5px solid var(--linie-stark); border-radius:14px; font:inherit; font-size:1rem;
  background:var(--flaeche); color:var(--tinte); transition:border-color .15s, box-shadow .15s}
input::placeholder,textarea::placeholder{color:var(--leise); opacity:.75}
input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus,input[type=password]:focus,textarea:focus,select:focus{
  outline:none; border-color:var(--beere); box-shadow:0 0 0 4px var(--fokus)}
textarea{min-height:96px; resize:vertical}
.beispiel{font-size:.86rem; color:var(--leise); margin-top:6px}
.row{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
@media (max-width:560px){ .row{grid-template-columns:1fr} }

.choices{display:grid; gap:8px; margin-top:6px}
.choice{display:flex; gap:12px; align-items:flex-start; border:1.5px solid var(--linie); border-radius:14px; padding:13px 15px;
        cursor:pointer; background:var(--flaeche); font-weight:400; margin:0; transition:border-color .15s, background-color .15s}
.choice:hover{border-color:var(--linie-stark)}
.choice:has(input:checked){border-color:var(--beere); background:var(--rose)}
.choice input{margin-top:3px; width:18px; height:18px; flex:none; accent-color:var(--knopf)}
.choice b{display:block; font-size:.98rem; font-weight:600; color:var(--tinte)}
.choice span{font-size:.88rem; color:var(--leise)}
.choice b + span{display:block}

/* ======= Knöpfe: rund wie auf der Webseite ======= */
button{font:inherit; font-weight:600; border:0; border-radius:999px; padding:13px 24px; cursor:pointer; color:inherit; background:none}
button:disabled{opacity:.5; cursor:default}
.btn-main,.btn-weich,.btn-ghost,.btn-rand,.btn-dunkel{border-radius:999px; font-family:var(--anzeige); font-weight:650; letter-spacing:-.005em; text-decoration:none}
a.btn-main,a.btn-weich,a.btn-rand,a.btn-dunkel{padding:14px 26px}
.btn-main{display:inline-flex; align-items:center; justify-content:center; gap:10px; background:var(--knopf); color:var(--knopf-text);
          transition:background-color .15s, transform .1s}
.btn-main:hover:not(:disabled){background:var(--knopf-hover)}
.btn-main:active:not(:disabled),.btn-rand:active:not(:disabled),.btn-dunkel:active:not(:disabled){transform:translateY(1px)}
.btn-main svg,.btn-weich svg,.btn-rand svg,.btn-dunkel svg{width:18px; height:18px}
.btn-weich{display:inline-flex; align-items:center; gap:8px; background:var(--rose); color:var(--beere-tief)}
.btn-weich:hover:not(:disabled){background:var(--rose-stark)}
/* Umrandet wie „Referenzen ansehen" */
.btn-rand{display:inline-flex; align-items:center; justify-content:center; gap:10px; background:transparent; color:var(--tinte);
          border:1.5px solid var(--linie-stark); transition:border-color .15s, background-color .15s}
.btn-rand:hover:not(:disabled){border-color:var(--tinte)}
/* Dunkel wie „Seite besuchen" */
.btn-dunkel{display:inline-flex; align-items:center; justify-content:center; gap:10px; background:var(--knopf-dunkel); color:var(--grund)}
.btn-ghost{background:transparent; color:var(--leise)}
.btn-ghost:hover{color:var(--tinte)}
.fehler{color:var(--fehler); font-size:.92rem; font-weight:600; margin-top:12px; display:none}
.nav{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:26px; flex-wrap:wrap}
@media (max-width:520px){
  .nav{flex-direction:column-reverse; align-items:stretch; gap:6px}
  .nav .btn-main{width:100%; padding-block:15px}
  .nav .btn-ghost{text-align:center}
}

/* ======= Fortschritt: schmale Leiste in Magenta ======= */
.massband{position:relative; height:6px; border-radius:99px; background:var(--spur); overflow:hidden}
.massband .band{position:absolute; left:0; top:0; bottom:0; width:4%; border-radius:99px; background:var(--beere);
  transition:width .9s cubic-bezier(.3,.7,.2,1)}
.massband .skala{display:none}

/* ======= Kleingedrucktes ======= */
.rechtliches{max-width:760px; width:100%; margin:0 auto; padding-block:14px calc(18px + env(safe-area-inset-bottom,0px));
             font-size:.82rem; color:var(--leise); text-align:center}
.rechtliches a{color:var(--leise); text-decoration:none}
.rechtliches a:hover{color:var(--beere); text-decoration:underline}

/* Drei Punkte mit Symbolen */
.fakten{list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px 26px}
.fakten li{display:flex; gap:11px; align-items:flex-start}
.fakten svg{width:22px; height:22px; flex:none; color:var(--beere); margin-top:2px}
.fakten b{display:block; font-family:var(--anzeige); font-size:1rem; font-weight:700; letter-spacing:-.01em}
.fakten span{display:block; font-size:.88rem; color:var(--leise)}

/* Der Mensch hinter Mia */
.mensch{display:flex; gap:16px; align-items:center}
.mensch .foto{width:64px; height:64px; flex:none; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  background:var(--rose); color:var(--beere-tief); font-family:var(--anzeige); font-weight:800; font-size:1.15rem; letter-spacing:.02em;
  box-shadow:0 0 0 1.5px var(--linie-stark)}
.mensch .foto img{width:100%; height:100%; object-fit:cover; display:block}
.mensch p{font-size:.98rem}
.mensch .notiz{display:block; margin-top:4px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
                       transition-duration:.001ms !important; scroll-behavior:auto !important}
}