/* ===== Schwesterherz Boutique – Landing Page ===== */

/* Lokal gehostete Schriften (DSGVO-konform, keine Google-Server-Abfrage) */
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:400 600;            /* Variable Font deckt 400–600 ab */
  font-display:swap;
  src:url('fonts/cormorant.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:500;
  font-display:swap;
  src:url('fonts/cormorant-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:400 700;            /* Variable Font deckt 400–700 ab */
  font-display:swap;
  src:url('fonts/nunitosans.woff2') format('woff2');
}

:root{
  --blau:        #b9cdd9;   /* Hauptfarbe – Hellblau aus dem Logo */
  --blau-hell:   #d8e4ea;   /* zartes Hellblau */
  --blau-tief:   #8fabbb;   /* dunklerer Blauton für Akzente */
  --beige:       #ece7dd;   /* Grundton Beige/Creme */
  --beige-hell:  #f6f2ea;   /* helles Creme */
  --rosa:        #f2c2cc;   /* dezenter Rosa-Akzent */
  --ink:         #4a5560;   /* weiches Anthrazit-Graublau */
  --ink-soft:    #6f7882;   /* gedämpfter Text */
  --weiss:       #ffffff;
  --schatten:    0 18px 50px -22px rgba(74,85,96,.35);
  --serif:       'Cormorant Garamond', Georgia, serif;
  --sans:        'Nunito Sans', system-ui, sans-serif;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--beige-hell);
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

h2{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(2rem,4.5vw,3rem);
  line-height:1.15;
  margin-bottom:1.2rem;
  color:var(--ink);
}
h3{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.6rem;
  margin-bottom:1rem;
  color:var(--ink);
}

.eyebrow{
  display:inline-block;
  font-size:.8rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--blau-tief);
  margin-bottom:.9rem;
}
.eyebrow--center{display:block;text-align:center}
.h2--center{text-align:center}

/* ===== Navigation ===== */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.1rem 2.5rem;
  background:rgba(246,242,234,.82);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s;
}
.nav.scrolled{
  border-color:rgba(143,171,187,.25);
  box-shadow:0 6px 24px -18px rgba(74,85,96,.5);
}
.nav__brand{
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:600;
  color:var(--blau-tief);
  text-decoration:none;
}
.nav__links{display:flex;gap:2rem}
.nav__links a{
  color:var(--ink);
  text-decoration:none;
  font-size:.95rem;
  font-weight:600;
  position:relative;
  transition:color .2s;
}
.nav__links a::after{
  content:'';position:absolute;left:0;bottom:-5px;height:2px;width:0;
  background:var(--blau-tief);transition:width .25s;
}
.nav__links a:hover{color:var(--blau-tief)}
.nav__links a:hover::after{width:100%}

/* ===== Hero ===== */
.hero{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:7rem 1.5rem 4rem;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--blau-hell) 0%, transparent 55%),
    linear-gradient(160deg, var(--blau) 0%, var(--beige) 70%, var(--beige-hell) 100%);
}
.hero__inner{display:flex;flex-direction:column;align-items:center;max-width:760px}
.hero__logo{
  width:min(560px,90vw);
  height:auto;
  display:block;
  filter:drop-shadow(0 12px 28px rgba(74,85,96,.18));
}
.hero__claim{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.4rem,3vw,1.9rem);
  color:var(--ink);
  margin:2.2rem 0 2rem;
  max-width:520px;
}
.btn{
  display:inline-block;
  padding:.95rem 2.4rem;
  background:var(--blau-tief);
  color:var(--weiss);
  text-decoration:none;
  font-weight:700;
  font-size:1rem;
  border-radius:50px;
  letter-spacing:.02em;
  transition:transform .2s, box-shadow .2s, background .2s;
}
.btn:hover{
  transform:translateY(-3px);
  background:#7f9cad;
  box-shadow:0 16px 30px -14px rgba(74,85,96,.6);
}

/* ===== Sektionen ===== */
.section{position:relative}
.section--beige{background:var(--beige)}
.section--blue{background:linear-gradient(180deg, var(--blau-hell) 0%, var(--blau) 100%)}
.section--footer{background:var(--blau-tief);color:var(--weiss)}

.container{max-width:1080px;margin:0 auto;padding:6rem 2rem}
.container--narrow{max-width:760px;text-align:center}

.lead{
  font-size:1.15rem;
  color:var(--ink);
  margin-bottom:1.3rem;
}

