@charset "UTF-8";

/* ============================================================
   Fonts
   ============================================================ */
/* Heebo (body) – the site loads the 300 weight file as the regular weight */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/heebo-v15-latin-300.woff2') format('woff2'),
       url('../fonts/heebo-v15-latin-300.woff') format('woff');
}
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/heebo-v12-latin-700.woff2') format('woff2'),
       url('../fonts/heebo-v12-latin-700.woff') format('woff');
}
/* Poppins (headlines) */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-v15-latin-ext_latin-regular.woff2') format('woff2'),
       url('../fonts/poppins-v15-latin-ext_latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-v15-latin-ext_latin-italic.woff2') format('woff2'),
       url('../fonts/poppins-v15-latin-ext_latin-italic.woff') format('woff');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-v15-latin-ext_latin-700.woff2') format('woff2'),
       url('../fonts/poppins-v15-latin-ext_latin-700.woff') format('woff');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-v15-latin-ext_latin-700italic.woff2') format('woff2'),
       url('../fonts/poppins-v15-latin-ext_latin-700italic.woff') format('woff');
}

/* ============================================================
   Design tokens
   ============================================================ */
:root {
  --primary-color: #b7191e;
  --secondary-color: #7a0014;
  --text-color: #222222;
  --text-color-on-primary-color: #ffffff;
  --text-color-on-secondary-color: #ffffff;
  --header-height: 84px;
  --grid-col: 85px;
  --grid-gap: 10px;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Heebo', Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: var(--text-color);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
ul { list-style: none; }

/* ============================================================
   Typography
   ============================================================ */
h1, h2 {
  font-family: 'Poppins', Helvetica, Arial, sans-serif;
  font-size: 3rem;
  line-height: 3.75rem;
  font-weight: 400;
  letter-spacing: .27rem;
}
h1 strong, h2 strong { font-weight: 900; }
h3 { font-family: 'Poppins', Helvetica, Arial, sans-serif; font-size: 2.5rem; line-height: 3.375rem; font-weight: 400; letter-spacing: .25rem; }
h3 strong { font-weight: 900; }
h4 { font-size: 2rem; line-height: 2.625rem; font-weight: 700; letter-spacing: .1rem; text-transform: uppercase; }
[data-headlines-uppercase] h1,
[data-headlines-uppercase] h2,
[data-headlines-uppercase] h3 { text-transform: uppercase; }

.global-text, .text { font-size: 1.125rem; line-height: 1.75rem; letter-spacing: .0225rem; }
.text p + p, .global-text p + p { margin-top: 1rem; }
.text a, .global-text a { color: var(--primary-color); }
.text ul, .global-text ul { list-style: disc; padding-left: 1.4em; }
.text li, .global-text li { margin: .35em 0; }
em { font-family: 'Poppins', Helvetica, Arial, sans-serif; font-style: italic; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   Layout grid
   ============================================================ */
.content { display: block; }
.grid {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, var(--grid-col)));
  gap: var(--grid-gap);
  padding: 0 10px;
  justify-content: center;
}
article { position: relative; }
article.spacer { height: 40px; }
.wrapper { min-width: 0; }

/* Default full-content wrapper spans centered 11 of 13 columns */
.headline .wrapper,
.text-block .wrapper { grid-column: 2 / span 11; }

/* ============================================================
   Buttons
   ============================================================ */
a.button, button.button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  max-width: 880px;
  padding: 14px 30px;
  border: 1px solid transparent;
  border-radius: 1.875rem;
  font-weight: 700;
  letter-spacing: .06rem;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
  transition: opacity .25s ease, background .25s ease, color .25s ease;
  font-size: .95rem;
}
.button svg { flex: 0 0 auto; }
.button:hover { opacity: .88; }

