/* ==========================================================================
   Veranstaltungstechniker Tobias Krüger
   Design-System und Layout
   Farben stammen aus dem Logo: Schwarz, Grau, Off-White.
   Farbe auf der Seite kommt ausschliesslich aus den Fotos.
   ========================================================================== */

/* --- Schriften, lokal gehostet (keine externen Server) -------------------- */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Design-Token --------------------------------------------------------- */

:root {
  --ink:        #0B0B0D;
  --ink-soft:   #16171A;
  --ink-lift:   #1E2024;
  --line-dark:  #2C2E34;
  --line-light: #DCDCD8;
  --mute:       #7A7D85;
  --mute-light: #5E6169;
  --paper:      #F4F4F2;
  --paper-warm: #EBEBE7;
  --white:      #FFFFFF;

  --font-display: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --gut: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4rem, 10vw, 7.5rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 68px;
}

/* --- Grundlagen ----------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.35rem, 6.2vw, 4.25rem); }
h2 { font-size: clamp(1.85rem, 4.2vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); letter-spacing: -0.01em; }
h4 { font-size: 1.0625rem; letter-spacing: 0; }

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

ul { margin: 0 0 1.15em; padding-left: 1.15em; }
li { margin-bottom: 0.4em; }

strong { font-weight: 600; }

::selection { background: var(--ink); color: var(--paper); }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Hilfsklassen --------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section { padding-block: var(--section-y); }

.section--dark {
  background: var(--ink);
  color: var(--paper);
}
.section--dark a { color: var(--paper); }

.section--paper { background: var(--paper); }
.section--warm { background: var(--paper-warm); }

.lede {
  font-size: clamp(1.075rem, 1.9vw, 1.3rem);
  line-height: 1.55;
  max-width: 56ch;
  color: var(--mute-light);
}
.section--dark .lede { color: #B6B9C0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--paper);
  color: var(--ink);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* Kleines Label ueber Ueberschriften, das die Abschnitte durchnummeriert */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 1.4rem;
}
.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line-light);
}
.section--dark .eyebrow::after { background: var(--line-dark); }

.section-head { max-width: 62ch; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0.95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease);
  min-height: 48px;
}

.btn__arrow {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  transition: transform 0.3s var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn--primary:hover { background: var(--ink-lift); border-color: var(--ink-lift); }

/* Auf dunklem Grund dreht sich der Hauptbutton um: heller Grund, dunkler Text */
.section--dark .btn--primary,
.hero .btn--primary,
.cta .btn--primary,
.page-head .btn--primary,
.btn--invert,
.site-nav a.btn--invert {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.section--dark .btn--primary:hover,
.hero .btn--primary:hover,
.cta .btn--primary:hover,
.page-head .btn--primary:hover,
.btn--invert:hover,
.site-nav a.btn--invert:hover { background: var(--white); border-color: var(--white); }

.btn--ghost {
  background: transparent;
  color: currentColor;
  border-color: var(--line-light);
}
.btn--ghost:hover { border-color: currentColor; }
.section--dark .btn--ghost,
.hero .btn--ghost,
.cta .btn--ghost { border-color: #44464C; }
.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.cta .btn--ghost:hover { border-color: var(--paper); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

/* Textlink mit Unterstrich, der beim Zeigen einlaeuft */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.98rem;
  text-decoration: none;
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.35s var(--ease);
}
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow svg { width: 0.95em; height: 0.95em; transition: transform 0.3s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --- Kopfzeile ------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid var(--line-dark);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
  padding-block: 0.6rem;
}

/* Reihenfolge in der Kopfzeile. Der Sprachumschalter sitzt immer ganz
   rechts aussen, auf dem Handy links neben dem Menueknopf. */
.brand      { order: 1; }
.site-nav   { order: 2; }
.sprache    { order: 3; }
.nav-toggle { order: 4; }

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--paper);
  flex: none;
  padding-block: 7px;   /* macht den Logo-Link gut tippbar */
}
.brand__mark { width: 34px; height: 34px; flex: none; color: var(--paper); }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}
.brand__role {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 2px;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-right: -0.5rem;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}
.nav-toggle__bars { display: block; width: 22px; height: 12px; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.2s linear;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after { bottom: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after { transform: translateY(-5px) rotate(-45deg); }

.site-nav {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;          /* bricht unter Logo und Menuknopf um */
  padding: 0.5rem 0 1.4rem;
  border-top: 1px solid var(--line-dark);
}
.site-nav.is-open { display: flex; }

.site-nav a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  text-decoration: none;
  padding: 0.7rem 0;
  color: var(--paper);
  border-bottom: 1px solid var(--line-dark);
}
.site-nav a[aria-current='page'] { color: var(--mute); }
.site-nav .btn {
  margin-top: 0.9rem;
  justify-content: center;
  border-bottom: 1px solid var(--paper);
}

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    width: auto;
    padding: 0;
    border: 0;
  }
  .site-nav a {
    font-size: 0.94rem;
    padding: 0;
    border: 0;
    position: relative;
  }
  .site-nav a:not(.btn)::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.3s var(--ease);
  }
  .site-nav a:not(.btn):hover::after { width: 100%; }
  .site-nav a[aria-current='page']::after { width: 100%; background: var(--mute); }
  .site-nav .btn { margin-top: 0; padding: 0.72rem 1.25rem; min-height: 44px; border-bottom-width: 1px; }
  .site-nav { margin-left: auto; }
  .sprache { margin-left: 0.25rem; }
}

