/* ============================================================
     LOKALE SCHRIFTEN (@font-face) – deine Markenfonts
     Cinzel        = Display/Überschriften (klassische Versalien-Serife)
     Playlist Script = Markenname & Akzente (deine Script-Schrift)
     Body          = System-Schrift (kein Download, kein externer Aufruf)
     Dateien liegen im Ordner /fonts/ neben index.html.
     ============================================================ */

  /* --- Cinzel (Display / Überschriften) --- */
  @font-face {
    font-family: 'Cinzel';
    font-style: normal; font-weight: 400; font-display: swap;
    src: url('fonts/Cinzel-Regular.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Cinzel';
    font-style: normal; font-weight: 500; font-display: swap;
    src: url('fonts/Cinzel-Medium.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Cinzel';
    font-style: normal; font-weight: 600; font-display: swap;
    src: url('fonts/Cinzel-SemiBold.woff2') format('woff2');
  }

  /* --- Playlist Script (Markenname / Akzente) --- */
  @font-face {
    font-family: 'Playlist Script';
    font-style: normal; font-weight: 400; font-display: swap;
    src: url('fonts/PlaylistScript-Regular.woff2') format('woff2');
  }

  /* ========== DESIGN-TOKENS (abgestimmt auf dein Siegel-Logo) ========== */
  :root {
    --ivory:       #fbf6f0;   /* warmer Grundton */
    --paper:       #ffffff;
    --copper:      #b07f5c;   /* Kupfer – Hauptakzent */
    --copper-deep: #8a5a3b;   /* dunkles Kupfer für Hover/Linien */
    --rose-light:  #ecd5c7;   /* zarte Ränder, Karten */
    --blush:       #f6e7dd;   /* Aquarell-Wash hell */
    --ink:         #2c2a30;   /* Text */
    --ink-soft:    #6d6660;   /* Sekundärtext */
    --gold:        #c9973f;   /* Sterne */
    --font-script: 'Playlist Script', cursive;       /* deine Script-Schrift */
    --font-display:'Cinzel', Georgia, serif;          /* Versalien-Serife */
    --font-body:   system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }

  /* ===== Feinabstimmung für die Versalienschrift Cinzel =====
     Großbuchstaben brauchen etwas mehr Laufweite, damit sie edel
     statt gedrängt wirken. Gilt für alle Display-Überschriften. */
  .hero h1, .section-head h2, .about h2,
  .service h3, .step h3, .contact-card h3, .summary .big {
    letter-spacing: .04em;
  }
  /* FAQ-Fragen sind ganze Sätze -> in Versalien schlecht lesbar.
     Daher hier bewusst die gut lesbare Body-Schrift statt Cinzel. */
  .faq summary {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0;
  }

  body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--ink);
    background: var(--ivory);
    line-height: 1.65;
    font-size: 1.02rem;
  }

  img { max-width: 100%; display: block; }
  a { color: var(--copper-deep); }
  :focus-visible { outline: 3px solid var(--copper); outline-offset: 3px; border-radius: 4px; }

  .wrap { max-width: 1060px; margin: 0 auto; padding: 0 22px; }

  /* ========== NAVIGATION ========== */
  .nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(251,246,240,.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--rose-light);
  }
  .nav-inner {
    max-width: 1060px; margin: 0 auto; padding: 12px 22px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
  }
  .brand {
    display: flex; align-items: center;
    font-family: var(--font-script);
    font-size: 1.7rem; color: var(--copper-deep);
    text-decoration: none; line-height: 1;
  }
  /* Logo-Bild im Menü (ersetzt den Schriftzug, sobald bilder/logo.png existiert) */
  .brand-logo { height: 50px; width: auto; max-width: 220px; display: block; }
  .nav-links { display: flex; gap: 26px; list-style: none; }
  .nav-links a {
    text-decoration: none; color: var(--ink);
    font-size: .92rem; letter-spacing: .04em; text-transform: uppercase;
    font-weight: 400; padding: 4px 0;
    border-bottom: 2px solid transparent;
    transition: border-color .2s, color .2s;
  }
  .nav-links a:hover { color: var(--copper-deep); border-color: var(--copper); }
  .nav-cta {
    background: var(--copper); color: #fff !important;
    padding: 9px 18px !important; border-radius: 999px;
    border-bottom: none !important;
  }
  .nav-cta:hover { background: var(--copper-deep); }

  /* --- Hamburger-Button (nur mobil sichtbar) --- */
  .nav-toggle {
    display: none;
    flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px;
    background: transparent; border: none; cursor: pointer; margin: 0;
  }
  .nav-toggle span {
    display: block; height: 2px; width: 100%;
    background: var(--copper-deep); border-radius: 2px;
    transition: transform .25s, opacity .2s;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  @media (max-width: 760px) {
    .nav-toggle { display: flex; }
    /* Menü klappt unter die Leiste auf */
    #primaryNav {
      position: absolute; top: 100%; left: 0; right: 0;
      background: var(--ivory);
      border-bottom: 1px solid var(--rose-light);
      max-height: 0; overflow: hidden;
      transition: max-height .3s ease;
    }
    #primaryNav.open { max-height: 70vh; }
    .nav-links { flex-direction: column; gap: 0; padding: 6px 22px 18px; }
    .nav-links li { width: 100%; }
    .nav-links a {
      display: block; padding: 13px 2px; font-size: 1rem;
      text-transform: none; letter-spacing: .02em;
      border-bottom: 1px solid var(--rose-light);
    }
    .nav-links a:hover { border-color: var(--rose-light); }
    .nav-cta {
      text-align: center; margin-top: 14px; padding: 12px 18px !important;
    }
  }

  /* ========== HERO mit Aquarell-Siegel (Signatur-Element) ========== */
  .hero {
    position: relative; overflow: hidden;
    padding: 8px 0 16px; text-align: center;
  }
  .hero .wash {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
	width: 100%; height: 100%; 
  }
  .hero-content { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 0 22px; }
