/* ════════════════════════════════════════════════════════════
   VORMA Default Template – style.css
   Statisches CSS. CSS-Variablen werden inline aus PHP gesetzt.
   ════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   VARIABLEN – hier anpassen pro Template
   ══════════════════════════════════════════════ */


/* ══════════════════════════════════════════════
   RESET & BASE
   ══════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-main); background: var(--color-bg); color: var(--color-dark); overflow-x: hidden; }
img  { display: block; max-width: 100%; }
a    { color: inherit; }

/* Rich-Text Block-Ausrichtung – gesetzt durch Editor, durch Sanitizer-Allowlist abgesichert.
   Sowohl die VORMA-eigenen Klassen als auch Quills Standard-Klassen werden unterstützt. */
.align-left,   .ql-align-left    { text-align: left; }
.align-center, .ql-align-center  { text-align: center; }
.align-right,  .ql-align-right   { text-align: right; }
.ql-align-justify                { text-align: justify; }

/* ══════════════════════════════════════════════
   NAVIGATION
   ══════════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h); background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; padding: 0 var(--pad-h); gap: 2rem;
}
.nav__logo { font-size: 1rem; font-weight: 600; text-decoration: none; color: var(--color-dark); flex-shrink: 0; display: flex; align-items: center; }
.nav__logo img { height: 28px; width: auto; }
.nav__links { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 2rem; list-style: none; }
.nav__links a { font-size: .75rem; font-weight: 500; color: var(--color-mid); text-decoration: none; transition: color .2s; }
.nav__links a:hover { color: var(--color-dark); }
.nav__toggle { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; margin-left: auto; }
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--color-dark); border-radius: 2px; }

/* ══════════════════════════════════════════════
   MAIN
   ══════════════════════════════════════════════ */
main { padding-top: var(--nav-h); }

/* ══════════════════════════════════════════════
   SCROLL REVEAL
   ══════════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════════════
   PROSE (Rich Text)
   ══════════════════════════════════════════════ */
.prose { max-width: 680px; margin: 0 auto; }
.prose h2 { font-size: clamp(1.5rem,3vw,2.25rem); font-weight: 600; line-height: 1.2; margin-bottom: 1rem; }
.prose h3 { font-size: clamp(1.15rem,2vw,1.5rem); font-weight: 600; line-height: 1.3; margin-bottom: .75rem; margin-top: 2rem; }
.prose p  { font-size: .9rem; line-height: 1.9; color: var(--color-mid); margin-bottom: 1rem; }
.prose strong { color: var(--color-dark); font-weight: 600; }
.prose em { font-style: italic; }
.prose a  { color: var(--color-accent); text-decoration: underline; }
.prose ul, .prose ol { padding-left: 1.5rem; margin-bottom: 1rem; color: var(--color-mid); font-size: .9rem; line-height: 1.9; }
.prose blockquote { border-left: 3px solid var(--color-accent); padding: 1rem 1.5rem; margin: 2rem 0; color: var(--color-mid); font-style: italic; }

/* ══════════════════════════════════════════════
   BLOCK: TEXT
   ══════════════════════════════════════════════ */
.block-text { padding: var(--pad-section) var(--pad-h); max-width: var(--max-w); margin: 0 auto; }

/* ══════════════════════════════════════════════
   BLOCK: IMAGE
   ══════════════════════════════════════════════ */
.block-image { padding: 0 var(--pad-h); max-width: var(--max-w); margin: 3rem auto; }
.block-image img { width: 100%; border-radius: 4px; }
.block-image figcaption { margin-top: .6rem; font-size: .72rem; color: var(--color-mid); }

/* ══════════════════════════════════════════════
   BLOCK: TEXT + IMAGE
   ══════════════════════════════════════════════ */
.block-text-image { max-width: var(--max-w); margin: 4rem auto; padding: 0 var(--pad-h); }
.block-text-image__inner { display: flex; flex-wrap: wrap; gap: 4rem; align-items: center; }
.block-text-image__img  { flex: 0 0 45%; }
.block-text-image__img img { width: 100%; border-radius: 4px; }
.block-text-image__text { flex: 1; }
.block-text-image--left  .block-text-image__img { order: -1; }
.block-text-image--right .block-text-image__img { order: 1; }