.button.primary { background: var(--secondary-color); color: var(--text-color-on-secondary-color); border-color: var(--secondary-color); }
.button.primary svg path, .button.primary svg circle { stroke: var(--text-color-on-secondary-color); }
.button.secondary { background: var(--primary-color); color: var(--text-color-on-primary-color); border-color: var(--primary-color); }
.button.secondary svg path, .button.secondary svg circle { stroke: var(--text-color-on-primary-color); }
.button.tertiary { background: #fff; color: var(--text-color); border-color: var(--text-color); }
.button.tertiary svg path { stroke: var(--text-color); }

.button.arrow svg { width: 16px; height: 16px; }

article.button.grid .wrapper { grid-column: 1 / span 13; display: flex; justify-content: center; }
article.button.grid[data-centered] .wrapper { justify-content: center; }

/* ============================================================
   Header / navigation
   ============================================================ */
#menu { position: sticky; top: 0; z-index: 100; }
#menu .skip-links {
  display: flex; justify-content: center; gap: 10px; padding: 20px;
  position: absolute; left: 50%; transform: translateX(-50%) translateY(-100%); z-index: 1000;
}
#menu .skip-links:focus-within { position: relative; transform: none; }

#menu .buttons {
  position: relative;
  height: var(--header-height);
  background: var(--primary-color);
  display: grid;
  justify-content: center;
  align-items: center;
}
#menu .buttons .logo { position: relative; display: flex; justify-content: center; }
#menu .buttons .logo img { height: 54px; width: auto; max-width: 300px; }

#menu #menu-toggle {
  position: absolute; left: 28px; top: 50%; transform: translateY(-50%);
  display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 17px;
  background: none; border: 0; cursor: pointer;
}
#menu .burger-icon .line {
  display: block; width: 34px; height: 2px; background: var(--text-color-on-primary-color);
  margin: 0 0 10px; transition: transform .3s ease, opacity .3s ease;
}
#menu .burger-icon .line:nth-child(3) { margin: 0; }
#menu #menu-toggle.opened .burger-icon .line:first-child { transform: translateY(12px) rotate(45deg); }
#menu #menu-toggle.opened .burger-icon .line:nth-child(2) { opacity: 0; }
#menu #menu-toggle.opened .burger-icon .line:nth-child(3) { transform: translateY(-12px) rotate(-45deg); }
#menu #menu-toggle .menu-text {
  font-size: .875rem; color: var(--text-color-on-primary-color);
  letter-spacing: .0437rem; text-transform: uppercase;
}

#menu #appointment-toggle {
  position: absolute; right: 28px; top: 50%; transform: translateY(-50%);
  display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 15px;
  background: none; border: 0; cursor: pointer;
}
#menu #appointment-toggle .appointment-toggle-text {
  font-size: .875rem; color: var(--text-color-on-primary-color);
  letter-spacing: .0437rem; text-transform: uppercase;
}
#menu #appointment-toggle svg { width: 22px; height: 22px; color: var(--text-color-on-primary-color); transition: transform .3s ease; }
#menu #appointment-toggle.open svg { transform: rotate(180deg); }

/* Slide-in navigation panel */
#menu .menu {
  position: fixed; top: var(--header-height); left: 0;
  width: 492px; max-width: 90vw; height: calc(100vh - var(--header-height));
  background: var(--primary-color);
  overflow-x: hidden; overflow-y: auto; z-index: 90;
  display: grid; grid-template-rows: 1fr auto;
  transition: transform .3s ease;
}
#menu .menu[hidden] { display: grid; transform: translateX(-100%); }
#menu .menu:not([hidden]) { transform: translateX(0); }
#menu .primary-navigation { display: grid; align-content: center; }
#menu .primary-navigation ul { padding: 40px 0 12px 122px; }
#menu .primary-navigation ul li { padding: 11px 0 10px; }
#menu .primary-navigation ul li a {
  color: var(--text-color-on-primary-color);
  font-size: 1.25rem; line-height: 1.2; letter-spacing: .125rem;
  font-weight: 900; text-transform: uppercase; text-decoration: none;
  border-bottom: .125rem solid transparent;
}
#menu .primary-navigation ul li a:hover,
#menu .primary-navigation ul li a[aria-current="page"] { border-bottom-color: var(--text-color-on-primary-color); }
#menu .secondary-navigation ul { padding: 0 0 40px 122px; }
#menu .secondary-navigation ul li { padding: 3px 0; }
#menu .secondary-navigation ul li a { color: var(--text-color-on-primary-color); font-size: 1rem; letter-spacing: .05rem; text-decoration: none; }