/* --- Sprachumschalter ----------------------------------------------------- */

.sprache {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--mute);
  padding: 0.42rem 0.6rem;
  border: 1px solid var(--line-dark);
  border-radius: 2px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
  flex: none;
  align-self: center;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
}
.sprache:hover { color: var(--paper); border-color: var(--mute); }

/* Nur für Screenreader, für das Auge unsichtbar */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 899px) {
  /* Auf dem Handy steht der Umschalter neben dem Menueknopf, damit er
     auch bei geschlossenem Menue erreichbar bleibt. */
  .sprache { margin-left: auto; }
}

/* --- Startseite: geteilter Kopfbereich ------------------------------------ */

.hero {
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid var(--line-dark);
}
.hero__grid { display: grid; }

.hero__media { position: relative; order: -1; }
/* Auf dem Handy bewusst flacher, damit Überschrift und Button ohne Scrollen
   sichtbar bleiben. Auf breiten Schirmen fuellt das Foto die halbe Seite. */
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 40%;
  aspect-ratio: 3 / 2;
}
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,11,13,0.15) 0%, rgba(11,11,13,0.55) 100%);
}

.hero__body {
  padding-block: clamp(2.75rem, 8vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero h1 { margin-bottom: 0.5em; }
.hero__lede {
  font-size: clamp(1.05rem, 1.9vw, 1.22rem);
  line-height: 1.6;
  color: #B6B9C0;
  max-width: 46ch;
  margin-bottom: 2rem;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-dark);
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

/* Auf breiten Schirmen laeuft das Foto bis zum Fensterrand, waehrend der Text
   auf der Rasterkante des uebrigen Seiteninhalts sitzt. */
@media (min-width: 860px) {
  .hero__grid {
    grid-template-columns: 1.06fr 0.94fr;
    align-items: stretch;
    min-height: min(78vh, 720px);
  }
  .hero__media { order: 0; }
  .hero__media img { aspect-ratio: auto; }
  .hero__body {
    padding-block: clamp(3.5rem, 7vw, 6rem);
    padding-left: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
    padding-right: clamp(2.5rem, 5vw, 4.5rem);
    max-width: none;
  }
}

/* --- Seitenkopf der Unterseiten ------------------------------------------- */

.page-head {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(3rem, 8vw, 5.5rem);
  border-bottom: 1px solid var(--line-dark);
}
.page-head h1 { margin-bottom: 0.45em; }
.page-head .lede { color: #B6B9C0; }

.page-head--media { padding-bottom: 0; }
.page-head__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: end; }
.page-head__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}
/* Hochformat für ein Porträt, damit der Kopf nicht angeschnitten wird */
.page-head__media--portraet img { aspect-ratio: 3 / 4; }
@media (min-width: 860px) {
  .page-head--media .page-head__grid:has(.page-head__media--portraet) {
    grid-template-columns: 1.25fr 0.75fr;
  }
  .page-head__media--portraet { margin-bottom: -4rem; }
}
@media (min-width: 860px) {
  .page-head__grid { grid-template-columns: 1.15fr 0.85fr; }
  .page-head__media { margin-bottom: -3rem; }
}

.breadcrumb {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 1.5rem;
}
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { margin-inline: 0.5rem; }

/* --- Karten und Raster ---------------------------------------------------- */

.grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }

