@charset "utf-8";
/* =========================================================================
   mysiteprofessional – Stylesheet
   Ein einziges Stylesheet, keine Frameworks, keine Preprozessoren.
   Gliederung:
     1  Schriften
     2  Design-Tokens
     3  Grundlagen & Reset
     4  Typografie
     5  Layout-Bausteine
     6  Buttons
     7  Kopfbereich: Topbar, Header, Navigation
     8  Hero
     9  Seitenkopf der Unterseiten
    10  Inhaltsbausteine (Karten, Listen, Tabellen, Flaggen)
    11  Formulare
    12  CTA-Band & Footer
    13  Nach-oben-Button
    14  Druckausgabe
   ========================================================================= */

/* == 1  Schriften ======================================================== */

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* == 2  Design-Tokens ==================================================== */

:root {
  /* Farbwelt der bisherigen Website, auf lesbare Kontraste abgestimmt */
  --orange:        #F49800;
  --orange-hell:   #F8BA55;
  --orange-dunkel: #C67A00;   /* große Überschriften, Hover */
  --orange-tief:   #8A4F00;   /* Footer, kleine Textakzente */
  --orange-tint:   #FDF3E3;   /* zarte Flächen */
  --navy:          #0E1A42;   /* Haken der Checklisten */

  --ink:     #23232A;
  --text:    #504F54;
  --muted:   #74737A;
  --flaeche: #EBEDF3;
  --flaeche-2: #F6F7FA;
  --linie:   #E1E3E9;
  --weiss:   #FFFFFF;

  --schrift: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --breite: 1280px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);
  --radius: 10px;
  --radius-gross: 16px;

  --schatten-1: 0 1px 2px rgba(17, 17, 26, .06), 0 4px 12px rgba(17, 17, 26, .06);
  --schatten-2: 0 2px 6px rgba(17, 17, 26, .07), 0 14px 34px rgba(17, 17, 26, .10);

  --kopf-hoehe: 78px;
}

/* == 3  Grundlagen & Reset =============================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 20px);
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-weight: 300;
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.7;
  color: var(--text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; border: 0; }

a { color: var(--orange-tief); text-decoration: underline; text-underline-offset: .16em; }
a:hover { color: var(--ink); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--orange-dunkel);
  outline-offset: 2px;
  border-radius: 3px;
}

hr { border: 0; border-top: 1px solid var(--linie); margin: 2.5rem 0; }

::selection { background: var(--orange); color: #fff; }

.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--ink);
  color: #fff;
  padding: .75rem 1.25rem;
  text-decoration: none;
}
.skiplink:focus { left: .5rem; top: .5rem; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* == 4  Typografie ======================================================= */

h1, h2, h3, h4 {
  font-weight: 300;
  line-height: 1.18;
  color: var(--orange-dunkel);
  margin: 0 0 .6em;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(1.85rem, 1.2rem + 2.4vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 1.05rem + 1.5vw, 2.05rem); }
h3 { font-size: clamp(1.12rem, 1rem + .5vw, 1.35rem); color: var(--ink); font-weight: 600; }
h4 { font-size: 1.05rem; color: var(--ink); font-weight: 600; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

b, strong { font-weight: 600; color: var(--ink); }
small { font-size: .875em; }

.kicker {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--orange-tief);
  margin: 0 0 .7rem;
}

.lead {
  font-size: clamp(1.06rem, 1rem + .4vw, 1.25rem);
  color: var(--ink);
  font-weight: 300;
  line-height: 1.6;
}

.marke b, .marke strong { font-weight: 700; color: inherit; }

/* == 5  Layout-Bausteine ================================================= */

.wrap {
  width: min(100% - 2.5rem, var(--breite));
  margin-inline: auto;
}
@media (max-width: 540px) { .wrap { width: min(100% - 1.75rem, var(--breite)); } }

.abschnitt { padding-block: clamp(2.75rem, 5vw, 4.75rem); }
.abschnitt--eng { padding-block: clamp(2rem, 3.5vw, 3.25rem); }
.abschnitt--flaeche { background: var(--flaeche-2); }
.abschnitt--tint { background: var(--orange-tint); }
.abschnitt--linie-oben { border-top: 1px solid var(--linie); }