.hero .seal { width: 1200px; max-width: 92%; height: auto; margin: 0 auto 22px; display: block; }
  .eyebrow {
    text-transform: uppercase; letter-spacing: .22em;
    font-size: .8rem; color: var(--copper-deep); font-weight: 500;
  }
  .hero h1 {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(2.2rem, 5.4vw, 3.6rem);
    line-height: 1.12; margin: 14px 0 8px;
  }
  .hero h1 .script {
    font-family: var(--font-script); font-weight: 400;
    color: var(--copper); display: block;
    font-size: clamp(2.6rem, 6.4vw, 4.4rem);
  line-height: 1.5;
  margin-top: 10px;
  padding-bottom: 0.12em;
  }
  .hero p.lead { color: var(--ink-soft); max-width: 540px; margin: 14px auto 30px; }
  .btn {
    display: inline-block; background: var(--copper); color: #fff;
    text-decoration: none; font-weight: 500; font-size: 1.02rem;
    padding: 14px 34px; border-radius: 999px; border: none; cursor: pointer;
    font-family: var(--font-body); letter-spacing: .02em;
    transition: background .2s, transform .15s;
  }
  .btn:hover { background: var(--copper-deep); transform: translateY(-1px); }
  .btn.ghost {
    background: transparent; color: var(--copper-deep);
    border: 1.5px solid var(--copper); margin-left: 12px;
  }
  .btn.ghost:hover { background: var(--blush); }
  .btn:disabled { background: #ccc; cursor: not-allowed; transform: none; }

  /* ========== SEKTIONEN ========== */
  section { padding: 76px 0; }
  section.tinted { background: var(--paper); border-top: 1px solid var(--rose-light); border-bottom: 1px solid var(--rose-light); }
  .section-head { text-align: center; margin-bottom: 40px; }
  .section-head .script-line {
    font-family: var(--font-script); color: var(--copper);
    font-size: 2rem; line-height: 1;
  }
  .section-head h2 {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin-top: 4px;
  }
  .section-head p.sub { color: var(--ink-soft); max-width: 560px; margin: 10px auto 0; }

  /* ========== LEISTUNGEN ========== */
  .services {
    display: grid; gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
  .service {
    background: var(--paper); border: 1px solid var(--rose-light);
    border-radius: 14px; padding: 26px 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
  }
  section.tinted .service { background: var(--ivory); }
  .service .icon {
    width: 46px; height: 46px; margin-bottom: 14px;
    color: var(--copper);
  }
  .service h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin-bottom: 6px; }
  .service p { font-size: .94rem; color: var(--ink-soft); }

  /* ========== ABLAUF (echte Sequenz -> Nummern gerechtfertigt) ========== */
  .steps { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: step; }
  .step { position: relative; padding: 26px 22px 22px; background: var(--ivory); border: 1px solid var(--rose-light); border-radius: 14px; }
  .step::before {
    counter-increment: step; content: counter(step);
    font-family: var(--font-display); font-size: 2.4rem; font-weight: 500;
    color: var(--copper); opacity: .55; display: block; line-height: 1; margin-bottom: 8px;
  }
  .step h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; margin-bottom: 6px; }
  .step p { font-size: .93rem; color: var(--ink-soft); }

  /* ========== BEWERTUNGEN (aus deinem Widget übernommen) ========== */
  .summary { text-align: center; margin: 4px 0 30px; font-size: 1.05rem; }
  .summary .big { font-family: var(--font-display); font-size: 2.6rem; font-weight: 600; color: var(--ink); }
  .stars { color: var(--gold); letter-spacing: 2px; font-size: 1.3rem; }
  /* Masonry: Spalten statt Zeilen -> keine Löcher bei Karten ohne Foto.
     Die Karten fließen senkrecht (Spalte für Spalte) statt waagerecht. */
  .grid {
    column-count: 3;
    column-gap: 18px;
    margin-bottom: 44px;
  }
  @media (max-width: 900px) { .grid { column-count: 2; } }
  @media (max-width: 600px){
  .grid{
    column-count: initial;   /* Masonry aus – Einspalter wird echter Stapel */
    display: flex;
    flex-direction: column;
  }
    .grid .card{
    flex: 0 0 auto;   /* Karte behält ihre Eigenhöhe, wird nicht gestaucht */
  }
}
  .card {
    break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
    margin-bottom: 18px;
    border: 1px solid var(--rose-light); border-radius: 12px; overflow: hidden;
    background: var(--paper); box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    display: flex; flex-direction: column;
  }
  .card .photo {
    background: var(--paper);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-soft); font-size: .85rem;
    min-height: 60px;
  }
  /* Foto in voller Höhe zeigen (Hochkant bleibt vollständig sichtbar),
     nie verzerrt, nie beschnitten. */
  .card .photo img { width: 100%; height: auto; display: block; }
  .card .body { padding: 14px 16px; background: linear-gradient(135deg, var(--blush) 0%, var(--rose-light) 100%); }
  .card .cstars { color: var(--gold); font-size: 1rem; }
  .card .text { font-size: .92rem; margin: 6px 0; }
  .card .meta { font-size: .8rem; color: #8a7f76; }

  /* --- Bewertungs-Formular --- */
  .form-box {
    background: var(--blush); border-radius: 16px;
    padding: 28px; border: 1px solid var(--rose-light);
    max-width: 720px; margin: 0 auto;
  }
  .form-box h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; color: var(--copper-deep); margin-bottom: 4px; }
  label { display: block; font-weight: 500; margin: 16px 0 4px; font-size: .92rem; }
  input[type=text], input[type=email], textarea {
    width: 100%; padding: 11px 13px;
    border: 1px solid #d8c6ba; border-radius: 8px;
    font-family: var(--font-body); font-size: .96rem; background: #fff;
  }
  textarea { min-height: 96px; resize: vertical; }
  .rating-input { font-size: 1.9rem; color: #d6cdc4; cursor: pointer; user-select: none; }
  .rating-input span.active { color: var(--gold); }
  .consent {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 18px 0; font-size: .85rem; background: #fff;
    padding: 12px 14px; border-radius: 8px; border: 1px solid #e8dcd3;
  }
  .consent input { margin-top: 3px; }
  .hint { font-size: .78rem; color: #9a8f86; margin-top: 5px; }

  /* ========== ÜBER MICH ========== */
  .about { display: grid; gap: 40px; grid-template-columns: 1fr 1.3fr; align-items: center; }
  .about .portrait {
    aspect-ratio: 4/5; border-radius: 50% 50% 14px 14px / 42% 42% 14px 14px;
    background: linear-gradient(160deg, var(--rose-light), var(--copper));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .9rem; overflow: hidden;
    border: 6px solid var(--paper); box-shadow: 0 6px 22px rgba(140,90,59,.18);
  }
  .about .portrait img { width: 100%; height: 100%; object-fit: cover; }
  .about h2 { font-family: var(--font-display); font-weight: 500; font-size: 2rem; margin-bottom: 4px; }
  .about .script-line { font-family: var(--font-script); color: var(--copper); font-size: 1.9rem; }
  .about p { color: var(--ink-soft); margin-top: 12px; }
  @media (max-width: 760px) { .about { grid-template-columns: 1fr; } .about .portrait { max-width: 300px; margin: 0 auto; } }

  /* ========== FAQ ========== */
  .faq { max-width: 760px; margin: 0 auto; }
  .faq details {
    background: var(--paper); border: 1px solid var(--rose-light);
    border-radius: 12px; margin-bottom: 12px; overflow: hidden;
  }
  .faq summary {
    cursor: pointer; padding: 16px 20px; font-weight: 500;
    font-family: var(--font-display); font-size: 1.12rem;
    list-style: none; position: relative; padding-right: 44px;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: '+'; position: absolute; right: 18px; top: 50%;
    transform: translateY(-50%); color: var(--copper);
    font-size: 1.5rem; font-weight: 400; transition: transform .2s;
  }
  .faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
  .faq .answer { padding: 0 20px 18px; color: var(--ink-soft); font-size: .95rem; }

  /* ========== KONTAKT ========== */
  .contact-grid { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; align-items: start; }
  @media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }
  .contact-card {
    background: var(--paper); border: 1px solid var(--rose-light);
    border-radius: 14px; padding: 26px;
  }
  .contact-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin-bottom: 10px; }
  .contact-list { list-style: none; }
  .contact-list li { margin-bottom: 10px; font-size: .98rem; }
  .contact-list b { font-weight: 500; }

  /* ========== KARTE ========== */  