@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.card {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.1rem);
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 2px;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.section--warm .card { background: var(--paper); }
.section--dark .card {
  background: var(--ink-soft);
  border-color: var(--line-dark);
}

/* Anklickbare Karte: die ganze Fläche führt zum Ziel, der Link sitzt aber
   in der Überschrift, damit Screenreader ihn richtig ankündigen. */
.card--link { display: flex; flex-direction: column; }
.card--link:hover { border-color: var(--ink); transform: translateY(-3px); }
.section--dark .card--link:hover { border-color: var(--mute); }
.card--link h3 a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.35s var(--ease);
}
.card--link:hover h3 a { background-size: 100% 1px; }
.card--link h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 2px;
  /* Muss über den Listenpunkten liegen, die selbst positioniert sind,
     sonst ist die Kartenmitte nicht anklickbar. */
  z-index: 1;
}
.card--link:focus-within { outline: 2px solid currentColor; outline-offset: 3px; }
.card--link h3 a:focus-visible { outline: none; }

.card__mehr {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1.4rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--mute);
  transition: color 0.25s var(--ease);
}
.card__mehr svg { width: 0.95em; height: 0.95em; transition: transform 0.3s var(--ease); }
.card--link:hover .card__mehr { color: var(--ink); }
.card--link:hover .card__mehr svg { transform: translateX(4px); }
.section--dark .card--link:hover .card__mehr { color: var(--paper); }

.card__num {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--mute);
  display: block;
  margin-bottom: 1.1rem;
}
.card h3 { margin-bottom: 0.55em; }
.card p { color: var(--mute-light); font-size: 0.98rem; }
.section--dark .card p { color: #A9ACB4; }

.card__list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  font-size: 0.95rem;
  color: var(--mute-light);
}
.section--dark .card__list { color: #A9ACB4; }
.card__list li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.5em;
}
.card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 7px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

/* --- Wechselnde Bild- und Textbloecke ------------------------------------- */

.split {
  display: grid;
  gap: clamp(1.75rem, 5vw, 3.5rem);
  align-items: center;
}
/* Zwei Textspalten nebeneinander starten oben bündig */
.split--top { align-items: start; }
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-text { grid-template-columns: 1.1fr 0.9fr; }
  .split--flip .split__media { order: 2; }
}
.split__media img,
.split__media .ph {
  width: 100%;
  border-radius: 2px;
}
/* Einheitliche Bildhoehe, damit hochkante Fotos die Abschnitte nicht
   auseinanderziehen. Der Ausschnitt liegt etwas oberhalb der Mitte. */
.split__media img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 38%;
}
/* Für breite Motive, die im 4:3-Ausschnitt zu viel verlieren würden */
.split__media--breit img {
  aspect-ratio: 16 / 9;
  object-position: center center;
}

/* --- Bilder mit KI-Kennzeichnung ------------------------------------------
   Pflicht nach Artikel 50 der KI-Verordnung: Wer ein KI-erzeugtes Bild
   veroeffentlicht, das echt wirkt, muss das offenlegen. */