.prosa { max-width: 74ch; }
.prosa > * + * { margin-top: 1.1em; }
.prosa h2 { margin-top: 1.8em; }
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { margin-top: 1.6em; margin-bottom: .5em; }
.prosa ul, .prosa ol { padding-left: 1.35em; margin-block: 1em; }
.prosa li + li { margin-top: .45em; }

.zwei-spalten {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: stretch;
}
/* Karten in einer Reihe laufen bis zur gleichen Unterkante,
   die Schaltflächen sitzen dabei immer unten bündig. */
.zwei-spalten > .karte,
.zwei-spalten > .preis-karte,
.raster > .karte,
.raster > .preis-karte { height: 100%; }
.karte > .aktionen,
.preis-karte > .aktionen { margin-top: auto; padding-top: 1.6rem; }

.abschnitt-kopf { max-width: 62ch; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

/* == 6  Buttons ========================================================== */

.btn {
  --btn-bg: var(--orange);
  --btn-fg: var(--ink);
  --btn-br: var(--orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .78em 1.5em;
  min-height: 46px;
  border: 2px solid var(--btn-br);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 600;
  font-size: .97rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s, border-color .18s, color .18s, transform .18s;
}
.btn:hover { transform: translateY(-1px); }

.btn--primaer:hover { --btn-bg: var(--orange-hell); --btn-br: var(--orange-hell); color: var(--ink); }

.btn--sekundaer { --btn-bg: transparent; --btn-fg: var(--ink); --btn-br: var(--ink); }
.btn--sekundaer:hover { --btn-bg: var(--ink); --btn-fg: #fff; color: #fff; }

.btn--weiss { --btn-bg: #fff; --btn-fg: var(--orange-tief); --btn-br: #fff; }
.btn--weiss:hover { --btn-bg: var(--orange-tint); color: var(--orange-tief); }

.btn--outline-weiss { --btn-bg: transparent; --btn-fg: var(--ink); --btn-br: rgba(35, 35, 42, .55); }
.btn--outline-weiss:hover { --btn-bg: var(--ink); --btn-fg: #fff; color: #fff; }

.btn--klein { padding: .55em 1.15em; min-height: 40px; font-size: .9rem; }
.btn--gross { padding: .95em 1.9em; min-height: 54px; font-size: 1.03rem; }
.btn--block { display: flex; width: 100%; }

.aktionen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }

/* == 7  Kopfbereich ====================================================== */

.topbar {
  background: var(--orange);
  color: #4A2C00;
  font-size: .875rem;
}
.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding-block: .35rem;
}
.topbar p { margin: 0; }
.topbar__claim { font-weight: 600; }
.topbar__kontakt { display: flex; gap: .55rem; flex-wrap: wrap; }
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { text-decoration: underline; color: #2E1B00; }
@media (max-width: 700px) { .topbar__kontakt { display: none; } }

.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--linie);
  transition: box-shadow .2s;
}
.kopf.is-gescrollt { box-shadow: var(--schatten-1); }

.kopf__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: var(--kopf-hoehe);
}

.kopf__logo { flex: 0 0 auto; line-height: 0; }
.kopf__logo img { width: clamp(170px, 17vw, 224px); height: auto; }

/* -- Navigation ---------------------------------------------------------- */

.nav { margin-left: auto; }

.nav__liste {
  display: flex;
  align-items: center;
  gap: clamp(.15rem, .9vw, 1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__item { position: relative; }

.nav__link {
  display: block;
  padding: .55rem .35rem;
  color: var(--ink);
  font-size: .97rem;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color .18s, border-color .18s;
}
.nav__link:hover { color: var(--orange-tief); border-bottom-color: var(--orange-hell); }
.nav__link.is-aktiv { color: var(--orange-tief); font-weight: 600; border-bottom-color: var(--orange); }

.nav__toggle { display: none; }

.nav__item--drop > .nav__link::after {
  content: "";
  display: inline-block;
  width: .42em; height: .42em;
  margin-left: .45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.15em) rotate(45deg);
}

.nav__sub {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 260px;
  margin: 0;
  padding: .45rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-2);
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s, transform .16s, visibility .16s;
}
.nav__item--drop:hover > .nav__sub,
.nav__item--drop:focus-within > .nav__sub,
.nav__item--drop.is-offen > .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav__sub a {
  display: block;
  padding: .6rem .8rem;
  border-radius: 6px;
  color: var(--ink);
  font-size: .95rem;
  text-decoration: none;
}
.nav__sub a:hover { background: var(--orange-tint); color: var(--orange-tief); }
.nav__sub a.is-aktiv { color: var(--orange-tief); font-weight: 600; }

.nav__item--cta { margin-left: .5rem; }

/* -- Burger / mobiles Menü ----------------------------------------------- */

.burger {
  display: none;
  align-items: center;
  gap: .55rem;
  margin-left: auto;
  padding: .5rem .85rem;
  border: 2px solid var(--linie);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
}
.burger__balken {
  position: relative;
  width: 20px; height: 2px;
  background: var(--ink);
  transition: background .2s;
}
.burger__balken::before,
.burger__balken::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px; height: 2px;
  background: var(--ink);
  transition: transform .2s, top .2s;
}
.burger__balken::before { top: -6px; }
.burger__balken::after  { top: 6px; }
.burger[aria-expanded="true"] .burger__balken { background: transparent; }
.burger[aria-expanded="true"] .burger__balken::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__balken::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1060px) {
  .burger { display: inline-flex; }

  /* Aufklappmenü direkt unter der Kopfzeile.
     Bewusst position:absolute statt fixed – die Kopfzeile hat einen
     backdrop-filter und wäre damit ohnehin der Bezugsrahmen. */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    max-height: calc(100vh - var(--kopf-hoehe));
    background: #fff;
    border-top: 1px solid var(--linie);
    border-bottom: 4px solid var(--orange);
    box-shadow: var(--schatten-2);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav.is-offen { opacity: 1; transform: none; visibility: visible; }

  .nav__liste {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem 1.25rem 1.75rem;
    width: min(100%, var(--breite));
    margin-inline: auto;
  }
  .nav__item { border-bottom: 1px solid var(--linie); }
  .nav__link {
    padding: 1rem .25rem;
    font-size: 1.08rem;
    border-bottom: 0;
    border-left: 3px solid transparent;
    padding-left: .75rem;
  }
  .nav__link.is-aktiv { border-left-color: var(--orange); background: var(--orange-tint); }
  .nav__item--drop > .nav__link::after { display: none; }

  .nav__toggle {
    display: block;
    position: absolute;
    top: 4px; right: 0;
    width: 52px; height: 52px;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .nav__toggle span {
    display: block;
    width: .55em; height: .55em;
    margin: 0 auto;
    border-right: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    transform: rotate(45deg);
    transition: transform .2s;
  }
  .nav__toggle[aria-expanded="true"] span { transform: rotate(-135deg); }

  .nav__sub {
    position: static;
    transform: none;
    display: none;
    min-width: 0;
    margin: 0 0 .75rem .75rem;
    padding: 0 0 0 .75rem;
    border: 0;
    border-left: 2px solid var(--orange-hell);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
  }
  .nav__item--drop.is-offen > .nav__sub { display: block; transform: none; }
  .nav__sub a { padding: .6rem .25rem; }

  .nav__item--cta { border-bottom: 0; margin: 1.25rem 0 0; }
  .nav__item--cta .btn { width: 100%; min-height: 50px; font-size: 1rem; }
}


/* == 8  Hero ============================================================= */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--flaeche);
  border-bottom: 4px solid var(--orange);
}

