/* Basis aus dem Design-Export, unveraendert uebernommen. */

  html { -webkit-text-size-adjust:100%; }
  html { overflow-x:hidden; }
  html, body { margin:0; padding:0; background:#F0EDE5; }
  * { box-sizing:border-box; }
  a { color:#EB8465; text-decoration:none; }
  a:hover { color:#2B2521; }
  input, textarea, select, button { font-family:'Ysabeau Office', sans-serif; }
  input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible { outline:2px solid #EB8465; outline-offset:2px; }
  ::selection { background:#EB8465; color:#F0EDE5; }
  @keyframes ce-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
  @keyframes ce-rise { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }
  @keyframes ce-hint { 0%,100% { transform:translateY(0); opacity:0.55; } 50% { transform:translateY(7px); opacity:1; } }
  @media (prefers-reduced-motion: reduce) { * { animation:none !important; } }
  @media (max-width: 980px) {
    [data-r="cols2"], [data-r="cols3"] { grid-template-columns:1fr !important; }
    #entry { flex-direction:column !important; height:auto !important; }
    #entry > div:nth-child(-n+3) { min-height:44vh; flex:1 1 auto !important; }
    #entry > div:nth-child(-n+3) > div:first-child { opacity:1 !important; }
    /* Gestapelt liegt die Platte sonst im Gesicht: eigene Zeile ueber den Feldern */
    #entry-mark { position:static !important; transform:none !important; padding:16px 20px !important;
      width:100% !important; text-align:center !important; order:-1; }
    /* Flache Felder: Text braucht mehr Halt auf dem Bild */
    #entry > div:nth-child(1) > div:nth-child(2),
    #entry > div:nth-child(2) > div:nth-child(2) {
      background:linear-gradient(to top, rgba(43,37,33,0.76), rgba(43,37,33,0.34)) !important; }
    #entry > div:nth-child(3) > div:nth-child(2) {
      background:linear-gradient(to top, rgba(240,237,229,0.82), rgba(240,237,229,0.44)) !important; }
    #business { min-height:0 !important; }
    [data-r="hint"] { display:none !important; }
    #business > div:nth-child(2) { order:-1 !important; min-height:46vh !important; }
  }

  @media (max-width: 860px) {
    [data-r="navlinks"] { display:none !important; }
    [data-r="burger"] { display:flex !important; }
  }
  @media (max-width: 700px) {
    [data-r="igrow"] { overflow-x:auto !important; gap:10px !important; scrollbar-width:none; }
    [data-r="igrow"]::-webkit-scrollbar { display:none; }
    [data-r="igrow"] > div { flex:0 0 62% !important; margin-top:0 !important; }
    #entry-mark { padding:12px 18px !important; }
    #entry-mark > div:last-child { font-size:10px !important; letter-spacing:0.12em !important; }
  }



/* Eingangsbereich: Feld unter dem Zeiger waechst, die anderen weichen.
   Die Zustaende setzt app.js inline – wie im Entwurf ueber den Runtime-State.
   Im gestapelten Layout (<=980px) ueberschreibt die Media-Query unten. */
.entry-panel:focus-visible { outline: 2px solid #F0EDE5; outline-offset: -6px; }

/* Das Overlay tragt display:flex inline aus dem Entwurf – [hidden] allein
   waere dagegen wirkungslos. */
#menu[hidden] { display: none !important; }

/* Inhalt nur fuer Screenreader und Suchmaschinen */
.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Automatischer Bildwechsel ───────────────────────────────────────────
   Der Rahmen enthaelt mehrere <img class="wechselbild">, die uebereinander
   liegen; app.js schaltet die Klasse "ist-aktiv" weiter. Mit nur einem Bild
   passiert nichts, dann bleibt es ein normales Standbild. */
[data-wechsel] { position: relative; }
[data-wechsel] .wechselbild {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}
[data-wechsel] .wechselbild.ist-aktiv { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  [data-wechsel] .wechselbild { transition: none; }
}

/* Klickbare Flaechen sind Divs mit role="button" – Tastaturbedienung in app.js */
[role="button"] { -webkit-tap-highlight-color: transparent; }

/* Formular */
#anfrage select { appearance: none; border-radius: 0; }
#anfrage input:hover, #anfrage textarea:hover, #anfrage select:hover { border-color: rgba(43,37,33,0.6); }
#anfrage .form-hinweis { font-size: 14px; line-height: 1.6; color: rgba(43,37,33,0.6); }

/* ── Bewertungs-Karussell ────────────────────────────────────────────────
   Horizontales Scroll-Snap mit allen Google-Rezensionen. Wischen auf allen
   Geraeten, Pfeile ab Tablet-Breite; app.js schaltet die Pfeile. */
.rez-track {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rez-track::-webkit-scrollbar { display: none; }
.rez-track:focus-visible { outline: 2px solid #EB8465; outline-offset: 4px; }
.rez-karte {
  flex: 0 0 calc((100% - 2 * clamp(16px, 2vw, 28px)) / 3);
  scroll-snap-align: start;
  border: 1px solid rgba(43,37,33,0.16);
  padding: clamp(24px, 2.6vw, 36px);
  background: #F0EDE5;
  transition: transform 0.45s cubic-bezier(0.22,0.61,0.36,1), border-color 0.4s ease;
  display: flex;
  flex-direction: column;
}
.rez-karte:hover { transform: translateY(-5px); border-color: rgba(43,37,33,0.4); }
.rez-sterne { color: #EB8465; letter-spacing: 0.3em; margin-bottom: 18px; }
.rez-karte p { font-size: 17px; line-height: 1.62; margin: 0 0 20px; color: rgba(43,37,33,0.8); }
.rez-name { font-size: 13px; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(43,37,33,0.55); margin-top: auto; }
.rez-pfeile { display: flex; gap: 10px; }
.rez-pfeil {
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid rgba(43,37,33,0.35); background: transparent; color: #2B2521;
  font-size: 17px; line-height: 1; cursor: pointer; font-family: inherit;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.rez-pfeil:hover:not(:disabled), .rez-pfeil:focus-visible { border-color: #EB8465; background: #EB8465; color: #F0EDE5; }
.rez-pfeil:disabled { opacity: 0.3; cursor: default; }
@media (max-width: 980px) {
  .rez-karte { flex-basis: calc((100% - clamp(16px, 2vw, 28px)) / 2); }
}
@media (max-width: 700px) {
  .rez-karte { flex-basis: 84%; }
  .rez-pfeile { display: none; }
}

/* ── Pfeile unter den Wechselbildern ──
   Bewusst dezent: erben die Textfarbe der jeweiligen Sektion, halbtransparent,
   erst bei Hover/Fokus voll sichtbar. */
.bw-pfeile { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.bw-pfeil {
  width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid; background: transparent; color: inherit;
  font-family: inherit; font-size: 14px; line-height: 1;
  opacity: 0.45; cursor: pointer;
  transition: opacity 0.3s ease, background 0.3s ease;
}
.bw-pfeil:hover, .bw-pfeil:focus-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .bw-pfeil { opacity: 0.7; } }

/* Hover-Zustaende aus dem Entwurf (style-hover im Export) */
.hv1:hover, .hv1:focus-visible { opacity:0.82 !important; }
.hv2:hover, .hv2:focus-visible { background:#EB8465 !important; color:#F0EDE5 !important; }
.hv3:hover, .hv3:focus-visible { transform:translateY(-3px) !important; opacity:0.92 !important; }
.hv4:hover, .hv4:focus-visible { transform:translateY(-3px) !important; border-color:#2B2521 !important; }
.hv5:hover, .hv5:focus-visible { background:#EFE7DC !important; }
.hv6:hover, .hv6:focus-visible { transform:translateY(-3px) !important; background:#F0EDE5 !important; color:#695D20 !important; }
.hv7:hover, .hv7:focus-visible { transform:translateY(-3px) !important; border-color:#F0EDE5 !important; }
.hv8:hover, .hv8:focus-visible { transform:translateY(-5px) !important; border-color:rgba(43,37,33,0.4) !important; }
.hv9:hover, .hv9:focus-visible { transform:translateY(-3px) !important; background:#2B2521 !important; color:#F0EDE5 !important; }
.hv10:hover, .hv10:focus-visible { background:rgba(240,237,229,0.14) !important; border-color:#F0EDE5 !important; }
.hv11:hover, .hv11:focus-visible { transform:translateY(-3px) !important; background:#F0EDE5 !important; color:#EB8465 !important; }