/* ===========================================================================
   MeisterOrga - Öffentliche Seiten
   =========================================================================== */

/* --- 1. Grundgerüst ------------------------------------------------------ */

/* Die Anmeldeseite zentriert ihren Inhalt senkrecht. Eine Webseite mit
   mehreren Abschnitten darf das nicht - sie muss von oben nach unten
   laufen und scrollen können. */
body.pub {
  display: block;
  /* 100dvh statt 100vh: Auf dem iPhone zaehlt 100vh die eingeblendete
     Adressleiste mit - die Seite wird dadurch hoeher als der Bildschirm und
     wackelt beim Scrollen. Der alte Wert bleibt als Rueckfall stehen. */
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;

  /* Akzentfarbe der oeffentlichen Seiten */
  --pub-accent:     var(--au-accent-soft);   /* #8cc2ff - Text und Symbole */
  --pub-accent-rgb: 140, 194, 255;           /* fuer rgba(...)             */

  /* Abzeichen "Empfohlen" ueber dem hervorgehobenen Tarif. */
  --pub-tag-bg:     #4fe0b0;                 /* Hellgruen aus --au-ok      */
  --pub-tag-ink:    #05241a;                 /* sehr dunkles Gruen         */

  /* Flaechen, die frueher feste Farbwerte trugen. Ausgelagert fuer den
     hellen Darstellungsmodus; die Werte hier sind unveraendert die des
     dunklen Designs. */
  --pub-chrome:     rgba(5, 8, 15, .72);     /* Kopfleiste, halbdurchsichtig */
  --pub-chrome-alt: rgba(5, 8, 15, .55);     /* Fusszeile                    */
  --pub-chrome-menu:rgba(5, 8, 15, .97);     /* aufgeklapptes Menue          */
  --pub-on-accent:  #0a1a30;                 /* Schrift auf der Akzentfarbe  */

  --pub-hero-ink:   #8fc0ff;                 /* Rueckfall ohne Textzuschnitt */
  --pub-hero-a:     #b7d8ff;                 /* Verlauf der Ueberschrift     */
  --pub-hero-b:     #4a95ff;

  --pub-shot-a:     rgba(21, 33, 55, .96);   /* Fensterrahmen der Vorschau   */
  --pub-shot-b:     rgba(9, 14, 25, .96);
  --pub-shot-leiste:rgba(255, 255, 255, .025);
  --pub-shot-punkt: rgba(255, 255, 255, .14);
  --pub-lb-overlay: rgba(3, 6, 12, .86);      /* Grund der grossen Ansicht    */

  --pub-todo-ink:   #ffd9a0;
  --pub-todo-bg:    rgba(255, 176, 80, .14);
  --pub-todo-line:  rgba(255, 176, 80, .45);
}

.pub-main {
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}
.pub-main--schmal { max-width: 780px; }

.pub-section {
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  scroll-margin-top: 90px;   /* damit Sprungziele nicht unter der Leiste liegen */
}
.pub-section + .pub-section { border-top: 1px solid var(--au-line-soft); }

.pub-section__head {
  max-width: 640px;
  margin: 0 auto clamp(2rem, 5vw, 3rem);
  text-align: center;
}
.pub-eyebrow {
  display: inline-block;
  margin-bottom: .85rem;
  padding: .3rem .75rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pub-accent);
  background: rgba(var(--pub-accent-rgb), .08);
  border: 1px solid rgba(var(--pub-accent-rgb), .22);
  border-radius: 999px;
}
.pub .pub-h2 {
  margin: 0 0 .8rem;
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--au-ink);
}
.pub .pub-lead {
  margin: 0;
  font-size: clamp(.98rem, 1.6vw, 1.08rem);
  line-height: 1.7;
  color: var(--au-ink-soft);
}

/* --- 2. Navigation ------------------------------------------------------- */

.pub-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Der Praefix ist fuer Safari noetig - erst ab Version 18 versteht es die
     Eigenschaft ohne. */
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  background: var(--pub-chrome);
  border-bottom: 1px solid var(--au-line-soft);
}
.pub-nav__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 1140px;
  margin: 0 auto;
  padding: .75rem clamp(1rem, 4vw, 2rem);
}
.pub-nav__brand { display: flex; align-items: center; text-decoration: none; }

/* brand_logo() liefert ein <img class="brandlogo">, kein <svg> - und
   login.css gibt diesem Bild fuer die Anmeldeseite eine Breite von bis zu
   22,5rem. */
.pub-nav__brand .brandlogo {
  width: auto;
  max-width: none;
  height: 38px;
  margin: 0;                 /* login.css zentriert das Logo mit "0 auto" */
  filter: none;              /* der Lichtschein gehoert zur Anmeldeseite */
}

.pub-nav__links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-left: auto;
}
.pub-nav__links > a {
  font-size: .9rem;
  font-weight: 500;
  color: var(--au-ink-soft);
  text-decoration: none;
  transition: color .18s ease;
}
.pub-nav__links > a:hover,
.pub-nav__links > a.is-active { color: var(--au-ink); }

/* Die Navigation hebt sich beim Ueberfahren durch Helligkeit hervor, nicht
   durch einen Unterstrich. Der kam bisher ungewollt aus ".auth a:hover" in
   login.css - dieselbe Regel, die auch die Schaltflaechen unterstrichen hat. */
.pub-nav__links > a:hover,
.pub-nav__links > a:focus,
.pub-nav__links > a:active { text-decoration: none; }
.pub-nav__links > a:focus-visible {
  outline: 2px solid rgba(140, 194, 255, .75);
  outline-offset: 3px;
  border-radius: 6px;
}

.pub-nav__sep {
  width: 1px;
  height: 22px;
  background: var(--au-line);
}

/* Aufklappmenü für kleine Bildschirme - reines CSS, siehe Abschnitt 10. */
.pub-nav__burger { display: none; }

/* Umschalter zwischen hellem und dunklem Design */
.pub-thema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  margin-left: .85rem;
  padding: 0;
  color: var(--au-ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.pub-thema:hover {
  color: var(--au-ink);
  background: var(--au-glass);
  border-color: var(--au-line);
}
.pub-thema:focus-visible {
  outline: 2px solid rgba(140, 194, 255, .75);
  outline-offset: 3px;
}
.pub-thema svg { width: 19px; height: 19px; display: block; }

/* Im dunklen Modus - also ohne gesetztes Merkmal und bei data-theme="dark" -
   steht die Sonne, im hellen der Mond. */
.pub-thema .pub-thema__mond  { display: none; }
[data-theme="light"] .pub-thema .pub-thema__sonne { display: none; }
[data-theme="light"] .pub-thema .pub-thema__mond  { display: block; }

/* --- 3. Schaltflächen ---------------------------------------------------- */
/* Bewusst Zeile für Zeile dieselben Werte wie .au-submit in login.css:
   Verlauf, Rahmen, Radius, Schriftstärke, Höhe, Schattenwurf, der Lichtreflex
   beim Überfahren und die Bewegung des Pfeils. */

.pub .pub-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;                    /* wie .au-submit__label */
  min-height: 3.1rem;
  padding: .8rem 1.5rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  overflow: hidden;               /* haelt den Lichtreflex im Rahmen */
  text-decoration: none;
  transition: transform .22s cubic-bezier(.3, 1.2, .5, 1),
              box-shadow .22s ease, filter .22s ease,
              background .22s ease, border-color .22s ease;
}

.pub .pub-btn:hover  { transform: translateY(-2px); }
.pub .pub-btn:active { transform: translateY(0) scale(.995); }

/* Kein Unterstrich unter Schaltflaechen */
.pub .pub-btn:link,
.pub .pub-btn:visited,
.pub .pub-btn:hover,
.pub .pub-btn:focus,
.pub .pub-btn:focus-visible,
.pub .pub-btn:active { text-decoration: none; }

.pub .pub-btn--primary:link,
.pub .pub-btn--primary:visited,
.pub .pub-btn--primary:hover,
.pub .pub-btn--primary:focus,
.pub .pub-btn--primary:active { color: #ffffff; }

.pub .pub-btn--ghost:link,
.pub .pub-btn--ghost:visited { color: var(--au-accent-soft); }
.pub .pub-btn--ghost:hover,
.pub .pub-btn--ghost:focus,
.pub .pub-btn--ghost:active { color: var(--au-accent-ink); }

/* Wer mit der Tastatur bedient, muss sehen, worauf er steht. Dieselbe
   Farbe wie der Rahmen der blauen Schaltflaeche. */
.pub .pub-btn:focus-visible {
  outline: 2px solid rgba(140, 194, 255, .75);
  outline-offset: 3px;
}

.pub .pub-btn--primary {
  color: #ffffff;
  background: linear-gradient(135deg, #4a95ff 0%, #2f6fe0 52%, #2a5fd0 100%);
  border-color: rgba(140, 194, 255, .45);
  box-shadow:
    0 14px 34px -12px rgba(61, 139, 255, .78),
    inset 0 1px 0 rgba(255, 255, 255, .26);
}

/* Lichtreflex, der beim Überfahren einmal durchläuft - wie .au-submit::after */
.pub .pub-btn--primary::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
}
.pub .pub-btn--primary:hover {
  filter: saturate(112%);
  box-shadow:
    0 20px 44px -12px rgba(61, 139, 255, .9),
    inset 0 1px 0 rgba(255, 255, 255, .3);
}
.pub .pub-btn--primary:hover::after { left: 118%; }

/* Begleiter zur blauen Schaltfläche: gleiche Maße, zurückhaltender Grund. */
.pub .pub-btn--ghost {
  color: var(--au-accent-soft);
  background: rgba(61, 139, 255, .07);
  border-color: rgba(61, 139, 255, .22);
}
.pub .pub-btn--ghost:hover {
  color: var(--au-accent-ink);
  background: rgba(61, 139, 255, .13);
  border-color: rgba(61, 139, 255, .4);
}

.pub .pub-btn--lg { padding: .95rem 1.9rem; font-size: 1.05rem; }

/* icon() liefert ein <svg class="icon"> ohne Groessenangabe - login.css
   bemasst Symbole jeweils dort, wo sie vorkommen. */
.pub .pub-btn svg {
  position: relative;             /* ueber dem Lichtreflex */
  z-index: 1;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  transition: transform .25s ease;
}
.pub .pub-btn:hover svg { transform: translateX(3px); }

/* Die Beschriftung ebenfalls ueber den Lichtreflex heben. */
.pub .pub-btn--primary { isolation: isolate; }

/* In der Kopfzeile waere die volle Hoehe der Anmeldeschaltflaeche zu wuchtig
   - die Leiste wuerde auf ueber 80 Pixel wachsen. */
.pub .pub-nav__links .pub-btn {
  min-height: 2.5rem;
  padding: .5rem 1.15rem;
  font-size: .92rem;
  border-radius: 12px;
}
.pub .pub-nav__links .pub-btn--primary {
  box-shadow:
    0 10px 24px -12px rgba(61, 139, 255, .78),
    inset 0 1px 0 rgba(255, 255, 255, .26);
}

/* --- 4. Hero ------------------------------------------------------------- */

.pub-hero {
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5rem);
  text-align: center;
}