.karte{
  overflow:hidden; margin-top:16px;
  border:1px solid var(--rose-light); border-radius:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.04); background:var(--paper);
}
.karte-bild{
  display:block; position:relative; width:100%; padding:0;
  border:none; background:none; cursor:zoom-in;
}
.karte-bild img{ width:100%; height:auto; display:block; }
.karte-lupe{
  position:absolute; right:10px; bottom:10px;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.9); color:var(--copper-deep);
  box-shadow:0 2px 8px rgba(140,90,59,.25);
}
.karte-lupe svg{ width:18px; height:18px; }
.karte-leiste{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px; background:var(--blush);
}
.karte-text{
  display:inline-block; text-decoration:none;
  padding:9px 18px; border-radius:999px;
  border:1px solid #e4c9b8; background:var(--paper);
  color:var(--copper-deep); font-family:inherit; font-size:.92rem; font-weight:500;
  box-shadow:0 2px 8px rgba(140,90,59,.2);
  transition:background .2s, transform .15s;
}
.karte-text:hover{ background:var(--blush); transform:translateY(-1px); }
.karte-attr{ color:var(--ink-soft); font-size:.72rem; }

/* ===== Karten-Lightbox ===== */
.klb-overlay{
  position:fixed; inset:0; display:none; z-index:10002;
  align-items:center; justify-content:center;
  background:rgba(44,42,48,.75); backdrop-filter:blur(3px); padding:20px;
}
.klb-overlay.open{ display:flex; }
.klb-buehne{
  position:relative; width:min(1000px,96vw); height:min(88vh,860px);
  overflow:hidden; border-radius:14px; background:var(--ivory);
  border:1px solid #e4c9b8; box-shadow:0 16px 40px rgba(0,0,0,.4);
  cursor:grab; touch-action:none;
}
.klb-buehne.greift{ cursor:grabbing; }
.klb-buehne img{
  position:absolute; top:0; left:0; transform-origin:0 0;
  max-width:none; user-select:none; -webkit-user-drag:none;
}
.klb-tools{
  position:absolute; right:12px; bottom:12px; display:flex; gap:6px; z-index:2;
}
.klb-tools button{
  width:38px; height:38px; border-radius:10px; cursor:pointer;
  border:1px solid #e4c9b8; background:rgba(255,255,255,.94);
  color:var(--copper-deep); font-size:1.2rem; line-height:1;
  font-family:inherit; box-shadow:0 2px 8px rgba(140,90,59,.2);
}
.klb-tools button:hover{ background:var(--blush); }
.klb-zu{
  width:38px; height:38px; border-radius:10p.karte-textx; cursor:pointer;
  position:absolute; top:10px; right:12px; z-index:2;
  border:1px solid #e4c9b8; background:rgba(255,255,255,.94);
  color:var(--copper-deep); font-size:1.1rem; line-height:1; font-family:inherit;
}
.klb-zu:hover{ background:var(--blush); }