.hero__medien {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
}
.hero__bild {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease-in-out;
}
.hero__bild.is-aktiv { opacity: 1; }
.hero__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 30%) center;
}

.hero__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  min-height: clamp(320px, 24vw, 380px);
  padding-block: clamp(1.5rem, 2.4vw, 2.1rem);
}

.hero__karte {
  max-width: 660px;
  padding: clamp(1.3rem, 2.4vw, 1.9rem) clamp(1.35rem, 2.6vw, 2.2rem);
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(6px);
  border-left: 5px solid var(--orange);
  border-radius: 4px var(--radius-gross) var(--radius-gross) 4px;
  box-shadow: var(--schatten-2);
}
.hero__titel {
  margin-bottom: .4em;
  color: var(--ink);
  font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.6rem);
}
.hero__titel em { font-style: normal; color: var(--orange-dunkel); }
.hero__text { color: var(--text); margin-bottom: 0; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); }

.hero__preis {
  align-self: center;
  min-width: 240px;
  padding: 1.1rem 1.5rem;
  background: var(--orange);
  color: #4A2C00;
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-2);
  text-align: center;
}
.hero__preis-zahl {
  display: block;
  font-size: clamp(2.6rem, 2rem + 2.4vw, 3.7rem);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  letter-spacing: -.02em;
}
.hero__preis-zahl sup { font-size: .42em; font-weight: 600; vertical-align: super; }
.hero__preis-oben { display: block; font-weight: 600; font-size: .95rem; }
.hero__preis-unten { display: block; margin-top: .5rem; font-size: .92rem; line-height: 1.4; font-weight: 600; }