/* Blickfang neben der Überschrift */
.pub-hero__grid { display: grid; gap: 1.5rem; }

/* Die Figur steht in voller Länge - schmal und hoch. Bemessen wird sie
   deshalb über die Höhe; die Breite ergibt sich. Über die Breite gesteuert
   würde sie den Hero in die Länge ziehen, ohne größer zu wirken. */
.pub-hero__bild {
  position: relative;
  justify-self: center;
  line-height: 0;

  /* Luft fuer den Lichtschein */
  --schein-luft: clamp(0px, 14vw, 130px);
  padding-inline: var(--schein-luft);
  margin-inline: calc(var(--schein-luft) * -1);

  /* Sicherheitsnetz */
  overflow-x: clip;
}

/* Der Kasten reicht durch seinen negativen Aussenabstand ein Stueck in die
   Textspalte hinein. */
.pub-hero__text { position: relative; z-index: 2; }

/* Zweite Stufe der Luft: ab hier steht die Figur neben dem Text, und rechts
   von ihr ist der Platz begrenzt (Begruendung eine Regel weiter oben). */
@media (min-width: 900px) {
  .pub-hero__bild { --schein-luft: clamp(0px, calc(8vw - 45px), 130px); }
}

.pub-hero__bild img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: 100%;
  max-height: clamp(280px, 46vh, 380px);
  margin: 0 auto;
  /* Der Schatten folgt der freigestellten Silhouette, nicht einem Rechteck -
     deshalb drop-shadow und nicht box-shadow. */
  filter: drop-shadow(0 26px 38px var(--au-shadow-figur));
}

/* Der Schein dahinter: derselbe weiche Lichtfleck wie im Hintergrund der
   Anmeldeseite, damit die Figur nicht im Nichts steht. Rein dekorativ. */
.pub-hero__schein {
  position: absolute;
  inset: 0;
  /* Etwas unterhalb der Mitte: Das Licht soll aus dem Ruecken der Figur
     kommen, nicht ueber ihrem Kopf stehen. */
  background: radial-gradient(ellipse closest-side at 50% 57%,
              rgba(var(--pub-accent-rgb), .26) 0%,
              rgba(var(--pub-accent-rgb), .13) 40%,
              rgba(var(--pub-accent-rgb), .04) 70%,
              transparent 100%);
  /* Der Verlauf ist von sich aus weich; der Weichzeichner nimmt nur die
     letzte Spur von Streifenbildung heraus, die auf dunklem Grund bei so
     flachen Farbschritten sonst sichtbar wird. */
  filter: blur(10px);
  pointer-events: none;
}

.pub .pub-hero__title {
  margin: 1rem auto .9rem;
  max-width: 15ch;
  font-size: clamp(2.1rem, 6vw, 3.7rem);
  font-weight: 800;
  /* 1.08 waere fuer eine reine Versalzeile schoen eng - die Punkte auf dem
     "Ü" von "Übersichtlich" stiessen damit aber in die Zeile darueber. */
  line-height: 1.16;
  letter-spacing: -.03em;
  color: var(--au-ink);
}
/* Jede Zeile ein eigener Block - Voraussetzung für die versetzte
   Anordnung weiter unten. Auf schmalen Bildschirmen stehen sie schlicht
   untereinander; eingerückt wird erst, wo auch das Bild danebensteht. */
.pub-hero__zeile { display: block; }
.pub .pub-hero__title em { display: block; }

/* Einlauf der Überschrift */
@keyframes pub-zeile-ein {
  from { opacity: 0; transform: translate3d(-1.2rem, .5rem, 0); }
  /* Ende bewusst "none" und nicht translate3d(0,0,0): Die Animation laeuft
     mit fill-mode "both", ihr Endwert bleibt also dauerhaft am Element
     stehen. */
  to   { opacity: 1; transform: none; }
}
@keyframes pub-bild-ein {
  from { opacity: 0; transform: translate3d(1.5rem, 0, 0) scale(.97); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.pub-hero__zeile {
  animation: pub-zeile-ein .5s cubic-bezier(.22, .68, .3, 1) both;
}
.pub-hero__zeile--1 { animation-delay: .06s; }
.pub-hero__zeile--2 { animation-delay: .20s; }
.pub-hero__zeile--3 { animation-delay: .34s; }
.pub-hero__zeile--4 { animation-delay: .48s; }

/* Die Figur kommt zuletzt und aus der anderen Richtung - sie schliesst die
   Bewegung ab, statt gegen die Überschrift anzulaufen. */
.pub-hero__bild {
  animation: pub-bild-ein .8s cubic-bezier(.22, .68, .3, 1) both;
  animation-delay: .42s;
}

/* Der zweite Teil der Überschrift trägt den Farbverlauf - der Blick bleibt
   dort hängen, wo die Aussage steht. */
.pub .pub-hero__title em {
  font-style: normal;
}
.pub .pub-hero__title em .pub-hero__zeile {
  /* Rueckfall fuer Browser ohne Textzuschnitt: einfarbig statt unsichtbar. */
  color: var(--pub-hero-ink);
  background-image: linear-gradient(120deg, var(--pub-hero-a) 0%, var(--pub-hero-b) 68%);
  background-repeat: no-repeat;
  background-size: 100% 200%;

  /* Luft fuer Ober- und Unterlaengen */
  padding-block: .18em;
  margin-block: -.18em;
}
/* Der doppelte Wert ist kein Vertipper */
.pub .pub-hero__title em .pub-hero__zeile--3 { margin-bottom: -.36em; background-position: 0 0; }
.pub .pub-hero__title em .pub-hero__zeile--4 { background-position: 0 100%; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .pub .pub-hero__title em .pub-hero__zeile {
    -webkit-background-clip: text;
    background-clip: text;
    /* text-fill-color zusaetzlich zu color: Aeltere WebKit-Fassungen werten
       beim Textzuschnitt nur diese Eigenschaft aus. */
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
.pub .pub-hero__sub {
  margin: 0 auto;
  max-width: 56ch;
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.7;
  color: var(--au-ink-soft);
}
.pub-hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  margin-top: 2.2rem;
}
.pub .pub-hero__note {
  margin-top: 1.1rem;
  font-size: .82rem;
  color: var(--au-ink-muted);
}

/* Vertrauensleiste unter dem Hero */
.pub-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem 1.4rem;
  margin-top: 2.6rem;
  padding-top: 2rem;
  border-top: 1px solid var(--au-line-soft);
}
.pub-trust span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  color: var(--au-ink-muted);
}
.pub-trust svg { width: 15px; height: 15px; opacity: .8; }

/* Zweispaltiger Hero mit dem Blickfang */
@media (min-width: 900px) {
  .pub-hero { text-align: left; }
  .pub-hero__grid {
    /* Beide Spalten so breit wie ihr Inhalt, nicht wie das Fenster */
    grid-template-columns: minmax(0, max-content) minmax(0, max-content);
    justify-content: start;
    align-items: center;
    /* Nah genug, dass Text und Figur zusammengehoeren - weit genug, dass
       der Arm nicht am "l." von "Digital." klebt. */
    gap: clamp(1.75rem, 3.5vw, 3.25rem);
  }
  .pub-hero__bild { justify-self: start; }
  .pub-hero__bild img { max-height: clamp(420px, 58vh, 600px); }
  .pub .pub-hero__title { margin-left: 0; margin-right: 0; max-width: none; }

  /* Die Treppe */
  .pub-hero__zeile--1 { margin-left: 0; }
  .pub-hero__zeile--2 { margin-left: clamp(.8rem, 1.8vw, 1.9rem); }
  .pub-hero__zeile--3 { margin-left: clamp(1.9rem, 4.2vw, 4.4rem); }
  .pub-hero__zeile--4 { margin-left: clamp(1.3rem, 3vw, 3.2rem); }

  /* Eine Winzigkeit aus der Waagerechten - gerade so viel, dass die
     Überschrift gesetzt und nicht gestanzt wirkt. Mehr als ein Grad sieht
     nach Versehen aus. */
  .pub .pub-hero__title { transform: rotate(-.7deg); transform-origin: left center; }
  .pub .pub-hero__sub   { margin-left: 0; max-width: 46ch; }
  .pub-hero__cta        { justify-content: flex-start; }
  .pub-trust            { justify-content: flex-start; }
}

/* Auf sehr niedrigen Fenstern - Notebook im Querformat - würde die Figur den
   Hero über den Bildschirm hinaus wachsen lassen. */
@media (min-width: 900px) and (max-height: 720px) {
  .pub-hero__bild img { max-height: 340px; }
}

/* Wer im Betriebssystem "Bewegung reduzieren" gesetzt hat, bekommt die Seite
   fertig aufgebaut zu sehen - ohne Einlauf, aber vollstaendig sichtbar. */
@media (prefers-reduced-motion: reduce) {
  .pub-hero__schein { filter: none; }
  .pub-hero__zeile,
  .pub-hero__bild {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* --- 5. Karten und Raster ------------------------------------------------ */

.pub-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}

.pub-card {
  position: relative;
  padding: 1.5rem 1.4rem;
  border: 1px solid var(--au-line);
  border-radius: var(--au-radius);
  background:
    linear-gradient(158deg, var(--au-glass-strong) 0%, var(--au-glass) 46%,
                    var(--au-veil) 100%);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pub-card:hover {
  transform: translateY(-3px);
  border-color: rgba(140, 194, 255, .28);
  box-shadow: 0 14px 40px var(--au-shadow-card);
}

.pub-card__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 1rem;
  border-radius: 12px;
  color: var(--pub-accent);
  background: rgba(var(--pub-accent-rgb), .1);
  border: 1px solid rgba(var(--pub-accent-rgb), .2);
}
.pub-card__icon svg { width: 21px; height: 21px; }

.pub-card h3 {
  margin: 0 0 .45rem;
  font-size: 1.03rem;
  font-weight: 650;
  color: var(--au-ink);
}
.pub-card p {
  margin: 0;
  font-size: .89rem;
  line-height: 1.62;
  color: var(--au-ink-soft);
}

/* Vorteile: zweispaltig mit Nummer statt Symbol */
.pub-benefit {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--au-line-soft);
}
.pub-benefit:last-child { border-bottom: 0; }
.pub-benefit__num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--pub-accent);
  background: rgba(var(--pub-accent-rgb), .08);
  border: 1px solid rgba(var(--pub-accent-rgb), .22);
  border-radius: 9px;
}
.pub-benefit h3 { margin: .25rem 0 .35rem; font-size: 1rem; color: var(--au-ink); }
.pub-benefit p  { margin: 0; font-size: .89rem; line-height: 1.6; color: var(--au-ink-soft); }