.ki-bild { margin: 0; position: relative; }
.ki-bild img { width: 100%; border-radius: 2px; }
.ki-bild figcaption {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.ki-bild figcaption::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mute);
  flex: none;
}
.section--dark .ki-bild figcaption,
.ki-bild--dunkel figcaption { color: #8A8D95; }

/* --- Platzhalterflaechen -------------------------------------------------- */

.ph {
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(244,244,242,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,244,242,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}
.ph svg {
  width: clamp(42px, 12%, 74px);
  height: auto;
  position: relative;
  opacity: 0.55;
}
.ph--light { background: var(--paper-warm); color: var(--ink); }
.ph--light::before {
  background-image:
    linear-gradient(to right, rgba(11,11,13,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,11,13,0.05) 1px, transparent 1px);
}
.ph--soft { background: var(--ink-soft); }

.ph-4x3  { aspect-ratio: 4 / 3; }
.ph-16x9 { aspect-ratio: 16 / 9; }
.ph-1x1  { aspect-ratio: 1 / 1; }
.ph-4x5  { aspect-ratio: 4 / 5; }
.ph-3x2  { aspect-ratio: 3 / 2; }

/* --- Faktenband ----------------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  border-radius: 2px;
  overflow: hidden;
}
@media (min-width: 780px) { .facts { grid-template-columns: repeat(4, 1fr); } }

.fact {
  background: var(--ink);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.fact__value {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  display: block;
  margin-bottom: 0.35rem;
}
.fact__label {
  font-size: 0.82rem;
  color: var(--mute);
  line-height: 1.4;
}

/* --- Ablauf in Schritten -------------------------------------------------- */

.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.step {
  display: grid;
  gap: 0.35rem 1.75rem;
  padding: clamp(1.5rem, 3vw, 2rem) 0;
  border-top: 1px solid var(--line-light);
  margin: 0;
}
.step:last-child { border-bottom: 1px solid var(--line-light); }
.section--dark .step { border-color: var(--line-dark); }
.section--dark .step:last-child { border-bottom-color: var(--line-dark); }
.step__num {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--mute);
}
.step h3 { margin-bottom: 0.3em; }
.step p { color: var(--mute-light); margin: 0; }
.section--dark .step p { color: #A9ACB4; }

@media (min-width: 780px) {
  .step { grid-template-columns: 80px 1fr; }
  .step__num { padding-top: 0.35rem; }
}

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

.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 2vw, 1.15rem);
}
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gallery { grid-template-columns: repeat(3, 1fr); } }

.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: var(--ink-soft);
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform 0.6s var(--ease);
}
.gallery__item:hover img { transform: scale(1.035); }
.gallery__item--tall { grid-row: span 2; }
.gallery__item--tall img,
.gallery__item--tall .ph { aspect-ratio: 3 / 4; height: 100%; }
@media (max-width: 639px) {
  .gallery__item--tall { grid-row: span 1; }
  .gallery__item--tall img { aspect-ratio: 4 / 5; }
}

/* --- Mietbestand (wird von der Verwaltung erzeugt) ------------------------ */