/* Backdrop when menu open */
.menu-backdrop {
  position: fixed; inset: var(--header-height) 0 0 0; background: rgba(0,0,0,.35);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; z-index: 80;
}
.menu-backdrop.show { opacity: 1; visibility: visible; }

/* ============================================================
   Panorama slider (hero)
   ============================================================ */
.panorama-slider { position: relative; background: #000; overflow: hidden; }
.panorama-slider .wrapper { position: relative; margin: 0 auto; overflow: hidden; padding: 0; background: transparent; color: inherit; }
.panorama-slider .track { display: flex; flex-direction: row; transition: transform .6s ease; }
.panorama-slider .slide { flex: 0 0 100%; }
.panorama-slider .slide img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 7;
}
.panorama-slider .slide .image-mobile { display: none; }
.panorama-slider .controls { position: absolute; bottom: 20px; right: 24px; }
.panorama-slider .buttons-wrapper { display: flex; align-items: center; gap: 12px; }
.panorama-slider .slider-button { background: none; border: 0; cursor: pointer; width: 48px; height: 48px; color: #fff; padding: 0; }
.panorama-slider .slider-button svg { width: 48px; height: 48px; }
.panorama-slider .slider-button[disabled] { opacity: .4; cursor: default; }
.slider-button .stroke-primary { stroke: #fff; }
.slider-button .fill-primary { fill: #fff; }
.slider-button .hover { fill: transparent; }
.panorama-slider .slider-counter { color: #fff; font-size: .95rem; letter-spacing: .05rem; min-width: 48px; text-align: center; }

/* ============================================================
   Headline block
   ============================================================ */
article.headline { padding: 60px 0 0; }
article.headline .wrapper { grid-column: 2 / span 11; text-align: center; }
article.headline h1, article.headline h2 { padding: 0; }
article.headline[data-color-swapped] { }

/* ============================================================
   YouTube / media + text block
   ============================================================ */
article.youtube { padding: 40px 0; row-gap: 30px; align-items: center; }
article.youtube .youtube-video { grid-column: 2 / span 6; }
article.youtube .content { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 20px; }
.iframe-placeholder { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.iframe-placeholder iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ============================================================
   CTA banner (red)
   ============================================================ */
article.self-refreshing-container { padding: 0; }
.cta-banner { background: var(--primary-color); color: var(--text-color-on-primary-color); padding: 70px 0; }
.cta-banner .headline .wrapper { text-align: center; color: var(--text-color-on-primary-color); }
.cta-banner .headline h2 { color: var(--text-color-on-primary-color); }
.cta-banner .button .wrapper { padding-top: 30px; }
.cta-banner .button.primary { background: #fff; color: var(--primary-color); border-color: #fff; }
.cta-banner .button.primary svg path { stroke: var(--primary-color); }

/* ============================================================
   Image + text block
   ============================================================ */
article.image-text { background: #fff; color: var(--text-color); padding: 60px 0; align-items: center; }
article.image-text .image { grid-column: 2 / span 5; display: grid; justify-items: center; }
article.image-text .image img { width: 100%; height: auto; border-radius: 4px; }
article.image-text .content { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 20px; }
article.image-text .content .buttons { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; align-items: flex-start; }
article.image-text[data-columns-swapped] .image { grid-column: 8 / span 5; grid-row: 1; }
article.image-text[data-columns-swapped] .content { grid-column: 2 / span 5; grid-row: 1; }
article.image-text[data-color-swapped] { background: var(--primary-color); color: var(--text-color-on-primary-color); }
article.image-text[data-color-swapped] h4 { color: var(--text-color-on-primary-color); }

/* ============================================================
   Three images slider (services)
   ============================================================ */
article.three-images-slider { padding: 20px 0 80px; }
article.three-images-slider .wrapper { grid-column: 2 / span 11; margin: 0 auto; overflow: hidden; position: relative; width: 100%; }
.three-images-slider .track { display: flex; gap: 30px; transition: transform .5s ease; }
.three-images-slider .slide { flex: 0 0 calc((100% - 60px) / 3); display: flex; flex-direction: column; }
.three-images-slider .slide .image { width: 100%; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; }
.three-images-slider .slide .image img { width: 100%; height: 100%; object-fit: cover; }
.three-images-slider .slide h4 { color: var(--text-color); padding: 20px 0 10px; font-size: 1.5rem; }
.three-images-slider .slide .text { font-size: 1rem; line-height: 1.6; letter-spacing: normal; }
.three-images-slider .controls { display: flex; justify-content: center; gap: 20px; margin-top: 30px; }
.three-images-slider .slider-button { background: none; border: 0; cursor: pointer; width: 48px; height: 48px; color: var(--primary-color); padding: 0; }
.three-images-slider .slider-button svg { width: 48px; height: 48px; }
.three-images-slider .slider-button .stroke-primary { stroke: var(--primary-color); }
.three-images-slider .slider-button[disabled] { opacity: .35; cursor: default; }

article.three-images-slider[data-color-swapped] { background: var(--primary-color); color: var(--text-color-on-primary-color); padding: 60px 0; }
article.three-images-slider[data-color-swapped] .slide h4 { color: var(--text-color-on-primary-color); }
article.three-images-slider[data-color-swapped] .slider-button { color: #fff; }
article.three-images-slider[data-color-swapped] .slider-button .stroke-primary { stroke: #fff; }

/* ============================================================
   Single centered image
   ============================================================ */
article.single-image { padding: 20px 0; }
article.single-image .wrapper { grid-column: 3 / span 9; background: transparent; }
article.single-image img { width: 100%; height: auto; border-radius: 6px; }

/* ============================================================
   Image gallery (subpages)
   ============================================================ */
article.image-gallery { padding: 30px 0; }
article.image-gallery .wrapper { grid-column: 2 / span 11; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; background: transparent; }
article.image-gallery .item { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; }
article.image-gallery .item img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   Thin divider line
   ============================================================ */
article.line { padding: 30px 0; }
article.line .line-bg,
article.line .wrapper { grid-column: 2 / span 11; height: 2px; background: var(--primary-color); opacity: .25; }

/* ============================================================
   Team gallery (ueber-uns) – image + name + role
   ============================================================ */
article.team-gallery { padding: 30px 0 60px; }
article.team-gallery .wrapper { grid-column: 2 / span 11; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 24px; background: transparent; }
.team-gallery .member { display: flex; flex-direction: column; gap: 10px; }
.team-gallery .member .photo { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; background: #f0f0f0; }
.team-gallery .member .photo img { width: 100%; height: 100%; object-fit: cover; }
.team-gallery .member .name { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.15rem; }
.team-gallery .member .role { color: #666; font-size: .95rem; }

/* ============================================================
   Process / accordion (steps, trends, FAQ, extras)
   ============================================================ */
article.process { padding: 20px 0 60px; }
article.process .wrapper { grid-column: 2 / span 11; background: transparent; color: inherit; }
article.process[data-color-swapped] { background: var(--primary-color); color: var(--text-color-on-primary-color); padding: 60px 0; }
.process .item { border-top: 1px solid rgba(34,34,34,.18); }
article.process[data-color-swapped] .item { border-top-color: rgba(255,255,255,.4); }
.process .item:last-child { border-bottom: 1px solid rgba(34,34,34,.18); }
article.process[data-color-swapped] .item:last-child { border-bottom-color: rgba(255,255,255,.4); }
.process summary { display: flex; align-items: center; gap: 16px; padding: 22px 0; cursor: pointer; list-style: none; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: .03rem; }
.process summary::-webkit-details-marker { display: none; }
.process summary .toggle { margin-left: auto; position: relative; width: 24px; height: 24px; flex: 0 0 auto; }
.process summary .toggle::before,
.process summary .toggle::after { content: ""; position: absolute; background: currentColor; transition: transform .3s ease, opacity .3s ease; }
.process summary .toggle::before { top: 11px; left: 0; width: 24px; height: 2px; }
.process summary .toggle::after { left: 11px; top: 0; width: 2px; height: 24px; }
.process details[open] summary .toggle::after { transform: rotate(90deg); opacity: 0; }
.process .body { display: grid; grid-template-columns: 200px 1fr; gap: 26px; padding: 0 0 26px; align-items: start; }
.process .body.no-image { grid-template-columns: 1fr; }
.process .body .thumb { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; }
.process .body .thumb img { width: 100%; height: 100%; object-fit: cover; }
.process .body .text { font-size: 1rem; line-height: 1.65; letter-spacing: normal; }
.process .body .text ul { list-style: disc; padding-left: 1.3em; }

/* ============================================================
   Brand slider (brillenmode)
   ============================================================ */
article.brand-slider { padding: 20px 0 70px; }
article.brand-slider .wrapper { grid-column: 2 / span 11; overflow: hidden; position: relative; margin: 0 auto; width: 100%; }
.brand-slider .track { display: flex; gap: 26px; transition: transform .5s ease; }
.brand-slider .slide { flex: 0 0 calc((100% - 78px) / 4); display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.brand-slider .slide .logo-box { width: 100%; aspect-ratio: 3 / 2; background: #f6f6f6; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 14px; }
.brand-slider .slide .logo-box img { width: 100%; height: 100%; object-fit: contain; }
.brand-slider .slide .name { font-family: 'Poppins', sans-serif; font-weight: 700; }
.brand-slider .slide a { color: var(--primary-color); text-decoration: none; font-size: .9rem; font-weight: 700; }
.brand-slider .slide a:hover { text-decoration: underline; }
.brand-slider .controls { display: flex; justify-content: center; gap: 20px; margin-top: 30px; }
.brand-slider .slider-button { background: none; border: 0; cursor: pointer; width: 48px; height: 48px; color: var(--primary-color); padding: 0; }
.brand-slider .slider-button svg { width: 48px; height: 48px; }
.brand-slider .slider-button .stroke-primary { stroke: var(--primary-color); }
.brand-slider .slider-button[disabled] { opacity: .35; cursor: default; }

/* ============================================================
   Conditions grid (sehanalyse – 6 Veränderungen)
   ============================================================ */
article.conditions { padding: 20px 0 40px; }
article.conditions .wrapper { grid-column: 2 / span 11; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; background: transparent; }
.conditions .card { display: flex; flex-direction: column; gap: 12px; }
.conditions .card .img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; }
.conditions .card .img img { width: 100%; height: 100%; object-fit: cover; }
.conditions .card h4 { font-size: 1.15rem; line-height: 1.3; }
.conditions .card .text { font-size: .95rem; line-height: 1.6; letter-spacing: normal; }

/* ============================================================
   Google rating (reviews)
   ============================================================ */
article.google-rating { padding: 20px 0 80px; }
article.google-rating .wrapper {
  display: flex; flex-wrap: wrap; align-items: center; gap: 40px;
  grid-template-columns: none; grid-column: auto;
  max-width: 1160px; margin: 0 auto; padding: 0 28px;
}
.google-rating .summary { flex: 0 0 230px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.google-rating .summary .box { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.google-rating .summary .title { font-weight: 700; letter-spacing: .05rem; }
.google-rating .stars { display: flex; gap: 4px; color: #fbbc04; }
.google-rating .star svg { width: 25px; height: 24px; }
.google-rating .logo-and-count { display: flex; align-items: center; gap: 12px; }
.google-rating .logo svg { height: 26px; width: auto; color: #4285f4; }
.google-rating .count { font-size: 1.5rem; font-weight: 700; }
.google-rating .amount { color: #666; font-size: .95rem; }
.google-rating .rate-now a { color: var(--primary-color); font-weight: 700; text-decoration: underline; }

.google-rating .track-wrapper { flex: 1 1 320px; min-width: 0; overflow: hidden; }
.google-rating .track-wrapper .track { display: flex; transition: transform .5s ease; }
.google-rating .track-wrapper .slide { flex: 0 0 calc((100% - 60px) / 3); margin-right: 30px; }
.google-rating .slide:last-child { margin-right: 0; }
.google-rating .rating-container { background: #f6f6f6; border-radius: 6px 6px 0 0; padding: 24px; min-height: 220px; }
.google-rating .rating-text { font-size: .95rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.google-rating .rating-text.expanded { -webkit-line-clamp: unset; }
.google-rating .buttons .continue { color: var(--primary-color); font-weight: 700; cursor: pointer; display: inline-block; margin-top: 10px; }
.google-rating .arrow-container svg { width: 100%; height: 18px; color: #f6f6f6; }
.google-rating .arrow-container path { fill: #f6f6f6; stroke: #f6f6f6; }
.google-rating .foot { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; padding-top: 14px; }
.google-rating .foot .author a { font-weight: 700; text-decoration: none; }
.google-rating .foot .date { color: #888; font-size: .85rem; grid-column: 1; }
.google-rating .foot .rating { grid-column: 2; grid-row: 1 / span 2; }
.google-rating .foot .rating .stars { color: #fbbc04; }
.google-rating .foot .star svg { width: 16px; height: 15px; }
.google-rating > .controls { display: flex; justify-content: center; gap: 20px; margin-top: 30px; }
.google-rating > .controls .slider-button { background: none; border: 0; cursor: pointer; width: 48px; height: 48px; color: var(--primary-color); padding: 0; }
.google-rating > .controls .slider-button svg { width: 48px; height: 48px; }
.google-rating > .controls .slider-button .stroke-primary { stroke: var(--primary-color); }
.google-rating > .controls .slider-button[disabled] { opacity: .35; }

/* ============================================================
   Generic content text section (subpages)
   ============================================================ */
article.text-block { padding: 30px 0; }
article.text-block .wrapper { grid-column: 2 / span 11; }
article.text-block h2, article.text-block h3, article.text-block h4 { margin-bottom: 20px; }
article.text-block .text { margin-bottom: 16px; }

/* Legal pages narrower column */
.legal article.text-block .wrapper { grid-column: 3 / span 9; }
.legal .text h3 { font-size: 1.6rem; line-height: 1.3; margin: 28px 0 12px; }
.legal .text { font-size: 1rem; line-height: 1.7; letter-spacing: normal; }

/* ============================================================
   Forms (jobs)
   ============================================================ */
article.form { padding: 30px 0 80px; }
article.form .wrapper { grid-column: 3 / span 9; background: transparent; }
.app-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.app-form .field { display: flex; flex-direction: column; gap: 6px; }
.app-form .field.full { grid-column: 1 / -1; }
.app-form label { font-size: .9rem; font-weight: 700; letter-spacing: .03rem; }
.app-form input, .app-form textarea, .app-form select {
  padding: 12px 14px; border: 1px solid #ccc; border-radius: 6px; font-family: inherit; font-size: 1rem; background: #fff;
}
.app-form textarea { min-height: 140px; resize: vertical; }
.app-form input:focus, .app-form textarea:focus, .app-form select:focus { outline: 2px solid var(--primary-color); border-color: var(--primary-color); }
.app-form .actions { grid-column: 1 / -1; }
.app-form .note { font-size: .8rem; color: #666; grid-column: 1 / -1; }
.app-form .note label { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; font-size: .8rem; }
.app-form .note input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; accent-color: var(--primary-color); }

/* Pflichtfeld nicht ausgefüllt */
.app-form .field.has-error input,
.app-form .field.has-error textarea,
.app-form .field.has-error select { border-color: var(--primary-color); background: #fdf6f6; }
.app-form .field.has-error label { color: var(--primary-color); }
.app-form .note.has-error { color: var(--primary-color); font-weight: 700; }

/* Spam-Falle: unsichtbar, aber nicht display:none (Bots erkennen das) */
.app-form .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Erfolgs- und Fehlermeldung */
.form-message { padding: 18px 22px; border-radius: 6px; margin-bottom: 26px; line-height: 1.55; font-size: 1rem; }
.form-message.success { background: #edf7ed; border-left: 4px solid #2e7d32; color: #1b5e20; }
.form-message.error { background: #fdf1f1; border-left: 4px solid var(--primary-color); color: var(--secondary-color); }
.form-message a { color: inherit; text-decoration: underline; }

/* ============================================================
   Footer
   ============================================================ */
footer { background: #fff; color: var(--text-color); padding-top: 40px; }
footer .social-media { padding: 40px 0; border-top: 1px solid #eee; position: relative; }
footer .social-media-wrapper { grid-column: 2 / span 11; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
footer .social-media .title { font-family: 'Poppins', sans-serif; font-size: 1.1rem; letter-spacing: .05rem; }
footer .social-media .icons a { color: var(--primary-color); display: inline-block; }
footer .social-media .icons svg { width: 40px; height: 40px; }
footer .to-top { position: absolute; right: 48px; bottom: -32px; z-index: 5; background: none; border: 0; cursor: pointer; width: 64px; height: 64px; color: var(--primary-color); }
footer .to-top svg { width: 64px; height: 64px; }
footer .to-top-background { fill: var(--secondary-color); }
footer .to-top-arrow { stroke: #fff; }

footer #footer-main { background: var(--primary-color); color: var(--text-color-on-primary-color); padding: 60px 0; }
footer #footer-main .inner { grid-column: 2 / span 11; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
footer #footer-main .inner > .title { font-family: 'Poppins', sans-serif; font-size: 1.8rem; letter-spacing: .1rem; font-weight: 700; text-transform: uppercase; }
footer .stores .store { border-top: 1px solid rgba(255,255,255,.4); padding-top: 22px; }
footer .stores .store-title { font-family: 'Poppins', sans-serif; font-weight: 700; letter-spacing: .05rem; font-size: 1.2rem; margin-bottom: 20px; }
footer .stores .content { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.4); }
footer .address { line-height: 1.6; }
footer .phone-email { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
footer .phone-email a { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
footer .phone-email a:hover { text-decoration: underline; }
footer .phone-email .icon svg { width: 20px; height: 20px; }
footer .opening-hours { line-height: 1.7; }
footer .general-wrapper { background: var(--primary-color); padding-bottom: 30px; }
footer .general { grid-column: 2 / span 11; display: flex; gap: 26px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.35); }
footer .general a { color: #fff; text-decoration: none; font-size: .9rem; letter-spacing: .03rem; }
footer .general a:hover { text-decoration: underline; }

/* ============================================================
   Appointment popup
   ============================================================ */
.appointment-popup {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.5); padding: 20px;
}
.appointment-popup.hidden { display: none; }
.appointment-popup-content { position: relative; background: var(--primary-color); color: #fff; border-radius: 8px; max-width: 560px; width: 100%; padding: 40px; }
.appointment-popup-content .close { position: absolute; top: 16px; right: 16px; background: none; border: 0; cursor: pointer; }
.appointment-popup-content h3 { font-family: 'Poppins', sans-serif; margin-bottom: 24px; text-transform: uppercase; }
.appointment-popup-content .opening-hours-title,
.appointment-popup-content .address-title { font-weight: 700; margin: 16px 0 6px; letter-spacing: .05rem; }
.appointment-popup-content .phone-email { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.appointment-popup-content .phone-email a { color: #fff; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.appointment-popup-content .form { margin-top: 24px; }
.appointment-popup-content .button.primary { background: #fff; color: var(--primary-color); border-color: #fff; }
.appointment-popup-content .button.primary svg circle,
.appointment-popup-content .button.primary svg path { stroke: var(--primary-color); }

/* ============================================================
   Shared content width — align non-grid sliders/galleries/footer
   with the grid-based headlines (content width ~1035px)
   ============================================================ */
article.three-images-slider .wrapper,
article.brand-slider .wrapper,
article.team-gallery .wrapper,
article.image-gallery .wrapper,
article.conditions .wrapper,
article.google-rating .wrapper,
footer #footer-main .inner,
footer .general {
  max-width: 1091px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 28px;
  padding-right: 28px;
}
footer .general-wrapper { display: block; }
footer #footer-main .inner { grid-column: auto; }
footer .general { grid-column: auto; padding-top: 20px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 991.98px) {
  .grid { grid-template-columns: repeat(6, 1fr); padding: 0 28px; }
  h1, h2 { font-size: 2rem; line-height: 2.6rem; letter-spacing: .12rem; }
  h3 { font-size: 1.875rem; line-height: 2.5rem; letter-spacing: .09375rem; }
  h4 { font-size: 1.5rem; line-height: 2rem; letter-spacing: .075rem; }
  .global-text, .text { font-size: 1rem; }

  .headline .wrapper, .text-block .wrapper, .legal article.text-block .wrapper,
  article.form .wrapper, article.three-images-slider .wrapper, article.google-rating .wrapper,
  article.image-gallery .wrapper, footer .social-media-wrapper,
  footer #footer-main .inner, footer .general { grid-column: 1 / span 6; }

  article.youtube .youtube-video, article.youtube .content { grid-column: 1 / span 6; }
  article.image-text .image, article.image-text .content,
  article.image-text[data-columns-swapped] .image, article.image-text[data-columns-swapped] .content {
    grid-column: 1 / span 6; grid-row: auto;
  }
  article.image-text[data-columns-swapped] .image { order: -1; }
  article.image-text { row-gap: 30px; }
  article.image-text .image img { max-width: 465px; margin: 0 auto; }

  footer #footer-main .inner { grid-template-columns: 1fr; gap: 24px; }
  .app-form { grid-template-columns: 1fr; }

  .three-images-slider .slide { flex: 0 0 calc((100% - 30px) / 2); }
  article.google-rating .wrapper { flex-direction: column; align-items: stretch; gap: 24px; }
  .google-rating .summary { flex-basis: auto; }
  .google-rating .track-wrapper .slide { flex: 0 0 calc((100% - 30px) / 2); }
  article.image-gallery .wrapper { grid-template-columns: repeat(2, 1fr); }

  /* Header: hide appointment text, keep icon */
  #menu #appointment-toggle .appointment-toggle-text { display: none; }
  #menu #menu-toggle .menu-text { display: none; }
  #menu .buttons .logo img { height: 46px; }
}

@media (max-width: 767.98px) {
  .panorama-slider .slide .image { display: none; }
  .panorama-slider .slide .image-mobile { display: block; }
  .panorama-slider .slide .image-mobile img { aspect-ratio: 4 / 5; }
}

@media (max-width: 991.98px) {
  article.team-gallery .wrapper, article.conditions .wrapper,
  article.process .wrapper, article.brand-slider .wrapper, article.line .line-bg, article.line .wrapper,
  article.single-image .wrapper { grid-column: 1 / span 6; }
  article.team-gallery .wrapper, article.conditions .wrapper { grid-template-columns: repeat(2, 1fr); }
  .brand-slider .slide { flex: 0 0 calc((100% - 26px) / 2); }
  .process .body { grid-template-columns: 160px 1fr; gap: 18px; }
}

@media (max-width: 575.98px) {
  h1, h2 { font-size: 1.6rem; line-height: 2.1rem; }
  .three-images-slider .slide { flex: 0 0 100%; }
  .google-rating .track-wrapper .slide { flex: 0 0 100%; margin-right: 0; }
  article.image-gallery .wrapper { grid-template-columns: 1fr; }
  article.team-gallery .wrapper, article.conditions .wrapper { grid-template-columns: 1fr; }
  .brand-slider .slide { flex: 0 0 80%; }
  .process .body { grid-template-columns: 1fr; }
  .process .body .thumb { max-width: 260px; }
  #menu .menu { width: 100vw; max-width: 100vw; }
  a.button, button.button { font-size: .85rem; padding: 12px 22px; }
  footer .stores .content { grid-template-columns: 1fr; }
  footer .to-top { right: 20px; width: 54px; height: 54px; }
  footer .to-top svg { width: 54px; height: 54px; }
}