/* --- 6. Preise ----------------------------------------------------------- */

.pub-plan { display: flex; flex-direction: column; }
.pub-plan--hebt {
  border-color: rgba(var(--pub-accent-rgb), .35);
  box-shadow: 0 0 0 1px rgba(var(--pub-accent-rgb), .12), 0 18px 50px var(--au-shadow-lift);
}
/* Lichtreflex beim Ueberfahren */
.pub .pub-plan::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(100deg,
              transparent 38%,
              var(--au-shine) 50%,
              transparent 62%);
  background-size: 260% 100%;
  background-position: 100% 0;
  opacity: 0;
  transition: background-position .85s ease, opacity .22s ease;
}
.pub .pub-plan:hover::after {
  background-position: 0 0;
  opacity: 1;
}

.pub-plan__tag {
  position: absolute;
  top: -11px; left: 1.4rem;
  padding: .22rem .6rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pub-tag-ink);
  background: var(--pub-tag-bg);
  border-radius: 999px;
}
.pub .pub-plan__name  { margin: 0 0 .3rem; font-size: 1.1rem; color: var(--au-ink); }
.pub .pub-plan__desc  { margin: 0 0 1.1rem; font-size: .85rem; color: var(--au-ink-muted); }
.pub .pub-plan__price {
  margin: 0 0 1.2rem;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--au-ink);
}
.pub .pub-plan__price small {
  font-size: .8rem;
  font-weight: 500;
  color: var(--au-ink-muted);
}
/* Jahrespreis */
.pub-plan__jahr {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin: 0 0 1.25rem;
  padding: .65rem .75rem;
  background: rgba(var(--pub-accent-rgb), .07);
  border: 1px solid rgba(var(--pub-accent-rgb), .2);
  border-radius: 12px;
}
.pub-plan__price + .pub-plan__jahr { margin-top: -.55rem; }

.pub-plan__rabatt {
  align-self: flex-start;
  padding: .16rem .55rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pub-on-accent);
  background: var(--pub-accent);
  border-radius: 999px;
  white-space: nowrap;
}
.pub .pub-plan__jahrpreis {
  font-size: .95rem;
  color: var(--au-ink);
}
.pub .pub-plan__jahrpreis strong { font-weight: 700; }

/* Der durchgestrichene Vergleichswert - zwoelf Monatspreise. */
.pub .pub-plan__jahrpreis s {
  margin-left: .35rem;
  font-size: .82rem;
  color: var(--au-ink-muted);
  text-decoration-thickness: 1px;
}
.pub .pub-plan__jahrhinweis {
  font-size: .78rem;
  line-height: 1.45;
  color: var(--au-ink-muted);
}

.pub-plan__list {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  flex: 1;
}
.pub-plan__list li {
  display: flex;
  gap: .55rem;
  padding: .38rem 0;
  font-size: .87rem;
  color: var(--au-ink-soft);
}
.pub-plan__list li::before {
  content: "";
  flex: 0 0 auto;
  width: 15px; height: 15px;
  margin-top: .18rem;
  background: currentColor;
  color: var(--pub-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Die Umsatzsteuerangabe unter den Tarifen. Ruhig gesetzt - sie soll lesbar
   sein, aber den Preisen nicht die Aufmerksamkeit nehmen. */
.pub .pub-preis-steuer {
  margin: 1.4rem auto 0;
  max-width: 60ch;
  font-size: .82rem;
  line-height: 1.6;
  text-align: center;
  color: var(--au-ink-muted);
}

/* ---------------------------------------------------------------------------
   Ablaufkasten auf den Funktionsseiten
   --------------------------------------------------------------------------- */
.pub-qr {
  display: grid;
  gap: 1.4rem;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  padding: clamp(1.3rem, 3vw, 2rem);
  background: var(--au-glass);
  border: 1px solid var(--au-line);
  border-left: 3px solid var(--pub-accent);
  border-radius: var(--au-radius);
}

.pub-qr__zeichen {
  display: grid;
  place-items: center;
  width: 68px; height: 68px;
  color: var(--pub-accent);
  background: rgba(var(--pub-accent-rgb), .09);
  border: 1px solid rgba(var(--pub-accent-rgb), .22);
  border-radius: var(--au-radius-sm);
}
.pub-qr__zeichen svg { width: 38px; height: 38px; }

.pub-qr__text { min-width: 0; }
.pub-qr__titel {
  margin: 0 0 .6rem;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 700;
  color: var(--au-ink);
}
.pub-qr__text > p {
  margin: 0 0 1.3rem;
  max-width: 68ch;
  font-size: .92rem;
  line-height: 1.7;
  color: var(--au-ink-soft);
}

/* Die drei Schritte */
.pub-qr__schritte {
  display: grid;
  gap: 1rem 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.pub-qr__schritte li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "num titel" "num text";
  gap: .1rem .7rem;
  align-content: start;
}
.pub-qr__num {
  grid-area: num;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--pub-accent);
  background: rgba(var(--pub-accent-rgb), .1);
  border: 1px solid rgba(var(--pub-accent-rgb), .25);
  border-radius: 999px;
}
.pub-qr__schritte strong {
  grid-area: titel;
  font-size: .9rem;
  font-weight: 650;
  line-height: 1.45;
  color: var(--au-ink);
}
.pub-qr__schritte li > span:last-child {
  grid-area: text;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--au-ink-muted);
}

/* Der Vertrauenssatz. Leiser als die Schritte, aber mit Symbol - er
   beantwortet eine Sorge und soll deshalb auffindbar sein. */
.pub-qr__hinweis {
  display: flex;
  align-items: start;
  gap: .5rem;
  margin: 0 0 1rem;
  max-width: 68ch;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--au-ink-muted);
}
.pub-qr__hinweis svg {
  width: 16px; height: 16px;
  flex: 0 0 auto;
  margin-top: .18rem;
  color: var(--au-ink-muted);
}

/* Der letzte Absatz traegt keinen Aussenabstand nach unten - sonst stuende
   er hoeher im Kasten als die Ueberschrift oben, und der Kasten saehe
   unten schwerer aus als er ist. */
.pub-qr__text > *:last-child { margin-bottom: 0; }

@media (min-width: 720px) {
  .pub-qr {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.6rem;
    align-items: start;
  }
}

/* Preise stehen noch nicht fest - das wird offen gesagt, statt eine Zahl
   zu erfinden. */
.pub .pub-preis-hinweis {
  margin: 1.6rem auto 0;
  max-width: 60ch;
  padding: .9rem 1.1rem;
  font-size: .84rem;
  line-height: 1.6;
  text-align: center;
  color: var(--au-ink-soft);
  background: var(--au-glass);
  border: 1px solid var(--au-line);
  border-radius: var(--au-radius-sm);
}

/* --- 7. Formulare -------------------------------------------------------- */

/* Die Feldgestaltung kommt aus login.css (.au-field, .au-control). Hier
   steht nur, was ein mehrspaltiges Formular zusätzlich braucht. */
.pub-form-card {
  padding: clamp(1.5rem, 4vw, 2.4rem);
  border: 1px solid var(--au-line);
  border-radius: var(--au-radius);
  background:
    linear-gradient(158deg, var(--au-glass-strong) 0%, var(--au-glass) 46%,
                    var(--au-veil) 100%);
}

.pub-fieldset { border: 0; margin: 0 0 1.7rem; padding: 0; }
.pub-fieldset legend {
  padding: 0 0 .9rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pub-accent);
}

.pub-row {
  display: grid;
  gap: 0 1rem;
  grid-template-columns: 1fr 1fr;
}
.pub-row--3-1 { grid-template-columns: 3fr 1fr; }
.pub-row--1-3 { grid-template-columns: 1fr 3fr; }

/* Pflichtfeldstern */
.au-field label .pflicht { color: var(--au-danger); margin-left: .15rem; }

/* Feldbezogene Fehlermeldung unter dem Eingabefeld */
.pub-fehler {
  display: block;
  margin-top: .35rem;
  font-size: .78rem;
  color: var(--au-danger);
}
.au-control.hat-fehler { border-color: var(--au-danger-ln); }

/* Zustimmungen */
.pub-consent {
  display: flex;
  gap: .65rem;
  margin: .9rem 0;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--au-ink-soft);
}
.pub-consent input { margin-top: .2rem; flex: 0 0 auto; }
.pub-consent a { color: var(--au-accent-soft); }

