/* ============================================================
   IHR GLÜCKSMOMENT FRISEUR – Stylesheet
   Inhaberin: Peggy Ziegner
   Aufbau: Mobile First (zuerst Handy, dann größere Bildschirme)
   Technik: reines CSS3, Flexbox & Grid, keine Frameworks
   ============================================================ */

/* ---------- 1. FARBEN & SCHRIFTEN (zentrale Variablen) ---------- */
/* Diese Werte einmal hier ändern = ändert sich auf der ganzen Seite */
:root{
  --creme:        #F8F4EF;
  --altrosa:      #E9D2CE;
  --altrosa-hell: #F4E6E3;
  --gold:         #C8A46B;
  --anthrazit:    #333333;
  --dunkel:       #43382F;   /* warmes Espressobraun für den Footer */
  --weiss:        #FFFFFF;
  --grau-text:    #6f6862;

  --schrift-titel:  'Playfair Display', Georgia, serif;
  --schrift-text:   'Montserrat', -apple-system, sans-serif;
  --schrift-script: 'Allura', cursive;   /* nur für "Ihr Glücksmoment" & Signatur */

  --radius:       16px;   /* abgerundete Ecken */
  --schatten:     0 10px 30px rgba(51,51,51,.08);   /* sanfter Schatten */
  --schatten-stark: 0 16px 40px rgba(51,51,51,.14);
}

/* ---------- 2. GRUND-EINSTELLUNGEN / RESET ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
/* Sprungmarken (#leistungen usw.) halten Abstand zur fixen Navi,
   damit die Überschrift nicht hinter der Leiste verschwindet */
section[id]{ scroll-margin-top:70px; }
body{
  font-family:var(--schrift-text);
  font-weight:400;
  color:var(--anthrazit);
  background:var(--creme);
  line-height:1.7;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--schrift-titel); font-weight:600; line-height:1.2; }
a{ color:inherit; text-decoration:none; }
img{
  display:block; max-width:100%;
  /* sanfte Hintergrundfarbe, solange die echten Fotos noch fehlen */
  background:var(--altrosa-hell);
  color:var(--anthrazit);
}

/* zentraler Inhalts-Container */
.container{ width:100%; max-width:1180px; margin:0 auto; padding:0 22px; }

/* kleine Helfer */
.label{
  font-family:var(--schrift-text);
  font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); font-weight:500;
}
.herz{ color:var(--altrosa); }

