/* Öffentliche Seiten im Stil von edenbarber.de: dunkles Grün der Website (#384c32), Montserrat für Überschriften, Manrope für Text, Pfirsich-Akzent. */
@font-face { font-family: "Montserrat"; src: url("/static/fonts/montserrat.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/static/fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

body.public {
  --bg: #384c32; --card: #41573b; --card-line: #55694f; --field: #2f4129; --field-line: #94a18e; --ctl-line: #8c9a87;
  --green: #f4b497; --green-dark: #e9a07d; --green-soft: #4b5a3f; --cream: #384c32; --white: #41573b;
  --ink: #f2efe9; --muted: #c9d2c3; --line: #55694f; --warn: #f4b497; --warn-soft: #4b5a3f; --red: #e07a6a; --red-soft: #4f3a35; --ok: #9fd4a6; --code-bg: #2f4129;
  background: var(--bg); color: var(--ink);
  font-family: "Manrope", "Segoe UI", system-ui, sans-serif;
}
body.public h1, body.public h2, body.public h3, body.public .brand .mark { font-family: "Montserrat", "Segoe UI", system-ui, sans-serif; letter-spacing: -0.01em; }
body.public a { color: #f4b497; }
body.public .top { background: rgba(56, 76, 50, .88); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--card-line); }
body.public .top .wrap { min-height: 70px; }
body.public .brand img { height: 36px; width: auto; display: block; }
body.public .pnav { display: flex; align-items: center; gap: 18px; }
body.public .pnav .site { color: #f2efe9; text-decoration: none; border: 1px solid #f2efe9; border-radius: 6px; padding: 9px 16px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
body.public .pnav .site:hover { background: #f2efe9; color: var(--bg); }
body.public { accent-color: #f4b497; color-scheme: dark; }
body.public .sticky { top: 86px; }
body.public .days, body.public .nav { scrollbar-color: #5f7359 #384c32; }
body.public main.wrap { padding-top: 10px; }
body.public .section-head + .muted { margin-bottom: 14px; }
body.public .foot { border-top: 1px solid var(--card-line); color: #b7c1b0; }
body.public .foot .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 24px; }
body.public .foot a { color: #e3e8dd; }
body.public .creator-credit { display: flex; align-items: center; }
body.public .creator-credit-with-location { flex-direction: column; align-items: flex-start; gap: 6px; }
body.public .footer-location { margin: 0 4px; font-size: .73rem; line-height: 1.7; }
body.public .footer-location>span { color: var(--muted); }
body.public .creator-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px; color: var(--muted); font-size: .7rem; font-weight: 400; text-decoration: none; border-radius: 4px; }
body.public .creator-link img { display: block; width: 144px; height: auto; }
body.public .creator-link:hover span { text-decoration: underline; text-underline-offset: 3px; }
body.public .foot a:focus-visible, body.public .creator-link:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
body.public .footer-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 20px; }
body.public .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 3px; }
body.public .footer-legal .footer-withdrawal { padding: 8px 12px; border: 1px solid var(--green); border-radius: 6px; color: var(--green); font-weight: 700; text-decoration: none; }
body.public .footer-withdrawal:hover { background: var(--green-soft); text-decoration: underline; }
body.public .footer-address { grid-column: 1 / -1; justify-self: end; font-size: .75rem; }
@media (max-width: 700px) {
  body.public .foot .wrap { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  body.public .footer-legal { justify-content: flex-start; gap: 4px 16px; }
  body.public .footer-address { justify-self: start; }
}

/* Hero: nur das Hintergrundvideo als Banner, ohne Text (seit 15.10.2026) */
.hero { position: relative; min-height: min(52vh, 480px); overflow: hidden; isolation: isolate; }
.hero video, .hero .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero .poster { background: radial-gradient(ellipse at 40% 40%, #4a6142 0%, #384c32 70%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(56,76,50,.25) 0%, rgba(56,76,50,.45) 55%, #384c32 100%); }

/* Leistungsbereich mit dem Olivenbaum als großem Wasserzeichen (seit 15.10.2026).
   Baum 12 % Deckkraft, Leistungskarten 60 % deckend: Baum leicht sichtbar, alle Texte bleiben über 4,5:1. */
.mit-baum { position: relative; isolation: isolate; }
.mit-baum::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("/static/brand/baum.png") center / contain no-repeat; opacity: .12; }
body.public .mit-baum .service { background: rgba(65, 87, 59, .6); }

/* Buttons und Karten */
body.public .btn { background: #f4b497; color: #1c2119; border-radius: 6px; letter-spacing: .04em; }
body.public .btn:hover { background: #e9a07d; color: #1c2119; }
body.public .btn.ghost { background: transparent; color: #f4b497; border: 1px solid #f4b497; }
body.public .btn.danger { background: #e07a6a; color: #1c2119; }
body.public .card { background: rgba(65, 87, 59, .75); border-color: var(--card-line); border-radius: 10px; }
body.public .service { transition: transform .18s ease, border-color .18s ease; }
body.public .service:hover { transform: translateY(-3px); border-color: #f4b497; }
body.public .service .price { color: #f7c4ab; font-family: "Montserrat", sans-serif; }
body.public .service .name { color: #fff; }
body.public .section-head { margin: 36px 0 6px; }
body.public .section-head .eyebrow { color: #f4b497; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; margin: 0 0 6px; }
body.public .section-head h1, body.public .section-head h2 { margin: 0; font-size: 1.7rem; color: #fff; }

/* Tagesleiste, Slots, Formulare */
/* Availability updates preserve their own viewport anchor. */
body.public.booking-page { overflow-anchor: none; }
body.public.booking-page .days { cursor: grab; user-select: none; -webkit-user-select: none; }
body.public.booking-page .days .day { cursor: inherit; -webkit-user-drag: none; }
body.public.booking-page .days.is-dragging { cursor: grabbing; scroll-behavior: auto; }
body.public.booking-page .cols { grid-template-columns: minmax(0,760px); justify-content: center; }
body.public.booking-page main.wrap { padding-bottom: 8px; }
body.public.booking-page .foot { padding-top: 8px; }
body.public.booking-page #bform > .card { padding-bottom: 12px; }
body.public.booking-page .booking-payment-hint { margin-top: 8px; margin-bottom: 0; }
body.public .day { background: var(--card); border-color: var(--ctl-line); color: #f2efe9; }
body.public .day small { color: #c9d2c3; }
body.public .day.off { opacity: 1; background: #4b5149; border-color: #71776e; color: #d0d3cd; cursor: not-allowed; }
body.public .day.off small { color: #b9c3b3; }
body.public .day.on { background: #f4b497; color: #1c2119; border-color: #f4b497; }
body.public .day.on small { color: #3a2a22; }
body.public .slots label { background: var(--card); border-color: var(--ctl-line); color: #f2efe9; }
body.public .slots label:hover { border-color: #f4b497; }
body.public .slots input:checked + label { background: #f4b497; color: #1c2119; border-color: #f4b497; font-weight: 700; }
body.public .slots input:focus-visible + label { outline-color: #f4b497; }
body.public input[type=text], body.public input[type=email], body.public input[type=tel], body.public select, body.public textarea { background: var(--field); color: #f2efe9; border-color: var(--field-line); }
body.public input:focus, body.public select:focus, body.public textarea:focus { outline: 2px solid #f4b497; outline-offset: 1px; border-color: #f4b497; }
body.public ::placeholder { color: #a7b3a0; opacity: 1; }
body.public .alert { background: #4b5a3f; border-color: #f4b497; color: #f2efe9; }
body.public .alert.ok { background: #3f5f44; border-color: #9fd4a6; }
body.public .alert.err { background: #4f3a35; border-color: #e07a6a; }
body.public .pill { background: #2f4129; color: #f4b497; }
body.public .pill.warn { background: #2f4129; color: #f4d29a; }
body.public .pill.red { background: #3a2a26; color: #f0a194; }
body.public .pill.grey { background: #4a5e44; color: #d3dbcd; }
body.public .total { border-color: var(--card-line); color: #fff; }
body.public .sum dt { color: #c9d2c3; }
body.public .daynav a { color: #f4b497; }
body.public table { background: transparent; }
body.public th, body.public td { border-color: var(--card-line); }

@media (prefers-reduced-motion: reduce) { body.public .service { transition: none; } }
@media (max-width: 600px) { .hero { min-height: 40vh; } body.public .brand img { height: 30px; } body.public .top .wrap { min-height: 60px; flex-wrap: nowrap; } }
/* Owner-only preview: fictional reviews are visibly labelled on every screen size. */
.review-preview-banner{background:#f4b493;color:#273624;padding:16px 0}
.review-preview-banner .wrap{display:flex;gap:12px 24px;flex-wrap:wrap;align-items:center}
.review-preview-banner a{color:#273624;text-decoration:underline}
.review-preview{margin:52px 0;padding-top:32px;border-top:1px solid #ffffff40;scroll-margin-top:20px}
.review-demo-label{border:1px solid #f4b493;padding:14px 16px;border-radius:10px;line-height:1.6}
.review-count{font-size:18px;margin:24px 0}.review-count strong{font-size:32px;color:#f4b493}
.review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:18px 0 24px}
.review-card h4{font-size:18px;margin:12px 0}.review-card p{line-height:1.6}.review-stars{color:#f4b493;font-size:23px;letter-spacing:2px}
.review-actions{flex-wrap:wrap}.review-actions button:disabled{opacity:.65;cursor:not-allowed}
@media(max-width:700px){.review-grid{grid-template-columns:1fr}.review-preview-banner .wrap{align-items:flex-start;flex-direction:column}.review-preview{margin:32px 0}}

/* Salon reviews read as one group; the maker credit closes the page independently. */
body.public.service-page main.wrap{padding-bottom:12px}
body.public.service-page .foot{padding:16px 0;background:#32452d}
.google-reviews{min-width:0;margin:26px 0 0;padding:20px 0 0;border-top:1px solid var(--card-line);scroll-margin-top:90px}
.google-reviews-heading{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin-bottom:12px}
body.public .google-reviews h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
.google-review-logo{display:block;width:auto;height:24px;flex:none;object-fit:contain;margin-right:4px}
.google-reviews-heading>a{font-size:.75rem;min-height:44px;display:inline-flex;align-items:center;text-underline-offset:3px}
.google-rating{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.google-rating>strong{font-size:1rem;line-height:1.2;font-weight:600;font-variant-numeric:tabular-nums}
.google-rating>span:last-child{font-size:.78rem;color:var(--muted);margin-left:4px}
.google-review-stars{display:inline-block;position:relative;flex-shrink:0;color:#81917b;font-size:.9rem;line-height:1.2;letter-spacing:1px;white-space:nowrap}
.google-review-stars>span:last-child{position:absolute;inset:0 auto 0 0;overflow:hidden;color:#e5c27d}
.google-review-order{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
.google-review-list{display:flex;gap:0;align-items:stretch;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 0 10px;scrollbar-width:thin;scrollbar-color:#829375 #384c32}
.google-review-card{flex:0 0 33.333333%;min-width:0;scroll-snap-align:start;padding:0 20px;background:transparent;border:0;border-left:1px solid var(--card-line);border-radius:0;overflow-wrap:anywhere;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;gap:4px 8px;align-content:start}
.google-review-card:first-child{border-left:0;padding-left:0}
.google-review-card:last-child{padding-right:0}
body.public .google-review-card h3{font:600 .85rem "Manrope",sans-serif;margin:0;grid-column:1;grid-row:1}
.google-review-meta{display:contents}
.google-review-meta .google-review-stars{grid-column:2;grid-row:1;font-size:.78rem;align-self:center}
.google-review-meta time,.google-review-meta .google-review-relative-date{color:var(--muted);font-size:.7rem;grid-column:1/-1;grid-row:2}
.google-review-text,.google-review-body{font-size:.85rem;line-height:1.6;margin:6px 0 0;white-space:pre-wrap;grid-column:1/-1;grid-row:3}
.google-review-body summary{cursor:pointer;list-style:none}
.google-review-body summary::-webkit-details-marker{display:none}
.google-review-excerpt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.google-review-full{display:block;color:var(--green);text-decoration:underline;text-underline-offset:3px;margin-top:6px;font-size:.78rem}
.google-review-body[open] .google-review-excerpt{display:none}
.google-review-body p{margin:8px 0 0}
.google-review-updated{margin:4px 0 0;font-size:.65rem}
.google-reviews :focus-visible{outline:2px solid var(--green);outline-offset:4px}
.google-review-list:focus-visible{outline-offset:0}
@media(max-width:700px){
  .google-reviews{scroll-margin-top:120px}
  .google-reviews-heading{gap:0;margin-bottom:12px}
  .google-reviews-heading>a{min-height:36px}
  .google-review-list{gap:12px;align-items:start}
  .google-review-card,.google-review-card:first-child,.google-review-card:last-child{flex:0 0 88%;padding:14px;border:1px solid var(--card-line);border-radius:6px;background:#41573b66}
}

.language-picker{display:flex;gap:8px;align-items:center;font-size:12px}.language-picker select{max-width:140px;padding:8px}.pnav{display:flex;gap:16px;align-items:center;flex-wrap:wrap}@media(max-width:600px){.public .top .wrap{flex-wrap:wrap;gap:12px}.language-picker{max-width:100%}}
