/* ============================================================
   HAAR & STIL MOBIL — Regina Schulze
   Gemeinsames Stylesheet für index / impressum / datenschutz
   ============================================================ */

:root{
  --teal:#2fa1a6;          /* Marken-Türkis (vom Kfz-Magnet) */
  --teal-dark:#17575a;     /* Header, Footer, Schrift        */
  --teal-mid:#1c6d71;
  --tint:#eef7f7;
  --tint-2:#dcefef;
  --line:#cfe6e6;
  --ink:#17575a;           /* alle Fließtexte = dunkles Teal  */
  --ink-soft:#35696c;
  --salmon:#e79a87;
  --salmon-deep:#c9765f;
  --salmon-soft:#fae9e3;
  --salmon-line:#f0cec3;
  --white:#ffffff;
  --page:#fbfcfb;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:'Nunito Sans',system-ui,sans-serif;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;line-height:1.12;margin:0;}
a{color:inherit;}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px;}
.eyebrow{
  font-family:'Nunito Sans',sans-serif;
  text-transform:uppercase;letter-spacing:.22em;
  font-size:.72rem;font-weight:700;color:var(--teal-mid);
  margin:0 0 14px;
}

/* ---------- Header (doppelte Höhe, dunkles Teal) ---------- */
header{
  position:sticky;top:0;z-index:20;
  background:var(--teal-dark);
  border-bottom:1px solid rgba(255,255,255,.15);
}
.bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:34px 28px;max-width:1080px;margin:0 auto;
}
.logo{
  font-family:'Cormorant Garamond',serif;font-size:1.75rem;font-weight:600;
  letter-spacing:.01em;color:#fff;text-decoration:none;
}
.logo small{
  display:inline-block;font-family:'Nunito Sans',sans-serif;
  font-size:.6rem;letter-spacing:.28em;font-weight:700;color:#fff;
  vertical-align:middle;margin-left:8px;border:1px solid rgba(255,255,255,.7);
  padding:2px 7px;border-radius:20px;
}
nav.nav-links a{
  font-size:.85rem;font-weight:600;text-decoration:none;color:rgba(255,255,255,.88);transition:.2s;
}
.nav-toggle{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:44px;padding:0 12px;border:1px solid rgba(255,255,255,.5);
  border-radius:10px;background:transparent;cursor:pointer;
}
.nav-toggle span{display:block;height:2px;background:#fff;border-radius:2px;transition:.25s;}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
nav.nav-links{display:none;}
nav.nav-links.open{
  display:flex;flex-direction:column;
  position:absolute;top:100%;left:0;right:0;
  background:var(--teal-dark);
  border-bottom:1px solid rgba(255,255,255,.2);
  padding:6px 28px 18px;box-shadow:0 22px 30px -24px rgba(0,0,0,.6);
}
nav.nav-links.open a{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.15);color:#fff;}
@media(min-width:820px){
  .nav-toggle{display:none;}
  nav.nav-links{display:flex;position:static;background:none;border:none;box-shadow:none;padding:0;}
  nav.nav-links a{margin-left:28px;padding:4px 0;border-bottom:2px solid transparent;}
  nav.nav-links a:hover,nav.nav-links a:focus-visible{color:#fff;border-color:var(--salmon);}
}

/* ---------- Hero (Teal, weiße Schrift) ---------- */
.hero{
  padding:clamp(56px,8vw,104px) 0;
  background:var(--teal);color:#fff;text-align:center;
}
.hero .eyebrow{color:var(--salmon-soft);}
.hero h1{font-size:clamp(2.6rem,6vw,4.2rem);color:#fff;max-width:16ch;margin:0 auto;}
.hero .lede{
  font-size:1.15rem;color:rgba(255,255,255,.94);
  max-width:44ch;margin:24px auto 30px;
}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px;justify-content:center;}
.tag{
  font-size:.78rem;font-weight:600;color:#fff;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.45);
  padding:6px 13px;border-radius:20px;
}
.phone-chip{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--salmon);color:#fff;font-weight:700;
  padding:13px 22px;border-radius:30px;text-decoration:none;font-size:1rem;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.45);transition:.2s;
}
.phone-chip:hover,.phone-chip:focus-visible{background:var(--salmon-deep);}