@media (max-width: 900px) {
  .hero { border-bottom-width: 4px; }
  .hero__medien { position: relative; height: 190px; z-index: 0; }
  .hero__inner { min-height: 0; padding-block: 1.75rem 2.25rem; }
  .hero__karte {
    max-width: none;
    background: none;
    backdrop-filter: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 0 1rem;
  }
  .hero__preis { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__bild { transition: none; }
  .btn:hover { transform: none; }
}

/* == 9  Seitenkopf der Unterseiten ======================================= */

.seitenkopf {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.5rem, 5vw, 4.25rem);
  background: linear-gradient(118deg, #8A4F00 0%, #6B3D00 60%, #7E4700 100%);
  border-bottom: 4px solid var(--orange);
  color: #fff;
}

/* Dekoratives Muster – für jede Rubrik ein eigenes SVG,
   gesetzt über die Variable --muster am <body>. */
.seitenkopf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--muster);
  background-repeat: repeat;
  background-size: 240px 240px;
  /* Bewusst zurueckgenommen: das Muster soll Struktur geben,
     aber der weissen Schrift nicht ins Gehege kommen. */
  opacity: .5;
}
/* Weicher Verlauf, damit die Schrift überall ruhig steht. */
.seitenkopf::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* zusaetzlich ein sanfter Schleier von oben, damit auch Brotkrumen
       und Kicker vor dem Muster ruhig stehen */
    linear-gradient(to bottom, rgba(107, 61, 0, .35) 0%, rgba(107, 61, 0, .12) 45%, rgba(107, 61, 0, .30) 100%),
    linear-gradient(100deg, rgba(107, 61, 0, .80) 0%, rgba(107, 61, 0, .48) 58%, rgba(107, 61, 0, .10) 100%);
}