/* Der Hinweis auf den Auftragsverarbeitungsvertrag unter den beiden Haken.
   Kein Haken - es ist nichts zuzustimmen, sondern etwas zu wissen. Deshalb
   eingerueckt auf die Textspalte der Haken darueber und eine Spur leiser. */
/* Mit ".pub" davor, und aus demselben Grund wie beim Erfolgskasten weiter
   unten: Dieser Hinweis ist ein <p> und steht im Registrierungsformular
   innerhalb von .pub-legal. */
.pub .pub-consent__hinweis {
  margin: .2rem 0 1.2rem;
  padding-left: 1.5rem;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--au-ink-muted);
}
.pub-consent__hinweis a { color: var(--au-accent-soft); }

/* Der B2B-Hinweis ueber dem Registrierungsformular. */
.pub-b2b {
  margin: 0 0 1.8rem;
  padding: 1rem 1.2rem;
  background: var(--au-glass);
  border: 1px solid var(--au-line);
  border-left: 3px solid var(--au-accent-soft);
  border-radius: var(--au-radius-sm);
}
.pub-b2b p {
  margin: 0 0 .6rem;
  font-size: .86rem;
  line-height: 1.65;
  color: var(--au-ink-soft);
}
.pub-b2b p:last-child { margin-bottom: 0; }

/* Honigtopf: für Menschen unsichtbar, für einfache Skripte ein
   verlockendes Pflichtfeld. Bewusst nicht display:none - manche Skripte
   überspringen genau das. */
.pub-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Erfolgsmeldung nach dem Absenden */
.pub-erfolg {
  padding: clamp(1.6rem, 4vw, 2.6rem);
  text-align: center;
  border: 1px solid rgba(79, 224, 176, .28);
  border-radius: var(--au-radius);
  background: rgba(79, 224, 176, .06);
}
.pub-erfolg__icon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  color: var(--au-ok);
  background: rgba(79, 224, 176, .12);
  border: 1px solid rgba(79, 224, 176, .3);
}
.pub-erfolg__icon svg { width: 27px; height: 27px; }

/* Die Praefixe ".pub" sind hier Pflicht, nicht Geschmackssache.

   Ueberschrift   36,8 px statt 24 px (clamp der Rechtstexte)
   Absatz         "margin: 0 auto" von "margin: 0 0 .9rem" ueberschrieben */
.pub .pub-erfolg h1 {
  margin: 0 0 .7rem;
  font-size: 1.5rem;
  color: var(--au-ink);
}
.pub .pub-erfolg p {
  margin: 0 auto .8rem;
  max-width: 52ch;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--au-ink-soft);
}

/* Die Kundennummer nach der Registrierung - die wichtigste Zahl der
   ganzen Seite, entsprechend hervorgehoben. */
.pub-kdnr {
  margin: 1.6rem auto;
  padding: 1.2rem 1.5rem;
  max-width: 320px;
  border: 1px dashed rgba(79, 224, 176, .4);
  border-radius: var(--au-radius-sm);
  background: rgba(79, 224, 176, .06);
}
.pub-kdnr__label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--au-ink-muted);
}
.pub-kdnr__wert {
  margin-top: .4rem;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--au-ok);
}

/* --- 8. Rechtstexte ------------------------------------------------------ */

/* ---------------------------------------------------------------------------
   Lange Woerter duerfen die Seite nicht breiter machen als den Bildschirm
   --------------------------------------------------------------------------- */
body.pub h1, body.pub h2, body.pub h3, body.pub h4,
body.pub p, body.pub li, body.pub dt, body.pub dd,
body.pub address, body.pub .cc__titel, body.pub .cc__text {
  overflow-wrap: break-word;
}

.pub-legal {
  padding: clamp(2rem, 5vw, 3rem) 0 clamp(3rem, 7vw, 5rem);
}
.pub-legal h1 {
  margin: 0 0 .5rem;
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  color: var(--au-ink);
}
.pub-legal__stand {
  margin: 0 0 2.2rem;
  font-size: .82rem;
  color: var(--au-ink-muted);
}
.pub-legal h2 {
  margin: 2.4rem 0 .8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--au-line-soft);
  font-size: 1.15rem;
  font-weight: 650;
  color: var(--au-ink);
}
.pub-legal h3 {
  margin: 1.6rem 0 .5rem;
  font-size: .98rem;
  font-weight: 650;
  color: var(--au-ink);
}
.pub-legal p,
.pub-legal li {
  font-size: .92rem;
  line-height: 1.75;
  color: var(--au-ink-soft);
}
.pub-legal p { margin: 0 0 .9rem; }
.pub-legal ul,
.pub-legal ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.pub-legal li { margin-bottom: .35rem; }
.pub-legal a { color: var(--au-accent-soft); }
.pub-legal address {
  margin: 0 0 1.2rem;
  font-style: normal;
  line-height: 1.8;
  color: var(--au-ink-soft);
}

/* ---------------------------------------------------------------------------
   Tabellen in Rechtstexten - die Cookie-Uebersicht
   --------------------------------------------------------------------------- */
.pub-legal__tabelle {
  max-width: 100%;
  margin: 0 0 1.6rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pub-legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--au-ink-soft);
}

/* Feste Spaltenanteile statt automatischer Verteilung. */
.pub-legal__tabelle--fest table { table-layout: fixed; }

/* Ein Selektor mehr als noetig - und zwar mit Absicht. ".pub-legal td code"
   weiter unten hat dieselbe Spezifitaet (0,1,2) und steht spaeter in der
   Datei; bei Gleichstand gewinnt die spaetere Regel. */
.pub-legal__tabelle--fest table td code {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Aus demselben Grund muss auch die Kopfzeile umbrechen duerfen. Bei
   automatischer Verteilung macht das nowrap Sinn - es haelt die Spalte
   mindestens so breit wie ihre Ueberschrift. */
.pub-legal__tabelle--fest table thead th { white-space: normal; }
.pub-legal thead th {
  padding: .55rem .7rem;
  text-align: left;
  font-weight: 650;
  color: var(--au-ink);
  background: var(--au-glass);
  border-bottom: 1px solid var(--au-line);
  white-space: nowrap;
}
.pub-legal tbody td {
  padding: .6rem .7rem;
  vertical-align: top;
  border-bottom: 1px solid var(--au-line-soft);
}
.pub-legal tbody tr:last-child td { border-bottom: 0; }
.pub-legal td code,
.pub-legal th code {
  font-size: .92em;
  white-space: nowrap;
}

/* Auf breiten Bildschirmen steht die Beschriftung in der Kopfzeile der
   Tabelle - dann waere sie in jeder Zelle noch einmal zu viel. */
.pub-legal__zellkopf { display: none; }

@media (max-width: 760px) {
  .pub-legal__tabelle { overflow-x: visible; }
  .pub-legal__tabelle table,
  .pub-legal__tabelle tbody,
  .pub-legal__tabelle tr,
  .pub-legal__tabelle td { display: block; width: 100%; }

  /* Die Kopfzeile faellt weg - die Beschriftung steht jetzt an jeder
     Zelle im Quelltext, auch fuer Vorleseprogramme. */
  .pub-legal__tabelle thead { display: none; }

  .pub-legal__tabelle tr {
    margin-bottom: 1rem;
    padding: .2rem .9rem .6rem;
    background: var(--au-glass);
    border: 1px solid var(--au-line-soft);
    border-radius: var(--au-radius-sm);
  }
  .pub-legal__tabelle td {
    padding: .5rem 0;
    border-bottom: 1px solid var(--au-line-soft);
  }
  .pub-legal__tabelle tr td:last-child { border-bottom: 0; }
  .pub-legal__zellkopf {
    display: block;
    margin-bottom: .15rem;
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--au-ink-muted);
  }
}


/* Noch einzutragende Betreiberangaben. Absichtlich auffällig: Diese Seite
   darf so nicht online gehen, und das muss man sehen. */
.pub-todo {
  padding: .1rem .45rem;
  font-size: .85em;
  font-weight: 600;
  color: var(--pub-todo-ink);
  background: var(--pub-todo-bg);
  border: 1px dashed var(--pub-todo-line);
  border-radius: 5px;
}

/* --- 9. Fußzeile --------------------------------------------------------- */

.pub-foot {
  position: relative;
  z-index: 1;
  margin-top: 3rem;
  border-top: 1px solid var(--au-line-soft);
  background: var(--pub-chrome-alt);
}
.pub-foot__inner {
  display: grid;
  gap: 2.2rem;
  /* Die Logospalte braucht nur so viel Platz, dass der Satz darunter in
     drei bis vier Zeilen laeuft. Der gewonnene Raum geht an die vier
     Verweisspalten, die dadurch nebeneinander in eine Reihe passen. */
  grid-template-columns: minmax(0, .85fr) minmax(0, 3fr);
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(2.2rem, 5vw, 3.2rem) clamp(1rem, 4vw, 2rem);
}
.pub-foot__brand .brandlogo {
  display: block;
  width: auto;
  max-width: none;
  height: 28px;
  margin: 0 0 .9rem;         /* linksbuendig, nicht zentriert wie beim Login */
  filter: none;
}
.pub-foot__brand p {
  margin: 0;
  max-width: 30ch;              /* haelt den Satz bei drei bis vier Zeilen */
  font-size: .85rem;
  line-height: 1.65;
  color: var(--au-ink-muted);
}

/* Name und E-Mail unter dem Beschreibungssatz. Etwas Abstand darueber, damit
   es als eigene Angabe gelesen wird und nicht als vierte Zeile des Satzes. */