/* ===== Fotos & Galerien (Originalformat, kein Zuschnitt) ===== */
.foto{margin:0}
.foto img{
  display:block;
  width:100%;
  height:auto;              /* Seitenverhältnis bleibt erhalten */
  border-radius:20px;
  box-shadow:var(--schatten);
}
.container > .foto{margin-top:3rem}

.zweispalter{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:3.5rem;
  align-items:center;
}
.zweispalter .lead{text-align:left}

.galerie{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  margin-top:3rem;
  align-items:start;
}

@media(max-width:780px){
  .zweispalter{grid-template-columns:1fr;gap:2rem}
  .galerie{grid-template-columns:1fr}
}

/* ===== Karten (Öffnungszeiten/Adresse) ===== */
.cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  margin-top:3rem;
}
.card{
  background:var(--weiss);
  border-radius:20px;
  padding:2.4rem;
  box-shadow:var(--schatten);
}
.hours{width:100%;border-collapse:collapse}
.hours td{
  padding:.7rem 0;
  border-bottom:1px solid var(--beige);
  font-size:1.05rem;
}
.hours td:last-child{text-align:right;font-weight:700;color:var(--blau-tief)}
.hours tr:last-child td{border-bottom:none}
.address{font-size:1.1rem;line-height:1.8;margin-bottom:1.5rem}
.map{
  width:100%;
  height:220px;
  border:0;
  border-radius:14px;
  overflow:hidden;
}
.map iframe{width:100%;height:100%;border:0;filter:grayscale(.15)}
.map__consent{
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;
  padding:1rem;text-align:center;cursor:pointer;
  background:var(--beige-hell);
  border:1px dashed var(--blau-tief);
  border-radius:14px;
  color:var(--ink);font-family:var(--sans);
  transition:background .2s;
}
.map__consent:hover{background:var(--beige)}
.map__icon{font-size:1.6rem}
.map__title{font-weight:700;font-size:1.05rem}
.map__hint{font-size:.8rem;color:var(--ink-soft);max-width:260px}

.legal-links{margin-top:.6rem;text-align:center;font-size:.85rem}
.legal-links a{color:var(--blau-hell);text-decoration:none;font-weight:600}
.legal-links a:hover{text-decoration:underline}
.legal-links span{color:var(--blau-hell);margin:0 .5rem}

/* ===== Kontakt / Footer ===== */
.contact{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:1.4rem;
  margin:2.5rem 0;
}
.contact li{display:flex;flex-direction:column;gap:.25rem}
.contact__label{
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--blau-hell);
  font-weight:700;
}
.contact a{
  color:var(--weiss);
  text-decoration:none;
  font-size:1.25rem;
  font-weight:600;
  transition:opacity .2s;
}
.contact a:hover{opacity:.75;text-decoration:underline}
.section--footer .eyebrow,
.section--footer h2{color:var(--weiss)}
.section--footer .eyebrow{color:var(--blau-hell)}
.copyright{
  margin-top:1.5rem;
  font-size:.9rem;
  color:var(--blau-hell);
  text-align:center;
}

/* ===== Rechtsseiten (Impressum/Datenschutz) ===== */
.legal{background:var(--beige-hell);min-height:100vh}
.legal .container{padding-top:8rem;text-align:left}
.legal .back{
  display:inline-block;margin-bottom:1.5rem;
  color:var(--blau-tief);text-decoration:none;font-weight:600;
}
.legal .back:hover{text-decoration:underline}
.legal h1{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,5vw,2.8rem);margin-bottom:1rem;color:var(--ink)}
.legal h2{font-family:var(--serif);font-weight:600;font-size:1.5rem;margin:2rem 0 .6rem;color:var(--ink)}
.legal p{margin-bottom:1rem;color:var(--ink)}
.legal a{color:var(--blau-tief)}
.legal .note{
  font-size:.92rem;color:var(--ink-soft);
  background:var(--beige);border-radius:12px;padding:1rem 1.2rem;
}
.legal code{background:var(--beige);padding:.1rem .35rem;border-radius:5px;font-size:.9em}

/* ===== Responsiv ===== */
@media(max-width:780px){
  .cards{grid-template-columns:1fr}
  .nav{padding:.9rem 1.3rem}
  .nav__links{gap:1.2rem}
  .nav__brand{font-size:1.25rem}
  .container{padding:4.5rem 1.5rem}
}
@media(max-width:520px){
  .nav{padding:.8rem 1rem;justify-content:center}
  .nav__brand{display:none}
  .nav__links{gap:1.4rem}
  .nav__links a{font-size:.9rem}
}