.seitenkopf__inner {
  max-width: 62rem;
  text-shadow: 0 1px 3px rgba(60, 34, 0, .45);
}
.seitenkopf h1 { margin-bottom: .35em; color: #fff; }
.seitenkopf h2 { color: #fff; }
.seitenkopf .lead { margin-bottom: 0; color: #fff; }
.seitenkopf .kicker { color: #FFD79B; }
.seitenkopf b, .seitenkopf strong { color: #fff; }
.seitenkopf a { color: #FFD79B; }
.seitenkopf a:hover { color: #fff; }

.brotkrumen {
  margin: 0 0 1rem;
  font-size: .85rem;
  color: rgba(255, 255, 255, .8);
}
.brotkrumen ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.brotkrumen li + li::before { content: "›"; margin-right: .4rem; color: var(--orange-hell); }
.brotkrumen a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.brotkrumen a:hover { color: #fff; text-decoration: underline; }

/* == 10  Inhaltsbausteine =============================================== */

/* Checkliste mit orangem Haken */
.checkliste { list-style: none; margin: 1.25rem 0; padding: 0; }
.checkliste > li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: .85rem;
}
.checkliste > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .48em;
  width: 1.15rem;
  height: .62rem;
  border-left: .19rem solid var(--orange);
  border-bottom: .19rem solid var(--orange);
  transform: rotate(-45deg);
}
.checkliste ul {
  list-style: disc;
  margin: .55rem 0 0;
  padding-left: 1.2rem;
}
.checkliste ul li { margin-bottom: .35rem; }
.checkliste--zweispaltig { columns: 2; column-gap: var(--gap); }
.checkliste--zweispaltig > li { break-inside: avoid; }
@media (max-width: 800px) { .checkliste--zweispaltig { columns: 1; } }

/* Karten-Raster */
.raster {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.raster--breit { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }

.karte {
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 2.4vw, 1.85rem);
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-1);
}
.karte h3 { margin-bottom: .5rem; }
.karte > :last-child { margin-bottom: 0; }
.karte__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 1rem;
  border-radius: 12px;
  background: var(--orange-tint);
  color: var(--orange-tief);
}
.karte__icon svg { width: 24px; height: 24px; }

/* Referenzen */
.referenzen {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.referenz {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-1);
  transition: transform .18s, box-shadow .18s;
}
.referenz:hover { transform: translateY(-3px); box-shadow: var(--schatten-2); }
.referenz__bild {
  background: var(--flaeche-2);
  padding: 1rem 1rem .25rem;
}
/* Einheitlicher Bildbereich, damit alle Karten auf gleicher Höhe umbrechen.
   Die Screenshots aus der Verwaltung haben nicht immer dasselbe Seitenverhältnis. */
.referenz__bild img {
  width: 100%;
  height: auto;
  aspect-ratio: 283 / 214;
  object-fit: contain;
}
.referenz__text { padding: 1rem 1.15rem 1.25rem; }
.referenz__name { display: block; font-weight: 600; color: var(--ink); }
.referenz__ort { display: block; font-size: .9rem; color: var(--muted); }
.referenz__link {
  display: inline-block;
  margin-top: .5rem;
  font-size: .9rem;
  color: var(--orange-tief);
  word-break: break-all;
}

/* Zahlen-/Fakten-Leiste */
.fakten {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.fakten dt { font-size: .92rem; color: var(--muted); }
.fakten dd {
  margin: 0 0 .15rem;
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.3rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--orange-dunkel);
}

/* Preistafel */
.preis-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: #fff;
  border: 2px solid var(--linie);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-1);
}
.preis-karte--hervor { border-color: var(--orange); box-shadow: var(--schatten-2); }
.preis-karte__badge {
  position: absolute;
  top: -.85rem; left: clamp(1.5rem, 3vw, 2.25rem);
  padding: .25rem .8rem;
  border-radius: 999px;
  background: var(--orange);
  color: #4A2C00;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.preis-karte__preis {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  margin: .35rem 0 .25rem;
  font-size: clamp(2.1rem, 1.6rem + 2vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  color: var(--orange-dunkel);
}
.preis-karte__preis span { font-size: .9rem; font-weight: 400; color: var(--muted); }
.preis-karte__hinweis { font-size: .88rem; color: var(--muted); }
.preis-karte ul { margin-top: 1.1rem; }

/* Tabellen */
.tabelle-wrap { overflow-x: auto; margin: 1.5rem 0; }
table.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: .97rem;
  min-width: 480px;
}
table.tabelle th,
table.tabelle td {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--linie);
  text-align: left;
  vertical-align: top;
}
table.tabelle th { color: var(--ink); font-weight: 600; background: var(--flaeche-2); }
table.tabelle tbody tr:hover td { background: var(--orange-tint); }
table.tabelle td:last-child { white-space: nowrap; font-weight: 600; color: var(--ink); }

/* Sprachenliste mit Flaggen */
.sprachen {
  display: grid;
  gap: .6rem 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}
.sprachen li { display: flex; align-items: center; gap: .7rem; }
.sprachen img {
  width: 30px; height: 20px;
  border: 1px solid var(--linie);
  border-radius: 3px;
  object-fit: cover;
}

/* Hinweisbox */
.hinweis {
  padding: 1.15rem 1.35rem;
  margin: 1.75rem 0;
  background: var(--orange-tint);
  border-left: 4px solid var(--orange);
  border-radius: 4px var(--radius) var(--radius) 4px;
}
.hinweis > :last-child { margin-bottom: 0; }
.hinweis__titel { font-weight: 700; color: var(--ink); }

/* Aufklappbare Abschnitte (AGB, Datenschutz) */
.akkordeon {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  margin-bottom: .75rem;
  background: #fff;
  overflow: hidden;
}
.akkordeon > summary {
  padding: 1rem 1.25rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.akkordeon > summary::-webkit-details-marker { display: none; }
.akkordeon > summary::after {
  content: "";
  width: .5em; height: .5em;
  margin-left: auto;
  border-right: 2px solid var(--orange-tief);
  border-bottom: 2px solid var(--orange-tief);
  transform: rotate(45deg);
  transition: transform .2s;
}
.akkordeon[open] > summary::after { transform: rotate(-135deg); }
.akkordeon[open] > summary { background: var(--orange-tint); }
.akkordeon__inhalt { padding: 0 1.25rem 1.35rem; }
.akkordeon__inhalt > :first-child { margin-top: .5rem; }

/* == 11  Formulare ====================================================== */

.formular {
  padding: clamp(1.4rem, 3vw, 2.25rem);
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
}
.formular__titel {
  margin: 0 0 .35em;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.7rem);
  color: var(--orange-dunkel);
}

.feld { margin-bottom: 1.1rem; }
.feld > label,
.feldgruppe__titel {
  display: block;
  margin-bottom: .35rem;
  font-size: .93rem;
  font-weight: 600;
  color: var(--ink);
}
.feld__hilfe { display: block; margin-top: .3rem; font-size: .85rem; color: var(--muted); }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
select,
textarea {
  width: 100%;
  padding: .7rem .85rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--linie);
  border-radius: 8px;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 8.5rem; resize: vertical; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23504F54' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 12px 8px;
  padding-right: 2.5rem;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(244, 152, 0, .22);
  outline: none;
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: #C0392B;
  background: #FDF3F2;
}

