/* Bernd Höhn Sachverständiger – statische Version
   Alle Werte (Farben, Schriftgrößen, Abstände, Spaltenbreiten) sind aus den
   berechneten Stilen der Original-Contao-Seiten übernommen. */

/* Open Sans – selbst gehostet, wie im Original (dort zusätzlich eot/ttf/svg für alte Browser) */
@font-face {
  font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: local("Open Sans Regular"), local("OpenSans-Regular"),
       url("../fonts/open-sans-v15-latin-regular.woff2") format("woff2"),
       url("../fonts/open-sans-v15-latin-regular.woff") format("woff");
}
@font-face {
  font-family: "Open Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: local("Open Sans Italic"), local("OpenSans-Italic"),
       url("../fonts/open-sans-v15-latin-italic.woff2") format("woff2"),
       url("../fonts/open-sans-v15-latin-italic.woff") format("woff");
}
@font-face {
  font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: local("Open Sans Bold"), local("OpenSans-Bold"),
       url("../fonts/open-sans-v15-latin-700.woff2") format("woff2"),
       url("../fonts/open-sans-v15-latin-700.woff") format("woff");
}
@font-face {
  font-family: "Open Sans"; font-style: italic; font-weight: 700; font-display: swap;
  src: local("Open Sans Bold Italic"), local("OpenSans-BoldItalic"),
       url("../fonts/open-sans-v15-latin-700italic.woff2") format("woff2"),
       url("../fonts/open-sans-v15-latin-700italic.woff") format("woff");
}

:root {
  --blue:       #013760;  /* Fließtext, Links, Fußbereich */
  --red:        #af1642;  /* Überschriften (.ce_headline) */
  --dark:       #242424;  /* Untertitel, Feature-Text */
  --muted:      #717c8e;  /* Icon-Boxen, Feature-Text Leistungen */
  --green:      #95c766;
  --grey:       #f0f0f0;
  --line:       #b2b9c4;
  --line-light: #e5e8ee;
  --white:      #fff;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Einblenden, Schieber-Übergang und Menü-Panel ohne Bewegung */
  .not-in-view > .-move, .not-in-view > .-move-right,
  .not-in-view > .-move-top, .not-in-view > .-move-bottom { transform: none; }
  .not-in-view > .-fade { opacity: 1; }
  .tagline-list.not-in-view li { opacity: 1; transform: none; }
  .not-in-view .icon-boxes li::before,
  .icon-boxes.not-in-view li::before { opacity: 1; transform: scale(1); }
  .slider-track, .main-nav, .top-link, .page-header-inner { transition: none; }
}

/* Sprungziele nicht unter den fixierten Kopfbereich rutschen lassen */
#main, #tab-nav, .tab-panel { scroll-margin-top: 130px; }

body {
  margin: 0;
  padding-top: 151px;      /* Platz für den fixierten Kopfbereich */
  font-family: "Open Sans", sans-serif;
  font-size: 20px;
  line-height: 1.5625;          /* 31,25px */
  color: var(--blue);
  background: var(--white);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--blue); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

p { margin: 0.75em 0 1.5em; }    /* 15px / 30px */

h1, h2, h3, h4, h5, h6 { font-weight: 700; }

hr { border: 0; border-top: 1px solid #808080; margin: 45px 0; }

.wrap { width: 88.889%; margin: 0 auto; display: flow-root; }
@media (min-width: 1141px) { .wrap { width: 92.593%; max-width: 1185px; } }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--white); padding: .6em 1em; z-index: 100; }
.skip-link:focus { left: 0; }

/* ---------- Kopfbereich ---------- */

.page-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--line-light);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.page-header-inner {
  max-width: 1280px; margin: 0 auto; text-align: center;
  height: 150px;                       /* wird beim Scrollen auf 120px verkleinert */
}

.logo { margin: 0; font-size: inherit; padding: 20px 0 10px; height: calc(100% - 48px); }
.logo a { display: block; height: 100%; }
.logo img { display: block; height: 100%; width: auto; margin: 0 auto; }