.klb-route{
  position:absolute; left:12px; bottom:12px; z-index:2;
  padding:9px 18px; border-radius:999px; cursor:pointer;
  border:1px solid #e4c9b8; background:rgba(255,255,255,.94);
  color:var(--copper-deep); font-family:inherit; font-size:.92rem; font-weight:500;
  box-shadow:0 2px 8px rgba(140,90,59,.2);
}
.klb-route:hover{ background:var(--blush); }

  /* ========== FOOTER ========== */
  footer {
    background: var(--ink); color: #cfc7c0;
    padding: 40px 0 30px; text-align: center; font-size: .9rem;
  }
  footer .brand { color: var(--rose-light); font-size: 2rem; display: inline-block; margin-bottom: 10px; }
  footer nav { margin: 10px 0 16px; }
  footer nav a { color: #cfc7c0; margin: 0 12px; text-decoration: none; }
  footer nav a:hover { color: #fff; text-decoration: underline; }
  footer .legal { font-size: .8rem; color: #948c85; }
  
  /* ========== Google-/Apple-Einladung ========== */
  .google-einladung { margin: 22px auto 0; max-width: 720px; }
  .ge-inner {
    background: #fff; border: 1px solid var(--rose-light, #ecd5c7);
    border-radius: 16px; padding: 26px; text-align: center;
    box-shadow: 0 2px 10px rgba(140,90,59,.08);
  }
  .ge-stars { color: var(--gold, #c9973f); font-size: 1.5rem; letter-spacing: 2px; }
  .ge-inner h3 { font-family: var(--font-display, Georgia, serif); color: var(--copper-deep, #8a5a3b); margin: 6px 0 4px; font-size: 1.4rem; }
  .ge-inner p { color: var(--ink-soft, #6d6660); margin: 0 auto 18px; max-width: 460px; }
  .ge-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
  .ge-btn {
    display: inline-block; text-decoration: none; cursor: pointer;
    font-family: inherit; font-size: 1rem; font-weight: 500;
    padding: 12px 22px; border-radius: 999px; border: none;
  }
  .ge-google { background: var(--copper, #b07f5c); color: #fff; }
  .ge-google:hover { background: var(--copper-deep, #8a5a3b); }
  .ge-copy { background: transparent; color: var(--copper-deep, #8a5a3b); border: 1.5px solid var(--copper, #b07f5c); }
  .ge-copy:hover { background: var(--blush, #f6e7dd); }
  .ge-apple { display: inline-block; margin-top: 14px; color: var(--ink-soft, #6d6660); font-size: .9rem; }
  .ge-hint { font-size: .82rem; color: #2e7d32; margin-top: 10px; }
  
  /* ========== Marken-Einblendung (Toast) ========== */
  .hinweis-toast{
    position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(-16px);
    z-index:9999; width:min(440px,92vw);
    background:linear-gradient(135deg,#fbf6f0 0%,#f6e7dd 55%,#eccfc0 100%);
    border:1px solid #e4c9b8; border-radius:16px;
    box-shadow:0 10px 30px rgba(140,90,59,.22);
    padding:18px 40px 18px 20px; text-align:left;
    opacity:0; transition:opacity .3s ease, transform .3s ease;
    display:flex; gap:14px; align-items:flex-start;
  }
  .hinweis-toast.sichtbar{ opacity:1; transform:translateX(-50%) translateY(0); }
  .hinweis-toast .icon{
    flex:0 0 auto; width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--copper); color:#fff; font-size:1.2rem; margin-top:2px;
  }
  .hinweis-toast.fehler .icon{ background:#c0603f; }
  .hinweis-toast .titel{
    font-family:'Cinzel',Georgia,serif; font-weight:600; letter-spacing:.04em;
    color:var(--copper-deep); font-size:1.15rem; line-height:1.1; margin-bottom:3px;
  }
  .hinweis-toast.fehler .titel{ color:#a24a2c; }
  .hinweis-toast .text{ color:var(--ink-soft); font-size:.94rem; line-height:1.45; }
  .hinweis-toast .zu{
    position:absolute; top:10px; right:12px; border:none; background:none;
    color:var(--copper-deep); font-size:1.1rem; cursor:pointer; line-height:1; opacity:.6;
  }
  .hinweis-toast .zu:hover{ opacity:1; }
  
  /* Bewertungsbereich erst zeigen, wenn geladen (kein Aufblitzen der Dummys) */
  #bewertungen .summary, #bewertungen #reviewGrid, #bewertungen #bewLeer { opacity: 0; transition: opacity .35s ease; }
  #bewertungen.bew-bereit .summary, #bewertungen.bew-bereit #reviewGrid, #bewertungen.bew-bereit #bewLeer { opacity: 1; }
  
    /* ========== Upload-Fortschritt (Overlay) ========== */
  .upload-overlay{
    position:fixed; inset:0; z-index:10000; display:none;
    background:rgba(44,42,48,.55); backdrop-filter:blur(3px);
    align-items:center; justify-content:center; padding:20px;
  }
  .upload-overlay.aktiv{ display:flex; }
  .upload-box{
    width:min(420px,92vw); text-align:center; padding:30px 26px 26px;
    background:linear-gradient(135deg,#fbf6f0 0%,#f6e7dd 60%,#eccfc0 100%);
    border:1px solid #e4c9b8; border-radius:18px;
    box-shadow:0 16px 40px rgba(140,90,59,.3);
  }
  .upload-box h3{
    font-family:'Cinzel',Georgia,serif; font-weight:600; letter-spacing:.04em;
    color:var(--copper-deep); font-size:1.3rem; margin-bottom:6px;
  }
  .upload-box p{ color:var(--ink-soft); font-size:.94rem; margin-bottom:18px; }
  .upload-bar{
    height:12px; border-radius:999px; background:#fff;
    border:1px solid #e4c9b8; overflow:hidden; margin-bottom:10px;
  }
  .upload-bar span{
    display:block; height:100%; width:0%;
    background:linear-gradient(90deg,var(--copper),var(--gold));
    transition:width .2s ease;
  }
  .upload-prozent{ font-size:.9rem; color:var(--copper-deep); font-weight:600; }
  .upload-warnung{
    margin-top:16px; font-size:.84rem; color:#a24a2c;
    background:#fff; border:1px solid #f0d9cd; border-radius:10px; padding:10px 12px;
  }
  .upload-spinner{
    width:34px; height:34px; margin:0 auto 14px; border-radius:50%;
    border:3px solid #e4c9b8; border-top-color:var(--copper);
    animation:uspin .8s linear infinite;
  }
  @keyframes uspin{ to{ transform:rotate(360deg); } }
  @media (prefers-reduced-motion: reduce){ .upload-spinner{ animation:none; } }
  
  /* ========== Bewertungen: Aufklappen ab 15 Stück ========== */
  .grid-wrap{ position:relative; }
  /* Nur wenn eingeklappt: Höhe deckeln, Rest anschneiden */
  .grid-wrap.eingeklappt .grid{
    max-height:600px; overflow:hidden;
  }
  /* Weicher Verlauf über die angeschnittenen Karten */
  .grid-wrap.eingeklappt::after{
    content:""; position:absolute; left:0; right:0; bottom:0px; height:360px;
    background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.72) 55%, var(--paper) 100%);
    pointer-events:none;
  }
  .mehr-zeile{ text-align:center; margin:-18px 0 44px; position:relative; z-index:2; }
  .grid-wrap:not(.eingeklappt) .mehr-zeile{ margin-top:6px; }
  .btn-mehr{
    background:var(--paper); color:var(--copper-deep);
    border:1.5px solid var(--copper); border-radius:999px;
    padding:11px 26px; font-family:inherit; font-size:.98rem; font-weight:500;
    cursor:pointer; box-shadow:0 4px 14px rgba(140,90,59,.12);
    transition:background .2s, transform .15s;
  }
  .btn-mehr:hover{ background:var(--blush); transform:translateY(-1px); }
  .btn-mehr .pfeil{ display:inline-block; margin-left:8px; transition:transform .25s; }
  .grid-wrap:not(.eingeklappt) .btn-mehr .pfeil{ transform:rotate(180deg); }
    /* ========== Kontakt-Pop-in (rechter Rand) ========== */
  .kontakt-popin{
    position:fixed; top:50%; right:0; transform:translateY(-50%);
    z-index:9500; display:flex; align-items:center;
    font-family:var(--font-body);
  }
  /* Griff (immer sichtbar, dezent) */
  .kp-griff{
    display:flex; flex-direction:column; align-items:center; gap:6px;
    background:var(--copper); color:#fff; border:none; cursor:pointer;
    padding:18px 7px; border-radius:14px 0 0 14px;
    box-shadow:-3px 0 14px rgba(140,90,59,.25);
    font-family:inherit; font-size:.7rem; letter-spacing:.12em;
    writing-mode:vertical-rl; text-orientation:mixed; text-transform:uppercase;
    transition:background .2s;
  }
  .kp-griff:hover{ background:var(--copper-deep); }
 
  /* Panel: liegt rechts außerhalb und schiebt sich herein */
  .kp-panel{
    width:0; overflow:hidden; opacity:0;
    background:linear-gradient(135deg,#fbf6f0 0%,#f6e7dd 100%);
    border:1px solid var(--rose-light); border-right:none;
    border-radius:14px 0 0 14px;
    box-shadow:-6px 0 24px rgba(140,90,59,.18);
    transition:width .3s ease, opacity .25s ease;
  }
  .kontakt-popin.offen .kp-panel{ width:236px; opacity:1; }
  .kp-inner{ padding:16px 16px 14px; width:236px; }
  .kp-titel{
    font-family:var(--font-display),Georgia,serif; font-weight:600; letter-spacing:.04em;
    color:var(--copper-deep); font-size:1rem; margin-bottom:10px; text-align:center;
  }
  .kp-link{
    display:flex; align-items:center; gap:11px; text-decoration:none;
    color:var(--ink); background:#fff; border:1px solid #ecdcd1;
    border-radius:10px; padding:10px 12px; margin-bottom:8px;
    font-size:.9rem; transition:background .2s, transform .15s;
  }
  .kp-link:hover{ background:var(--blush); transform:translateX(-2px); }
  .kp-link svg, .kp-link img{ width:20px; height:20px; flex:0 0 auto; object-fit:contain; }
  .kp-link .kp-label{ line-height:1.25; }
  .kp-link .kp-sub{ display:block; font-size:.76rem; color:var(--ink-soft); }

  /* Datenschutz-Hinweis im Pop-in */
  .kp-hinweis{
    margin:12px 0 0; padding-top:12px;
    border-top:1px solid var(--rose-light);
    font-size:.72rem; line-height:1.4; color:var(--ink-soft);
  }
  .kp-hinweis a{ color:var(--copper-deep); text-decoration:underline; }

  @media (max-width:400px){
    .kontakt-popin.offen .kp-panel, .kp-inner{ width:208px; }
    .kp-griff{ padding:16px 6px; }
  }
  @media (prefers-reduced-motion: reduce){
    .kp-panel{ transition:none; }
  }

  /* ========== Externe-Dienste-Hinweis (Interstitial) ========== */
  .extd-overlay{
    position:fixed; inset:0; display:none; z-index:10001;
    align-items:center; justify-content:center;
    background:rgba(44,42,48,.55); backdrop-filter:blur(3px); padding:20px;
  }
  .extd-overlay.open{ display:flex; }
  .extd-box{
    width:min(380px,92vw);
    background:linear-gradient(135deg,#fbf6f0 0%,#f6e7dd 60%,#eccfc0 100%);
    border:1px solid #e4c9b8; border-radius:18px;
    padding:26px 24px; box-shadow:0 16px 40px rgba(140,90,59,.3);
  }
  .extd-box h4{
    font-family:var(--font-display); font-weight:600; letter-spacing:.04em;
    color:var(--copper-deep); font-size:1.2rem; margin-bottom:8px;
  }
  .extd-msg{ color:var(--ink-soft); font-size:.9rem; line-height:1.5; margin-bottom:20px; }
  .extd-btns{ display:flex; gap:10px; justify-content:flex-end; align-items:center; }
  .extd-cancel{
    background:none; border:none; padding:9px 14px; cursor:pointer;
    color:var(--ink-soft); font-family:inherit; font-size:.95rem;
  }
  .extd-cancel:hover{ color:var(--copper-deep); }
  
  .zum-ende{
  position:fixed; right:16px; bottom:20px; z-index:9400;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--copper); color:#fff; border:none;
  box-shadow:0 4px 16px rgba(140,90,59,.3);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s, transform .25s, background .2s, visibility .25s;
}
.zum-ende.sichtbar{ opacity:1; visibility:visible; transform:translateY(0); }
.zum-ende:hover{ background:var(--copper-deep); }
.zum-ende svg{ width:22px; height:22px; }
@media (max-width:400px){
  .zum-ende{ right:12px; bottom:14px; width:42px; height:42px; }
}
  
  
.news-banner{
  display:none;
  max-width:640px; margin:0 auto 18px;
  background:linear-gradient(135deg,#fbf6f0 0%,#f6e7dd 60%,#eccfc0 100%);
  border:1px solid var(--rose-light); border-radius:999px;
  padding:9px 40px 9px 20px; position:relative;
  font-size:.9rem; line-height:1.4; color:var(--ink);
  box-shadow:0 4px 14px rgba(140,90,59,.12);
}
.news-banner.sichtbar{ display:block; }
.nb-titel{
  font-family:var(--font-display); font-weight:600; letter-spacing:.03em;
  color:var(--copper-deep); margin-right:8px;
}
.nb-text{ color:var(--ink-soft); }
.nb-link{
  display:inline-block; margin-left:10px; padding:3px 14px;
  border-radius:999px; background:var(--copper); color:#fff !important;
  text-decoration:none; font-size:.82rem; font-weight:500;
}
.nb-link:hover{ background:var(--copper-deep); }
.nb-zu{
  position:absolute; top:50%; right:14px; transform:translateY(-50%);
  border:none; background:none; cursor:pointer; line-height:1;
  color:var(--copper-deep); font-size:1rem; opacity:.55;
}
.nb-zu:hover{ opacity:1; }
@media (max-width:600px){
  .news-banner{ border-radius:16px; padding:10px 38px 10px 16px; font-size:.85rem; }
  .nb-link{ display:block; margin:8px auto 0; max-width:220px; }
}
  /* ========== Leere Bewertung ========== */
.bew-leer{ max-width:620px; margin:0 auto; }
.bew-leer-inner{
  text-align:center; padding:40px 28px;

}
.bew-leer .stars{ font-size:1.6rem; margin-bottom:6px; }
.bew-leer h3{
  font-family:var(--font-display); font-weight:600;
  color:var(--copper-deep); font-size:1.4rem; margin-bottom:8px;
}
.bew-leer p{ color:var(--ink-soft); max-width:440px; margin:0 auto 20px; font-size:.95rem; }
.bew-leer-buttons{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.bew-leer-buttons .btn.ghost{ margin-left:0; }

.ueber-banner{
  display:block; width:100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius:16px;
  margin-bottom:26px;
  box-shadow:0 4px 18px rgba(140,90,59,.14);
  max-width:720px;      /* statt voller Breite */
  margin:0 auto 26px;   /* zentriert */
}
@media (max-width:600px){
  .ueber-banner{ aspect-ratio: 16 / 9; }  /* 21:9 wird auf Handybreite zum Strich */
}

.ueber-salon{ 
  max-width:720px;      /* statt voller Breite */
  margin:32px auto 26px;   /* zentriert */
  }
.ueber-salon img{
  display:block; width:100%;
  border-radius:16px;
  box-shadow:0 4px 18px rgba(140,90,59,.14);
}
.ueber-salon figcaption{
  margin-top:8px; text-align:center;
  font-size:.85rem; color:var(--ink-soft);
}

.ueber-inner{ max-width:720px; margin:0 auto; }
.ueber-inner p{ color:var(--ink-soft); margin-top:12px; }