.feld-zeile {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.feldgruppe {
  margin: 0 0 1.4rem;
  padding: 0;
  border: 0;
}
.feldgruppe legend {
  padding: 0;
  margin-bottom: .5rem;
  font-size: .93rem;
  font-weight: 600;
  color: var(--ink);
}

.check {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin-bottom: .55rem;
  font-size: .97rem;
  cursor: pointer;
}
.check input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: .28rem; accent-color: var(--orange); }

.check-raster {
  display: grid;
  gap: .35rem 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 165px), 1fr));
}

.honigtopf {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
}

.pflicht { color: #B3261E; }
.formular__pflichthinweis { font-size: .85rem; color: var(--muted); margin: .25rem 0 1.25rem; }

.meldung {
  padding: 1rem 1.2rem;
  margin-bottom: 1.4rem;
  border-radius: var(--radius);
  border-left: 4px solid;
  font-size: .97rem;
}
.meldung--fehler { background: #FDF3F2; border-color: #C0392B; color: #7A1F16; }
.meldung--erfolg { background: #F1F8EE; border-color: #5FAE1F; color: #2F5A0F; }
.meldung > :last-child { margin-bottom: 0; }

.formular.is-sendet { opacity: .6; pointer-events: none; }

/* == 11b  Einblenden beim Scrollen ====================================== */

/* Die Klasse js-anim setzt ein kleines Skript im <head> - aber nur, wenn der
   Browser IntersectionObserver kann und der Besucher keine reduzierten
   Bewegungen wuenscht. Ohne die Klasse ist alles ganz normal sichtbar.

   Der Ausgangszustand steht bewusst hier im Stylesheet und nicht in
   JavaScript: sonst waeren die Inhalte einen Moment sichtbar und wuerden
   danach wieder wegblenden.

   Der Ausgangszustand haengt an :not(.is-sichtbar). Sobald ein Element
   eingeblendet ist, gilt fuer es wieder ganz normales CSS - deshalb braucht
   es keine Gegenregel mit !important, und eigene Effekte (z. B. das Anheben
   der Referenzkarten beim Ueberfahren) bleiben unangetastet.

   WICHTIG: Diese Auswahl muss mit der Liste ZIELE in assets/js/main.js
   uebereinstimmen. Verschachtelte Treffer vermeiden, sonst blendet es doppelt. */
.js-anim :is(.abschnitt-kopf, .karte, .preis-karte, .referenz, .hinweis,
     .formular, .fakten > div, .tabelle-wrap, .sprachen, .akkordeon):not(.anim-fertig) {
  transition: opacity .5s ease-out, transform .5s ease-out;
  transition-delay: calc(var(--anim-i, 0) * 70ms);
}
.js-anim :is(.abschnitt-kopf, .karte, .preis-karte, .referenz, .hinweis,
     .formular, .fakten > div, .tabelle-wrap, .sprachen, .akkordeon):not(.is-sichtbar) {
  opacity: 0;
  transform: translateY(14px);
}

@media (prefers-reduced-motion: reduce) {
  .js-anim :is(.abschnitt-kopf, .karte, .preis-karte, .referenz, .hinweis,
     .formular, .fakten > div, .tabelle-wrap, .sprachen, .akkordeon):not(.is-sichtbar) { opacity: 1; transform: none; }
}

/* == 12  CTA-Band & Footer ============================================== */

.cta-band { background: var(--orange); color: #4A2C00; }
.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding-block: clamp(2rem, 3.5vw, 3rem);
}
.cta-band__titel {
  margin: 0 0 .35em;
  color: #3B2200;
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.95rem);
  font-weight: 700;
}
.cta-band__text { margin: 0; max-width: 52ch; font-weight: 400; }
.cta-band b, .cta-band strong { color: #3B2200; }
.cta-band__aktionen { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }

.fuss {
  background: var(--orange-tief);
  color: #fff;
  font-size: .95rem;
}
.fuss b, .fuss strong { color: #fff; }
.fuss a { color: #FCE8CB; text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }

.fuss__grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
}
.fuss__logo {
  width: 210px;
  margin-bottom: 1.1rem;
  background: #fff;
  padding: .55rem .75rem;
  border-radius: 8px;
}
.fuss address { font-style: normal; line-height: 1.75; }
.fuss__titel {
  margin: 0 0 .75rem;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .02em;
}
.fuss__liste { list-style: none; margin: 0; padding: 0; }
.fuss__liste li { margin-bottom: .4rem; }
.fuss p { margin-bottom: .9rem; }

.fuss__unten {
  border-top: 1px solid rgba(255, 255, 255, .22);
  font-size: .85rem;
}
.fuss__unten-inner {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.5rem;
  justify-content: space-between;
  padding-block: 1.1rem;
}
.fuss__unten p { margin: 0; }

/* == 13  Nach-oben-Button =============================================== */

.nachoben {
  position: fixed;
  right: 1.15rem;
  bottom: 1.15rem;
  z-index: 90;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--orange);
  color: #4A2C00;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--schatten-2);
  transition: background-color .18s, transform .18s;
}
.nachoben:hover { background: var(--orange-hell); transform: translateY(-2px); }
.nachoben[hidden] { display: none; }

/* == 14  Druckausgabe =================================================== */

@media print {
  .topbar, .kopf, .hero__medien, .cta-band, .nachoben, .burger, .formular { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .fuss { background: none; color: #000; border-top: 1px solid #999; }
  .fuss a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}