.mietgruppe { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.mietgruppe:last-child { margin-bottom: 0; }

.mietgruppe__titel {
  font-size: 0.78rem;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  padding-bottom: 0.9rem;
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
  border-bottom: 1px solid var(--line-light);
}
.section--dark .mietgruppe__titel { border-color: var(--line-dark); }

.mietliste {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}
@media (min-width: 620px)  { .mietliste { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .mietliste { grid-template-columns: repeat(3, 1fr); } }

.mietkarte {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.mietkarte:hover { border-color: var(--ink); transform: translateY(-3px); }
.mietkarte { position: relative; }
.mietkarte .link-arrow::after { content: ''; position: absolute; inset: 0; border-radius: 2px; z-index: 1; }
.mietkarte:focus-within { outline: 2px solid currentColor; outline-offset: 3px; }
.section--warm .mietkarte { background: var(--paper); }

.mietkarte__bild {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
  border-bottom: 1px solid var(--line-light);
}
.mietkarte .ph.mietkarte__bild { border-radius: 0; }

.mietkarte__ki {
  margin: 0;
  padding: 0.5rem clamp(1.1rem, 2.5vw, 1.4rem) 0;
  font-size: 0.74rem;
  color: var(--mute);
}
.gallery__item--ki { position: relative; }
.gallery__item--ki figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.45rem 0.7rem;
  font-size: 0.72rem;
  color: var(--paper);
  background: rgba(11, 11, 13, 0.72);
}

.mietkarte__text {
  padding: clamp(1.1rem, 2.5vw, 1.4rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.mietkarte h4 {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 0.5em;
}
.mietkarte p {
  font-size: 0.94rem;
  color: var(--mute-light);
  margin-bottom: 1rem;
}

.mietkarte__daten {
  margin: 0 0 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line-light);
  font-size: 0.9rem;
  display: grid;
  gap: 0.35rem;
}
.mietkarte__daten div { display: flex; gap: 0.6rem; justify-content: space-between; }
.mietkarte__daten dt { color: var(--mute); }
.mietkarte__daten dd { margin: 0; font-weight: 600; text-align: right; }

.mietkarte .link-arrow { margin-top: auto; align-self: flex-start; font-size: 0.92rem; }

/* --- Geräteauswahl (Warenkorb) -------------------------------------------- */

/* Ohne JavaScript bleibt nur der einfache Anfrage-Link sichtbar */
.mietkarte__aktion { display: none; }
.no-js .nur-ohne-js { display: inline-flex; }
html:not(.no-js) .nur-ohne-js { display: none; }
html:not(.no-js) .mietkarte__aktion {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.25rem;
}

.menge { display: flex; flex-direction: column; gap: 0.3rem; flex: none; }
.menge__text {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}
.menge__feld {
  width: 62px;
  min-height: 44px;
  padding: 0.5rem 0.4rem 0.5rem 0.6rem;
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 2px;
  text-align: center;
}
.menge__feld:focus { border-color: var(--ink); outline: none; }

.btn--klein {
  padding: 0.62rem 1rem;
  min-height: 44px;
  font-size: 0.9rem;
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  flex: 1;
  justify-content: center;
}
.btn--klein:hover { background: var(--ink-lift); border-color: var(--ink-lift); }
.btn--klein.ist-erledigt {
  background: #2E6B37;
  border-color: #2E6B37;
}

/* Leiste am unteren Bildschirmrand, sobald etwas ausgewählt ist */
.auswahl-leiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid var(--line-dark);
  box-shadow: 0 -8px 24px rgba(11, 11, 13, 0.18);
  animation: leisteRein 0.35s var(--ease);
}
@keyframes leisteRein {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
.auswahl-leiste__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.85rem;
}
.auswahl-leiste__text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
}
.auswahl-leiste__knoepfe { display: flex; align-items: center; gap: 1rem; }
.auswahl-leiste__leeren {
  background: none;
  border: 0;
  color: var(--mute);
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.5rem 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auswahl-leiste__leeren:hover { color: var(--paper); }

/* Platz schaffen, damit die Leiste nichts verdeckt */
body.hat-auswahl { padding-bottom: 76px; }
@media (max-width: 560px) {
  .auswahl-leiste__inner { justify-content: center; text-align: center; }
  body.hat-auswahl { padding-bottom: 112px; }
}

/* Liste der ausgewählten Geräte auf der Anfrage-Seite */
.auswahl-block {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 2px;
  margin-bottom: 1.75rem;
}
.auswahl-block h3 { font-size: 1.08rem; margin-bottom: 0.9rem; }
.auswahl-liste { list-style: none; padding: 0; margin: 0 0 1rem; }
.auswahl-posten {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line-light);
  margin: 0;
}
.auswahl-posten:first-child { border-top: 1px solid var(--line-light); }
.auswahl-posten__name { flex: 1; font-size: 0.98rem; }
.auswahl-posten__weg {
  background: none;
  border: 0;
  color: var(--mute);
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.4rem 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  flex: none;
}
.auswahl-posten__weg:hover { color: #8C2F26; }

/* --- Zitate --------------------------------------------------------------- */

.quotes { display: grid; gap: clamp(1.25rem, 3vw, 1.75rem); }
@media (min-width: 820px) { .quotes { grid-template-columns: repeat(2, 1fr); } }

.quote {
  margin: 0;
  padding: clamp(1.6rem, 3vw, 2.1rem);
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 2px;
}
.section--dark .quote { background: var(--ink-soft); border-color: var(--line-dark); }
.quote p {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
}
.quote figcaption {
  font-size: 0.88rem;
  color: var(--mute);
  padding-top: 1rem;
  border-top: 1px solid var(--line-light);
}
.section--dark .quote figcaption { border-color: var(--line-dark); }

.placeholder-note {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  border: 1px solid var(--line-light);
  border-radius: 2px;
  padding: 0.2rem 0.5rem;
  margin-bottom: 1rem;
}
.section--dark .placeholder-note { border-color: var(--line-dark); }

/* --- Handlungsaufforderung am Seitenende ---------------------------------- */

.cta {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(3.5rem, 9vw, 6rem);
  border-top: 1px solid var(--line-dark);
}
.cta__inner { max-width: 46ch; }
.cta h2 { margin-bottom: 0.5em; }
.cta p { color: #B6B9C0; margin-bottom: 2rem; }
.cta__aside {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-dark);
  font-size: 0.92rem;
  color: var(--mute);
}
.cta__aside a { color: var(--paper); }

/* --- Formular ------------------------------------------------------------- */

.form { display: grid; gap: 1.25rem; }
@media (min-width: 720px) {
  .form { grid-template-columns: repeat(2, 1fr); }
  .field--full { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field label {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute-light);
}
.field .req { color: var(--ink); }

.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 2px;
  padding: 0.85rem 0.95rem;
  min-height: 50px;
  width: 100%;
  transition: border-color 0.25s var(--ease);
}
.field textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--ink); outline: none; }
.field input::placeholder,
.field textarea::placeholder { color: #A3A6AD; }

.field 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 d='M1 1l5 5 5-5' fill='none' stroke='%237A7D85' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.5rem;
}

