/* ==========================================================================
   Feinschliff Startseite: Typografie, Abstände, Bewegung
   Wird als letztes Stylesheet geladen und überschreibt main.css/responsive.css
   gezielt, ohne die Theme-Dateien anzufassen.
   ========================================================================== */

:root {
  /* Kurven: kräftiges ease-out für Ein-/Ausblenden, ease-in-out für Bewegung am Platz */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Dauern */
  --dur-press: 140ms;
  --dur-hover: 180ms;
  --dur-menu: 160ms;
  --dur-nav: 250ms;
  --dur-reveal: 450ms;

  /* Abstands-Rhythmus Startseite (8er-Raster, wächst mit der Fensterbreite) */
  --space-section: clamp(64px, 8vw, 104px);
  --space-heading: clamp(32px, 4vw, 48px);
  --space-card: clamp(32px, 4vw, 48px);
  --color-primary: #355883;
}

/* --------------------------------------------------------------------------
   1. Typografie (seitenweit, damit Unterseiten zur Startseite passen)
   -------------------------------------------------------------------------- */
body {
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p {
  margin: 0 0 0.9em;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
  text-wrap: balance;
}

h2 { letter-spacing: 0.16em; }
h3 { letter-spacing: 0.12em; }

/* Abschnittsüberschriften („Willkommen“, „Wichtiges …“) */
.sec-heading h2 {
  margin: 0 0 10px;
  font-size: 28px;
}

.sec-heading .subheading {
  font-size: 14px;
  letter-spacing: 0.2em;
  line-height: 1.5;
}

/* Hero: fließende Schriftgröße statt Sprüngen an vier Breakpoints */
.CenterTitle h1 {
  font-size: clamp(36px, 6.4vw, 72px);
  line-height: 1.1;
  margin: 0.15em 0;
}

.CenterTitle h3 {
  font-size: clamp(14px, 1.9vw, 24px);
  line-height: 1.4;
  letter-spacing: 0.14em;
  margin: 0.4em 0;
}

/* Bild-Text-Karten */
.portfolio-1col-boxed .portfolio-item figcaption {
  padding: clamp(28px, 3.4vw, 48px) clamp(24px, 3.4vw, 48px);
}

.portfolio-1col-boxed .portfolio-item figcaption h3 {
  margin: 0 0 6px;
  font-size: 21px;
}

.portfolio-1col-fw .portfolio-item figcaption .subheading,
.portfolio-1col-boxed .portfolio-item figcaption .subheading {
  margin: 0 0 24px;
  font-size: 14px;
  letter-spacing: 0.16em;
  line-height: 1.5;
}

.portfolio-1col-boxed .portfolio-item figcaption p {
  font-size: 17px;
  line-height: 1.7;
}

/* Tablet/Handy: Text unter dem Bild halten. Vorher floss der Text der
   Karten mit Bild rechts aus der Karte heraus und wurde von der
   nächsten Karte verdeckt. */
@media (max-width: 1050px) {
  .portfolio-1col-fw .portfolio-item,
  .portfolio-1col-boxed .portfolio-item {
    display: flow-root;
  }
  .portfolio-1col-fw .portfolio-item figcaption,
  .portfolio-1col-boxed .portfolio-item figcaption {
    float: none !important;
  }
}

/* Der erste Absatz der Vita beginnt redaktionell mit einem Zeilenumbruch */
.portfolio-1col-boxed .portfolio-item figcaption p > br:first-child {
  display: none;
}

.portfolio-1col-fw .portfolio-item figcaption .view-btn,
.portfolio-1col-boxed .portfolio-item figcaption .view-btn {
  margin-top: 16px;
}

/* Buttons: etwas kräftiger und besser lesbar */
.btn-small {
  padding: 10px 28px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
}

/* Menü: aktiver Punkt war im transparenten Zustand fast weiß auf weiß */
.navbar-trans:not(.navbar-inverse) .navbar-nav .active a,
.navbar-trans:not(.navbar-inverse) .navbar-nav .active a:hover {
  color: var(--color-primary);
}

.navbar-trans:not(.navbar-inverse) .navbar-nav li a:hover,
.navbar-trans:not(.navbar-inverse) .navbar-nav li a:focus,
.navbar-trans:not(.navbar-inverse) .navbar-nav .open .dropdown-toggle {
  color: var(--color-primary);
}

/* Die Rundschreiben-Dateien (fileadmin/mrs) bringen „body { font-family: arial;
   font-size: 1em }“ mit. Weil ihr Inhalt in die Seite verschoben wird, galt das
   für die ganze Seite (Menü 9,6 statt 14,4 px, Arial statt Open Sans).
   „html body“ ist spezifischer und stellt die Grundschrift wieder her. */
html body {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 18px;
}

/* --------------------------------------------------------------------------
   1b. Seitenbreite
   -------------------------------------------------------------------------- */

/* Bootstrap-Zeilen (.row) haben −15px Rand und erwarten einen Container mit
   15px Innenabstand. Direkt im Hauptbereich und in der Copyright-Zeile fehlt
   der, dadurch ragte jede Seite 15px über den Bildschirm hinaus (am Handy
   seitlich verschiebbar). */
.firstRowOfContent > .row,
.firstRowOfContent .frame > .row,
.footer-contact .copyright > .container-fluid > .row {
  margin-left: 0;
  margin-right: 0;
}

/* Lange Links und Wörter (z. B. Adressen in der Datenschutzerklärung) umbrechen;
   Links auch innerhalb von Tabellenzellen (Impressum) */
.firstRowOfContent {
  overflow-wrap: break-word;
}

/* Lange deutsche Wörter auf schmalen Bildschirmen mit Trennstrich nach
   Silben trennen („Rund-schreiben“) statt sie irgendwo abzuschneiden */
@media (max-width: 767px) {
  .firstRowOfContent {
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

.firstRowOfContent a {
  overflow-wrap: anywhere;
}

/* Bootstrap-Container haben ab 768px eine feste Breite (750px); in Bereichen
   mit eigenem Innenabstand (Seitenkopf) ragten sie dadurch hinaus */
.firstRowOfContent .container {
  max-width: 100%;
}

/* Breite Tabellen (Rundschreiben, Sonderausgaben) lassen sich auf kleinen
   Bildschirmen seitlich wischen, statt die ganze Seite zu verbreitern */
@media (max-width: 991px) {
  .firstRowOfContent table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Öffnungszeiten im Footer: 130px/100px seitlicher Innenabstand passt auf
   schmalen Bildschirmen nicht (Seite wurde bei 320px auf 382px verbreitert) */
@media (max-width: 991px) {
  opentable {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 600px) {
  /* Seitentitel: lange Wörter wie „Rundschreiben“ passen sonst nicht in eine Zeile */
  .page-title h1 {
    font-size: 24px;
    letter-spacing: 0.1em;
  }

  .page-title .subheading {
    font-size: 16px;
    letter-spacing: 0.12em;
  }

  /* Rundschreiben: weniger Rahmen um den Text, damit er Platz hat */
  .portfolio-1col-boxed .portfolio-item[style] {
    padding: 0 !important;
  }

  .portfolio-1col-boxed .portfolio-item figcaption {
    padding: 24px 20px;
  }

  .portfolio-item figcaption h2.Rubrik,
  .portfolio-item figcaption h3.I_Rubrik,
  .portfolio-item figcaption h3.Titel {
    font-size: 17px;
    letter-spacing: 0.04em;
  }

  .portfolio-item figcaption ul.I_Text {
    padding-left: 20px;
  }

  /* Lange Buttontexte (z. B. auf der 404-Seite) dürfen umbrechen */
  .firstRowOfContent .btn {
    max-width: 100%;
    white-space: normal;
  }

  .footer-contact .contact-form {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* „ÖFFNUNGSZEITEN“ ist ein einziges langes Wort und kann nicht umbrechen */
  .footer-contact .contact-form .sec-heading h2 {
    font-size: 22px;
    letter-spacing: 0.12em;
  }

  /* Impressum / Datenschutz / Cookie-Einstellungen untereinander statt in
     drei zu schmalen Spalten */
  .footer-social-links ul li,
  .footer-social-links ul li:nth-child(2) {
    display: block;
    width: 100%;
    margin: 0 0 12px;
    padding: 0;
    border-right: none;
    text-align: center;
  }
}

/* Einspaltige Karten-Listen: Isotope positioniert die Karten absolut, dann
   richtet sich ihre Breite nach dem längsten Inhalt (Rundschreiben: 767px auf
   einem 390px-Handy). Hier immer volle Breite. */
.portfolio-1col-boxed .portfolio-item,
.portfolio-1col-fw .portfolio-item {
  width: 100%;
}

.portfolio-1col-boxed .portfolio-item figcaption,
.portfolio-1col-fw .portfolio-item figcaption {
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   2. Abstände der Startseite (uid 17)
   -------------------------------------------------------------------------- */
.page-17 .firstRowOfContent .section {
  padding-top: 0;
  padding-bottom: 0;
}

.page-17 .firstRowOfContent > .row:first-child {
  padding-bottom: 0;
}

/* Abschnitt mit Überschrift: davor steht meist eine Karte, deren
   Außenabstand mitzählt – so misst jede Abschnittsgrenze gleich viel */
.page-17 .firstRowOfContent section.section:has(> .row > .sec-heading) {
  padding-top: calc(var(--space-section) - var(--space-card));
  padding-bottom: var(--space-heading);
}

/* Erste Überschrift direkt nach dem Hero */
.page-17 .firstRowOfContent > .row:nth-child(2) section.section:has(> .row > .sec-heading) {
  padding-top: var(--space-section);
}

/* Begrüßungstext: lesbare Zeilenlänge, fließend statt harter Umbrüche */
.page-17 #about .section {
  padding-bottom: var(--space-card);
}

.page-17 #about p {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

.page-17 #about p br {
  display: none;
}

.page-17 #about p + p {
  margin-top: 1.2em;
}

/* Karten untereinander gleichmäßig */
.page-17 .portfolio-1col-boxed .portfolio-item {
  margin-bottom: var(--space-card);
}

/* Der letzte Abschnitt vor dem Footer hatte 250px Leerraum */
.page-17 .firstRowOfContent > .row:last-child {
  padding-bottom: calc(var(--space-section) - var(--space-card));
}

/* --------------------------------------------------------------------------
   3. Bewegung
   -------------------------------------------------------------------------- */

/* Links: nur Farbe, kurz (vorher „all 0.5s“) */
a {
  transition: color var(--dur-hover) ease, border-color var(--dur-hover) ease;
}

/* Buttons */
.btn, .btn-ghost, .btn-ghost-light, .btn-text, .btn-text-light, .btn-light,
.consent-placeholder__button {
  transition:
    color var(--dur-hover) ease,
    background-color var(--dur-hover) ease,
    transform var(--dur-press) var(--ease-out);
}

/* Ghost-Button: Füllung gleitet per transform statt per „top“ (flüssiger) */
.btn-ghost:after, .btn-ghost-light:after {
  top: 0;
  transform: translateY(101%);
  transition: transform 160ms var(--ease-out);
}

.btn-ghost:hover:after, .btn-ghost-light:hover:after,
.btn-ghost:focus-visible:after, .btn-ghost-light:focus-visible:after {
  top: 0;
  transform: translateY(0);
  transition-duration: 220ms;
}

.btn-ghost:focus-visible, .btn-ghost-light:focus-visible {
  color: #ececec;
}

/* Hover nur auf Geräten mit Maus (auf Touch bleibt sonst der Zustand hängen) */
@media (hover: none), (pointer: coarse) {
  .btn-ghost:hover:after, .btn-ghost-light:hover:after {
    transform: translateY(101%);
  }
  .btn-ghost:hover, .btn-ghost-light:hover {
    color: var(--color-primary);
  }
}

/* Spürbares Feedback beim Drücken */
.btn:active, .btn-ghost:active, .btn-ghost-light:active, .btn-light:active,
.consent-placeholder__button:active {
  transform: scale(0.97);
}

/* Karten: kein Anheben beim Überfahren – sie sind nicht klickbar */
.portfolio-1col-boxed .portfolio-item {
  transition: none;
}

.portfolio-1col-boxed .portfolio-item:hover {
  transform: none;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
}

/* Navigation: Verkleinern beim Scrollen ruhig und gezielt */
.navbar-trans,
.navbar-small {
  transition:
    background-color var(--dur-hover) ease,
    height var(--dur-nav) var(--ease-in-out);
}

.navbar .navbar-header .navbar-brand,
.navbar-small .navbar-header .navbar-brand {
  transition: padding var(--dur-nav) var(--ease-in-out);
}

.navbar-trans .navbar-logo,
.navbar-logo {
  transition: height var(--dur-nav) var(--ease-in-out);
}

.navbar .navbar-nav li a,
.navbar .navbar-nav .active a {
  transition: color var(--dur-hover) ease;
}

/* Untermenü-Einträge: kein Verrutschen des Textes, nur Farbe und Markierung */
.navbar .navbar-nav .dropdown .dropdown-menu li a {
  transition:
    color 120ms ease,
    background-color 120ms ease,
    border-color 120ms ease;
}

.navbar .navbar-nav .dropdown .dropdown-menu li a:hover {
  padding-left: 25px;
  padding-right: 40px;
}

/* Untermenü öffnet mit kurzem Einblenden von der Menüleiste aus */
@media (min-width: 1260px) {
  .navbar .navbar-nav .dropdown .dropdown-menu {
    transform-origin: top left;
    transition:
      opacity var(--dur-menu) var(--ease-out),
      transform var(--dur-menu) var(--ease-out);
  }

  .navbar-nav .navbar-right .dropdown-menu,
  .navbar .navbar-right .dropdown .dropdown-menu {
    transform-origin: top right;
  }

  @starting-style {
    .navbar .navbar-nav .open > .dropdown-menu {
      opacity: 0;
      transform: translateY(-4px) scale(0.98);
    }
  }
}

/* Mobiles Menü: Aufklappen kürzer und mit weicher Landung */
.navbar-collapse.collapsing {
  transition: height var(--dur-nav) var(--ease-out);
}

/* Einblenden beim Scrollen (nur Startseite, gesteuert von reveal.js) */
.page-17 .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

.page-17 .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   4. Weniger Bewegung, wenn im System so eingestellt
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .page-17 .reveal {
    transform: none;
    transition: opacity 200ms ease;
  }

  .btn:active, .btn-ghost:active, .btn-ghost-light:active, .btn-light:active,
  .consent-placeholder__button:active {
    transform: none;
  }

  .navbar .navbar-nav .dropdown .dropdown-menu {
    transition: opacity 120ms ease;
  }

  @starting-style {
    .navbar .navbar-nav .open > .dropdown-menu {
      transform: none;
    }
  }
}