/* ===== Base / Tokens ===== */
:root{
  --bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --primary:#6b8fbd;      /* Akzent (dezent blau) */
  --primary-600:#5b7aa5;
  --soft:#f7fafc;
  --radius:16px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;
  color:var(--text); background:var(--bg);
}
img{max-width:100%; display:block}

/* ===== Layout ===== */
.container{width:min(1100px, 92%); margin-inline:auto}
.narrow{width:min(800px, 92%); margin-inline:auto}
.center{text-align:center}
.mt-24{margin-top:24px}

/* ===== Nav ===== */
.nav{position:sticky; top:0; z-index:10; background:var(--bg); border-bottom:1px solid var(--line)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:84px}
.brand{font-weight:800; letter-spacing:.2px; text-decoration:none; color:var(--text)}
.nav-links{display:flex; gap:20px; align-items:center; margin-left: auto;}
.nav a{color:var(--text); text-decoration:none}
.nav a:hover{opacity:.85}
.nav-links a.active {
  color: var(--primary);
  font-weight: 600;
  border-bottom: 2px solid var(--primary);
  padding-bottom: 2px;
}

/* Basis: Burger-Button standardmäßig verstecken (Desktop) */
.nav-toggle{
  display: none;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
}

/* --------------------------------------------
   Desktop Breakpoint
   -------------------------------------------- */
@media (min-width: 901px){
  .nav-toggle{ display:none !important; }
  .nav-links{ display:flex !important; }
  #mobile-nav{ display:none !important; }  /* nur am Desktop verstecken */
}

/* --------------------------------------------
   RESPONSIVE BREAKPOINT
   Mobile: Desktop Menü ausblenden,
   Burger Button + Mobile-Menü aktivieren
   -------------------------------------------- */
@media (max-width: 900px) {

  :root { --nav-h: 84px; }

  /* Mobile-Menü-Panel – genau unter dem Header starten,
     Safe-Area (iPhone Notch) berücksichtigen */
  #mobile-nav{
    display:flex !important;          /* <- wichtig */
    position: fixed;
    top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    z-index: 30;

    /* sanfter Drop-In */
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;

    display: flex;
    flex-direction: column;

    /* nicht den ganzen Screen überdecken; bei langen Menüs scrollen */
    max-height: calc(100dvh - var(--nav-h) - env(safe-area-inset-top, 0px));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* sichtbar im offenen Zustand */
  #mobile-nav.open{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Menüpunkte kompakter + klare Trennlinien */
  #mobile-nav a{
    display: block;
    width: 100%;
    padding: 0.9rem 1.2rem;
    font-size: 1.05rem;
    text-decoration: none;
    color: var(--text);
    border-bottom: 1px solid var(--line);
  }
  #mobile-nav a:last-child{ border-bottom: none; }
  #mobile-nav a:hover{ background: var(--soft); }

  /* Backdrop hinter dem Menü */
  .nav-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.25);
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility 0s linear .25s;
  }
  .nav-backdrop.show{
    opacity: 1;
    visibility: visible;
    transition: opacity .25s ease;
  }

  /* Desktop-Menü ausblenden, Burger zeigen */
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }

  #mobile-nav a.active {
    color: var(--primary);
    font-weight: 600;
    background: var(--soft);
  }
}