.nav-toggle {
  display: none; position: absolute; top: 21px; left: 6.667%; z-index: 200;
  width: 44px; height: 39px; padding: 11px; margin: 0 0 0 -11px;
  border: 0; background: none; cursor: pointer;
  text-indent: -99em; line-height: 0; overflow: hidden;
}
.nav-close { display: none; }              /* nur im geöffneten Off-Canvas-Menü */

.nav-toggle::after {                       /* drei Balken */
  content: ""; display: block; height: 3px; border-radius: 2px;
  background: var(--blue); box-shadow: 0 7px var(--blue), 0 14px var(--blue);
}

.main-nav { padding-bottom: 8px; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: inline-block; }
.main-nav li { position: relative; display: inline-block; height: 40px; text-transform: uppercase; }
.main-nav li::after {                 /* Trennstrich zwischen den Punkten */
  content: ""; position: absolute; top: 50%; left: 100%;
  width: 1px; height: 1em; background: var(--dark); transform: translateY(-50%);
}
.main-nav li:last-child::after { content: none; }
.main-nav a, .main-nav .current {
  display: block; padding: 0 17.5px; line-height: 40px;
  font-size: .875em;                  /* 17,5px */
  color: var(--blue); text-decoration: none;
}
.main-nav a:hover { text-decoration: underline; }
.main-nav [aria-current="page"] { font-weight: 700; }

/* ---------- Abschnitte ---------- */

.section { padding: 0; }
.section.pt-m { padding-top: 30px; }
.section.pb-m { padding-bottom: 30px; }
.section.pt-l, .pt-l { padding-top: 60px; }
.section.pb-l { padding-bottom: 60px; }
.section.green { background: var(--green); }
.section.green.border-b { border-bottom: 30px solid var(--white); }
.section.grey  { background: var(--grey); }

.centered { text-align: center; }
.centered > img, .centered > figure > img { margin-left: auto; margin-right: auto; }

/* Vollflächiger Bildbereich (Startseite: „individuell beraten“) */
.section-image {
  background: var(--white) url("../img/hero-leistungen.jpg") center / cover no-repeat;
}
.section-image .feature-text {
  padding: 90px 16%; text-align: center;
  background: rgba(255, 255, 255, .5);   /* .home-beratung im Original */
}
.section-image h2 { font-size: 2em; line-height: 1.3; color: var(--blue); margin: 0; }
.section-image p  { font-size: 1.4em; line-height: 1.5625; color: var(--dark); margin: 0.75em 0 1.5em; }

/* ---------- Überschriften ---------- */

/* .ce_headline im Original: rot */
.headline { font-size: 1.8em; line-height: 1.3; color: var(--red); margin: .75em 0 .3em; }

/* .hl-blue: blaue Variante (im Original beim Kontaktformular) */
.headline.blue { color: var(--blue); }
.headline.loose { line-height: 1.5; }

/* .headline-box.slogan */
.slogan { text-align: center; margin: 45px 0; }
.slogan h1, .slogan h2 {
  font-size: 2.2em; line-height: 1.3; color: var(--blue); margin: 0;
}
.slogan h1::after, .slogan h2::after {
  content: ""; display: block; margin: 20px auto; height: 1px; width: 220px; background: var(--dark);
}
.slogan h3 {
  font-size: 1.7em; line-height: 1.5; font-weight: 400; color: var(--dark); margin: .444em 0 0;
}
.slogan.medium h1, .slogan.medium h2 { font-size: 2em; }      /* 40px statt 44px */
.slogan.medium h3 { font-size: 1.5em; }                        /* 30px statt 34px */

h4.sub { font-size: 1.5em; line-height: 1.5; color: var(--blue); margin: .75em 0 .3em; }

/* ---------- Spalten (rs-column-Raster des Themes) ---------- */

.cols { display: grid; gap: 0 4%; align-items: center; }
.cols.c22-74 { grid-template-columns: 22% 74%; }      /* col-4-1 + col-4-3 */
.cols.c74-22 { grid-template-columns: 74% 22%; align-items: start; }
.cols.c38-58 { grid-template-columns: 37.6% 58.4%; }  /* col-5-2 + col-5-3 */
.cols.c48-48 { grid-template-columns: 48% 48%; align-items: start; }