/* ---------- 3. BUTTONS ---------- */
.btn{
  display:inline-block;
  background:var(--gold); color:var(--weiss);
  font-family:var(--schrift-text); font-weight:500;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  padding:15px 32px; border:none; border-radius:50px; cursor:pointer;
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
  box-shadow:var(--schatten);
}
.btn:hover{ background:#b8945c; transform:translateY(-3px); box-shadow:var(--schatten-stark); }

.btn-outline{
  display:inline-block;
  background:transparent; color:var(--anthrazit);
  border:1.5px solid var(--altrosa);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  padding:14px 30px; border-radius:50px; cursor:pointer; transition:.3s;
}
.btn-outline:hover{ background:var(--altrosa); color:var(--weiss); }

/* ============================================================
   4. NAVIGATIONSLEISTE  (Mobile: Menü per Häkchen-Trick aufklappbar)
   ============================================================ */
.header{
  position:sticky; top:0; z-index:100;
  background:var(--weiss);
  box-shadow:0 2px 14px rgba(51,51,51,.05);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 22px; max-width:1180px; margin:0 auto;   /* zentriert, gleiche Breite wie Inhalt */
}
.logo{ display:flex; align-items:center; gap:10px; }
/* Logo: eng zugeschnittene Datei (logo-cropped.png) ohne leeren Rand,
   damit der Schriftzug groß und scharf erscheint. Höhe steuert die Navi-Höhe. */
.logo img{ height:80px; width:auto; background:transparent; }
.logo .logo-text{ display:flex; flex-direction:column; line-height:1.1; }
.logo .logo-text .n{ font-family:var(--schrift-titel); font-size:20px; font-weight:600; }
.logo .logo-text .s{ font-size:9px; letter-spacing:.3em; text-transform:uppercase; color:var(--grau-text); }

/* Häkchen-Trick: Checkbox steuert das Menü ohne JavaScript */
.nav-toggle{ display:none; }
.nav-burger{
  font-size:26px; cursor:pointer; color:var(--anthrazit); user-select:none;
}
.nav-menu{
  list-style:none;
  display:none;                 /* auf dem Handy zunächst versteckt */
  flex-direction:column; gap:4px;
  position:absolute; top:100%; left:0; right:0;
  background:var(--weiss); padding:10px 22px 18px;
  box-shadow:var(--schatten);
}
.nav-toggle:checked ~ .nav-menu{ display:flex; }  /* Häkchen gesetzt = Menü zeigen */
.nav-menu li a{
  display:block; padding:11px 0;
  font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  transition:color .3s;
}
.nav-menu li a:hover{ color:var(--gold); }
.nav-menu .nav-phone{ color:var(--gold); font-weight:600; }

/* ============================================================
   5. HERO-BEREICH  (großes Friseurfoto + Überschrift + Text)
   ============================================================ */
.hero{ background:var(--creme); }
.hero-inner{
  max-width:1180px; margin:0 auto; padding:56px 22px 0;
  display:flex; flex-direction:column; align-items:flex-start;
}
/* Foto-Panel – auf dem Handy unter dem Text */
.hero-photo{
  height:340px; margin-top:36px;
  background:url('bilder/hero.jpg') center top / cover no-repeat;
  background-color:var(--altrosa-hell);  /* Fallback, falls Foto fehlt */
}
.hero h1{
  font-size:40px; font-weight:600; margin:14px 0 18px; max-width:14ch;
}
.hero h1 .akzent{
  display:block;
  font-family:var(--schrift-script);
  font-weight:400; font-style:normal;
  color:var(--gold);
  font-size:.95em;          /* kleiner = zarter, passt zu Logo & Band-Slogan */
  line-height:1.1; margin-top:.08em;
}
/* goldenes Herz unter "Ihr Glücksmoment" – groß & zentriert unter dem Schriftzug */
.hero h1 .hero-herz{
  display:block;
  text-align:center;
  color:var(--gold);
  font-weight:400;
  font-size:1em;
  line-height:1; margin-top:6px;
}
.hero p{ color:var(--grau-text); max-width:46ch; margin-bottom:28px; }

/* ============================================================
   6. LEISTUNGEN  (5 Karten im Raster)
   ============================================================ */
.section{ padding:72px 0; }
.section-head{ text-align:center; margin-bottom:46px; }
.section-head h2{ font-size:30px; margin-top:8px; }

.cards{
  display:grid;
  grid-template-columns:1fr;   /* Mobile: eine Spalte */
  gap:22px;
}
.card{
  background:var(--weiss);
  border-radius:var(--radius);
  padding:38px 26px; text-align:center;
  box-shadow:var(--schatten);
  transition:transform .35s ease, box-shadow .35s ease;
  display:flex; flex-direction:column; align-items:center;
}
.card:hover{ transform:translateY(-8px); box-shadow:var(--schatten-stark); }
.card .card-ico{
  font-size:32px; color:var(--gold); margin-bottom:16px;
  display:inline-block;
}
.card .card-ico svg{ width:1em; height:1em; display:block; }
.card h3{ font-family:var(--schrift-titel); font-size:21px; margin-bottom:10px; min-height:2.5em; display:flex; align-items:center; justify-content:center; overflow-wrap:break-word; }
.card p{ font-size:14px; color:var(--grau-text); }
/* Leistungsüberschrift in Gold */
.leistungen-titel{ color:var(--gold); font-size:30px; font-family:var(--schrift-titel); font-weight:600; }

/* ============================================================
   7. WARUM GLÜCKSMOMENT?  (Bild + Text nebeneinander)
   ============================================================ */
.why{ background:var(--altrosa-hell); }
.why-grid{
  display:flex; flex-direction:column;  /* Mobile: untereinander */
  gap:28px; padding:44px 22px;
}
/* Foto als sauberes, abgerundetes Panel mit zartem Schatten – passt zu den
   Leistungs-Karten und zeigt die komplette Frisur scharf (kein Verlauf). */
.why-img{ overflow:hidden; border-radius:var(--radius); box-shadow:var(--schatten); }
.why-img img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; display:block; }
.why-text{ padding:0; }
.why-text h2{ font-size:30px; margin:12px 0 18px; }
.why-text p{ color:var(--grau-text); margin-bottom:16px; max-width:52ch; }
.why-text .sign{ font-family:var(--schrift-script); font-size:36px; line-height:1.1; color:var(--gold); margin-top:6px; }

/* "Über mich" nutzt die Warum-Struktur, aber Creme-Hintergrund (Abwechslung)
   und ein Querformat-Foto (Seitenverhältnis 7/5, passend zum Bild). */
.ueber-mich{ background:var(--creme); }
.ueber-mich .why-img img{ aspect-ratio:7/5; }

/* ============================================================
   8. GALERIE  (6 Frisurenbilder im Raster)
   ============================================================ */