/* Honigtopf: unsichtbares Feld, das nur automatische Spam-Skripte ausfuellen */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Einwilligungstext ist Fliesstext, keine Feldbeschriftung. Deshalb hier
   die Grossschreibung und die Sperrung der Beschriftungen zuruecknehmen. */
.consent,
.field label.consent {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--mute-light);
  line-height: 1.5;
}
.section--dark .consent,
.section--dark .field label.consent { color: #A9ACB4; }
.consent input {
  width: 20px;
  height: 20px;
  min-height: 0;
  margin-top: 2px;
  flex: none;
  accent-color: var(--ink);
}

.form-note {
  font-size: 0.88rem;
  color: var(--mute);
  margin: 0;
}

.form-status {
  padding: 1rem 1.15rem;
  border-radius: 2px;
  font-size: 0.95rem;
  margin-bottom: 1.75rem;
}
.form-status--ok { background: #E6EDE7; border: 1px solid #B9CDBC; color: #24422A; }
.form-status--err { background: #F2E7E6; border: 1px solid #D8BAB7; color: #5C2620; }

/* --- Kontaktbloecke ------------------------------------------------------- */

.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line-light);
  margin: 0;
}
.contact-list li:first-child { border-top: 1px solid var(--line-light); }
.contact-list dt,
.contact-list__label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  display: block;
  margin-bottom: 0.25rem;
}
.contact-list a { font-weight: 500; }

/* --- Digitale Visitenkarte ------------------------------------------------ */

.visitenkarte {
  margin-top: clamp(2.25rem, 5vw, 3rem);
  padding-top: clamp(1.75rem, 4vw, 2.25rem);
  border-top: 1px solid var(--line-light);
}
.visitenkarte h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5em;
}
.visitenkarte p {
  font-size: 0.94rem;
  color: var(--mute-light);
  margin-bottom: 1.4rem;
  max-width: 40ch;
}
.visitenkarte__qr {
  width: 100%;
  max-width: 230px;
  height: auto;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 2px;
  padding: 14px;          /* Abstand zum Rand, damit Kameras zuverlaessig lesen */
  margin-bottom: 1.25rem;
}

/* --- Fusszeile ------------------------------------------------------------ */

.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(2.75rem, 6vw, 4rem) 2rem;
  border-top: 1px solid var(--line-dark);
}
.site-footer__grid {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line-dark);
}
@media (min-width: 780px) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; }
}

.site-footer h2 {
  font-size: 0.72rem;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 1.1rem;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.6em; }
.footer-links a {
  text-decoration: none;
  font-size: 0.96rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.3s var(--ease);
  padding-bottom: 2px;
}
.footer-links a:hover { background-size: 100% 1px; }
.footer-links__unter { padding-left: 0.9rem; font-size: 0.9rem !important; color: var(--mute); }
.footer-links__unter:hover { color: var(--paper); }