/* ---------- Animierte Liste (Startseite, volle Breite) ---------- */

.tagline-list {
  list-style: none; margin: 30px 0; padding: 0;
  text-align: center; font-size: 1.6em; font-weight: 700; line-height: 1.5625;
  color: var(--blue);
}
.tagline-list li { display: inline-block; }
.tagline-list li::before { content: " - "; }
.tagline-list li:first-child::before { content: none; }

/* ---------- Icon-Boxen (Fachgebiete) ---------- */

.icon-boxes {
  list-style: none; margin: 55px 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 16.8%); gap: 0 4%;
}
.icon-boxes li { font-size: .875em; line-height: 1.5625; color: var(--muted); text-align: center; }
.icon-boxes li::before {
  content: ""; display: block; box-sizing: content-box;
  width: 2.28571em; height: 2.28571em;
  padding: .78571em; margin: 0 auto 1.35714em;
  border: .21428em solid var(--red); border-radius: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M7 16.5l6.4 6.4L25 9.5' fill='none' stroke='%23af1642' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 2.28571em 2.28571em no-repeat;
}


/* ---------- Einblend-Animationen beim Scrollen ----------
   Werte aus dem Theme: .not-in-view -> versetzt/transparent, .in-view -> Endlage.
   Übergang 0.6s (opacity linear, transform ease-out). */

.is-animated { overflow: hidden; }

.not-in-view > .-move        { transform: translate(100%, 0); }   /* von rechts */
.not-in-view > .-move-right  { transform: translate(-100%, 0); }  /* von links  */
.not-in-view > .-move-top    { transform: translate(0, 100%); }   /* von unten  */
.not-in-view > .-move-bottom { transform: translate(0, -100%); }
.not-in-view > .-fade        { opacity: 0; }

.in-view > .-move, .in-view > .-move-right,
.in-view > .-move-top, .in-view > .-move-bottom { transform: translate(0, 0); }
.in-view > .-fade { opacity: 1; }

.in-view > .-move, .in-view > .-move-right, .in-view > .-move-top,
.in-view > .-move-bottom, .in-view > .-fade {
  transition: opacity .6s linear, transform .6s ease-out;
}

/* Icon-Boxen: die Kreise wachsen auf */
.icon-boxes li::before {
  transition-property: opacity, transform, color, background;
  transition-duration: .2s, .2s, .2s, .8s;
}
.not-in-view .icon-boxes li::before,
.icon-boxes.not-in-view li::before { opacity: 0; transform: scale(0); }
.icon-boxes.in-view li::before,
.icon-boxes.has-shown li::before   { opacity: 1; transform: scale(1); }

/* Animierte Liste: Einträge nacheinander, je 0,5 s versetzt */
.tagline-list.not-in-view li { opacity: 0; transform: scale(2); }
.tagline-list.in-view li:nth-child(1) { transition: opacity .5s linear,       transform .5s linear; }
.tagline-list.in-view li:nth-child(2) { transition: opacity .5s linear .5s,   transform .5s linear .5s; }
.tagline-list.in-view li:nth-child(3) { transition: opacity .5s linear 1s,    transform .5s linear 1s; }
.tagline-list.in-view li:nth-child(4) { transition: opacity .5s linear 1.5s,  transform .5s linear 1.5s; }
.tagline-list.in-view li:nth-child(5) { transition: opacity .5s linear 2s,    transform .5s linear 2s; }

/* ---------- Parallax-Hintergrund ---------- */

.section-image { position: relative; overflow: hidden; }
.section-image > .wrap { position: relative; z-index: 1; }
.section-bg {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: 50% 50% / cover no-repeat;
}

/* ---------- Bildschieber (Startseite) ---------- */