/* ══════════════════════════════════════════════
   BLOCK: HERO
   ══════════════════════════════════════════════ */
.block-hero { position: relative; width: 100%; height: calc(100vh - var(--nav-h)); min-height: 480px; overflow: hidden; background: var(--color-dark); }
.block-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.block-hero__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.block-hero__content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 4rem var(--pad-h); max-width: var(--max-w); margin: 0 auto; left: 0; right: 0; }
.block-hero__title { font-size: clamp(2.25rem,5vw,4rem); font-weight: 600; color: #fff; line-height: 1.1; margin-bottom: .75rem; max-width: 700px; }
.block-hero__subtitle { font-size: .85rem; color: rgba(255,255,255,.7); font-weight: 300; }
.block-hero__scroll { position: absolute; bottom: 2rem; left: var(--pad-h); display: flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.4); }
.block-hero__scroll span { font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; }
.block-hero__scroll-line { width: 32px; height: 1px; background: rgba(255,255,255,.3); }

/* ══════════════════════════════════════════════
   BLOCK: CTA
   ══════════════════════════════════════════════ */
.block-cta { text-align: center; padding: 2rem var(--pad-h); }
.block-cta__btn { display: inline-block; font-size: .8rem; font-weight: 500; padding: .85rem 2.5rem; text-decoration: none; border-radius: 3px; background: var(--color-accent); color: #fff; border: 2px solid var(--color-accent); transition: background .2s, color .2s; }
.block-cta__btn:hover { background: transparent; color: var(--color-accent); }
.block-cta__btn--outline { background: transparent; color: var(--color-accent); }
.block-cta__btn--outline:hover { background: var(--color-accent); color: #fff; }
.block-cta__btn--subtle { background: var(--color-light); color: var(--color-dark); border-color: var(--color-border); }
.block-cta__btn--subtle:hover { background: var(--color-border); }

/* ══════════════════════════════════════════════
   BLOCK: DIVIDER
   ══════════════════════════════════════════════ */
.block-divider { max-width: var(--max-w); margin: 2rem auto; padding: 1rem var(--pad-h); }
.block-divider hr { border: none; border-top: 1px solid var(--color-border); }

/* ══════════════════════════════════════════════
   BLOCK: GALLERY
   ══════════════════════════════════════════════ */
.block-gallery { padding: 0 var(--pad-h); max-width: var(--max-w); margin: 3rem auto; }
.block-gallery__single img { width: 100%; max-height: 70vh; object-fit: cover; border-radius: 4px; }
.block-gallery__double { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.block-gallery__double img { width: 100%; height: 360px; object-fit: cover; border-radius: 4px; }
.block-gallery__triple { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 1rem; height: 500px; }
.block-gallery__triple > div { overflow: hidden; border-radius: 4px; }
.block-gallery__triple > div:first-child { grid-row: 1 / 3; }
.block-gallery__triple img { width: 100%; height: 100%; object-fit: cover; }
.block-gallery__grid { display: grid; grid-template-columns: repeat(6,1fr); grid-auto-flow: dense; grid-auto-rows: 9rem; gap: 1rem; }
.block-gallery__item { grid-column: span 2; grid-row: span 2; overflow: hidden; border-radius: 4px; }
.block-gallery__item--wide { grid-column: span 4; }
.block-gallery__item--tall { grid-row: span 3; }
.block-gallery__grid img { width: 100%; height: 100%; object-fit: cover; display:block; transition: transform .5s ease; }
.block-gallery__item:hover img { transform: scale(1.035); }

/* ══════════════════════════════════════════════
   BLOCK: SLIDER
   ══════════════════════════════════════════════ */
.block-slider { position: relative; width: 100%; overflow: hidden; --per-view: 1; --slide-gap: 0px; }
.block-slider[data-per-view="2"], .block-slider[data-per-view="3"] { --slide-gap: 14px; }
.slider__track {
  display: flex;
  gap: var(--slide-gap);
  transition: transform .65s cubic-bezier(.25,.46,.45,.94);
}
/* Slider: alle Slides EXAKT gleiche Höhe */
.slider__slide {
  min-width: 100%;
  flex-shrink: 0;
  position: relative;
  height: 600px;
  overflow: hidden;
}
/* Carousel-Modi greifen erst ab Desktop, auf Mobil immer 1 Folie */
@media (min-width: 769px) {
  .block-slider[data-per-view="2"] .slider__slide,
  .block-slider[data-per-view="3"] .slider__slide {
    min-width: calc((100% - (var(--per-view) - 1) * var(--slide-gap)) / var(--per-view));
    height: 440px;
  }
  .block-slider[data-per-view="2"] .slider__slide,
  .block-slider[data-per-view="3"] .slider__slide {
    border-radius: 6px;
  }
}
.slider__slide img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.slider__overlay { position: absolute; inset: 0; background: linear-gradient(to top,rgba(0,0,0,.55) 0%,transparent 60%); }
/* Caption: Default zentriert. Modifier wirken auf Desktop. */
.slider__caption {
  position: absolute; inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 3rem var(--pad-h);
}
.slider__caption-inner { max-width: 700px; text-align: center; }
@media (min-width: 769px) {
  .slider__caption--left  { justify-content: flex-start; }
  .slider__caption--right { justify-content: flex-end; }
  .slider__caption-inner--left  { text-align: left; }
  .slider__caption-inner--right { text-align: right; }
}
.slider__caption-title { font-size: clamp(1.5rem,4vw,3rem); font-weight: 600; color: #fff; line-height: 1.1; margin-bottom: .5rem; }
.slider__caption-sub   { font-size: .78rem; color: rgba(255,255,255,.7); }
.slider__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; z-index: 10; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.slider__btn:hover  { background: rgba(255,255,255,.3); }
.slider__btn--prev  { left: 1.5rem; }
.slider__btn--next  { right: 1.5rem; }
.slider__dots { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); display: flex; gap: .4rem; z-index: 10; }
.slider__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); border: none; cursor: pointer; padding: 0; transition: background .2s, transform .2s; }
.slider__dot--active { background: #fff; transform: scale(1.2); }
.slider__counter { position: absolute; top: 1.25rem; right: 1.5rem; font-size: .72rem; color: rgba(255,255,255,.5); z-index: 10; font-weight: 500; }

/* ══════════════════════════════════════════════
   BLOCK: HOURS (Öffnungszeiten)
   ══════════════════════════════════════════════ */
.block-hours { padding: var(--pad-section) var(--pad-h); max-width: var(--max-w); margin: 0 auto; }
.block-hours__inner { max-width: 540px; margin: 0 auto; }
.block-hours__title { font-size: clamp(1.5rem,3vw,2.25rem); font-weight: 600; margin-bottom: 2rem; text-align: center; }
.block-hours__list  { display: flex; flex-direction: column; }
.block-hours__row   { display: flex; justify-content: space-between; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--color-border); font-size: .92rem; }
.block-hours__row:last-child { border-bottom: none; }
.block-hours__day   { color: var(--color-mid); font-weight: 400; }
.block-hours__time  { color: var(--color-dark); font-weight: 500; font-variant-numeric: tabular-nums; }
.block-hours__closed { color: var(--color-mid); font-style: italic; font-weight: 400; }
.block-hours__row--today { background: linear-gradient(to right, transparent, var(--color-light) 20%, var(--color-light) 80%, transparent); margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; }
.block-hours__row--today .block-hours__day { color: var(--color-dark); font-weight: 600; }
.block-hours__note  { margin-top: 1.5rem; font-size: .78rem; color: var(--color-mid); text-align: center; line-height: 1.7; }

/* ══════════════════════════════════════════════
   BLOCK: FAQ
   ══════════════════════════════════════════════ */
.block-faq { padding: var(--pad-section) var(--pad-h); max-width: var(--max-w); margin: 0 auto; }
.block-faq__inner { max-width: 760px; margin: 0 auto; }
.block-faq__title { font-size: clamp(1.5rem,3vw,2.25rem); font-weight: 600; margin-bottom: 2rem; text-align: center; }
.block-faq__list  { display: flex; flex-direction: column; gap: .5rem; }
.block-faq__item  { border-bottom: 1px solid var(--color-border); }
.block-faq__item[open] { background: var(--color-light); }
.block-faq__q     { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem .5rem; cursor: pointer; font-size: .95rem; font-weight: 500; color: var(--color-dark); list-style: none; }
.block-faq__q::-webkit-details-marker { display: none; }
.block-faq__icon  { font-size: 1.25rem; line-height: 1; color: var(--color-accent); transition: transform .25s ease; flex-shrink: 0; }
.block-faq__item[open] .block-faq__icon { transform: rotate(45deg); }
.block-faq__a     { padding: 0 .5rem 1.25rem; max-width: 100%; margin: 0; }
.block-faq__a p   { margin-bottom: .5rem; }
.block-faq__a p:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════
   BLOCK: FEATURES (Leistungen)
   ══════════════════════════════════════════════ */
.block-features { padding: var(--pad-section) var(--pad-h); max-width: var(--max-w); margin: 0 auto; }
.block-features__inner { }
.block-features__title { font-size: clamp(1.5rem,3vw,2.25rem); font-weight: 600; margin-bottom: 2.5rem; text-align: center; }
.block-features__grid  { display: grid; gap: 2rem; }
.block-features--cols-2 .block-features__grid { grid-template-columns: repeat(2,1fr); }
.block-features--cols-3 .block-features__grid { grid-template-columns: repeat(3,1fr); }
.block-features--cols-4 .block-features__grid { grid-template-columns: repeat(4,1fr); }
.block-features__card  { background: var(--color-light); padding: 2rem 1.75rem; border-radius: 4px; border: 1px solid var(--color-border); transition: border-color .2s, transform .2s; }
.block-features__card:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.block-features__icon  { font-size: 2rem; line-height: 1; margin-bottom: 1rem; }
.block-features__icon--svg {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--color-light);
  color: var(--color-dark);
  margin-bottom: 1.1rem;
}
.block-features__icon--svg svg { width: 24px; height: 24px; }
.block-features__h     { font-size: 1.05rem; font-weight: 600; color: var(--color-dark); margin-bottom: .5rem; }
.block-features__t     { font-size: .88rem; line-height: 1.7; color: var(--color-mid); }