/* ===== Buttons ===== */
.btn{display:inline-block; padding:.7rem 1rem; border-radius:10px; text-decoration:none; font-weight:600}
.btn-primary{background:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-600)}
.btn-secondary{background:#111827; color:#fff}
.btn-ghost{border:1px solid var(--line); color:var(--text); background:transparent}

/* ===== Hero ===== */
.hero{background:linear-gradient(180deg, var(--soft), #fff 70%); padding:56px 0}
.hero-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:72px; align-items:start}
.hero-copy h1{font-size: clamp(28px, 5vw, 44px); line-height:1.1; margin:0 0 12px}
.hero-copy p{
    color:var(--muted);
    font-size:18px;
    margin:0 0 18px;
    line-height: 1.7;
}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.hero-image img{border-radius:var(--radius); box-shadow:var(--shadow);}

.hero-copy h1 {
  margin-bottom: 2.5rem;
}

.hero-subtitle {
  font-size: 1.25rem;
  font-weight: 500;
  color: #555;
  margin-top: 0.75rem;
  margin-bottom: 1.25rem;
}

/* little feature chips */
.chips{list-style:none; padding:0; margin:16px 0 0; display:flex; gap:8px; flex-wrap:wrap}
.chips li{border:1px solid var(--line); padding:.35rem .6rem; border-radius:999px; color:#374151; font-size:.9rem}

/* ===== Sections ===== */
.section{padding:56px 0}
.section-soft{background:var(--soft)}
.section-title{font-size:28px; margin:0 0 18px}

/* ===== Cards / Grid ===== */
.grid{display:grid; gap:18px}
.cards-3{grid-template-columns: repeat(auto-fit, minmax(240px,1fr))}
.card{border:1px solid var(--line); border-radius:var(--radius); padding:18px; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.02)}
.card h3{margin:0 0 8px}
.card p{margin:0 0 12px; color:var(--muted)}
.price-row{display:flex; align-items:center; gap:10px; color:#374151}
.price{font-weight:700}
.dot{opacity:.4}

/* ===== Statement ===== */
.statement{
  font-size:20px; line-height:1.6; text-align:center; color:#374151;
  background:#fff; padding:24px; border-radius:var(--radius); border:1px solid var(--line);
}

/* ===== Footer ===== */
.footer{border-top:1px solid var(--line); padding:36px 0; background:#fff}
.footer-grid{
  display: grid;
  grid-template-columns: 1fr auto; /* Kontakt links, Logo rechts */
  align-items: center; /* vertikal mittig ausrichten */
}
.footer .brand{display:block; margin-bottom:6px}

/* ===== Utilities ===== */
.shadow-sm{box-shadow:0 1px 0 rgba(0,0,0,.04)}

/* ===== Responsive ===== */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .nav-inner{height:auto; padding-block:12px}
}

/* ===== Logo im Header ===== */
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem; /* Abstand zwischen Logo und Text */
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--text);
  text-decoration: none;
}

.brand .logo {
  height: 62px;
  width: auto;
  display: block;
}

.footer-grid > div:first-child {
  text-align: left;
}

.footer-logo {
  text-align: center;
  display: flex;
  flex-direction: column; /* Logo und Text untereinander */
  justify-content: center;
  align-items: center;  /* (flex-end) rechtsbündig im Footer */
  text-align: center;
}

.footer-logo img {
  height: 160px;
  width: auto;
  margin-bottom: 2px;
}

.footer-logo-text {
  font-size: 12px;
  opacity: 0.9;
  margin-top: 0; /* kein zusätzlicher Abstand */
}

/* Mobile: untereinander, mittig */
@media (max-width: 800px){
  .footer-grid{
    grid-template-columns: 1fr;     /* eine Spalte */
    justify-items:center;           /* Inhalte zentrieren */
    text-align:center;
    row-gap: 14px;
  }
  .footer-logo{
    justify-self:center;            /* Logo mittig */
    margin-top: 6px;
  }
  .footer-logo img {
      height: 90px;
    }
  /* (optional) Reihenfolge: erst Kontakt, dann Logo */
  .footer-grid > .footer-logo { order: 2; }
  .footer-grid > :first-child     { order: 1; }

  /* Instagram-Icon unter Kontakt mittig + guter Tap-Bereich */
    .footer .instagram-link{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: 10px;
      padding: 6px;                     /* größere Touch-Fläche */
    }

    .footer .instagram-link svg{
      width: 28px;
      height: 28px;
    }
}

/* Instagram-Link unter den Kontaktdaten */
.footer .instagram-link {
  display: inline-block;
  margin-top: 10px;
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer .instagram-link:hover {
  color: var(--primary);
}

.footer .instagram-link svg {
  width: 26px;
  height: 26px;
}



/* ===== Services ===== */
.muted{ color: var(--muted); }

/* Grid vererbt von .grid.cards-3 */

/* Karte */
.service-card{
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background:#fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  transition: transform .15s ease, box-shadow .15s ease;
}
.service-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* Bildbereich */
.service-media{
  position: relative;
  aspect-ratio: 16 / 12;       /* schöne Höhe, gleichmäßige Karten */
  overflow: hidden;
}
.service-media img{
  width:100%; height:100%; object-fit: cover;
}

/* Preis-Badge */
.price-badge{
  position:absolute; right:10px; bottom:10px;
  background: #111827; color:#fff; font-weight:700;
  padding: .3rem .5rem; border-radius:10px;
  font-size: .95rem;
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
}

/* Textbereich */
.service-body{ padding:14px 16px 18px; }
.service-body h3{ margin:0 0 6px; font-size:1.05rem; }

/* Service-Karten sollen NICHT wie Links aussehen */
.service-card {
  text-decoration: none;
  color: inherit;
}
.service-card h3,
.service-card p {
  text-decoration: none;
  color: inherit;
}

.service-card:hover {
  text-decoration: none;
  color: inherit;
}

/* Responsive: 2 Spalten auf Tablets, 1 Spalte auf Phones */
@media (max-width: 1000px){
  .cards-3{ grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
}
@media (max-width: 640px){
  .cards-3{ grid-template-columns: 1fr; }
}


/* Service Detail. Meta-Bereich unter dem Titel: Dauer + Preis */
.detail-meta {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

/* Dauer optisch angleichen */
.detail-meta .duration {
  font-size: 1rem;
  color: var(--muted);
}

/* Preis-Badge in Service-Details */
.detail-price {
  position: static !important;
  display: inline-block;
  margin: 0;
}

/* ===== About Split Sections ===== */
.about-intro h1 {
  font-size: clamp(32px, 5vw, 42px);
  margin-bottom: 16px;
}
.about-intro .lead {
  font-size: 18px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 700px;
  margin-inline: auto;
}
.split {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: center;
}
.split-image img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.split-text h2 {
  margin-top: 0;
  font-size: 28px;
}
.split-text p {
  font-size: 18px;
  color: var(--muted);
  line-height: 1.6;
}

/* reversed layout */
.reverse .split {
  grid-template-columns: .9fr 1.1fr;
}
.reverse .split-image {
  order: 2;
}

/* responsive */
@media (max-width: 900px){
  /* About-Sektionen auf Handy untereinander anzeigen */
    .split {
      display: flex;            /* statt Grid */
      flex-direction: column;   /* untereinander */
      gap: 24px;
    }

    .split-image,
    .split-text {
      width: 100%;
    }

    /* In den "reverse"-Abschnitten: Bild nach oben */
    .reverse .split-image {
      order: -1;
    }
}

/* ===== About Outro ===== */
.about-outro blockquote {
  font-size: 22px;
  line-height: 1.6;
  color: #374151;
  font-style: italic;
  margin: 0;
}
.about-outro p {
  font-size: 18px;
  color: var(--muted);
  max-width: 700px;
  margin-inline: auto;
}

/* ===== Forms ===== */
.form { margin-top: 18px; }
.form-row{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.form-row.checkbox{ flex-direction:row; align-items:flex-start; gap:10px; }
.form-row label{ font-weight:600; }
.form input[type="text"],
.form input[type="email"],
.form textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line);
  border-radius:10px; font: inherit; background:#fff;
}
.form input:focus, .form textarea:focus{ outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(107,143,189,.15); }
.field-error{ color:#b91c1c; font-size:.9rem; }
.alert.success{
  border:1px solid #d1fae5; background:#ecfdf5; color:#065f46;
  padding:12px 14px; border-radius:10px; margin:12px 0 20px;
}
.form-actions{ display:flex; gap:10px; align-items:center; }

.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

/* ===== Impressum ===== */

.impressum {
  padding: 60px 20px;
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.6;
}

.impressum h1 {
  text-align: center;
  margin-bottom: 40px;
}

.impressum h2 {
  margin-top: 30px;
  font-size: 1.2rem;
  color: #444;
}

.privacy-section {
  padding: 2rem 0;
}

/* ===== Impressum ===== */

.privacy-section .content {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

.privacy-section h1,
.privacy-section h2 {
  margin-top: 1.5rem;
  color: #222;
}

.privacy-section a {
  color: #0044cc;
  text-decoration: underline;
}

/* ===== Smooth Page Fade-In ===== */
main, footer {
  opacity: 0;
  animation: fadeIn 0.8s ease-in-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}