.pub-foot__kontakt {
  margin-top: 1rem !important;
  color: var(--au-ink-muted);
}
.pub-foot__kontakt strong {
  color: var(--au-ink-soft);
  font-weight: 650;
}
.pub-foot__kontakt a {
  color: var(--au-ink-muted);
  text-decoration: none;
  overflow-wrap: anywhere;      /* lange Adresse bricht, statt zu schieben */
}
.pub-foot__kontakt a:hover,
.pub-foot__kontakt a:focus-visible { color: var(--au-accent-soft); }
.pub-foot__cols {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(4, 1fr);
  /* Die Produktspalte fuehrt seit dem 07.09.2026 alle neun Module einzeln auf
     und ist damit deutlich laenger als die uebrigen drei. */
  align-items: start;
}
.pub-foot__cols h3 {
  margin: 0 0 .8rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--au-ink-muted);
}
.pub-foot__cols a {
  display: block;
  margin-bottom: .5rem;
  font-size: .87rem;
  color: var(--au-ink-soft);
  text-decoration: none;
}
.pub-foot__cols a:hover,
.pub-foot__cols a:focus,
.pub-foot__cols a:active { color: var(--au-accent-soft); text-decoration: none; }

.pub-foot__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.2rem;
  max-width: 1140px;
  margin: 0 auto;
  padding: 1.1rem clamp(1rem, 4vw, 2rem);
  border-top: 1px solid var(--au-line-soft);
  font-size: .8rem;
  color: var(--au-ink-muted);
}

/* Soziale Netzwerke */
.pub-social {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-left: auto;
}
.pub-social__link {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  color: var(--au-ink-muted);
  border: 1px solid var(--au-line-soft);
  border-radius: 999px;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.pub-social__link:hover,
.pub-social__link:focus-visible {
  color: var(--au-ink);
  border-color: var(--au-line);
  background: var(--au-glass);
  text-decoration: none;
}
.pub-social__link:focus-visible {
  outline: 2px solid rgba(140, 194, 255, .75);
  outline-offset: 2px;
}
.pub-social__zeichen { width: 19px; height: 19px; display: block; }

/* Auf schmalen Bildschirmen stehen Vermerk und Symbole untereinander und
   mittig - nebeneinander blieben fuer den Vermerk zwei Woerter Platz. */
@media (max-width: 560px) {
  .pub-foot__legal { flex-direction: column; text-align: center; }
  .pub-social { margin-left: 0; justify-content: center; }
}

/* --- 10. Kleine Bildschirme ---------------------------------------------- */

/* Zwischen 860 und 1000 Pixeln wuerden vier Spalten so schmal, dass
   "Cookie-Einstellungen" umbricht - dort lieber zwei mal zwei. */
@media (max-width: 1000px) {
  .pub-foot__cols { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1.5rem; }
}

@media (max-width: 860px) {
  .pub-foot__inner { grid-template-columns: 1fr; gap: 2rem; }
  .pub-foot__brand p { max-width: none; }
}

/* Die Kopfleiste braucht waagerecht rund 852 Pixel: Logo, vier Verweise,
   Trennstrich und zwei Schaltflaechen. Bis 860 Pixel wird daraus deshalb
   das Ausklappmenue. */
@media (max-width: 860px) {
  /* Aus der waagerechten Navigation wird ein Ausklappmenü. Gesteuert über
     das versteckte Kontrollkästchen #pub-menu - ohne eine Zeile
     JavaScript. */
  /* Der Umschalter rueckt an das rechte Ende, das Burger-Menue schliesst
     sich rechts daneben an. So bleibt die gewohnte Reihenfolge erhalten:
     Menue ganz aussen, wo der Daumen es erwartet. */
  .pub-thema {
    order: 1;
    margin-left: auto;
    margin-right: .1rem;
  }
  .pub-nav__burger {
    order: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px; height: 38px;
    margin-left: 0;
    padding: 0 9px;
    cursor: pointer;
    border: 1px solid var(--au-line);
    border-radius: 10px;
    background: var(--au-glass);
  }
  .pub-nav__burger span {
    display: block;
    height: 2px;
    background: var(--au-ink-soft);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
  }
  .pub-nav__toggle:checked ~ .pub-nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .pub-nav__toggle:checked ~ .pub-nav__burger span:nth-child(2) { opacity: 0; }
  .pub-nav__toggle:checked ~ .pub-nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .pub-nav__links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: .35rem;
    margin: 0;
    padding: 1rem clamp(1rem, 4vw, 2rem) 1.4rem;
    background: var(--pub-chrome-menu);
    border-bottom: 1px solid var(--au-line);
  }
  .pub-nav__toggle:checked ~ .pub-nav__links { display: flex; }
  .pub-nav__links > a { padding: .6rem 0; font-size: .95rem; }
  .pub-nav__sep { width: 100%; height: 1px; margin: .4rem 0; }

  /* Die Schaltflaechen im aufgeklappten Menue nehmen die volle Breite -
     ausdruecklich nur dort. */
  .pub-nav__links .pub-btn { width: 100%; }
}

/* Alles Uebrige klappt weiterhin bei 780 Pixeln um. Dort geht es nicht um
   Platzmangel wie in der Kopfleiste, sondern um Lesbarkeit: Ein zweispaltiger
   Abschnitt wird ab hier zu schmal, um noch etwas zu bringen. */
@media (max-width: 780px) {
  .pub-btn { width: 100%; }

  .pub-row,
  .pub-row--3-1,
  .pub-row--1-3 { grid-template-columns: 1fr; }

  .pub-foot__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 420px) {
  .pub-foot__cols { grid-template-columns: 1fr; }
  .pub-kdnr__wert { font-size: 1.6rem; }
}

/* Wer Bewegung ausgeschaltet hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  .pub-card, .pub-btn { transition: none; }
  .pub-card:hover, .pub-btn:hover { transform: none; }
  /* Ohne Bewegung bliebe vom Lichtreflex nur ein starrer heller Streifen
     stehen - dann lieber gar keiner. */
  .pub .pub-plan::after { display: none; }
}

/* --- 11. Anpassungen der Formularbausteine aus login.css ------------------ */
/* Die Felder (.au-field, .au-control) stammen von der Anmeldeseite. Dort
   trägt jedes Feld ein Symbol, deshalb reserviert login.css links 2,8rem
   Platz dafür. */
.pub .au-control input,
.pub .au-control textarea { padding-left: 1rem; }
.pub .au-control .au-control__icon + input { padding-left: 2.8rem; }

/* login.css kennt nur <input> - auf der Anmeldeseite gibt es kein
   mehrzeiliges Feld. */
.pub .au-control textarea {
  width: 100%;
  min-height: 9rem;
  padding: .8rem 1rem;
  font: inherit;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--au-ink);
  background: var(--au-field);
  border: 1px solid var(--au-line);
  border-radius: var(--au-radius-sm);
  resize: vertical;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pub .au-control textarea::placeholder { color: var(--au-ink-muted); }
.pub .au-control textarea:hover { border-color: var(--au-line-hover); }
.pub .au-control textarea:focus {
  outline: none;
  background: var(--au-field-focus);
  border-color: rgba(61, 139, 255, .62);
  box-shadow: 0 0 0 4px rgba(61, 139, 255, .15);
}

/* Kontrollkästchen in den Zustimmungen: das Systemkästchen ist auf
   dunklem Grund kaum zu sehen. accent-color faerbt es ohne Nachbau. */
.pub .pub-consent input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--pub-accent);
  cursor: pointer;
}

/* .au-hint ist auf der Anmeldeseite ein hervorgehobener Kasten - dort ist es
   der einzige Hinweis der Seite. In einem mehrteiligen Formular wirkt
   derselbe Kasten wie ein weiteres Eingabefeld und stiftet Verwirrung. */
.pub .au-hint {
  margin-top: .4rem;
  padding: 0;
  background: none;
  border: 0;
  font-size: .8rem;
  color: var(--au-ink-muted);
}

/* ---------------------------------------------------------------------------
   Über uns
   --------------------------------------------------------------------------- */
/* Der Einstieg mit der winkenden Figur */
.pub-ueber__kopf {
  display: grid;
  gap: 1.2rem;
  align-items: center;
  margin-bottom: 2rem;
}
.pub-ueber__kopf .pub-ueber__lead { margin-bottom: 0; }

.pub-ueber__figur {
  justify-self: center;
  width: 150px;
}
.pub-ueber__figur img {
  display: block;
  width: 100%;
  height: auto;
  /* Derselbe weiche Schein wie unter dem Logo - ohne ihn steht die
     freigestellte Figur wie ausgeschnitten auf dem dunklen Grund. */
  filter: drop-shadow(0 14px 30px rgba(61, 139, 255, .28));
}

@media (min-width: 640px) {
  /* Die Spalte waechst mit dem Fenster, statt sofort auf 230 Pixel zu
     springen: Bei knapp 660 Pixel Fensterbreite draengte die Figur den Text
     sonst auf eine schmale Spalte und wirkte wichtiger als er. */
  .pub-ueber__kopf {
    grid-template-columns: minmax(0, 1fr) clamp(155px, 26vw, 230px);
    gap: 1.8rem;
  }
  .pub-ueber__figur { justify-self: end; width: 100%; }
}

.pub-ueber__lead {
  margin: 0 0 2rem;
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--au-ink);
  padding-left: 1rem;
  border-left: 2px solid rgba(var(--pub-accent-rgb), .5);
}

.pub-ueber ul { display: grid; gap: .7rem; }
.pub-ueber li strong { color: var(--au-ink); }

.pub-ueber__aktion {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--au-line);
}

/* ---------------------------------------------------------------------------
   Fehlerseite 404
   --------------------------------------------------------------------------- */
.pub-404__kopf {
  display: grid;
  gap: 1.6rem;
  align-items: center;
}
.pub-404__text { min-width: 0; }

/* Auf der Fehlerseite steht der Text links, nicht mittig wie in den
   Abschnittskoepfen der Startseite - er steht neben der Figur und nicht
   ueber der ganzen Breite. */
.pub-404 .pub-lead { margin-bottom: 1.8rem; }

.pub-404__figur { justify-self: center; width: 140px; }
.pub-404__figur img {
  display: block;
  width: 100%;
  height: auto;
  /* Derselbe weiche Schein wie unter dem Logo und bei "Ueber uns" - ohne
     ihn steht die freigestellte Figur wie ausgeschnitten auf dem dunklen
     Grund. */
  filter: drop-shadow(0 18px 34px rgba(61, 139, 255, .28));
}