.slider { position: relative; }
.slider-viewport {
  overflow: hidden;
  cursor: -webkit-grab; cursor: grab;
  touch-action: pan-y;            /* senkrechtes Scrollen bleibt möglich */
}
.slider.is-dragging .slider-viewport { cursor: -webkit-grabbing; cursor: grabbing; }
.slider-track img { -webkit-user-drag: none; user-select: none; }
.slider-track {
  display: grid; grid-auto-flow: column; gap: 5%;
  grid-auto-columns: calc((100% - 15%) / 4);      /* 4 von 8 sichtbar */
  transition: transform 2s cubic-bezier(.4, 0, .2, 1);
}
.slider-track img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }

.slider-nav {
  position: absolute; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 6px; padding: 0 4px;
}
.slider-bullets { list-style: none; display: flex; margin: 0; padding: 0; }
.slider-bullets button {
  display: block; width: 9px; height: 9px; padding: 0; margin: 12px 4px;
  border: 0; border-radius: 100%; cursor: pointer;
  background: rgba(255, 255, 255, .8); box-shadow: 0 0 2px #777;
}
.slider-bullets button[aria-current="true"], .slider-bullets button:hover {
  background: #777;
  box-shadow: inset 0 2px 0 -1px rgba(255,255,255,.5), inset 0 -2px 0 -1px rgba(0,0,0,.3), 0 0 0 1px #555;
}
.slider-arrows { display: flex; background: rgba(85, 85, 85, .6); border-radius: 3px; }
.slider-arrows button {
  width: 28px; height: 30px; padding: 0; border: 0; cursor: pointer;
  background: none; color: #fff; font: inherit; font-size: 16px; line-height: 30px;
}
.slider-arrows button:hover { background: rgba(0, 0, 0, .25); }
.slider-arrows button[disabled] { opacity: .4; cursor: default; background: none; }

/* ---------- Galerie ---------- */

.figure-gallery {
  display: grid; grid-template-columns: repeat(7, 1fr);
  column-gap: 1.5%; row-gap: .888em;      /* wie .ce_gallery li { margin-top } im Original */
}
.figure-gallery figure { margin: 0; }
.figure-gallery img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.figure-gallery figcaption { font-size: .8em; line-height: 1.5625; padding-top: .4286em; text-align: center; }

/* ---------- Startbild ---------- */

.hero img { width: 100%; }
.hero.crop img { height: 500px; object-fit: cover; }

/* Tagline-Bild als Hintergrund (Original: .tagline .tagline-image) */
.hero-band { height: 25vw; background: 50% 50% / cover no-repeat; }
@media (max-width: 1139px) { .hero-band { height: 35vw; } }
@media (max-width: 600px)  { .hero-band { height: 25vh; } }

/* ---------- Leistungen: Reiter ---------- */

.tabs-wrap { padding: 0 25px 60px; }

.tabs {
  list-style: none; margin: 2.25em 0 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border: 1px solid transparent; border-bottom-color: var(--line);
  text-align: center;
}
.tabs button {
  position: relative; display: block; width: 100%; height: 100%;
  font: inherit; cursor: pointer;
  margin: -1px -1px 0; padding: .5625em 1em;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue); background: var(--white);
  border: 1px solid var(--line); border-bottom-width: 0;
}
.tabs button[aria-selected="true"] {
  z-index: 1;
  box-shadow: 0 10px 0 -1px var(--white), 0 -3px var(--blue),
              -3px 0 3px -1px rgba(0, 0, 0, .1), 3px 0 3px -1px rgba(0, 0, 0, .1);
}
@media (min-width: 901px) { .tabs button { min-height: 85px; } }
@media (max-width: 1279px) and (min-width: 901px) {
  .tabs button { min-height: 70px; font-size: .8em; }
}

.tab-panel[hidden] { display: none; }

/* ---------- Feature-Box (Bild links, Text rechts) ---------- */

.feature { display: grid; grid-template-columns: 44% 56%; align-items: center; }
.feature-image { padding: 60px 0; }
.feature-image img { width: 100%; }
.feature-text { padding: 90px 0 90px 4%; color: var(--muted); }
.feature-text p { font-size: 1.125em; line-height: 1.5625; margin: .75em 0 1.5em; }
.feature-text ul { font-size: 1.125em; line-height: 1.5625; }