/* ══════════════════════════════════════════════
   BLOCK: CONTACT
   ══════════════════════════════════════════════ */
.block-contact { padding: var(--pad-section) var(--pad-h); max-width: var(--max-w); margin: 0 auto; }
.block-contact__inner { max-width: 760px; margin: 0 auto; }
.block-contact__title { font-size: clamp(1.5rem,3vw,2.25rem); font-weight: 600; margin-bottom: 2.5rem; }
.block-contact__success { text-align: center; padding: 5rem 0; }
.block-contact__success h2 { font-size: 1.75rem; font-weight: 600; margin-bottom: .75rem; }
.block-contact__success p  { color: var(--color-mid); font-size: .9rem; }
.block-contact__error { font-size: .8rem; color: #dc2626; margin-bottom: 1.5rem; padding: .75rem 1rem; background: #fef2f2; border-left: 3px solid #dc2626; }
.block-contact form { display: flex; flex-direction: column; gap: 1.5rem; }
.block-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.form-field { display: flex; flex-direction: column; gap: .4rem; }
.form-label { font-size: .7rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--color-mid); }
.form-input, .form-textarea { font-family: var(--font-main); font-size: .88rem; color: var(--color-dark); background: var(--color-light); border: 1px solid var(--color-border); outline: none; padding: .75rem 1rem; width: 100%; border-radius: 3px; transition: border-color .2s; }
.form-input:focus, .form-textarea:focus { border-color: var(--color-accent); }
.form-textarea { resize: vertical; min-height: 140px; }
.form-submit { font-family: var(--font-main); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .85rem 2.5rem; background: var(--color-accent); color: #fff; border: none; cursor: pointer; border-radius: 3px; width: fit-content; transition: opacity .2s; }
.form-submit:hover { opacity: .85; }

/* ══════════════════════════════════════════════
   SEITEN-TITEL (Unterseiten)
   ══════════════════════════════════════════════ */
.page-title { padding: 3.5rem var(--pad-h) 0; max-width: var(--max-w); margin: 0 auto; }
.page-title h1 { font-size: clamp(1.75rem,4vw,3rem); font-weight: 600; line-height: 1.15; }

/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */
.footer { background: var(--color-dark); color: rgba(255,255,255,.45); padding: 5rem var(--pad-h) 3rem; margin-top: 6rem; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3.5rem; padding-bottom: 3.5rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer__logo img   { height: 28px; filter: brightness(0) invert(1); opacity: .7; margin-bottom: 1rem; }
.footer__brand-name { font-size: 1.1rem; font-weight: 600; color: rgba(255,255,255,.8); display: block; margin-bottom: .35rem; }
.footer__brand-tag  { font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; opacity: .3; display: block; margin-bottom: 1rem; }
.footer__col h4 { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.25); margin-bottom: 1rem; font-weight: 500; }
.footer__col a, .footer__col p { display: block; font-size: .8rem; color: rgba(255,255,255,.38); text-decoration: none; margin-bottom: .4rem; line-height: 1.8; transition: color .2s; }
.footer__col a:hover { color: rgba(255,255,255,.75); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.footer__bottom p, .footer__bottom a { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.18); text-decoration: none; transition: color .2s; }
.footer__bottom a:hover { color: rgba(255,255,255,.45); }

/* ══════════════════════════════════════════════
   COOKIE
   ══════════════════════════════════════════════ */
.cookie { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 500; background: rgba(17,17,17,.97); backdrop-filter: blur(8px); border-top: 1px solid rgba(255,255,255,.07); padding: 1.25rem var(--pad-h); }
.cookie__inner { display: flex; align-items: center; gap: 2rem; max-width: var(--max-w); margin: 0 auto; }
.cookie__text { font-size: .78rem; line-height: 1.7; color: rgba(255,255,255,.45); flex: 1; }
.cookie__text a { color: rgba(255,255,255,.65); text-decoration: underline; }
.cookie__btn { font-family: var(--font-main); font-size: .7rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; border: none; cursor: pointer; padding: .6rem 1.5rem; white-space: nowrap; border-radius: 3px; }
.cookie__btn--yes { background: #fff; color: var(--color-dark); }
.cookie__btn--no  { background: transparent; color: rgba(255,255,255,.3); }

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --pad-h: 1.25rem; --pad-section: 3rem; }
  .nav__links { display: none; }
  .nav__links.open { display: flex; flex-direction: column; align-items: center; justify-content: center; position: fixed; inset: 0; background: var(--color-bg); z-index: 99; gap: 2rem; padding: 5rem 2rem; }
  .nav__links.open a { font-size: 1rem; }
  .nav__toggle { display: flex; }
  .block-text-image__inner  { flex-direction: column; gap: 2rem; }
  .block-text-image__img    { flex: 0 0 auto; }
  .block-contact__grid      { grid-template-columns: 1fr; }
  .block-gallery__double    { grid-template-columns: 1fr; }
  .block-gallery__double img { height: 55vw; }
  .block-gallery__triple    { grid-template-columns: 1fr; height: auto; }
  .block-gallery__triple > div:first-child { grid-row: auto; }
  .block-gallery__triple img { height: 55vw; }
  .block-gallery__grid      { grid-template-columns: repeat(2,1fr); grid-auto-rows: 36vw; }
  .block-gallery__item, .block-gallery__item--wide, .block-gallery__item--tall { grid-column: span 1; grid-row: span 1; }
  .slider__slide   { height: 65vw; min-height: 380px; max-height: 560px; }
  .slider__btn     { width: 38px; height: 38px; }
  .slider__btn--prev { left: .75rem; }
  .slider__btn--next { right: .75rem; }
  /* Mobile: Text IMMER mittig, ungeachtet des Position-Modifiers */
  .slider__caption {
    padding: 2rem var(--pad-h);
    align-items: center !important;
    justify-content: center !important;
  }
  .slider__caption-inner {
    text-align: center !important;
    max-width: 100% !important;
  }
  .footer          { padding: 3.5rem var(--pad-h) 2.5rem; margin-top: 4rem; }
  .footer__grid    { grid-template-columns: 1fr; gap: 2rem; }
  .footer__bottom  { flex-direction: column; text-align: center; }
  .cookie          { padding: 1rem var(--pad-h); }
  .cookie__inner   { flex-wrap: wrap; }
  .block-features--cols-3 .block-features__grid,
  .block-features--cols-4 .block-features__grid { grid-template-columns: 1fr; }
  .block-features--cols-2 .block-features__grid { grid-template-columns: 1fr; }
}