@media (min-width: 700px) {
  .pub-404__kopf {
    grid-template-columns: minmax(0, 1fr) clamp(150px, 20vw, 210px);
    gap: 2.4rem;
  }
  .pub-404__figur { justify-self: end; width: 100%; }
}

/* Das Suchprotokoll */
.pub-404__protokoll-titel {
  margin: 0 0 .6rem;
  font-size: .84rem;
  font-weight: 650;
  color: var(--au-ink-soft);
}
.pub-404__protokoll {
  display: grid;
  gap: .45rem;
  /* Gedeckelt, damit das Ergebnis rechts nicht an den Rand der Textspalte
     wandert. */
  max-width: 32rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}
.pub-404__protokoll li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .55rem;
  font-size: .87rem;
  line-height: 1.5;
  color: var(--au-ink-muted);
}
.pub-404__haken {
  display: inline-flex;
  align-self: center;
  color: var(--pub-accent);
}
.pub-404__haken svg { width: 15px; height: 15px; display: block; }

.pub-404__ort {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  min-width: 0;
  color: var(--au-ink-soft);
}
.pub-404__ort svg {
  width: 15px; height: 15px;
  flex: 0 0 auto;
  align-self: center;
  color: var(--au-ink-muted);
}

/* Das Ergebnis rechts, leicht abgesetzt - die Pointe jeder Zeile. */
.pub-404__ergebnis {
  flex: 0 0 auto;
  font-style: italic;
  white-space: nowrap;
  color: var(--au-ink-faint);
}

/* Unter 700 Pixel steht die Figur unter dem Text und deutlich kleiner - auf
   dem Telefon nimmt sie sonst den ganzen ersten Bildschirm ein, bevor ein
   Wort gelesen ist. */
@media (max-width: 460px) {
  .pub-404__protokoll { gap: .9rem; }
  .pub-404__protokoll li {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: .1rem;
  }
  /* Das Ergebnis rutscht unter den Ort. Der Einzug holt es auf die
     Fluchtlinie des Ortstextes - ohne ihn begaenne es am Rand der
     Symbolspalte und stuende weiter links als die Zeile, zu der es gehoert. */
  .pub-404__ergebnis {
    grid-column: 2;
    padding-left: calc(15px + .4rem);
    white-space: normal;
  }
}

/* ---------------------------------------------------------------------------
   12. Scroll-Fortschritt
   --------------------------------------------------------------------------- */
.pub-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 100%;
  height: 3px;
  pointer-events: none;
}

.pub-progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #2f6fe0 0%, #4a95ff 55%, #8cc2ff 100%);
  box-shadow: 0 0 10px rgba(74, 149, 255, .5);
  will-change: transform;
}

/* ---------------------------------------------------------------------------
   13. Anklickbare Funktionskarten
   --------------------------------------------------------------------------- */
.pub .pub-card--link {
  display: block;
  color: inherit;
  cursor: pointer;
}

/* Der Unterstrich aus ".auth a:hover" gilt hier so wenig wie bei den
   Schaltflaechen - er laege sonst unter jedem Wort der Karte. */
.pub .pub-card--link:link,
.pub .pub-card--link:visited,
.pub .pub-card--link:hover,
.pub .pub-card--link:focus,
.pub .pub-card--link:active { text-decoration: none; color: inherit; }

.pub .pub-card--link:hover,
.pub .pub-card--link:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(140, 194, 255, .42);
  box-shadow:
    0 18px 44px var(--au-shadow-lift),
    0 0 0 1px rgba(140, 194, 255, .12);
}

/* Die Ueberschrift nimmt beim Ueberfahren die Akzentfarbe an - der einzige
   Farbwechsel in der Karte. Mehr waere Unruhe. */
.pub .pub-card--link:hover h3,
.pub .pub-card--link:focus-visible h3 { color: var(--pub-accent); }

.pub .pub-card--link:hover .pub-card__icon,
.pub .pub-card--link:focus-visible .pub-card__icon {
  border-color: rgba(var(--pub-accent-rgb), .38);
  background: rgba(var(--pub-accent-rgb), .16);
}

.pub .pub-card--link:focus-visible {
  outline: 2px solid rgba(140, 194, 255, .75);
  outline-offset: 3px;
}

/* Die Ueberschrift der Funktionskarte traegt die Aussage der Karte - beim
   Ueberfliegen des Rasters liest man sie zuerst und den Satz darunter oft gar
   nicht. */
.pub .pub-card--link h3 {
  margin-bottom: .5rem;
  font-size: 1.22rem;
  line-height: 1.3;
  letter-spacing: -.01em;
}

/* Der Hinweis am Fuss der Karte - kein zweiter Link, nur eine Beschriftung
   innerhalb des einen Links. */
.pub-card__mehr {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .95rem;
  font-size: .82rem;
  font-weight: 650;
  color: var(--pub-accent);
}
.pub-card__mehr svg {
  width: 15px;
  height: 15px;
  transition: transform .22s ease;
}
.pub .pub-card--link:hover .pub-card__mehr svg,
.pub .pub-card--link:focus-visible .pub-card__mehr svg { transform: translateX(3px); }

/* Wer die Bewegung nicht sehen moechte, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
  .pub .pub-card,
  .pub .pub-card--link:hover,
  .pub .pub-btn:hover { transform: none; }
  .pub .pub-card__mehr svg { transition: none; }
}

/* ---------------------------------------------------------------------------
   14. Funktionsseiten
   --------------------------------------------------------------------------- */
.pub-fn-hero {
  display: grid;
  gap: clamp(1.8rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 5vw, 3.5rem);
}
/* Text und Bild nebeneinander, der Text etwas breiter: Das Bild ist eine
   Vorschau und soll die Ueberschrift nicht erdruecken. Rund 55 zu 45. */
@media (min-width: 900px) {
  .pub-fn-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .pub-fn-hero--ohne-bild { grid-template-columns: minmax(0, 760px); }
}

.pub .pub-fn-hero__titel {
  margin: 0 0 .9rem;
  font-size: clamp(1.85rem, 4.2vw, 2.85rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.025em;
  color: var(--au-ink);
}
.pub .pub-fn-hero__text > p {
  margin: 0;
  font-size: clamp(1rem, 1.7vw, 1.1rem);
  line-height: 1.68;
  color: var(--au-ink-soft);
}

.pub-fn-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.7rem;
}

/* Zurueck zur Uebersicht - ein leiser Textlink ueber der Ueberschrift.
   display: flex mit fester Breite, damit er eine eigene Zeile bekommt: Als
   inline-flex stellte er sich neben das Abzeichen "MeisterOrga Funktion", und
   beides las sich wie eine einzige Zeile. */
.pub-fn-zurueck {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: .4rem;
  margin-bottom: 1.15rem;
  font-size: .85rem;
  color: var(--au-ink-muted);
}
.pub-fn-zurueck svg { width: 15px; height: 15px; transform: rotate(180deg); }

/* Wie die Kopfzeile: heller werden statt unterstreichen. Der Pfeil rueckt
   dabei ein Stueck nach links - dieselbe Bewegung wie der Pfeil in den
   Schaltflaechen, nur andersherum. */
.pub .pub-fn-zurueck:hover,
.pub .pub-fn-zurueck:focus,
.pub .pub-fn-zurueck:active { color: var(--au-ink); text-decoration: none; }
.pub .pub-fn-zurueck:hover svg { transform: rotate(180deg) translateX(3px); }

/* --- Fensterrahmen der Vorschaubilder ------------------------------------
   Fensterleiste, Rundung, Rahmen, Schatten. */
.pub-shot {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--au-line);
  border-radius: 18px;
  background: linear-gradient(160deg, var(--pub-shot-a) 0%, var(--pub-shot-b) 100%);
  box-shadow:
    0 32px 64px -32px var(--au-shadow-deep),
    inset 0 1px 0 rgba(255, 255, 255, .05);
}

.pub-shot__leiste {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--au-line-soft);
  background: var(--pub-shot-leiste);
}
.pub-shot__punkt {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--pub-shot-punkt);
}
.pub-shot__adresse {
  flex: 1 1 auto;
  max-width: 300px;
  height: 8px;
  margin-left: .55rem;
  border-radius: 999px;
  background: var(--au-hover-bg);
}

/* --- Praxisnutzen -------------------------------------------------------- */
.pub-praxis {
  display: grid;
  gap: .9rem;
  max-width: 820px;
  margin: 0 auto;
}
.pub-praxis__karte {
  display: flex;
  gap: .95rem;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--au-line);
  border-radius: var(--au-radius);
  background: var(--au-glass);
}
.pub-praxis__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  color: var(--pub-accent);
  background: rgba(var(--pub-accent-rgb), .1);
  border: 1px solid rgba(var(--pub-accent-rgb), .22);
}
.pub-praxis__icon svg { width: 16px; height: 16px; }
.pub-praxis__karte p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.65;
  color: var(--au-ink-soft);
}
.pub-praxis__karte strong { color: var(--au-ink); }

/* ---------------------------------------------------------------------------
   15. Häufige Fragen
   --------------------------------------------------------------------------- */
.pub-faq {
  display: grid;
  gap: .7rem;
  max-width: 780px;
  margin: 0 auto;
}

.pub-faq__item {
  overflow: hidden;
  border: 1px solid var(--au-line);
  border-radius: var(--au-radius);
  background: var(--au-glass);
  transition: border-color .2s ease, background .2s ease;
}
.pub-faq__item[open] {
  border-color: rgba(140, 194, 255, .28);
  background: var(--au-glass-strong);
}

.pub-faq__frage {
  display: flex;
  align-items: center;
  gap: 1rem;
  /* Grosse Klickflaeche: Die ganze Zeile oeffnet, nicht nur die Schrift.
     Auf dem Telefon sind das gut 56 Pixel Hoehe. */
  padding: 1.05rem 1.2rem;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.45;
  color: var(--au-ink);
  cursor: pointer;
  list-style: none;                 /* Standarddreieck weg (Firefox) */
  transition: color .18s ease;
}
.pub-faq__frage::-webkit-details-marker { display: none; }  /* Safari, Chrome */
.pub-faq__frage:hover { color: var(--pub-accent); }
.pub-faq__frage:focus-visible {
  outline: 2px solid rgba(140, 194, 255, .75);
  outline-offset: -2px;
  border-radius: var(--au-radius);
}