/* ---------- Sections ---------- */
section{padding:clamp(46px,6.5vw,80px) 0;}
.section-tinted{background:var(--tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section-salmon{background:var(--salmon-soft);border-top:1px solid var(--salmon-line);border-bottom:1px solid var(--salmon-line);}
.section-head{max-width:40ch;margin-bottom:40px;}
.section-head h2{font-size:clamp(2rem,4vw,2.9rem);color:var(--ink);}
.section-head p{color:var(--ink-soft);margin:14px 0 0;}

/* ---------- Über mich ---------- */
.about-grid{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:1fr;align-items:start;}
@media(min-width:820px){.about-grid{grid-template-columns:1.05fr .95fr;}}
.about-text p{font-size:1.08rem;color:var(--ink-soft);}
.motto{
  font-family:'Cormorant Garamond',serif;font-size:1.7rem;color:var(--teal-mid);
  font-style:italic;margin-top:24px;line-height:1.3;
}
.portrait-img{
  /* Größe hier justieren: max-height steuert die Höhe, die Breite folgt automatisch */
  width:auto;max-width:100%;max-height:450px;
  border-radius:14px;border:6px solid #fff;
  box-shadow:0 30px 60px -30px rgba(23,87,90,.75);
  display:block;margin:0 auto;
}

/* ---------- Preise ---------- */
.price-grid{display:grid;gap:22px;grid-template-columns:1fr;}
@media(min-width:720px){.price-grid{grid-template-columns:1fr 1fr;}}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:28px 30px;box-shadow:0 20px 40px -34px rgba(23,87,90,.6);
}
.card h3{font-size:1.5rem;color:var(--teal-mid);margin-bottom:6px;}
.card .row{
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:9px 0;border-bottom:1px dotted var(--line);
}
.card .row:last-child{border-bottom:none;}
.card .row .name{color:var(--ink);}
.card .row .price{font-weight:700;color:var(--teal-mid);white-space:nowrap;}
.price-note{
  margin-top:26px;font-size:.95rem;color:var(--ink-soft);
  background:var(--tint);border-left:3px solid var(--teal);
  padding:16px 20px;border-radius:0 10px 10px 0;
}
.price-note strong{color:var(--ink);}

/* ---------- Ergänzende Angebote ---------- */
.offer-grid{display:grid;gap:20px;grid-template-columns:1fr;}
@media(min-width:760px){.offer-grid{grid-template-columns:repeat(3,1fr);}}
.offer{
  background:var(--white);border:1px solid var(--line);border-radius:16px;padding:30px 26px;
  display:flex;flex-direction:column;
}
.offer .dot{width:34px;height:34px;border-radius:50%;background:var(--tint-2);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.offer .dot svg{width:18px;height:18px;color:var(--teal-mid);}
.offer h3{font-size:1.35rem;color:var(--ink);margin-bottom:8px;}
.offer p{margin:0;color:var(--ink-soft);font-size:.98rem;}
.mehr{
  align-self:flex-start;margin-top:20px;
  background:var(--salmon);color:#fff;font-weight:700;font-size:.85rem;
  border:none;border-radius:22px;padding:9px 20px;cursor:pointer;transition:.2s;font-family:inherit;
}
.mehr:hover,.mehr:focus-visible{background:var(--salmon-deep);}

/* ---------- Modal ---------- */
dialog.card-modal{
  border:none;border-radius:18px;padding:0;max-width:640px;width:calc(100% - 40px);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.5);color:var(--ink);background:var(--white);
}
dialog.card-modal::backdrop{background:rgba(23,87,90,.6);}
.card-modal .modal-inner{padding:clamp(30px,5vw,46px);position:relative;}
.card-modal h3{font-family:'Cormorant Garamond',serif;font-size:clamp(1.6rem,3.4vw,2.1rem);
  color:var(--teal-mid);margin:0 0 18px;line-height:1.18;padding-right:44px;}
.card-modal p{font-size:1.02rem;color:var(--ink-soft);margin:0 0 16px;}
.card-modal p:last-child{margin-bottom:0;}
.card-modal .modal-close{
  position:absolute;top:16px;right:18px;background:var(--tint);border:1px solid var(--line);
  width:38px;height:38px;border-radius:50%;font-size:1.2rem;cursor:pointer;color:var(--teal-mid);
  line-height:1;display:flex;align-items:center;justify-content:center;
}
.card-modal .modal-close:hover{background:var(--tint-2);}

/* ---------- Calligraphy Cut ---------- */
.calli .inner{max-width:62ch;}
.calli h2{font-size:clamp(2rem,4vw,2.9rem);color:var(--ink);margin-bottom:22px;}
.calli p{font-size:1.08rem;color:var(--ink-soft);margin:0 0 18px;}
.calli p:last-child{margin-bottom:0;}
.calli .lead{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:1.55rem;line-height:1.35;color:var(--teal-mid);
}

/* ---------- Kontakt ---------- */
.contact{background:var(--teal);color:#fff;}
.contact h2{color:#fff;}
.contact .wrap{display:grid;gap:36px;grid-template-columns:1fr;align-items:start;}
@media(min-width:780px){.contact .wrap{grid-template-columns:1.1fr .9fr;}}
.contact a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5);}
.contact a:hover{border-color:#fff;}
.contact .detail{margin:6px 0;font-size:1.05rem;}
.contact .label{font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;opacity:.85;font-weight:700;margin-top:22px;}
.appt{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:14px;padding:26px 28px;}
.appt strong.head{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:600;display:block;margin-bottom:8px;}
.appt p{margin:0 0 12px;opacity:.95;}
.appt p .hilite{font-weight:700;color:#fff;opacity:1;font-size:1.05em;}
.appt p:last-child{margin-bottom:0;}
.appt .salon{font-weight:700;letter-spacing:.06em;}

/* ---------- Footer (dunkles Teal) ---------- */
footer{background:var(--teal-dark);color:rgba(255,255,255,.8);font-size:.85rem;padding:34px 0;}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;align-items:center;}
footer a{color:rgba(255,255,255,.85);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);}
footer a:hover,footer a:focus-visible{color:#fff;border-color:#fff;}
footer .legal a{margin-right:18px;}
footer .legal a:last-child{margin-right:0;}
.fd{border-bottom:none;letter-spacing:.01em;}
.fd b{font-weight:700;}
.fd i{font-style:italic;}

/* ---------- Rechtstexte (Impressum / Datenschutz) ---------- */
.legal-page{padding:clamp(44px,6vw,76px) 0;}
.legal-page .inner{max-width:70ch;}
.legal-page h1{font-size:clamp(2.2rem,4.5vw,3rem);color:var(--ink);margin-bottom:30px;}
.legal-page h2{font-size:1.6rem;color:var(--teal-mid);margin:38px 0 12px;}
.legal-page h3{font-size:1.25rem;color:var(--teal-mid);margin:28px 0 10px;}
.legal-page p,.legal-page li{color:var(--ink-soft);margin:0 0 14px;}
.legal-page ul{padding-left:20px;margin:0 0 18px;}
.legal-page li{margin-bottom:6px;}
.legal-page a{color:var(--teal-mid);}
.legal-page .back{
  display:inline-block;margin-bottom:26px;font-size:.85rem;font-weight:600;
  text-decoration:none;color:var(--teal-mid);border-bottom:1px solid var(--line);
}
.legal-page .back:hover{border-color:var(--teal);}

/* ---------- Entwurfshinweis (vor Livegang entfernen) ---------- */
.draftnote{
  background:#fff6e6;border-bottom:1px solid #f0d9a8;color:#7a5a12;
  font-size:.82rem;text-align:center;padding:8px 16px;font-weight:600;
}

@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
  html{scroll-behavior:auto;}
}

/* ---------- Die Farben (OCS) ---------- */
.farben-list{
  list-style:none;padding:0;margin:26px 0 0;
  display:flex;flex-wrap:wrap;gap:10px;
}
.farben-list li{
  font-size:.92rem;font-weight:600;color:var(--teal-deep);
  background:var(--tint);border:1px solid var(--line);
  padding:8px 16px;border-radius:22px;
}