/* „nach oben“-Verweis mit Linie */
.toplink { display: flex; align-items: center; gap: 20px; padding-bottom: 30px; }
.toplink::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- Info-Boxen (Kontakt) ---------- */

.info-boxes { display: grid; grid-template-columns: 48% 48%; gap: 0 4%; margin-top: 1em; }
.info-boxes section {
  font-size: .875em; line-height: 1.5625;
  background: var(--white); border: 1px solid var(--line-light);
  padding: .714em 1.428em;
}
.info-boxes h2 {
  font-size: 1em; line-height: 1.5; font-weight: 700;
  color: var(--red); text-transform: uppercase;
  margin: .571em 0; padding-bottom: .214em;
  border-bottom: 1px solid var(--line-light);
}
.info-boxes p { margin: .571em 0; }

/* ---------- Karte (OpenStreetMap) ---------- */

.map { border: 1px solid var(--line-light); }
.map iframe { display: block; width: 100%; height: 380px; border: 0; }
.map-caption { font-size: .875em; }

/* ---------- Schaltfläche ---------- */

.button {
  display: inline-block; font-size: .875em; line-height: 1.43;
  padding: .643em 1.428em; margin-top: 1.125em;
  color: var(--white); text-decoration: none; text-transform: uppercase;
  border: 1px solid #6b0d28; border-radius: 3px;
  background: linear-gradient(#c2154a, #8c1236);
}
.button:hover, .button:focus {
  text-decoration: none; color: var(--white);
  background: linear-gradient(#d31b50, #941338);
}

/* ---------- Fließtextseiten (Impressum, Datenschutz) ---------- */

.prose h1, .prose h2 { font-size: 1.8em; line-height: 1.3; color: var(--red); margin: .75em 0 .3em; }
.prose h3 { font-size: 1.5em; line-height: 1.5; color: var(--blue); margin: .75em 0 .3em; }
.prose a { text-decoration: underline; }
.prose p, .prose a, .prose li { word-wrap: break-word; word-break: break-word; }

/* ---------- Sachverständigenseite ---------- */

.float-left { float: left; margin: 0 30px 16px 0; }
.clear { clear: both; }

/* ---------- Fußbereich ---------- */

.page-footer {
  font-size: 16px; color: var(--white); background: var(--blue);
  border-top: 1px solid var(--blue);
}
.page-footer a { color: var(--white); }

.footer-links {
  list-style: none; margin: 25px auto 10px; padding: 0;
  font-size: 18px; text-align: center;
}
.footer-links li { display: inline; }
.footer-links li::before {
  content: ""; display: inline-block; width: 1px; height: .786em;
  margin: 0 .571em 0 .357em; background: var(--white); vertical-align: middle;
}
.footer-links li:first-child::before { content: none; }

.copyright { margin: 10px auto; font-size: .875em; text-align: center; }

.top-link {
  position: fixed; right: 10px; bottom: -100px; z-index: 20;
  width: 2.875em; height: 2.875em; font-size: 18px;
  border: 1px solid var(--line); border-radius: 99em;
  background: var(--white); color: var(--blue);
  text-decoration: none; overflow: hidden;
  transition: bottom .3s ease-out;
}
.top-link.is-visible { bottom: 10px; }
.top-link:hover { text-decoration: none; border-color: var(--blue); }
.top-link span { position: absolute; left: -9999px; }   /* Beschriftung nur für Screenreader */
.top-link::after {                                       /* Pfeil nach oben */
  content: ""; position: absolute; top: 50%; left: 50%;
  width: .55em; height: .55em; margin: -.1em 0 0 -.28em;
  border-left: 2px solid currentColor; border-top: 2px solid currentColor;
  transform: rotate(45deg);
}

/* ---------- Schmale Ansichten ---------- */

/* Mittlere Stufe des Theme-Rasters: alle mehrspaltigen Bereiche gehen auf
   zwei gleiche Spalten, Icon-Boxen und Feature-Box auf das Drittel-Raster. */
@media (max-width: 1140px) {
  .cols.c22-74, .cols.c74-22, .cols.c38-58, .cols.c48-48 { grid-template-columns: 48% 48%; }
  .feature { grid-template-columns: 30.667% 65.333%; gap: 0 4%; }
  .icon-boxes { grid-template-columns: repeat(3, 30.667%); row-gap: 3.5556vw; }
}

@media (max-width: 900px) {
  body { font-size: 16px; }

  body { padding-top: 0; }
  .page-header { position: sticky; }
  .page-header-inner { height: auto; }
  .logo { height: auto; }
  .logo img {
    height: auto; width: auto;
    max-height: 35px; max-width: 100%;   /* wie im Original 471x35, ohne Überlauf */
  }
  .main-nav { padding-bottom: 0; }

  .nav-toggle { display: block; }

  /* Off-Canvas-Menü wie im Original: schiebt sich von links über die Seite */
  .main-nav {
    position: fixed; top: 0; left: 0; z-index: 201;
    width: 85%; height: 100%; overflow-y: auto;
    padding: 0; border-top: 1px solid var(--blue);
    color: var(--blue); background: #fae498; text-align: left;
    transform: translate3d(-100%, 0, 0);
    visibility: hidden;                       /* geschlossen nicht per Tab erreichbar */
    transition: transform .2s ease-out, visibility 0s .2s;
  }
  .main-nav.is-open {
    transform: translate3d(0, 0, 0); visibility: visible;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    transition: transform .2s ease-out, visibility 0s;
  }
  .main-nav ul { display: block; }
  .main-nav li { display: block; height: auto; text-transform: uppercase; }
  .main-nav li::after { content: none; }
  .main-nav a {
    display: block; line-height: 1.5; padding: .64286em .92857em .57143em;
    border-bottom: 1px solid var(--blue); color: inherit; background: #fae498;
    box-shadow: inset 0 1px rgba(255, 255, 255, .05);
    transition: background-color .6s ease-out;
  }
  .main-nav a:hover, .main-nav a:focus { text-decoration: none; background: #f9de80; transition-duration: .2s; }
  .main-nav [aria-current="page"] { background: #fceebf; box-shadow: inset 0 0 5px #fae498; }

  /* Schließfläche rechts neben dem Panel */
  .nav-close {
    position: fixed; top: 0; right: 0; z-index: 201;
    width: 15%; height: 100%;
    border: 0; padding: 0; background: none; cursor: pointer;
    text-indent: -99em; overflow: hidden;
  }
  .nav-open .nav-close { display: block; }
  .nav-open { overflow: hidden; }

  .cols.c22-74, .cols.c74-22, .cols.c38-58, .cols.c48-48,
  .info-boxes { grid-template-columns: 1fr; column-gap: 0; row-gap: 3.5556vw; }
  .feature { grid-template-columns: 1fr; gap: 0; }
  .feature-image, .feature-text { padding: 30px 0; }

  .icon-boxes { grid-template-columns: 1fr; gap: 20px; }
  .slider-track { grid-auto-columns: calc((100% - 5%) / 2); }   /* 2 statt 4 sichtbar */
  /* Schadensgalerie wie im Original: Bilder in Originalgröße, Umbruch nach Platz */
  .figure-gallery { grid-template-columns: repeat(auto-fill, minmax(0, 242px)); justify-content: center; column-gap: 3%; }

  .tabs { grid-auto-flow: row; grid-auto-columns: auto; }
  .tabs button { border-bottom-width: 1px; }
  .tabs button[aria-selected="true"] { box-shadow: inset 3px 0 var(--blue); }

  .section-image .feature-text { padding: 60px 5%; }
  .hero.crop img { height: 300px; }
  .float-left { float: none; margin: 0 0 16px; }
}

@media (max-width: 590px) {
  /* Das Original läuft hier waagerecht über (lange Versalwörter wie
     RAUMAUSSTATTERHANDWERK). Bewusste Abweichung: umbrechen statt überlaufen. */
  .slogan h1, .slogan h2, .slogan h3, .headline, .prose h1, .prose h2, .prose h3 {
    overflow-wrap: break-word; hyphens: auto;
  }
  .slogan.medium h3 { font-size: 1.05em; }   /* wie im Original bei schmalen Ansichten */

}