.pub-faq__text { flex: 1 1 auto; min-width: 0; }

.pub-faq__zeichen {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  color: var(--pub-accent);
  background: rgba(var(--pub-accent-rgb), .08);
  border: 1px solid rgba(var(--pub-accent-rgb), .2);
  transition: transform .25s ease, background .2s ease;
}
.pub-faq__zeichen svg { width: 15px; height: 15px; }
.pub-faq__item[open] .pub-faq__zeichen { transform: rotate(90deg); }

.pub-faq__antwort {
  padding: 0 1.2rem 1.15rem;
  font-size: .93rem;
  line-height: 1.7;
  color: var(--au-ink-soft);
}
.pub-faq__antwort p { margin: 0; }
.pub-faq__antwort p + p { margin-top: .7rem; }

@media (prefers-reduced-motion: reduce) {
  .pub-faq__item,
  .pub-faq__zeichen { transition: none; }
}

/* --- Kleine Bildschirme für die neuen Bausteine -------------------------- */
@media (max-width: 560px) {
  .pub-fn-hero__cta .pub-btn { width: 100%; }

  .pub-faq__frage { padding: .95rem 1rem; font-size: .95rem; gap: .7rem; }
  .pub-faq__antwort { padding: 0 1rem 1rem; }

  .pub-praxis__karte { padding: 1rem 1.05rem; gap: .8rem; }
}

/* ---------------------------------------------------------------------------
   16. Modul-Slider der Startseite
   --------------------------------------------------------------------------- */
.mo-slider {
  --mo-sl-breite: 700px;
  --mo-sl-ratio: 16 / 9;
  --mo-sl-max-h: min(58vh, 500px);

  position: relative;
  /* Ueber die Breite gedeckelt, nicht ueber die Hoehe: Ein max-height am
     Bildfeld liesse Chromium die Breite mitschrumpfen, und die Pfeile
     stuenden neben dem Bild statt an seinen Raendern. */
  max-width: min(var(--mo-sl-breite),
                 calc(var(--mo-sl-max-h) * var(--mo-sl-ratio)));
  margin: 0 auto;
}

/* Beschneidet die Bahn - hier und nur hier. */
.mo-slider__fenster {
  position: relative;
  overflow: hidden;
}

/* Alle Folien liegen im selben Rasterfeld uebereinander: Die Bahn ist so
   hoch wie die hoechste Folie, und der Wechsel ist eine Ueberblendung. */
.mo-slider__bahn {
  display: grid;
  /* Waagerecht wischt das Skript, senkrecht scrollt der Browser. */
  touch-action: pan-y;
}

.mo-slider__folie {
  grid-area: 1 / 1;
  opacity: 0;
  /* Verdeckte Folien duerfen keine Klicks und Wischbewegungen schlucken. */
  pointer-events: none;
  transition: opacity .7s ease, transform .45s ease;
}

/* Die laufende Folie liegt oben, damit die neue ueber die alte blendet. */
.mo-slider__folie.is-aktiv {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

/* Waehrend des Wischens folgt die Folie dem Finger ohne Nachlauf. */
.mo-slider.is-zieht .mo-slider__folie { transition: none; }
.mo-slider.is-zieht { cursor: grabbing; user-select: none; }

/* --- Bildfeld ------------------------------------------------------------- */

.mo-slider__buehne {
  position: relative;
  aspect-ratio: var(--mo-sl-ratio);
}

.mo-slider__buehne picture {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Nur verkleinern, nie aufziehen: width/height auto, kein object-fit. */
.mo-slider__buehne img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/* --- Beschriftung --------------------------------------------------------- */

.mo-slider__text {
  max-width: 620px;
  margin: clamp(.9rem, 2.2vw, 1.4rem) auto 0;
  padding: 0 .5rem;
  text-align: center;
}
.mo-slider .mo-slider__titel {
  margin: 0 0 .4rem;
  font-size: clamp(1.1rem, 2.2vw, 1.32rem);
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--au-ink);
}
.mo-slider__satz {
  margin: 0;
  font-size: .93rem;
  line-height: 1.68;
  color: var(--au-ink-soft);
}

/* Derselbe Baustein wie am Fuss der Funktionskarten. */
.mo-slider__mehr {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .8rem;
  font-size: .84rem;
  font-weight: 650;
  color: var(--pub-accent);
}
.pub .mo-slider__mehr { text-decoration: none; }
.pub .mo-slider__mehr:hover { text-decoration: underline; }
.mo-slider__mehr svg {
  width: 15px;
  height: 15px;
  transition: transform .22s ease;
}
.mo-slider__mehr:hover svg,
.mo-slider__mehr:focus-visible svg { transform: translateX(3px); }

/* --- Pfeile --------------------------------------------------------------- */

.mo-slider__nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: var(--mo-sl-ratio);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(.15rem, 1.2vw, .6rem);
  /* Die Ebene selbst faengt nichts ab, nur die Schaltflaechen. */
  pointer-events: none;
  /* Ueber der laufenden Folie (z-index: 1), sonst verdeckt das Bild die Pfeile. */
  z-index: 2;
}

/* Grund wie die Kopfleiste (--pub-chrome): Ein durchscheinendes Weiss waere
   auf den hellen Grafiken nicht zu sehen. */
.mo-slider__pfeil {
  pointer-events: auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  color: var(--au-ink);
  background: var(--pub-chrome);
  border: 1px solid var(--au-line);
  border-radius: 50%;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px var(--au-shadow-card);
  transition: background-color .2s ease, border-color .2s ease,
              color .2s ease, transform .2s ease;
}
.mo-slider__pfeil:hover {
  color: var(--pub-accent);
  border-color: rgba(var(--pub-accent-rgb), .45);
  transform: scale(1.06);
}
.mo-slider__pfeil:active { transform: scale(.97); }
.mo-slider__pfeil svg { width: 22px; height: 22px; }

/* icon('chevron') zeigt nach rechts; fuer "zurueck" gespiegelt. */
.mo-slider__pfeil--zurueck svg { transform: scaleX(-1); }

.mo-slider__pfeil:focus-visible {
  outline: 2px solid var(--au-accent-soft);
  outline-offset: 3px;
}

/* --- Punkte --------------------------------------------------------------- */

/* Umbruch erlaubt: Zehn Punkte brauchen 423 px, ein Telefon im Hochformat
   bietet 358. */
.mo-slider__punkte {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .3rem;
  margin-top: clamp(1rem, 2.4vw, 1.4rem);
}