.gallery{
  display:grid;
  grid-template-columns:1fr 1fr;   /* Mobile: 2 Spalten */
  gap:12px;
}
.gallery figure{ overflow:hidden; border-radius:var(--radius); box-shadow:var(--schatten); }
.gallery img{
  width:100%; height:100%; aspect-ratio:3/4; object-fit:cover;
  transition:transform .5s ease;
}
.gallery figure:hover img{ transform:scale(1.07); }

/* ============================================================
   9. KURZE VORTEILE  (3 Spalten mit Icon, Titel, Text)
   ============================================================ */
.features{ background:var(--altrosa-hell); padding:56px 0; }
.features-grid{
  display:grid; grid-template-columns:1fr; gap:36px;
  text-align:center;
}
.feature{ padding:0 12px; }
.feature .feature-ico{
  display:inline-block; font-size:32px; color:var(--gold); margin-bottom:14px;
}
.feature .feature-ico svg{ width:1em; height:1em; display:block; margin:0 auto; }
.feature h3{
  font-family:var(--schrift-text); font-weight:600;
  font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:10px; color:var(--anthrazit);
}
.feature p{ font-size:14px; color:var(--grau-text); max-width:34ch; margin:0 auto; }

/* ============================================================
   10. FOOTER  (Adresse + Telefon, keine E-Mail / kein Social)
   ============================================================ */