.site-footer__about p { color: var(--mute); font-size: 0.96rem; max-width: 34ch; }
.site-footer .brand { margin-bottom: 1.1rem; }

/* Kontaktzeilen mit kleinem Symbol davor */
.footer-links--icons a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.kontakt-icon {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--mute);
  transition: color 0.25s var(--ease);
}
.footer-links--icons a:hover .kontakt-icon { color: var(--paper); }

.site-footer__recht {
  display: flex;
  gap: 1.25rem;
}
.site-footer__recht a { text-decoration: none; }
.site-footer__recht a:hover { text-decoration: underline; }

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  padding-top: 1.75rem;
  font-size: 0.85rem;
  color: var(--mute);
}

/* --- Rechtstexte ---------------------------------------------------------- */

.legal { max-width: 72ch; }
.legal h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  margin-top: 2.75rem;
}
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-size: 1.08rem; margin-top: 1.75rem; }
.legal p, .legal li { color: var(--mute-light); }
.legal address { font-style: normal; color: var(--mute-light); }

.legal-hint {
  padding: 1.15rem 1.35rem;
  background: var(--paper-warm);
  border-left: 2px solid var(--ink);
  border-radius: 2px;
  font-size: 0.94rem;
  color: var(--mute-light);
  margin-bottom: 2.5rem;
}

/* Hinweise, die nur der Betreiber sehen soll. Auf der echten Domain
   blendet ein kleines Skript sie aus, in der lokalen Vorschau bleiben sie. */
.nur-vorschau { display: block; }

/* --- Sanftes Einblenden beim Scrollen ------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* Ohne JavaScript bleibt alles sichtbar */
.no-js .reveal { opacity: 1; transform: none; }

/* --- AGB zum Herunterladen, rechte Spalte der Anfrageseite ---------------- */
.agb-block {
  margin-top: clamp(2.25rem, 5vw, 3rem);
  padding-top: clamp(1.75rem, 4vw, 2.25rem);
  border-top: 1px solid var(--line-light);
}
.agb-block h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5em;
}
.agb-block p {
  margin-bottom: 1.1rem;
}
.agb-block__hinweis {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  color: var(--mute);
}

/* ===========================================================================
   Nachbesserungen aus dem Test am Handy
   =========================================================================== */

/* --- Knopfreihen: auf schmalen Bildschirmen alle gleich breit -------------
   Die Reihe bricht sonst nach Textlänge um, dann steht ein Knopf allein in
   einer Zeile und zwei nebeneinander. Untereinander und volle Breite ist
   ruhiger und besser zu treffen. */
@media (max-width: 559px) {
  .btn-row {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-row .btn {
    width: 100%;
    justify-content: center;
  }
}

/* --- Leistungsseite: Bild steht am Handy immer unter dem Text -------------
   Bei einem der vier Abschnitte liegt das Bild im Quelltext vor dem Text,
   damit es auf dem grossen Bildschirm links erscheint. Untereinander
   gestapelt kaeme es dadurch ueber die Ueberschrift. Deshalb wird die
   Reihenfolge hier festgelegt. */
@media (max-width: 779px) {
  .split {
    display: flex;
    flex-direction: column;
  }
  .split > * {
    order: 1;
  }
  .split .split__media {
    order: 2;
  }
}

/* --- Symbolgroessen absichern --------------------------------------------
   Diese Angaben standen bisher nur im Block fuer breite Bildschirme. Ohne
   sie zeichnet der Browser das SVG in Standardgroesse, also viel zu gross. */
.kontakt-icon {
  width: 17px;
  height: 17px;
  flex: none;
}

/* --- Eingabefelder: mindestens 16px -------------------------------------
   Faellt die Schrift in einem Feld unter 16px, zoomt iPhone und iPad beim
   Antippen automatisch in die Seite hinein. Das laesst sich nur so
   verhindern, nicht ueber die Zoom-Einstellung im Kopfbereich. */
.field input,
.field select,
.field textarea,
.menge__feld {
  font-size: max(16px, 1rem);
}