/* Die Schaltflaeche ist groesser als der Punkt darin - Daumenziel. */
.mo-slider__punkt {
  display: grid;
  place-items: center;
  width: 38px;
  height: 36px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.mo-slider__punkt span {
  display: block;
  width: 9px;
  height: 9px;
  background: var(--au-line-strong);
  border-radius: 999px;
  transition: width .3s ease, background-color .3s ease;
}
.mo-slider__punkt:hover span { background: var(--au-ink-muted); }

/* Laufende Folie: kurzer Strich in Akzentfarbe - auch ohne Farbsehen erkennbar. */
.mo-slider__punkt[aria-current="true"] span {
  width: 26px;
  background: var(--pub-accent);
}
.mo-slider__punkt:focus-visible {
  outline: 2px solid var(--au-accent-soft);
  outline-offset: 2px;
}

/* Ansage fuer Vorlesegeraete: vorhanden, aber nicht sichtbar. Kein
   display: none, das wuerde auch nicht vorgelesen. */
.mo-slider__ansage {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Kleine Bildschirme --------------------------------------------------- */

@media (max-width: 560px) {
  /* Pfeile kleiner, aber ueber der 44-px-Marke fuer den Daumen. */
  .mo-slider__pfeil { width: 44px; height: 44px; }
  .mo-slider__pfeil svg { width: 20px; height: 20px; }
  .mo-slider__satz { font-size: .89rem; }
}

/* --- Weniger Bewegung ----------------------------------------------------- */

/* Wechsel ohne Fahrt; den automatischen Wechsel schaltet public.js ab. */
@media (prefers-reduced-motion: reduce) {
  .mo-slider__folie,
  .mo-slider__punkt span,
  .mo-slider__pfeil,
  .mo-slider__mehr svg { transition: none; }
  .mo-slider__pfeil:hover,
  .mo-slider__pfeil:active { transform: none; }
  .mo-slider__mehr:hover svg,
  .mo-slider__mehr:focus-visible svg { transform: none; }
}

/* ---------------------------------------------------------------------------
   17. Vorschaubilder der Funktionsseiten
   --------------------------------------------------------------------------- */

/* --- Das Bild im Rahmen --------------------------------------------------- */

/* Die Schaltflaeche ist das Bild: keine eigene Gestalt, nur die Flaeche. */
.pub-shot__zoom {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
/* Der Fokusring liegt innen: Der Rahmen beschneidet, was ueber ihn
   hinausgeht, und ein Ring ausserhalb waere unsichtbar. */
.pub-shot__zoom:focus-visible {
  outline: 2px solid var(--au-accent-soft);
  outline-offset: -3px;
}
.pub-shot__zoom picture { display: block; }

/* Das Bild vollstaendig im Rahmen. aspect-ratio reserviert den Platz, bevor
   das Bild da ist; object-fit: contain sorgt dafuer, dass auch ein Bild in
   einem anderen Format ganz zu sehen waere - dann mit Rand, nie beschnitten. */
.pub-shot__bild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--pub-shot-ratio, 2 / 1);
  object-fit: contain;
}

/* Der Hinweis "Vergroessern" - unten rechts, erst unter der Maus oder bei
   Tastaturfokus. Auf Geraeten ohne Maus bleibt er weg: Wer tippt, sieht ihn
   ohnehin nicht vorher, und ein Abzeichen auf jedem Bild waere Unruhe. */
.pub-shot__hinweis {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .75rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--au-ink);
  background: var(--pub-chrome);
  border: 1px solid var(--au-line);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px var(--au-shadow-card);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.pub-shot__hinweis svg { width: 14px; height: 14px; }
@media (hover: hover) {
  .pub-shot__zoom:hover .pub-shot__hinweis { opacity: 1; transform: none; }
}
.pub-shot__zoom:focus-visible .pub-shot__hinweis { opacity: 1; transform: none; }

/* Im Seitenkopf: ein leiser Lichtschein hinter dem Rahmen - derselbe
   Gedanke wie .pub-hero__schein auf der Startseite, nur zurueckhaltender.
   Er gibt dem Bild einen Grund, ohne einen Kasten zu zeichnen. */
.pub-fn-hero__bild { position: relative; }
.pub-fn-hero__bild::before {
  content: '';
  position: absolute;
  inset: -18% 0;
  background: radial-gradient(ellipse closest-side at 50% 50%,
              rgba(var(--pub-accent-rgb), .18) 0%,
              rgba(var(--pub-accent-rgb), .07) 55%,
              transparent 100%);
  pointer-events: none;
  z-index: -1;
}

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

/* Zwei Grenzen, die kleinere gilt: 960 Pixel - breiter wird ein Vorschaubild
   nicht, sonst dominiert es die Seite -, und die Bildschirmhoehe: Auf einem
   quer gehaltenen Telefon darf das Bildfeld nicht hoeher sein als der
   Bildschirm. */
.pub-galerie {
  --pub-galerie-ratio: 2;
  position: relative;
  max-width: min(960px, calc(62vh * var(--pub-galerie-ratio)));
  margin: 0 auto;
}

/* Kein overflow: hidden am Fenster: Der Schatten des Rahmens ragt ueber ihn
   hinaus und wuerde abgeschnitten. */
.pub-galerie__fenster { position: relative; }

/* Alle Folien liegen im selben Rasterfeld uebereinander - die Bahn ist so
   hoch wie die hoechste, von Anfang an, und der Wechsel ist eine
   Ueberblendung. */
.pub-galerie__bahn {
  display: grid;
  touch-action: pan-y;
}
.pub-galerie__folie {
  grid-area: 1 / 1;
  opacity: 0;
  /* Die verdeckten Folien liegen ueber dem Bild, nur durchsichtig. Ohne
     diese Zeile schluckte die letzte von ihnen jeden Klick. */
  pointer-events: none;
  transition: opacity .55s ease, transform .4s ease;
}
.pub-galerie__folie.is-aktiv {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.pub-galerie.is-zieht .pub-galerie__folie { transition: none; }
.pub-galerie.is-zieht { cursor: grabbing; user-select: none; }

/* Die Pfeilebene liegt ueber dem Bildfeld - so hoch wie das Fenster, das
   nur die Bahn enthaelt; die Beschriftung steht ausserhalb. Die Ebene
   selbst faengt nichts ab, nur die beiden Schaltflaechen. */
.pub-galerie__nav {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(.15rem, 1.2vw, .6rem);
  pointer-events: none;
  z-index: 2;
}
/* Ist rechts und links Platz, stehen die Pfeile neben dem Bild statt
   darauf. 1140 Pixel Fensterbreite: Der Inhalt ist dann 1076 Pixel breit,
   das Bildfeld 960 - je 58 Pixel Luft, ein Pfeil braucht 46. */
@media (min-width: 1140px) {
  .pub-galerie__nav { left: -58px; right: -58px; padding: 0; }
}

/* Die Beschriftungen liegen genauso uebereinander wie die Folien; sichtbar
   ist die zur laufenden Folie. Der Platz ist der der laengsten - beim
   Wechsel springt nichts. */
.pub-galerie__texte {
  display: grid;
  margin-top: clamp(1.1rem, 2.6vw, 1.5rem);
  text-align: center;
}
.pub-galerie__text {
  grid-area: 1 / 1;
  margin: 0;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--au-ink-soft);
  opacity: 0;
  transition: opacity .45s ease;
}
.pub-galerie__text.is-aktiv { opacity: 1; }
.pub-galerie__text strong {
  display: block;
  margin-bottom: .2rem;
  font-size: 1rem;
  font-weight: 650;
  color: var(--au-ink);
}
.pub-galerie__text span {
  display: block;
  max-width: 64ch;
  margin: 0 auto;
}

/* --- Grosse Ansicht ------------------------------------------------------- */

/* Das <dialog> selbst ist der Grund: bildschirmfuellend, halbdurchsichtig. */
.pub-lb {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--au-ink);
  background: var(--pub-lb-overlay);
  /* Die Seite bleibt dahinter zu sehen, aber weichgezeichnet: Eine grosse
     Ueberschrift, die scharf durch den Grund scheint, laeuft sonst in die
     Beschriftung unter dem Bild hinein. */
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  overflow: auto;
  /* Waagerechtes Wischen gehoert dem Skript (es blaettert), senkrecht und
     Zusammenziehen bleiben beim Browser. Ohne diese Angabe bricht er die
     Geste als Scrollversuch ab, und ein pointerup kommt nie an. */
  touch-action: pan-y pinch-zoom;
  opacity: 0;
  transition: opacity .25s ease;
}
.pub-lb::backdrop { background: transparent; }
.pub-lb[open] { display: grid; }
.pub-lb.is-offen { opacity: 1; }

/* Die Buehne fuellt das Fenster aus und stellt das Bild in die Mitte. Oben
   bleibt Luft fuer die Schaltflaeche zum Schliessen. */
.pub-lb__buehne {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100%;
  padding: clamp(3.8rem, 8vh, 4.8rem) clamp(1rem, 5vw, 4.5rem) clamp(1.5rem, 4vh, 2.5rem);
}

/* Beim Oeffnen kommt das Bild ein Stueck aus der Tiefe, beim Schliessen
   geht es dorthin zurueck - kurz und weich, keine Show. */
.pub-lb__figur {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 100%;
  margin: 0;
  opacity: 0;
  transform: scale(.965) translateY(10px);
  transition: opacity .25s ease, transform .3s cubic-bezier(.2, .7, .2, 1);
}
.pub-lb.is-offen .pub-lb__figur { opacity: 1; transform: none; }

/* Breite des Rahmens: die kleinste von drei Grenzen - 92 % der Fensterbreite,
   1500 Pixel, und was die Hoehe hergibt. */
.pub-shot--lb {
  --pub-lb-r: 2;
  width: min(92vw, 1500px, calc((90vh - 9.5rem) * var(--pub-lb-r)));
  max-width: 100%;
  box-shadow: 0 40px 90px -30px var(--au-shadow-deep);
}
.pub-lb__bild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--pub-shot-ratio, 2 / 1);
  object-fit: contain;
  opacity: 0;
  transition: opacity .3s ease;
}
.pub-lb__bild.is-geladen { opacity: 1; }

/* Solange die grosse Fassung laedt, dreht sich in der Mitte des Rahmens ein
   Ring. Meist ist er nur einen Augenblick zu sehen - das kleine Bild ist
   schon da, das grosse folgt aus dem Zwischenspeicher. */
.pub-shot--lb.is-laedt::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 2px solid var(--au-line-strong);
  border-top-color: var(--pub-accent);
  border-radius: 50%;
  animation: pub-lb-dreht .8s linear infinite;
}
@keyframes pub-lb-dreht { to { transform: rotate(360deg); } }

/* Beschriftung: Zaehler, Titel, ein Satz. */
.pub-lb__text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .3rem .65rem;
  max-width: 72ch;
  padding: 0 .5rem;
  font-size: .9rem;
  line-height: 1.55;
  text-align: center;
  color: var(--au-ink-soft);
}
.pub-lb__zaehler {
  padding: .15rem .55rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--pub-accent);
  background: rgba(var(--pub-accent-rgb), .08);
  border: 1px solid rgba(var(--pub-accent-rgb), .22);
  border-radius: 999px;
}
.pub-lb__zaehler:empty { display: none; }
.pub-lb__titel { font-weight: 650; color: var(--au-ink); }
.pub-lb__satz { flex-basis: 100%; }
.pub-lb__satz:empty { display: none; }

/* Schliessen und Blaettern: dieselben Glasknoepfe wie die Pfeile des Sliders
   (.mo-slider__pfeil), hier nur an ihren Platz gesetzt. */
.pub-lb__schliessen,
.pub-lb__pfeil {
  position: fixed;
  z-index: 3;
}
.pub-lb__schliessen {
  top: clamp(.8rem, 2vw, 1.4rem);
  right: clamp(.8rem, 2vw, 1.4rem);
}
.pub-lb__pfeil { top: calc(50% - 23px); }
.pub-lb__pfeil--zurueck { left: clamp(.6rem, 2vw, 1.4rem); }
.pub-lb__pfeil--vor     { right: clamp(.6rem, 2vw, 1.4rem); }
/* .mo-slider__pfeil setzt display: grid und wuerde damit das hidden-Merkmal
   ueberstimmen. Bei einem einzigen Bild gibt es nichts zu blaettern. */
.pub-lb__pfeil[hidden] { display: none; }

/* Solange die grosse Ansicht offen ist, scrollt die Seite dahinter nicht. */
html.pub-lb-offen,
html.pub-lb-offen body { overflow: hidden; }
html.pub-lb-offen body { padding-right: var(--pub-lb-luecke, 0px); }

/* --- Kleine Bildschirme --------------------------------------------------- */

@media (max-width: 560px) {
  .pub-shot__hinweis { display: none; }
  .pub-lb__buehne { padding: 4.2rem .75rem 1.5rem; }
  .pub-shot--lb { width: min(96vw, calc((90vh - 9.5rem) * var(--pub-lb-r))); }
  .pub-lb__text { font-size: .84rem; }
  .pub-lb__pfeil { top: calc(50% - 22px); }
}

/* --- Weniger Bewegung ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .pub-shot__hinweis,
  .pub-galerie__folie,
  .pub-galerie__text,
  .pub-lb,
  .pub-lb__figur,
  .pub-lb__bild { transition: none; }
  .pub-lb__figur { transform: none; }
}