.footer{ background:var(--dunkel); color:#e8ded3; padding:46px 22px; }
.footer-inner{
  max-width:1180px; margin:0 auto;
  display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center;
}
.footer .f-name{ font-family:var(--schrift-titel); font-size:23px; color:var(--weiss); }
.footer .f-row{ display:flex; flex-direction:column; gap:6px; font-size:14px; }
.footer .f-legal{ display:flex; gap:10px; align-items:center; font-size:13px; color:#b8ab9c; }
.footer a{ transition:color .3s; }
.footer a:hover{ color:var(--altrosa); }
.footer .f-copy{ font-size:12px; color:#9a8d7e; margin-top:6px; }

/* ============================================================
   KONTAKTSEITE
   ============================================================ */
/* Abschluss "Ich freue mich auf Ihren Besuch" – cremefarben.
   Mobile: Text oben, Kaffeetasse darunter (full-width) mit weichem Übergang. */
.visit{ position:relative; background:var(--creme); overflow:hidden; }
.visit-text{ padding:48px 22px 28px; }
.visit-text .label{ display:block; margin-bottom:12px; }
.visit-text h2{ font-size:32px; color:var(--anthrazit); }
.visit-img{
  position:relative;
  width:100%; aspect-ratio:3/2;
  background:url('bilder/kaffeetasse.png') center/cover no-repeat var(--altrosa-hell);
}
/* weicher Übergang am oberen Bildrand in den Creme-Hintergrund (Mobile) */
.visit-img::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, transparent 72%, var(--creme) 100%);
}

/* Kontakt – ruhiges, klares Layout ohne Karten (im Stil des Mockups) */
.contact-grid{
  display:grid; grid-template-columns:1fr; gap:40px;  /* Mobile: untereinander */
  max-width:900px; margin:0 auto;
}
.contact-col h3{ font-size:22px; margin-bottom:22px; }

/* Kontaktzeilen mit feinen Icons */
.info-list{ list-style:none; }
.info-list li{ display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; }
.info-list .ci{ color:var(--gold); flex-shrink:0; width:22px; line-height:0; }
.info-list .ci svg{ width:22px; height:22px; display:block; }
.info-list span, .info-list a{ color:var(--grau-text); font-size:15px; }
.info-list a{ transition:color .3s; }
.info-list a:hover{ color:var(--gold); }

/* Öffnungszeiten */
.hours div{ display:flex; justify-content:space-between; gap:20px; padding:10px 0; border-bottom:1px solid var(--altrosa); font-size:15px; }
.hours div:last-child{ border-bottom:none; }
.hours .tag{ color:var(--anthrazit); }
.hours .zeit{ color:var(--grau-text); }
.hint-note{ font-size:14px; color:var(--grau-text); margin-top:20px; max-width:42ch; }

/* ============================================================
   11. RESPONSIVE – ab Tablet (600px) und Desktop (900px)
   Mobile First: oben stand das Handy-Layout, hier wird vergrößert.
   ============================================================ */
@media (min-width:600px){
  .hero h1{ font-size:52px; }
  .cards{ grid-template-columns:1fr 1fr; }          /* 2 Karten pro Reihe */
  .gallery{ grid-template-columns:repeat(3,1fr); }   /* 3 Bilder pro Reihe */
  .footer .f-row{ flex-direction:row; gap:22px; }
  .visit-text h2{ font-size:40px; }

  /* Kontakt: zwei Spalten mit feiner Trennlinie in der Mitte */
  .kontakt .contact-grid{ grid-template-columns:1fr 1fr; gap:0; }
  .contact-col:first-child{ padding-right:56px; }
  .contact-col:last-child{ padding-left:56px; border-left:1px solid var(--altrosa); }

  /* 3 Vorteile nebeneinander mit feinen Trennlinien */
  .features-grid{ grid-template-columns:repeat(3,1fr); gap:0; }
  .feature + .feature{ border-left:1px solid var(--altrosa); }
}

@media (min-width:900px){
  /* Navigation als Reihe (kein aufklappbares Menü mehr) */
  .nav-burger{ display:none; }
  .nav-menu{
    display:flex; flex-direction:row; align-items:center; gap:30px;
    position:static; padding:0; box-shadow:none; background:transparent;
  }
  .nav-menu li a{ padding:0; }

  .hero h1{ font-size:60px; }

  /* Desktop-Hero: Text links, Foto als eigenes Panel rechts (neben dem Text) */
  .hero{
    display:flex; align-items:stretch; min-height:600px;
    /* volle Breite – kein max-width mehr, Foto reicht bis zum rechten Rand */
  }
  .hero-inner{
    flex:1; max-width:none; margin:0;
    justify-content:center;
    /* Text-Inhalt startet an der gleichen gedachten Spaltenkante wie der
       restliche Seiteninhalt (zentrierter 1180px-Container) – nicht am
       äußersten Bildschirmrand. Rechts genug Abstand zum Foto. */
    padding:60px 64px 60px max(22px, calc((100vw - 1180px) / 2 + 22px));
  }
  /* Foto etwas breiter als die Textspalte → schließt die Lücke in der Mitte */
  .hero-photo{ flex:1.25; }
  .hero-photo{
    flex:1; height:auto; margin-top:0;
    position:relative;
    background-position:center top;   /* Frisur oben im Bild bleibt sichtbar */
  }
  /* schmaler, weicher Übergang nur am linken Rand des Fotos */
  .hero-photo::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(to right, var(--creme) 0%, rgba(248,244,239,0) 18%);
  }

  /* alle 6 Karten in EINER Reihe */
  .cards{ grid-template-columns:repeat(6,1fr); gap:16px; }
  .card{ padding:32px 14px; }
  .card .card-ico{ font-size:26px; margin-bottom:12px; }
  .card h3{ font-size:17px; min-height:3.4em; }
  .card p{ font-size:13px; }

  /* Warum-Bereich: Bild und Text nebeneinander.
     Das Foto ist quadratisch (Seitenverhältnis 1/1, passend zum Bild)
     → die KOMPLETTE Frisur ist sichtbar, kein Beschnitt. */
  .why-grid{ flex-direction:row; align-items:center; max-width:1180px; margin:0 auto; gap:48px; padding:64px 22px; }
  .why-img{ flex:1; }
  .why-text{ flex:1.15; padding:0; }

  /* Abschluss (Desktop): Kaffeetasse als Panel rechts über die GESAMTE HÖHE,
     weicher Übergang nach links in den Creme-Hintergrund. Text linksbündig auf
     gleicher Linie wie der Kontakt-Block darüber (gleiche Struktur: 900px zentriert). */
  .visit{ min-height:440px; display:flex; align-items:center; }
  .visit-content{ width:100%; max-width:1180px; margin:0 auto; padding:48px 22px; }
  .visit-text{ max-width:900px; margin:0 auto; padding:0; position:relative; z-index:2; }
  .visit-img{
    position:absolute; top:0; right:0; bottom:0;
    width:46%; aspect-ratio:auto;
  }
  .visit-img::before{
    background:linear-gradient(to right, var(--creme) 0%, rgba(248,244,239,0) 42%);
  }
}

/* ============================================================
   12. RECHTSTEXTE  (Impressum / Datenschutz)
   ============================================================ */
.nav .legal-back-link{
  font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--grau-text); transition:color .3s;
}
.nav .legal-back-link:hover{ color:var(--gold); }

.legal{ max-width:780px; margin:0 auto; padding:56px 22px 80px; }
.legal h1{ font-size:34px; margin-bottom:6px; }
.legal .label{ display:block; margin-bottom:10px; }
.legal h2{ font-size:20px; margin:32px 0 10px; }
.legal p, .legal li{ color:var(--grau-text); font-size:15px; margin-bottom:10px; }
.legal a{ color:var(--gold); }
.legal ul{ padding-left:20px; margin-bottom:10px; }
.legal .hinweis{
  background:var(--altrosa-hell); border-radius:var(--radius);
  padding:16px 20px; font-size:13px; color:var(--grau-text); margin:24px 0;
}