img[src*="go-robinson/icons/"] {
    width: 16px !important;
    height: 16px !important;
    display: inline-block !Important;
}

#tx-srfeuserregister-pi1-fe_users_form p.tx-srfeuserregister-pi1-terms {
    display: inline-block;
}
#tx-srfeuserregister-pi1-fe_users_form input.tx-srfeuserregister-pi1-checkbox {
    float: left;
    margin-top: 4px;
}

/* Form - Babyset */

.babyset .controls__item .fieldwrap--marker,
.babyset .controls__item .fieldwrap--ergaenzungsset,
.babyset .controls__item .fieldwrap--buggy,
.babyset .controls__item .fieldwrap--hinweis {
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
	margin-left: 0;
	margin-right: 0;
}

/* L47: Überschrift "Datenschutz *" über der Einwilligung sichtbar. Seit 24.10.2026 ist sie die legend des fieldset
   (EXT:form Checkbox.fluid.html, Ferientester), die Regel von styles.css (.fieldwrap--dsgvo > label ausblenden) greift
   nicht mehr; die Gegenregel hier ist entfallen. */

/* DCE - Verkaufsteam NEU */

.vertriebsteamneu {
	color: #fff;
	margin-bottom: 45px;
}

.vertriebsteamneu--link {
	color: #fff;
}

.vertriebsteamneu--link:hover,
.vertriebsteamneu--link:active,
.vertriebsteamneu--link:visited,
.vertriebsteamneu--link:focus {
	text-decoration: none;
	color: #fff;
}

.vertriebsteamneu--inner {
	padding: 30px;
	background: #95b63d;
}

.vertriebsteamneu--image {
	margin-bottom: 15px;
}

.vertriebsteamneu--imageimg {
	max-height: 279.283px;
}

.vertriebsteamneu--headline {
	font-family: news-gothic-bold;
	font-weight: 700;
	line-height: 1.1;
	color: inherit;
	margin-top: 22px;
	margin-bottom: 11px;
	font-size: 2.2rem;
}

.vertriebsteamneu--text {
	margin-bottom: 10px;
}

.vertriebsteamneu--headline,
.vertriebsteamneu--text,
.vertriebsteamneu--text a,
.vertriebsteamneu--phone,
.vertriebsteamneu--phone a,
.vertriebsteamneu--email,
.vertriebsteamneu--email a {
	color: inherit;
}

/* ======================================== Fonts */

@font-face {
    font-family: 'Cera ROB';
    src: url('CeraROB-MediumItalic.woff2') format('woff2'),
        url('CeraROB-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Cera ROB';
    src: url('CeraROB-Medium.woff2') format('woff2'),
        url('CeraROB-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Cera ROB';
    src: url('CeraROB-Bold.woff2') format('woff2'),
        url('CeraROB-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Cera ROB';
    src: url('CeraROB-RegularItalic.woff2') format('woff2'),
        url('CeraROB-RegularItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Cera ROB';
    src: url('CeraROB-Regular.woff2') format('woff2'),
        url('CeraROB-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Cera ROB';
    src: url('CeraROB-BoldItalic.woff2') format('woff2'),
        url('CeraROB-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

/* ======================================== om cookie concent manager */

.om-cookie-panel,
.om-cookie-panel.active {
  border: 0;
  background: rgba(0,71,171,0.9);
}

.om-cookie-panel.active a,
.om-cookie-panel.active p,
.om-cookie-panel.active label,
.om-cookie-panel a,
.om-cookie-panel p,
.om-cookie-panel label {
  color: #fff;
}

.om-cookie-panel .cookie-panel__button,
.om-cookie-panel.active .cookie-panel__button {
    border-radius: 0;
    background-color: #00B1AA;
    border: 2px solid #00B1AA;
}

.om-cookie-panel .cookie-panel__button--color--green,
.om-cookie-panel.active .cookie-panel__button--color--green {
  background-color: #00B1AA;
}

.om-cookie-panel .cookie-panel__button + .cookie-panel__button,
.om-cookie-panel.active .cookie-panel__button + .cookie-panel__button {
  border: 2px solid #00B1AA;
    background-color: transparent;
}

.om-cookie-panel.active .cookie-panel__checkbox--state-inactiv + label {
  color: #777;
}

.om-cookie-info table th, .om-cookie-info table td {
  border: 1px solid #000;
}

@media (min-width: 1024px) {
  .om-cookie-panel.active {
      transform: translateY(0) translateX(0);
      right: 0;
      left: unset;
        width: 33.333333vw;
  }

  .om-cookie-panel {
    width: 33.333333vw;
    right: 0;
      left: unset;
      transform: translateY(100%) translateX(0);
  }

  .om-cookie-panel.active .cookie-panel__control {
      display: flex;
      flex-direction: column;
  }

  .om-cookie-panel.active .cookie-panel__button {
      margin: 0 0 10px;
      border-radius: 0;
      background-color: #00B1AA;
      border: 2px solid #00B1AA;
  }

  .om-cookie-panel.active .cookie-panel__button--color--green {
    background-color: #00B1AA;
  }

  .om-cookie-panel.active .cookie-panel__button + .cookie-panel__button {
    border: 2px solid #00B1AA;
      background-color: transparent;
  }
}
/* Login form: styles.css sets #pass to 215px/330px and pushes its label down between 768 and 1199 px,
   the password field then sits lower and narrower than the e-mail field (also on the 8.7 site).
   Both fields full column width on the same line at all widths. */
.felogin.felogin--login .form-group label { float: none; display: block; margin-top: 0; height: auto; min-height: 0; }
.felogin.felogin--login #user,
.felogin.felogin--login #pass { width: 100%; }
/* styles.css stretches only the password label to 61px below 1200 px */
.body--startpage .tx-felogin-pi1 form .col-sm-5 + .col-sm-5 label { min-height: 0; }
/* login button on the field line (was aligned to the stretched password label) */
@media (min-width: 992px) and (max-width: 1199px) {
  .body--startpage .tx-felogin-pi1 .felogin .pushbutton { margin-top: 15px; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .body--startpage .tx-felogin-pi1 .felogin .pushbutton { margin-top: -9px; }
}

/* Login page: buttons "Registrieren" and "Zurücksetzen" on one line, independent of the text length */
@media (min-width: 992px) {
  .body--startpage .section__content-row { display: flex; }
  .body--startpage .section__content-row > .section__content { display: flex; flex-direction: column; }
  .body--startpage .section__content-row > .section__content > .frame-type-robgo_pushbutton:last-child { margin-top: auto; }
}

/* ======================================== Layout-Korrekturen (Altfehler der 8.7-Seite, Prüfung 22.10.2026) */

/* L1 News-Teaser (Startseite eingeloggt, /news/aktuelles/): "Artikel öffnen" stand je nach Titellänge auf
   unterschiedlicher Höhe, Bilder unterschiedlich hoch (nicht quadratische Vorlagen). Link ans Ende der
   gleich hohen Kachel, Bilder quadratisch beschnitten. */
.news-list-view > .article { display: flex; flex-direction: column; }
.news-list-view > .article > .article__wrapper { flex: 1 1 auto; display: flex; flex-direction: column; }
.news-list-view > .article > .article__wrapper > .article__more { margin-top: auto; }
.news-list-view > .article > .article__media img { aspect-ratio: 1 / 1; object-fit: cover; height: auto; }

/* L2 Einspaltige Section mit "Hintergrund volle Breite": die einzige Hintergrundspalte bekam padding-right
   (für zweispaltige gedacht) zusätzlich zu 100 % Breite -> Seite 15-135 px breiter als das Fenster,
   seitlich scrollbar (Gruppenanfragen, Angebotsflyer, Familie u. a. ab 992 px). */
section.section--expand-bg.section--static-fg .section__background-col:only-child { box-sizing: border-box; }

/* L3 Akkordeon "plusminus" (Datenschutz, Unsere Philosophie): zusätzlich zum Plus/Minus-Symbol links stand
   rechts ein zweites Font-Awesome-Plus. Wie bei allen anderen Akkordeons nur das Symbol links. */
.panel-group.panel-group--plusminus .panel-title .accordion-toggle .fa { display: none; }

/* L4 Text mit Bild daneben (textpic/textmedia "im Text rechts/links") unter 768 px: das Bild blieb
   gefloatet, der Text bekam nur den Rest der Spalte (0-55 px) und war unsichtbar bzw. ein Wort je Zeile
   (Pressemitteilungen, Clubseiten u. a.). Bild über den Text. */
@media (max-width: 767px) {
  .ce-textpic.ce-intext.ce-right .ce-gallery,
  .ce-textpic.ce-intext.ce-left .ce-gallery { float: none; margin-left: 0; margin-right: 0; }
}

/* L5 Lange Wörter, URLs und Mailadressen ragten aus der Spalte (Personenboxen auf allen Clubseiten,
   Nachhaltigkeit, Boa Vista, Noonu, TOP50). Umbrechen statt überlaufen. */
.ce-bodytext, .frame-type-text, .frame-type-textpic, .frame-type-textmedia,
.person__email, .person__phone { overflow-wrap: break-word; }
.person__email a, .person__phone a { overflow-wrap: anywhere; }
/* styles.css: margin-left 28px + width 100 % -> Box 28 px breiter als die Spalte */
.person__email, .person__phone { width: auto; }

/* L6 Pushbuttons mit langer Beschriftung liefen über die Spalte hinaus (Events, Golf, Social Media,
   Boa Vista, Clubsong, mobil auch über den Bildschirmrand). Beschriftung darf umbrechen. */
.pushbutton__btn { white-space: normal; max-width: 100%; }

/* L7 Formular-Überschriften (Kontakt, Babyset, TOP50-Antrag) haben 56 px und ragten unter 768 px über den
   Rand ("Kontaktformular", "Getränkeguthaben:"). Mobil in Größe der Seitenüberschrift. */
@media (max-width: 767px) {
  .frame-type-form_formframework h2 { font-size: 2rem; }
}

/* L8 Große Kopfzeile "align-left-toggle-sub" (Sport, Essen & Trinken, Events, Familie ...): 48 px,
   "SPORTPARADIES" ragte mobil aus der farbigen Box. */
@media (max-width: 767px) {
  .frame-layout-align-left-toggle-sub header h2,
  .frame-layout-align-left-toggle-sub header h3 { font-size: 2.25rem; }
}

/* L9 Clubsong-Buttons mobil zweispaltig, Titel überlappten den Nachbarbutton. Unter 768 px einspaltig. */
@media (max-width: 767px) {
  .clubsong__link.col-xs-6 { width: 100%; }
}

/* L10 Werbemittel-Teaser (Startseite eingeloggt) hat feste Höhe 555 px; bei voller Spaltenbreite
   (768-991 px) ragte das Bild darunter heraus und überdeckte "WICHTIGE LINKS". */
.teasercontainer { overflow: hidden; }

/* L11 Zweispaltige Sections mit col-xs-5/6/7 (Esquinzo, Ierapetra, Fieberbrunn, Soma Bay, Noonu) blieben
   unter 768 px nebeneinander: Text 160 px schmal, Personenbox ragte aus dem Bild. Mobil untereinander. */
@media (max-width: 767px) {
  .section__content-row > .section__content[class*="col-xs-"]:not(.col-xs-1):not(.col-xs-11):not(.col-xs-12) { width: 100%; }
}

/* L12/L50 Newsletter-Formular: Formular, Absätze, Zeilen und Spalten ohne eigenen Versatz, damit alles
   bündig mit dem Text darüber steht (vorher -10 px Rand und 10 px Absatz-Einzug). */
.form-horizontal.newsletter { margin-left: 0; margin-right: 0; }
.form-horizontal.newsletter > p { padding-left: 0; padding-right: 0; }

/* L13 "Bearbeitete Benutzerdaten speichern" (Meine Daten) war mobil 442 px breit. */
.tx-srfeuserregister-pi1 input[type="submit"] { max-width: 100%; white-space: normal; }

/* L14 Counterhilfe: Clubbuttons ab 1200 px abgeschnitten ("ROBINSON ALPENROSE Z..."). Weniger
   Innenabstand, Text ist ohnehin zentriert. */
.counterhilfebuttons .counterhilfebuttons--button-anchor { padding-left: 15px; padding-right: 15px; }

/* L15 Startseite (anonym): Infokreise im Schachbrett (2x2 bis 991 px) standen versetzt, weil die Spalten
   je nach Textlänge unterschiedlich hoch sind. Zweite Reihe unter der höheren Spalte beginnen. */
@media (max-width: 991px) {
  .row > .col-xs-6:nth-child(odd):has(.infocircle) { clear: left; }
}

/* L16 Leere Sections (alle Kindelemente gelöscht oder ausgeblendet) erzeugten einen leeren farbigen
   Block von 200 px (Banner pro Club). */
section:has(> .section__content-container):not(:has(.section__content > *)) { display: none; }

/* L17 Infokreis-Titel "Verkaufs- & Marketingunterstützung" (Startseite anonym, 390 px) ragte aus der
   halben Spalte, Seite seitlich scrollbar. Silbentrennung nur für Wörter ab 14 Zeichen (html lang=de). */
.infocircle__title { hyphens: auto; hyphenate-limit-chars: 14 6 6; overflow-wrap: break-word; }

/* L18 DCE "smartclue" (Golf, "Schon gewusst?!"): Bild ohne max-width, bei 992-1199 px 26 px breiter als
   die Spalte. */
.smartclue__image img { max-width: 100%; height: auto; }

/* L8b wie L8, bei 992-1199 px ist die farbige Spalte zu schmal für "SPORTPARADIES" in 48 px */
@media (min-width: 992px) and (max-width: 1199px) {
  .frame-layout-align-left-toggle-sub header h2,
  .frame-layout-align-left-toggle-sub header h3 { font-size: 2.6rem; }
}

/* L7b Formular-Überschriften uneinheitlich: Kontakt/Babyset 400, TOP50-Antrag 700 (nur Bootstrap-Default). */
.frame-type-form_formframework h2 { font-weight: 400; }

/* L20 Personen-/"Schon gewusst?!"-Porträts (380 px Originale) bei 768-991 px auf volle Spaltenbreite
   (bis 725 px) hochskaliert, unscharf und bildschirmfüllend. Höchstens Originalgröße, zentriert. */
@media (min-width: 768px) and (max-width: 991px) {
  .person__image img, .smartclue__image img { max-width: 380px; }
  .person__image, .smartclue__image { text-align: center; }
}

/* L21 Titel auf Kopfbildern (z.B. "Meine Daten") je nach Bild schlecht lesbar. Wie robinson.com: ab 768 px groß
   (40 px, ab 1440 px 72 px) mit leichtem Schatten auf dem Bild, das dafür leicht abgedunkelt wird (Verlauf wie
   m3-stage__background--darken), darunter unter dem Bild in Dunkelblau. */
@media (min-width: 768px) {
  .website-header--static:has(.website-header__title) .website-header__image { position: relative; }
  .website-header--static:has(.website-header__title) .website-header__image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(rgba(0, 0, 0, .45) 0, rgba(0, 0, 0, .2) 40%);
    opacity: .5;
  }
  .website-header--static .website-header__title {
    padding: 0 15px;
    font-size: clamp(40px, 5vw, 72px);
    font-weight: 500;
    text-shadow: -2px 1px 2px rgba(30, 30, 30, .5);
  }
}
@media (max-width: 767px) {
  .website-header--static .website-header__title,
  .website-header--static .website-header__title.website-header__tc--blue {
    position: static;
    transform: none;
    margin: 20px 15px 15px;
    font-size: 28px;
    font-weight: 500;
    color: #0a4169;
  }
}

/* L22 Abstand Kopfbild – erster Abschnitt: Sections haben oben 70–100 px Innenabstand, direkt unter dem Kopfbild
   wirkte das wie eine Lücke (z.B. Counterhilfe 122 px, Aktuelles, Pressemitteilungen 100 px, Sport und Clubs mit
   Slider-Kopfbild 70 px). */
.frame-type-dce_dceuid3 + section,
.frame-type-dce_dceuid11 + section { padding-top: 40px; }
@media (max-width: 767px) {
  /* mobil haben die Spalten zusätzlich 30 px oben (für untereinander stehende Spalten), die erste braucht sie hier nicht */
  .frame-type-dce_dceuid3 + section .section__content-row > .section__content:first-child,
  .frame-type-dce_dceuid11 + section .section__content-row > .section__content:first-child { padding-top: 0; }
}

/* L23 Kopfbilder und Slider in voller Fensterbreite wie robinson.com (bisher in der 1170-px-Spalte mit grauem Rand).
   Originale sind 1920 px breit; ab 1476 px Breite höchstens 600 px hoch (object-fit beschneidet oben und unten). */
.frame-type-dce_dceuid3 > .tx-dce-pi1 > .container,
.frame-type-dce_dceuid4 > .tx-dce-pi1 > .container,
.frame-type-dce_dceuid11 > .tx-dce-pi1 > .container {
  width: auto;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.frame-type-dce_dceuid3 .website-header__image img,
.frame-type-dce_dceuid4 .website-header__image img,
.frame-type-dce_dceuid11 .website-header__image img {
  width: 100%;
  max-height: 600px;
  object-fit: cover;
}
/* Login-Startseite: das Bild ragte mit negativem Abstand in den ersten Abschnitt (Einzug in der Spalte), bei voller
   Breite klebte die Überschrift darunter am Bild */
body.body--startpage .frame-type-dce_dceuid3 .website-header__image img { width: 100%; margin-bottom: 0; }

/* L24 Einheitlicher Seitenanfang unter dem Kopfbild: die erste Überschrift sieht immer aus wie die Seiten-H1
   (Versalien, 2rem, normal). Seit L21 die doppelte Seitenüberschrift entfernt, begann der Inhalt mal mit einer H2
   (Marketing-Ideen), einer fetten H1 in grauen Abschnitten (airtours) oder einer Fließtext-H3 (Counterhilfe). */
:is(.frame-type-dce_dceuid3, .frame-type-dce_dceuid11) + section .section__content-row > .section__content:first-child > .frame:first-child > header:first-child > :is(h1, h2, h3):first-child,
:is(.frame-type-dce_dceuid3, .frame-type-dce_dceuid11) + section .section__content-row > .section__content:first-child > .frame:first-child > :is(h1, h2, h3):first-child {
  margin-top: 0;
  font-size: 2rem;
  font-weight: normal;
  line-height: 1.1;
  text-transform: uppercase;
  color: #32374b;
}
@media (max-width: 991px) {
  :is(.frame-type-dce_dceuid3, .frame-type-dce_dceuid11) + section .section__content-row > .section__content:first-child > .frame:first-child > header:first-child > :is(h1, h2, h3):first-child,
  :is(.frame-type-dce_dceuid3, .frame-type-dce_dceuid11) + section .section__content-row > .section__content:first-child > .frame:first-child > :is(h1, h2, h3):first-child { font-size: 6vw; }
}
/* Unterzeile als eigenes Element (TOP300, TOP20, Banner pro Club, Werbemittelshop) stand 25 px unter der H1,
   im selben Element 11 px: gleicher Abstand */
.frame-type-header:has(> header > h1:only-child):has(+ .frame > header:first-child > h2:first-child) > header {
  margin-bottom: 0;
  padding-bottom: 0;
}
/* Überschriften im Fließtext (H3, nur Counterhilfe und Startseite) waren 35 px groß: wie die übrigen Zwischenüberschriften */
:is(.frame-type-text, .frame-type-textpic, .frame-type-textmedia) h3:not(header h3) { font-size: 1.5rem; font-weight: bold; }

/* L25 Farbige Spalten ("Hintergrund volle Breite", z.B. grüne Karte "Schon gewusst?!") liefen bis zum Fensterrand:
   ab 768 px in Inhaltsbreite wie der Text, farbige Spalten innen mit etwas mehr Abstand */
@media (min-width: 768px) {
  section.section--expand-bg.section--static-fg .section__background-container { left: 0; right: 0; width: 750px; margin: 0 auto; }
  section.section--expand-bg.section--static-fg .section__background-col,
  section.section--expand-bg.section--static-fg .section__background-col:first-child,
  section.section--expand-bg.section--static-fg .section__background-col:last-child {
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
  }
  section.section--expand-bg .section__content:is(.section__col--yellow, .section__col--blue, .section__col--green, .section__col--red, .section__col--aqua, .section__col--black, .section__col--primary, .section__col--secondary) {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (min-width: 992px) {
  section.section--expand-bg.section--static-fg .section__background-container { width: 970px; }
}
@media (min-width: 1200px) {
  section.section--expand-bg.section--static-fg .section__background-container { width: 1170px; }
}

/* L27 Aufzählungen in Texten wie auf robinson.com (z.B. /de/de/events/): blaues Häkchen statt Strich-Grafik
   (list.png), 38 px Einzug, ohne zusätzlichen Abstand zwischen den Punkten. Häkchen per CSS (keine Icon-Schrift).
   Auch im Text der News-Detailseite (die „| “-Listen der News sind seit der Go-live-Prüfung echte Listen). */
:is(.frame-type-text, .frame-type-textpic, .frame-type-textmedia, .news-single .article__body) ul li {
  position: relative;
  background: none;
  padding-left: 38px;
  margin-bottom: 0;
}
:is(.frame-type-text, .frame-type-textpic, .frame-type-textmedia, .news-single .article__body) ul li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .5em;
  width: 17px;
  height: 8px;
  border-left: 2px solid #0047ab;
  border-bottom: 2px solid #0047ab;
  transform: rotate(-45deg);
}
:is(.section__col--yellow, .section__col--blue, .section__col--green, .section__col--red, .section__col--aqua, .section__col--black, .section__col--primary, .section__col--secondary) :is(.frame-type-text, .frame-type-textpic, .frame-type-textmedia) ul li::before { border-color: currentColor; }

/* L28 News-Liste (Aktuelles, Startseite) als Karten statt runder Bilder: weiße Karte mit Schatten, Bild 16:10
   oben, Text linksbündig (Datum über dem Titel), "Artikel öffnen" unten. Raster 1/2/3 Spalten statt Floats. */
.news-list-view { display: grid; grid-template-columns: 1fr; gap: 30px; margin-left: 0; margin-right: 0; }
@media (min-width: 768px) { .news-list-view { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .news-list-view { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.news-list-view::before,
.news-list-view::after,
.news-list-view > .news-clear,
.news-list-view > .page-navigation:not(:has(li)) { display: none; }
.news-list-view > :not(.article) { grid-column: 1 / -1; }
.news-list-view > .article {
  float: none;
  width: auto;
  margin: 0 !important; /* styles.css: .article { margin-bottom: 7.5vh !important } */
  padding: 0;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(10, 65, 105, .1);
  overflow: hidden;
}
.news-list-view > .article > .article__media { padding: 0; margin: 0; }
.news-list-view > .article > .article__media img { border-radius: 0; aspect-ratio: 16 / 10; width: 100%; }
.news-list-view > .article > .article__wrapper { text-align: left; padding: 20px 24px 24px; }
.news-list-view .article__date { order: -1; margin: 0 0 6px; font-size: .875rem; }
.news-list-view .article__headline { min-height: 0; margin: 0 0 10px; font-size: 1.25rem; font-weight: bold; line-height: 1.25; }
.news-list-view .article__teaser { height: auto; margin-bottom: 16px; font-size: 1rem; }
.news-list-view .article__teaser p:last-child { margin-bottom: 0; }
.news-list-view .article__more { background-position: 0 5px; padding-left: 26px; }

/* L29 Blau nur für Links und Buttons: Hervorhebungen (strong) waren überall blau (#0047ab), wie robinson.com jetzt
   fett in der Textfarbe (in Links bleibt die Linkfarbe, auf farbigen Karten die Kartenschrift) */
.main-content strong,
.main-content b { color: inherit; }
/* Länder in der Clubliste (/clubs/) sind Überschriften, keine Links */
.clublist .clublist__header { color: #32374b; }

/* L30 Einzeln stehende Links (nicht im Fließtext) als Buttons, im Migrationsskript als <p class="link-button"> mit
   .btn markiert. Mehrere hintereinander stehen nebeneinander und brechen um, lange Texte umbrechen im Button. */
p.link-button { display: inline-block; margin: 0 10px 10px 0; vertical-align: top; }
p.link-button + :not(.link-button) { margin-top: 10px; }
/* wie die Pushbuttons (.pushbutton__btn): 15/35 px, Versalien, 5 px Radius, ohne Rahmen */
p.link-button > .btn {
  padding: 15px 35px;
  border: 0;
  border-radius: 5px;
  text-transform: uppercase;
  white-space: normal;
  text-decoration: none;
}
@media (max-width: 767px) { p.link-button > .btn { padding: 12px 20px; } }
/* Button-Link aus dem Editor (Stil „Button-Link“ auf dem Absatz, der Link selbst ohne Klasse) sieht genauso aus */
p.link-button > a:not(.btn) {
  display: inline-block;
  padding: 15px 35px;
  border-radius: 5px;
  background-color: #0a4169;
  color: #fff;
  font-size: 16px;
  line-height: 1.42857;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .2s, box-shadow .2s;
}
p.link-button > a:not(.btn):is(:hover, :focus, :active) { box-shadow: inset 0 0 0 100vmax rgba(60, 60, 60, .575); color: #fff; }
@media (max-width: 767px) { p.link-button > a:not(.btn) { padding: 12px 20px; } }

/* L33 Kopfzeile (eingeloggt): Rang und Status rechtsbündig in einer Zeile mit gleichen Abständen. Seit 24.10.2026
   ohne Zweispalter: die beiden Plugins liegen direkt im Ordner "Rang und Status", lib.navigationComponents legt
   .navbar__rankrow um sie (vorher Bootstrap-Zeile des Containers mit .col-sm-4/.col-sm-8) */
.navbar__components > .navbar__rankrow {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px 40px;
  margin-left: 0;
  margin-right: 0;
}
@media (max-width: 1199px) {
  .navbar__components > .navbar__rankrow { gap: 10px 24px; }
  .agencymanager__ranking.ranking,
  .agencymanager__top-state.top-state,
  .agencymanager__top-link .top-link { font-size: 13px; margin-left: 24px; }
}
/* Logo 320 x 87 (statt 345 x 94), blaue Navigation 70 statt 100 px */
@media (min-width: 1200px) {
  body:not(.body--startpage) .navbar__brand .navbar__logo.navbar__logo--sm { width: 320px; height: 87px; }
}
@media (min-width: 992px) {
  body:has(.agencymanager__ranking) .navbar__brand { position: relative; } /* nur eingeloggt (mit Rang-Zeile) */
  .navbar__itemwrapper { position: relative; }
}
/* 992-1199 px: Logo kleiner, sonst stößt es an die Rang-Zeile */
@media (min-width: 992px) and (max-width: 1199px) {
  body:not(.body--startpage) .navbar__brand .navbar__logo.navbar__logo--sm { width: 280px; height: 76px; }
}
@media (min-width: 768px) {
  .navbar__itemwrapper,
  .navbar__items { height: 70px; }
}
/* mobil: 50 px Abstand über dem Inhalt waren für eine fixierte Navigation gedacht, die Leiste scrollt aber mit */
@media (max-width: 767px) { div[canvas="container"] .main-container { padding-top: 0; } }
/* Rang und Status je so breit wie ihr Inhalt */
.navbar__components > .navbar__rankrow > .frame { flex: 0 0 auto; padding: 0; }
.agencymanager__ranking.ranking,
.agencymanager__top-state.top-state { display: flex; align-items: center; text-transform: uppercase; font-size: 14px; letter-spacing: .02em; }
.ranking .ranking__value,
.top-state .top-state__value { width: auto; min-width: 52px; margin-left: 10px; padding: 5px 12px; text-align: center; font-size: 16px; }
/* Wertkästen gerundet wie die Buttons (5 px), Rang und TOP-Status grau (nur der Button "Eure Vorteile" bleibt dunkelblau) */
.ranking .ranking__value,
.top-state .top-state__value,
.agencymanager__top-link .top-link { border-radius: 5px; }
.ranking .ranking__value,
.top-state .top-state__value { background-color: #f2f4f7; color: #4a5060; }
.agencymanager__top-link .top-link { margin-left: 40px; padding: 6px 16px; text-transform: uppercase; font-size: 14px; } /* gleicher Abstand wie zwischen Rang und TOP Status */
@media (max-width: 1199px) { .agencymanager__top-link .top-link { margin-left: 24px; } .agencymanager__top-state.top-state { margin-left: 0; } }

/* L34 Linklisten (Vertriebsupdate & ROB-MAG): Pfeil wie bei "Artikel öffnen" statt Häkchen, etwas Abstand je Eintrag */
:is(.frame-type-text, .frame-type-textpic, .frame-type-textmedia) ul.link-list li { padding-left: 30px; margin-bottom: 8px; }
:is(.frame-type-text, .frame-type-textpic, .frame-type-textmedia) ul.link-list li::before {
  top: .3em;
  left: 0;
  width: 18px;
  height: 18px;
  border: 0;
  transform: none;
  background: url("/assets/go-robinson/images/NEU-CI-2K23/Icons/robinson-go-icons-arrow-right.svg") no-repeat center / contain;
}

/* L35 Footer dezenter: untere Leiste mit kleiner grauer Schrift (Hintergrund und Newsletter-Leiste darüber wie bisher) */
/* L62 Newsletter-Leiste im Footer (Wunsch 23.10.2026): Text kleiner (20 px medium statt 28 px fett), Umschlag kleiner
   (36 statt 63 px), Umschlag bündig mit dem Inhalt darüber, Button direkt hinter dem Text; mobil Button unter dem Text */
footer.footer .newsletter { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 16px 32px; margin: 0 0 0 5px; padding: 0; } /* +5 px: the column has only 10 px padding on the left */
footer.footer .newsletter::before, footer.footer .newsletter::after { display: none; } /* clearfix pseudo elements would be flex items */
footer.footer .newsletter__content .newletter__icon { display: none; } /* empty, the envelope is the background of .newsletter__content */
footer.footer .newsletter__content { float: none; flex: 0 1 auto; width: auto; min-height: 36px; padding: 0 0 0 52px; background-size: 36px auto; background-position: left center; }
footer.footer .newsletter__content .newsletter__title { float: none; margin: 0; font-size: 20px; font-weight: 500; line-height: 1.3; }
footer.footer .newsletter__more { float: none; flex: none; width: auto; max-width: none; padding: 0; }
footer.footer .newsletter__more a { float: none; margin: 0; }
@media (max-width: 767px) { footer.footer .newsletter__content .newsletter__title { font-size: 18px; } }
/* mobile footer bar (wish 23.10.2026): copyright on its own line, the links below in a wrapping row, everything centred
   (the copyright wrapped onto three lines next to the links) */
@media (max-width: 767px) {
  footer.footer .footer__brand .col-xs-12 { flex-direction: column; align-items: center; gap: 8px; text-align: center; }
  footer.footer .footer__brand .pull-left { float: none !important; }
  footer.footer .footer__brand .col-xs-12 > ul { margin: 0; padding: 0; }
  footer.footer .footer__brand ul > li .sub { float: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin: 0; padding: 0; }
  footer.footer .footer__brand ul > li .sub li { float: none; width: auto; margin: 0; padding: 0; }
  footer.footer .footer__brand ul > li .sub li::before { display: none; } /* 50 px spacer of the desktop row */
  footer.footer .footer__brand ul > li .sub li a { display: inline-block; padding: 4px 0; } /* larger tap target */
}
footer.footer .footer__brand { padding: 18px 0; } /* Hintergrund wie bisher grau (#e1e6ea), Schrift #626772 = 4,5:1 darauf */
footer.footer .footer__brand, footer.footer .footer__brand .pull-left { font-size: 14px; color: #626772; }
footer.footer .footer__brand a,
footer.footer .footer__brand ul > li .sub li a { font-size: 14px; color: #626772; } /* styles.css: .sub li a #333 */
footer.footer .footer__brand a:hover, footer.footer .footer__brand a:focus { color: #0047ab; }

/* L36 Absende-Buttons der Ferientester-Formulare (Anmeldung, Feedback) und des TOP-Getränkeguthaben-Antrags waren
   rund (30 px), fett und hellblau: wie die übrigen Formular-Buttons (Kontakt, Babyset, Newsletter) */
.tx-rob-holidaytester input[type="submit"],
form.ferientester input[type="submit"],
.ferientester .controls__item .fieldwrap--submit .btn {
  background-color: #0a4169;
  color: #fff;
  border: 0;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  padding: 15px 60px;
}

/* L37 Hauptnavigation: Hover-/Aktiv-Linie wie robinson.com (2 px weiß, so breit wie der Text, 7 px darunter) statt
   55 x 4 px Balken an der Unterkante der Leiste */
@media (min-width: 768px) {
  .navbar__items ul.nav.navbar-nav > li:is(:hover, :active, .active)::after,
  .navbar__items ul.nav.navbar-nav > li:nth-last-child(-n+3):is(:hover, :active, .active)::after { display: none; }
  .navbar__items ul.nav.navbar-nav > li > a { position: relative; }
  .navbar__items ul.nav.navbar-nav > li:is(:hover, .active, :focus-within) > a::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 8px;
    height: 2px;
    background-color: #fff;
  }
}

/* L38 Megamenü: zwei Spalten (dropdown-menu__left/__right) per Raster statt CSS-Spalten, damit die Trennlinien
   beider Spalten in jedem Browser auf derselben Höhe liegen; jede Spalte stapelt ihre Einträge gleich hoch */
@media (min-width: 768px) {
  .navbar__items .nav.navbar-nav li.dropdown:is(:hover, .is-open, .is-focus:not(.is-closed)) > ul.dropdown-menu:has(> .dropdown-menu__left) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    column-count: auto;
    columns: auto;
  }
  .navbar__items ul.dropdown-menu > :is(.dropdown-menu__left, .dropdown-menu__right) > li { min-height: 50px; box-sizing: border-box; }
  /* up to 4 entries (footer.js): one column, as wide as the longest entry (at least 260 px) */
  .navbar__items ul.dropdown-menu.dropdown-menu--single { width: auto; min-width: 260px; column-count: 1; columns: auto; }
  .navbar__items ul.dropdown-menu.dropdown-menu--single > li { min-height: 50px; box-sizing: border-box; }
  .navbar__items ul.dropdown-menu.dropdown-menu--single > li > a { white-space: nowrap; }
  .navbar__items ul.dropdown-menu.dropdown-menu--single > li:last-child, .navbar__items ul.dropdown-menu.dropdown-menu--single > li:last-child > a { border-bottom: 0; }
}


/* L42 Login-Formular: E-Mail und Passwort nebeneinander, Button darunter, alles linksbündig mit Überschrift und Text
   (Formular stand durch Bootstrap-Zeile 5 px weiter links); mobil untereinander */
.frame-type-felogin_login form.row { margin-left: 0; margin-right: 0; }
.frame-type-felogin_login form.row fieldset > :is(.col-sm-5, .col-sm-2) { float: none; width: 100%; padding-left: 0; padding-right: 0; }
@media (min-width: 768px) {
  .frame-type-felogin_login form.row fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 545px)); column-gap: 24px; } /* je höchstens 545 px */
  .frame-type-felogin_login form.row fieldset > .col-sm-5 { width: auto; }
  .frame-type-felogin_login form.row fieldset > :is(.col-sm-2, .felogin-hidden) { grid-column: 1 / -1; }
}
.frame-type-felogin_login form.row .pushbutton { justify-content: flex-start; margin-top: 5px; }
/* Login-Button wie "Registrieren"/"Zurücksetzen" (16 px, 15/35 px Innenabstand): war 59 statt 53 px hoch */
.frame-type-felogin_login .pushbutton input.pushbutton__btn { font-size: 16px; line-height: 1.42857143; padding: 15px 35px; }
/* L43 Infokreise auf der Login-Startseite kleiner: 120 statt 165 px, Symbol 56 statt 80 px, weniger Abstand */
.infocircle__icon { width: 120px; height: 120px; margin: 24px auto 20px; }
.infocircle__icon img { width: 56px !important; height: 56px !important; }

/* L44 Checkboxen und Optionsfelder in Formularen größer (20 statt 13 px), in der Markenfarbe. Bootstrap setzt sie in
   .checkbox/.radio/.radio-inline absolut vor den Text: im Textfluss vor die Beschriftung statt darüber */
.main-content form input:is([type="checkbox"], [type="radio"]):not(altcha-widget *) { /* ALTCHA-Widget hat eigene Checkbox */
  position: static;
  width: 20px;
  height: 20px;
  margin: 0 8px 0 0;
  vertical-align: -4px;
  accent-color: #0047ab;
  cursor: pointer;
}
.main-content form :is(.checkbox, .radio) label,
.main-content form label:is(.checkbox-inline, .radio-inline) { padding-left: 0; }
.main-content form :is(.checkbox, .radio) label { display: block; position: relative; padding-left: 28px; }
.main-content form :is(.checkbox, .radio) label > input { position: absolute; left: 0; top: 3px; margin: 0; }
/* Registrierung: "Ich akzeptiere die" ist Beschriftung der Checkbox (normale Schrift), nur "Datenschutzerklärung" ist Link */
#tx-srfeuserregister-pi1-fe_users_form p.tx-srfeuserregister-pi1-terms label { display: inline; font-weight: normal; margin: 0; cursor: pointer; }
/* Checkbox links vor dem Einwilligungstext, Text hängend eingezogen (wie Kontaktformular) */
#tx-srfeuserregister-pi1-fe_users_form dd:has(> p.tx-srfeuserregister-pi1-terms) { position: relative; padding-left: 28px; }
#tx-srfeuserregister-pi1-fe_users_form dd:has(> p.tx-srfeuserregister-pi1-terms) > input.tx-srfeuserregister-pi1-checkbox { position: absolute; left: 0; top: 3px; float: none; margin: 0; }
#tx-srfeuserregister-pi1-fe_users_form p.tx-srfeuserregister-pi1-terms { display: block; }
/* Abstand Überschrift "Datenschutz" zur Checkbox überall 15 px (EXT:form-Wert, 24.10.2026): Registrierung (dt hat 9 px Innenabstand unten, Checkbox sass 3 px darunter) und Ferientester (Checkbox-Block hatte 10 px Aussenabstand statt 7) */
#tx-srfeuserregister-pi1-fe_users_form dd:has(> p.tx-srfeuserregister-pi1-terms) { margin-top: 12px; }
.tx-rob-holidaytester fieldset.fieldwrap--dsgvo > .checkbox { margin-top: 7px; }

/* L41 Login-Startseite: Logo etwas höher in der blauen Leiste */
body.body--startpage:not(:has(.agencymanager__ranking)) .navbar__brand { position: relative; top: -8px; }

/* L48 ALTCHA-Spamschutz (Kontaktformular, später Registrierung): bündig mit den übrigen Feldern, Checkbox wie die
   Formular-Checkboxen (20 px, Markenfarbe), in Safari nicht gestaucht */
.kontakformular .controls__item .fieldwrap--altcha { padding-left: 30px; padding-right: 15px; }
altcha-widget {
  --altcha-checkbox-size: 20px;
  --altcha-checkbox-border-radius: 3px;
  --altcha-color-primary: #0047ab;
  --altcha-border-color: #0047ab;
  --altcha-border-radius: 0;
  --altcha-max-width: 320px;
  display: block;
}
altcha-widget .altcha-checkbox { flex: 0 0 var(--altcha-checkbox-size); min-width: var(--altcha-checkbox-size); }
/* Registrierung: die Regeln für das alte Bild-Captcha (input 370 px) und für Checkboxen (Abstand) nicht im Widget */
.tx-srfeuserregister-pi1 altcha-widget .altcha-checkbox input {
  width: var(--altcha-checkbox-size);
  max-width: none;
  height: var(--altcha-checkbox-size);
  margin: 0;
  padding: 0;
}

/* L49 Formulare einheitlich: Auswahlfelder ohne die abgerundete Safari-Darstellung (eigener Pfeil, eckig wie die
   Textfelder); Pflichtfeld-Sterne überall rot (Registrierung war #f00, die übrigen Formulare dunkelgrau) */
.main-content form select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  padding-right: 40px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230047ab' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px 9px;
}
.main-content form select[multiple] { background-image: none; padding-right: 12px; }
.main-content .mandatory,
#tx-srfeuserregister-pi1-fe_users_form label > span { color: #e3234f; }

/* L50 Formulare einheitlich (Kontakt, Babyset, TOP-Antrag, Ferientester, Feedback, Registrierung, Meine Daten):
   Titel im Stil der Seiten-H1, darunter immer derselbe Pflichtfeld-Hinweis (normal, nicht kursiv), Felder in 16 px.
   Überschriften in grauen Abschnitten (Registrierung u. a.) waren fett 28 px statt wie alle H1 normal 32 px. */
.section--gray header h1,
.tx-powermail form > h2.form-title {
  margin-top: 0;
  font-size: 2rem;
  font-weight: normal;
  line-height: 1.1;
  text-transform: uppercase;
  color: #32374b;
}
@media (max-width: 991px) {
  .section--gray header h1,
  .tx-powermail form > h2.form-title { font-size: 6vw; }
}
.tx-powermail form > h2.form-title { margin-bottom: 15px; }
/* Login-Seite: der Abschnitt ist dort blau, Überschrift weiß wie in 8.7 (die Regel oben machte sie unlesbar, 1,4:1) */
body.body--startpage .section--gray header h1 { color: #fff; }
.main-content .form-hint {
  margin: 0 0 24px;
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  color: #32374b;
}
.tx-powermail form > .form-hint { padding: 0 15px; }
/* bündig mit den Feldern: TOP-Antrag (form.ferientester) hat Felder ohne Spalten-Einzug, die Registrierung einen Absatz-Einzug */
.tx-powermail form.ferientester > .form-hint, .main-content fieldset > p.form-hint { padding-left: 0; padding-right: 0; }
.main-content form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea):not(altcha-widget *) { font-size: 16px; }
/* Formularfelder aus dem Konto (vorbelegt, schreibgeschützt; PrefillFormsWithUserData): grau hinterlegt, Text bleibt gut lesbar */
.main-content form :is(input, textarea)[readonly] { background-color: #f2f4f7 !important; color: #4a5060; cursor: default; } /* !important: several form styles set white */
.main-content form :is(input, textarea)[readonly]:focus { box-shadow: none; }
.main-content form :is(.form-group, .fieldwrap):has(input[readonly]) .mandatory { display: none; } /* kein Pflicht-Stern: Wert kommt aus dem Konto */
/* Barrierefreiheit 4/5 (Prüfung 23.10.2026): Fehlertexte der Registrierung #C8102E statt #FF0000 (5,5:1 statt 3,7:1 auf #F7F7F7),
   Platzhalter #6B7280 statt #999 (4,8:1 statt 2,9:1) */
.tx-srfeuserregister-pi1 .tx-srfeuserregister-pi1-error, .tx-srfeuserregister-pi1 .tx-srfeuserregister-pi1-error * { color: #c8102e; }
:is(input, textarea)::placeholder { color: #6b7280; opacity: 1; }

/* Newsletter (Inxmail-Formular als HTML-Element): Felder wie in den übrigen Formularen (55 px, blauer Rahmen) */
.main-content form.newsletter input.form-control { height: 55px; border: 1px solid #0047ab; border-radius: 0; box-shadow: none; }
/* bündig mit dem Text darüber (Bootstrap .form-horizontal zieht die Zeilen 15 px nach außen) */
.main-content form.newsletter .form-group { margin-left: 0; margin-right: 0; }
.main-content form.newsletter .form-group > div { padding-left: 0; padding-right: 0; }

/* L52 News-Karten: "Artikel öffnen" als Button (wie die übrigen Buttons, etwas kleiner) statt Textlink mit Pfeil */
.news-list-view .article__more { background-image: none; padding-left: 0; }
.news-list-view .article__more a {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #0a4169;
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  text-transform: uppercase;
  text-decoration: none;
}
.news-list-view .article__more a i { display: none; }

/* L51 Button-Hover wie robinson.com: Schrift, Rahmen und Grundfarbe bleiben, der Button wird in 0,2 s dunkler
   (robinson.com #0a4169 -> #283e4f, hier per Schatten über der Grundfarbe, damit es für jede Farbe passt).
   Vorher je Typ unterschiedlich: Rahmen dunkel, Schrift schwarz, grau (btn-secondary), grün (btn-success) oder nichts. */
:is(.main-content, footer) :is(.btn:not(.btn-default), input[type="submit"], button[type="submit"], .newletter__link, .article__more a):not(altcha-widget *) {
  transition: background-color .2s, box-shadow .2s;
}
:is(.main-content, footer) :is(.btn:not(.btn-default), input[type="submit"], button[type="submit"], .newletter__link, .article__more a):not(altcha-widget *):is(:hover, :focus, :active) {
  box-shadow: inset 0 0 0 100vmax rgba(60, 60, 60, .575);
  text-decoration: none;
  outline-offset: 2px;
}
/* helle Buttons (Kiwi, weißer Teaser-Button) nur leicht abdunkeln, die dunkle Schrift bleibt lesbar */
.main-content :is(.btn-success, .btn-robinson-kiwi, .teasercontainer .btn-primary):is(:hover, :focus, :active) {
  box-shadow: inset 0 0 0 100vmax rgba(10, 65, 105, .12) !important;
}
/* Farbwechsel aus Bootstrap/styles.css beim Hover zurücknehmen (Werte = Grundzustand) */
.main-content .btn.btn-primary:not(.teasercontainer .btn):is(:hover, :focus, :active) { background-color: #0a4169 !important; color: #fff !important; border-color: #fff !important; }
.main-content .teasercontainer .btn.btn-primary:is(:hover, :focus, :active) { background-color: #fff !important; color: #0047ab !important; border-color: #0047ab !important; }
.main-content .felogin input.btn-primary:is(:hover, :focus, :active),
.main-content .btn.btn-danger:is(:hover, :focus, :active) { background-color: #e3234f !important; color: #fff !important; border-color: #fff !important; }
.main-content .btn.btn-success:is(:hover, :focus, :active) { background-color: #a0e673 !important; color: #0a4169 !important; border-color: #0a4169 !important; }
.main-content .btn.btn-secondary:is(:hover, :focus, :active) { background-color: #0047ab !important; color: #fff !important; border-color: #ccc !important; }
.main-content .tx-rob-holidaytester input[type="submit"]:is(:hover, :focus, :active) { background-color: #0a4169 !important; color: #fff !important; }

/* L54 News-Detail: der Titel (60 px) lief auf dem Handy bei langen Wörtern über den Rand (z. B. „Mediadatenbank“);
   kleiner auf schmalen Bildschirmen, lange Wörter werden getrennt */
.news-single .article .article__headline { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 991px) { .news-single .article .article__headline { font-size: 44px; } }
@media (max-width: 767px) { .news-single .article .article__headline { font-size: 32px; line-height: 1.15; } }

/* L56 Hauptnavigation: Menüpunkte brechen nicht um („Eure Vorteile“ stand bei 992–1199 px zweizeilig) */
@media (min-width: 768px) {
  .navbar__items ul.nav.navbar-nav > li > a { white-space: nowrap; }
}
/* 992–1199 px: etwas kleiner und weniger Abstand, sonst stößt der letzte Punkt an die Lupe (Hover-Linie bleibt textbreit) */
@media (min-width: 992px) and (max-width: 1199px) {
  .navbar__items ul.nav.navbar-nav > li > a { padding-left: 11px; padding-right: 11px; font-size: 16px; }
  .navbar__items ul.nav.navbar-nav > li:is(:hover, .active, :focus-within) > a::after { left: 11px; right: 11px; }
}

/* L57 Kopfzeile wie robinson.com (endgültig seit 24.10.2026, Klasse .navbar--account-in-main fest im Template; die
   klassische Kopfzeile mit oberer Linkzeile ist entfernt): die Rang-Zeile steht mittig neben dem Logo. Lupe, Kontakt
   und Konto als weiße Kreise am Ende der Hauptnavigation, das Konto mit kleinem Menü. */
@media (min-width: 768px) {
  /* all entries of the bar in one row: the lists are dissolved (display: contents), entries without own padding/margins */
  /* spacing like robinson.com: menu items together on the left, 30 px between the texts, magnifier on the far right */
  .navbar--account-in-main .navbar__items { display: flex; align-items: center; justify-content: flex-start; column-gap: 30px; }
  .navbar--account-in-main .navbar__items > ul.nav.navbar-nav { display: contents; }
  /* Bootstrap clearfix pseudo elements would count as invisible entries and double some gaps */
  .navbar--account-in-main .navbar__items::before, .navbar--account-in-main .navbar__items::after,
  .navbar--account-in-main .navbar__items > ul.nav.navbar-nav::before, .navbar--account-in-main .navbar__items > ul.nav.navbar-nav::after { display: none; }
  .navbar--account-in-main .navbar__items > ul.nav.navbar-nav > li { margin: 0; padding: 0; flex: none; width: auto; }
  /* menu items like robinson.com (Cera 18 px, medium, -0.208 px letter spacing, no capitals) */
  .navbar--account-in-main .navbar__items > ul.nav.navbar-nav > li > a { padding-left: 0; padding-right: 0; text-transform: none; font-family: 'Cera ROB', Arial, sans-serif; font-size: 18px; font-weight: 500; letter-spacing: -0.208px; }
  .navbar--account-in-main .navbar__items > ul.nav.navbar-nav > li:is(:hover, .active, :focus-within) > a::after { left: 0; right: 0; }
  /* magnifier: last entry of the bar, white circle with a dark blue icon like robinson.com */
  /* the first circle (magnifier, contact or account, order of their pages: lib.navbarIconOrder) moves to the far right */
  .navbar--account-in-main .navbar__items > ul.nav.navbar-nav + * { margin-left: auto; }
  .navbar--account-in-main .navbar__items .search {
    position: relative;
    float: none;
    flex: none;
    width: 35px;
    height: 35px;
    margin: 0;
    border-radius: 50%;
    background: #fff;
  }
  /* plain line magnifier like robinson.com (circle and handle) */
  .navbar--account-in-main .navbar__items .search::before {
    content: "";
    position: absolute;
    inset: 7px;
    background: #0a4169;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M15.5 15.5 20 20' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%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'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M15.5 15.5 20 20' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .navbar--account-in-main .navbar__items .search:hover::before { background: #283e4f; }
  /* search as dropdown of the magnifier: opens on click / Enter, looks like the menu dropdowns
     (blue 90 %, 20/40 px padding, white text, white line as input) */
  .navbar__searchitem { position: relative; flex: none; display: flex; align-items: center; height: 50px; }
  .navbar__searchitem > .search:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
  .navbar__searchdrop {
    display: none;
    position: absolute;
    right: -40px;
    top: 100%;
    width: 380px;
    padding: 20px 40px;
    background: rgba(0, 71, 171, .9);
    z-index: 100;
  }
  .navbar__searchitem.is-open > .navbar__searchdrop { display: block; } /* opened by click (a11y-navigation.js) */
  .navbar__searchdrop #searchForm { display: flex; align-items: center; gap: 10px; }
  .navbar__searchdrop .tx-indexedsearch-form { flex: 1; margin: 0; }
  .navbar__searchdrop .tx-indexedsearch-searchbox-sword {
    width: 100%;
    height: auto;
    padding: 8px 0;
    border: 0;
    border-bottom: 1px solid #fff;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #fff;
    font-size: 16px;
  }
  .navbar__searchdrop .tx-indexedsearch-searchbox-sword::placeholder { color: rgba(255, 255, 255, .85); }
  .navbar__searchdrop .tx-indexedsearch-searchbox-sword:focus { outline: none; border-bottom-width: 2px; }
  .navbar__searchdrop .tx-indexedsearch-search-submit { margin: 0; }
  .navbar__searchdrop .tx-indexedsearch-searchbox-button {
    width: 22px;
    height: 23px;
    padding: 0;
    border: 0;
    box-shadow: none !important;
    background: #fff;
    -webkit-mask: url("/assets/go-robinson/images/NEU-CI-2K23/Icons/robinson-go-icons-search.svg") center / contain no-repeat;
    mask: url("/assets/go-robinson/images/NEU-CI-2K23/Icons/robinson-go-icons-search.svg") center / contain no-repeat;
    cursor: pointer;
  }
  /* account menu: white circle with person icon (robinson.com: 35 px circles, 20 px apart), submenu like the menu
     dropdowns */
  .navbar--account-in-main .navbar__items > .navbar-account { position: relative; flex: none; margin: 0; padding: 0; list-style: none; }
  /* 20 px between the circles in any order (negative margin = 20 px - gap), the last one without margin */
  .navbar--account-in-main .navbar__items > :is(.navbar__searchitem, .navbar-contact, .navbar-account):not(:last-child) { margin-right: -10px; }
  .navbar-account .navbar__account { position: relative; display: flex; align-items: center; height: 50px; }
  .navbar-account .navbar__account > a { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 50%; background: #fff; color: #0a4169; }
  .navbar-account .navbar__account > a:is(:hover, :focus-visible) { color: #283e4f; }
  /* contact: same white circle, 20 px apart like the other circles */
  .navbar--account-in-main .navbar__items > .navbar-contact { flex: none; display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 50%; background: #fff; color: #0a4169; }
  .navbar--account-in-main .navbar__items > .navbar-contact:is(:hover, :focus-visible) { color: #283e4f; }
  .navbar--account-in-main .navbar__items > .navbar-contact svg { display: block; }
  .navbar__account-icon { display: block; width: 21px; height: 21px; }
  .navbar-account__menu {
    display: none;
    position: absolute;
    right: -40px;
    top: 100%;
    margin: 0;
    padding: 10px 40px;
    list-style: none;
    background: rgba(0, 71, 171, .9);
    z-index: 100;
  }
  .navbar-account .navbar__account:is(:hover, :focus-within) > .navbar-account__menu { display: block; }
  .navbar-account__menu li { border-bottom: 1px solid #fff; }
  .navbar-account__menu li:last-child { border-bottom: 0; }
  .navbar-account__menu li > a { display: block; padding: 12px 0; font-size: 16px; line-height: 1.4; color: #fff; text-decoration: none; white-space: nowrap; }
  .navbar-account__menu li > a:is(:hover, :focus-visible) { color: #fff; text-decoration: underline; }
  /* rank row: right-aligned at the edge, centred on the logo; labels without capitals; "Stand" in brackets behind it */
  /* centred vertically in the white header area (independent of the box height), right-aligned at the content edge */
  .navbar--account-in-main > .container { position: relative; }
  .navbar--account-in-main .navbar__components { position: absolute; top: 50%; right: 15px; margin: 0; padding: 0; transform: translateY(-50%); }
  .navbar--account-in-main :is(.agencymanager__ranking, .agencymanager__top-state) { text-transform: none; letter-spacing: normal; }
  /* "Stand" only on hover or keyboard focus and in place of the text (wish 23.10.2026): both in one grid cell, so the
     badge keeps its width (no jumping); in the text colour of the badge */
  .navbar--account-in-main .badge-swap { display: inline-grid; justify-items: center; align-items: center; }
  .navbar--account-in-main .badge-swap > * { grid-area: 1 / 1; transition: opacity .2s ease; }
  .navbar--account-in-main .ranking__stand { font-size: 13px; font-weight: 400; font-style: italic; white-space: nowrap; opacity: 0; }
  .navbar--account-in-main :is(.ranking__value, .top-state__value):is(:hover, :focus-visible) .badge-text { opacity: 0; }
  .navbar--account-in-main :is(.ranking__value, .top-state__value):is(:hover, :focus-visible) .ranking__stand { opacity: 1; }
  .navbar--account-in-main :is(.ranking__value, .top-state__value):focus-visible { outline: 2px solid #0047ab; outline-offset: 2px; }
  /* wish 23.10.2026: "Rang"/"Status" inside the badge, lighter than the value */
  .navbar--account-in-main :is(.ranking__value, .top-state__value) .badge-label { margin-right: 5px; font-weight: 400; opacity: .85; }
  .navbar--account-in-main .top-state__value .badge-label--after { margin: 0 0 0 5px; }
  .navbar--account-in-main .top-state .top-state__value--top { gap: 0; }
  .navbar--account-in-main .top-state .top-state__value--top::before { margin-right: 5px; }
  /* badges a bit larger (wish 23.10.2026), pointer as hint that the "Stand" appears */
  .navbar--account-in-main :is(.ranking .ranking__value, .top-state .top-state__value) { font-size: 15px; line-height: 1.4; padding: 5px 13px; cursor: pointer; }
  /* wish 23.10.2026: boxes as badges. Rank: deep Robinson blue; TOP status: gold with shield and a light sweep
     (no animation with reduced motion); without rank/status the boxes stay grey */
  .navbar--account-in-main .ranking .ranking__value--set {
    background: linear-gradient(135deg, #0047ab 0%, #0a4169 100%);
    color: #fff;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 71, 171, .35);
  }
  .navbar--account-in-main .top-state .top-state__value--top {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    padding-left: 10px;
    background: linear-gradient(135deg, #fff3b0 0%, #f6c945 45%, #e2a312 100%);
    color: #4a3500;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: 0 2px 10px rgba(226, 163, 18, .45), inset 0 1px 0 rgba(255, 255, 255, .7);
  }
  .navbar--account-in-main .top-state .top-state__value--top::before {
    content: "";
    width: 13px;
    height: 13px;
    flex: none;
    background: #4a3500;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.5l8.5 3.2v6.4c0 5.4-3.6 9.9-8.5 11.4-4.9-1.5-8.5-6-8.5-11.4V4.7zm0 5.3l1.6 3.3 3.6.5-2.6 2.5.6 3.6-3.2-1.7-3.2 1.7.6-3.6-2.6-2.5 3.6-.5z'/%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'%3E%3Cpath fill-rule='evenodd' d='M12 1.5l8.5 3.2v6.4c0 5.4-3.6 9.9-8.5 11.4-4.9-1.5-8.5-6-8.5-11.4V4.7zm0 5.3l1.6 3.3 3.6.5-2.6 2.5.6 3.6-3.2-1.7-3.2 1.7.6-3.6-2.6-2.5 3.6-.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .navbar--account-in-main .top-state .top-state__value--top::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent);
    transform: skewX(-20deg);
    animation: robgo-badge-shine 3.5s ease-in-out infinite;
  }
  .navbar--account-in-main .top-state .top-state__value--top .fa { display: none; }
  /* rank with the same colour scale (wish 23.10.2026): 1-20 gold, 21-50 silver, 51-300 bronze, from 301 blue (above) */
  .navbar--account-in-main .ranking .ranking__value--gold {
    background: linear-gradient(135deg, #fff3b0 0%, #f6c945 45%, #e2a312 100%);
    color: #4a3500;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(226, 163, 18, .45), inset 0 1px 0 rgba(255, 255, 255, .7);
  }
  .navbar--account-in-main .ranking .ranking__value--silver {
    background: linear-gradient(135deg, #ffffff 0%, #d9dde3 45%, #a7adb7 100%);
    color: #2f3440;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(120, 128, 140, .45), inset 0 1px 0 rgba(255, 255, 255, .9);
  }
  .navbar--account-in-main .ranking .ranking__value--bronze {
    background: linear-gradient(135deg, #f6d2b0 0%, #d08b52 50%, #a5612c 100%);
    color: #3d1f08;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(165, 97, 44, .4), inset 0 1px 0 rgba(255, 255, 255, .6);
  }
  /* medal for ranks 1-300 (wish 23.10.2026), in the text colour of the tier, like the shield of the status */
  .navbar--account-in-main .ranking :is(.ranking__value--gold, .ranking__value--silver, .ranking__value--bronze) { display: inline-flex; align-items: center; padding-left: 10px; }
  .navbar--account-in-main .ranking :is(.ranking__value--gold, .ranking__value--silver, .ranking__value--bronze)::before {
    content: "";
    width: 15px;
    height: 15px;
    flex: none;
    margin-right: 5px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h4l2 4.2L14 2h4l-3.3 6.9A6.5 6.5 0 1 1 9.3 8.9z'/%3E%3Ccircle cx='12' cy='15.5' r='3.6' fill='%23fff' fill-opacity='.45'/%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'%3E%3Cpath d='M6 2h4l2 4.2L14 2h4l-3.3 6.9A6.5 6.5 0 1 1 9.3 8.9z'/%3E%3Ccircle cx='12' cy='15.5' r='3.6' fill='%23fff' fill-opacity='.45'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  /* wish 23.10.2026: colour by tier - TOP10/TOP20 gold (above), TOP50 silver, TOP100/TOP300 bronze */
  .navbar--account-in-main .top-state .top-state__value--tier-50 {
    background: linear-gradient(135deg, #ffffff 0%, #d9dde3 45%, #a7adb7 100%);
    color: #2f3440;
    box-shadow: 0 2px 10px rgba(120, 128, 140, .45), inset 0 1px 0 rgba(255, 255, 255, .9);
  }
  .navbar--account-in-main .top-state .top-state__value--tier-50::before { background: #2f3440; }
  .navbar--account-in-main .top-state :is(.top-state__value--tier-100, .top-state__value--tier-300) {
    background: linear-gradient(135deg, #f6d2b0 0%, #d08b52 50%, #a5612c 100%);
    color: #3d1f08;
    box-shadow: 0 2px 10px rgba(165, 97, 44, .4), inset 0 1px 0 rgba(255, 255, 255, .6);
  }
  .navbar--account-in-main .top-state :is(.top-state__value--tier-100, .top-state__value--tier-300)::before { background: #3d1f08; }
}
/* larger gaps between the main menu items (wish 23.10.2026): 50 px, 992-1199 px 40 px (still about 40 px to the magnifier) */
/* the circles stay 20 px apart like robinson.com (negative margin = 20 px - gap) */
@media (min-width: 1200px) {
  .navbar--account-in-main .navbar__items { column-gap: 50px; }
  .navbar--account-in-main .navbar__items > :is(.navbar__searchitem, .navbar-contact, .navbar-account):not(:last-child) { margin-right: -30px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .navbar--account-in-main .navbar__items { column-gap: 40px; }
  .navbar--account-in-main .navbar__items > :is(.navbar__searchitem, .navbar-contact, .navbar-account):not(:last-child) { margin-right: -20px; }
}
@media (min-width: 768px) and (max-width: 991px) {
  /* tablet: robinson.com spacing does not fit, a bit tighter and smaller */
  .navbar--account-in-main .navbar__items { column-gap: 12px; }
  .navbar--account-in-main .navbar__items > :is(.navbar__searchitem, .navbar-contact, .navbar-account):not(:last-child) { margin-right: 8px; } /* 20 px between the circles as above */
  .navbar--account-in-main .navbar__items > ul.nav.navbar-nav > li > a { font-size: 16px; }
}

/* L58 Meine Daten: „Konto löschen“ als roter Button ganz unten, abgesetzt vom Speichern */
.tx-srfeuserregister-pi1 .tx-srfeuserregister-pi1-trash { margin: 50px 0 0; padding: 25px 0 0; border-top: 1px solid #e1e5ea; background: none; }
.tx-srfeuserregister-pi1 .tx-srfeuserregister-pi1-trash .btn { padding: 15px 35px; border: 0; border-radius: 5px; text-transform: uppercase; color: #fff; background-color: #e3234f; text-decoration: none; background-image: none; }

/* L59 Startseite (Wunsch 23.10.2026): News-Karten mit Abstand nach unten (berührten die Elemente darunter), Bilder
   wieder rund wie in 8.7 (Kreis mittig oben in der Karte), alle Buttons im Inhalt gleich groß (vorher 40/43/53/57 px:
   btn-sm/-md/-lg, Slider-Teaser, „Artikel öffnen“, Linkbuttons, Formulare) */
.news-list-view { margin-bottom: 40px; }
.news-list-view > .article > .article__media { padding: 24px 24px 0; text-align: center; }
.news-list-view > .article > .article__media img { width: 100%; max-width: none; height: auto; aspect-ratio: 1 / 1; margin: 0 auto; border-radius: 50%; object-fit: cover; } /* as large as the card allows */
.news-list-view > .article > .article__wrapper { text-align: center; }
.news-list-view .article__more { display: flex; justify-content: center; }
.main-content :is(.btn:not(.btn-default):not(.counterhilfebuttons--button-anchor), .article__more a, p.link-button > a, input[type="submit"], button[type="submit"]):not(altcha-widget *) {
  padding: 12px 28px;
  font-size: 16px;
  line-height: 1.4;
  height: auto;
}

/* L60 News-Karten wie die Teaser auf robinson.com/angebote: die ganze Karte ist der Link, großer Titel, darunter
   „Artikel öffnen ›“ als Textzeile statt Button; Schatten etwas stärker beim Drüberfahren */
.news-list-view > .article { position: relative; transition: box-shadow .2s; }
.news-list-view > .article:hover { box-shadow: 0 4px 20px rgba(10, 65, 105, .18); }
.news-list-view .article__headline { font-size: 1.5rem; font-weight: 500; line-height: 1.2; }
.news-list-view .article__headline a { color: #32374b; text-decoration: none; }
.news-list-view .article__headline a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card clickable */
.news-list-view .article__headline a:focus-visible { outline: none; }
.news-list-view > .article:focus-within { outline: 2px solid #0047ab; outline-offset: 2px; }
.news-list-view .article__more { margin-top: 4px; }
.main-content .news-list-view .article__more a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  color: #32374b;
  font-size: 16px;
  font-weight: 500;
  text-transform: none;
}
.main-content .news-list-view .article__more a::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); }
.main-content .news-list-view .article__more a:is(:hover, :focus, :active) { box-shadow: none; text-decoration: underline; }
.news-list-view > .article:hover .article__more a { text-decoration: underline; }
/* „Weitere News laden“ (news-load-more.js) unter den Karten */
.news-list-view > .news-load-more { grid-column: 1 / -1; text-align: center; margin-top: 10px; }

/* L61 mobile like robinson.com (final since 24.10.2026). Bar: "☰ Menü" on the left, magnifier,
   contact and account as white circles on the right; menu from the left over the page (340 px, grey backdrop), white
   logo and X at the top, main items only (18 px medium), sub items unfold with the arrow, account links at the bottom */
@media (max-width: 767px) {
  .navbar--account-in-main .navbar__itemwrapper { position: relative; display: flex; align-items: center; height: 60px; padding: 0 15px; }
  .navbar--account-in-main .navbar__itemwrapper::before, .navbar--account-in-main .navbar__itemwrapper::after { display: none; }
  .navbar--account-in-main .navbar__itemwrapper > .slidebar-toggle {
    order: -1;
    float: none;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 6px 0;
    border: 0;
    border-radius: 0;
    background: none !important;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
  }
  .navbar--account-in-main .navbar__itemwrapper > .slidebar-toggle .navbar-toggle__bars { display: flex; flex-direction: column; gap: 5px; }
  .navbar--account-in-main .navbar__itemwrapper > .slidebar-toggle .icon-bar { width: 24px; height: 2px; margin: 0 !important; border-radius: 1px; background: #fff; }
  .navbar--account-in-main .navbar__itemwrapper > .slidebar-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
  .navbar--account-in-main .navbar__items { display: flex !important; align-items: center; gap: 12px; float: none; width: auto; height: auto; margin: 0 0 0 auto; padding: 0; }
  .navbar--account-in-main .navbar__searchitem, .navbar--account-in-main .navbar-account .navbar__account { position: static; height: auto; }
  .navbar--account-in-main .navbar__items::before, .navbar--account-in-main .navbar__items::after { display: none; }
  .navbar--account-in-main .navbar__items > ul.nav.navbar-nav:not(.navbar-account) { display: none; }
  .navbar--account-in-main .navbar__items .search { position: relative; float: none; width: 35px; height: 35px; margin: 0; border-radius: 50%; background: #fff; cursor: pointer; }
  .navbar--account-in-main .navbar__items .search > .fa { display: none; }
  .navbar--account-in-main .navbar__items .search::before {
    content: "";
    position: absolute;
    inset: 7px;
    background: #0a4169;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M15.5 15.5 20 20' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%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'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M15.5 15.5 20 20' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .navbar--account-in-main .navbar__items > .navbar-contact,
  .navbar--account-in-main .navbar-account .navbar__account > a { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 50%; background: #fff; color: #0a4169; }
  .navbar--account-in-main .navbar__items > .navbar-account { margin: 0; padding: 0; list-style: none; }
  .navbar--account-in-main .navbar__account-icon { display: block; width: 21px; height: 21px; }
  .navbar--account-in-main .navbar-account__menu { display: none !important; } /* the circle opens "Meine Daten", Logout is in the menu */
  /* search: full width under the bar, like the desktop dropdown */
  .navbar--account-in-main .navbar__searchdrop { display: none; position: absolute; left: 0; right: 0; top: 100%; padding: 16px 15px; background: #0047ab; z-index: 1000; }
  .navbar--account-in-main .navbar__searchitem.is-open > .navbar__searchdrop { display: block; }
  .navbar--account-in-main .navbar__searchdrop #searchForm { display: flex; align-items: center; gap: 10px; }
  .navbar--account-in-main .navbar__searchdrop .tx-indexedsearch-form { flex: 1; margin: 0; }
  .navbar--account-in-main .navbar__searchdrop .tx-indexedsearch-searchbox-sword { width: 100%; height: auto; padding: 8px 0; border: 0 !important; border-bottom: 1px solid #fff !important; border-radius: 0; background: transparent; box-shadow: none; color: #fff; font-size: 16px; }
  .navbar--account-in-main .navbar__searchdrop .tx-indexedsearch-searchbox-sword::placeholder { color: rgba(255, 255, 255, .85); }
  .navbar--account-in-main .navbar__searchdrop .tx-indexedsearch-searchbox-sword:focus { outline: none; border-bottom-width: 2px !important; }
  .navbar--account-in-main .navbar__searchdrop .tx-indexedsearch-search-submit { margin: 0; }
  .navbar--account-in-main .navbar__searchdrop .tx-indexedsearch-searchbox-button {
    width: 22px;
    height: 23px;
    padding: 0;
    border: 0;
    box-shadow: none !important;
    background: #fff;
    -webkit-mask: url("/assets/go-robinson/images/NEU-CI-2K23/Icons/robinson-go-icons-search.svg") center / contain no-repeat;
    mask: url("/assets/go-robinson/images/NEU-CI-2K23/Icons/robinson-go-icons-search.svg") center / contain no-repeat;
  }
}
div.slidebar.slidebar--rc { width: 340px; max-width: 88vw; padding: 0 0 30px; background: #0047ab; }
.slidebar--rc .slidebar__head { display: flex; align-items: center; justify-content: space-between; padding: 24px 24px 24px 25px; }
.slidebar--rc .slidebar__logo {
  display: block;
  width: 190px;
  height: 52px;
  background: #fff; /* goROBINSON logo of the header in white */
  -webkit-mask: url("/assets/go-robinson/images/NEU-CI-2K23/Logo/robinson-logo-blue.png") left center / contain no-repeat;
  mask: url("/assets/go-robinson/images/NEU-CI-2K23/Logo/robinson-logo-blue.png") left center / contain no-repeat;
}
.slidebar--rc .slidebar__close {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4l16 16M20 4 4 20' stroke='%23000' stroke-width='1.6'/%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'%3E%3Cpath d='M4 4l16 16M20 4 4 20' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
}
.slidebar--rc :is(.slidebar__close, a, button):focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
div.slidebar.slidebar--rc .nav { float: none; margin: 0; }
div.slidebar.slidebar--rc .nav > li { position: relative; float: none; display: flex; flex-wrap: wrap; align-items: center; }
div.slidebar.slidebar--rc .nav > li > a { flex: 1; padding: 15px 25px; background: none; color: #fff; font-size: 18px; font-weight: 500; line-height: 1.5; text-transform: none; letter-spacing: -0.208px; }
div.slidebar.slidebar--rc .nav > li > a:is(:hover, :focus) { background: rgba(255, 255, 255, .08); }
/* current section: white bar on the left like robinson.com */
div.slidebar.slidebar--rc .nav > li.active::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 41px; background: #fff; }
.slidebar--rc .slidebar__subtoggle { flex: none; width: 56px; align-self: stretch; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.slidebar--rc .slidebar__subtoggle::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%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'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s;
}
.slidebar--rc li.is-open > .slidebar__subtoggle::before { transform: rotate(180deg); }
div.slidebar.slidebar--rc .nav > li.dropdown > .dropdown-menu { display: none; flex-basis: 100%; margin: 0 0 8px; padding: 0; }
div.slidebar.slidebar--rc .nav > li.dropdown.is-open > .dropdown-menu { display: block; }
div.slidebar.slidebar--rc .nav > li.dropdown .dropdown-menu > li { border: 0; }
div.slidebar.slidebar--rc .nav > li.dropdown .dropdown-menu > li > a { padding: 10px 25px 10px 40px; border: 0; background: none; color: #fff; font-size: 16px; font-weight: 400; white-space: normal; }
div.slidebar.slidebar--rc .nav > li.dropdown .dropdown-menu > li > a:is(:hover, :focus) { background: rgba(255, 255, 255, .08); text-decoration: underline; }
div.slidebar.slidebar--rc .nav > li.dropdown .dropdown-menu > li.active > a { text-decoration: underline; }
div.slidebar.slidebar--rc .nav.slidebar__account { margin: 20px 25px 0; padding: 15px 0 0; border-top: 1px solid rgba(255, 255, 255, .3); border-bottom: 0; }
div.slidebar.slidebar--rc .slidebar__account > li > a { padding: 10px 0; font-size: 16px; font-weight: 400; }
.slidebar-backdrop { position: fixed; inset: 0; z-index: 9998; background: rgba(50, 55, 75, .45); }
.slidebar-backdrop[hidden] { display: none; }

@keyframes robgo-badge-shine {
  0%, 60% { left: -60%; }
  100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .navbar--account-in-main .top-state .top-state__value--top::after { animation: none; display: none; }
}

/* ======================================== Barrierefreiheit (Prüfbericht A-10, A-12, A-13, A-14; 23.10.2026) */

/* A-10 Megamenü und Konto-Menü per Tastatur als Disclosure (Befund 6, 24.10.2026; Skript
   go-robinson/javascripts/a11y-navigation.js). Maus unverändert (:hover). Beim Fokus öffnet nichts (Tab bleibt auf den
   Hauptpunkten); .is-open per Schalter (Enter/Leertaste) oder Pfeil runter, .is-closed nach Escape, schließt auch unter
   dem Mauszeiger. */
.navbar__items .nav.navbar-nav li.dropdown.is-open > ul.dropdown-menu {
  display: block;
}
.navbar__items .nav.navbar-nav li.dropdown.is-closed > ul.dropdown-menu {
  display: none !important;
}
@media (min-width: 768px) {
  /* Konto-Menü im Kreis: öffnet bei Hover oder per Schalter, nicht mehr bei :focus-within (Regel weiter oben) */
  .navbar-account .navbar__account:not(:hover):not(.is-open) > .navbar-account__menu,
  .navbar-account .navbar__account.is-closed > .navbar-account__menu { display: none; }
  .navbar-account .navbar__account.is-open > .navbar-account__menu { display: block; }
}
/* Schalter hinter den Hauptpunkten und dem Konto-Kreis: unsichtbar wie .sr-only, bei Tastaturfokus (oder offen per
   Tastatur) ein weißer Pfeil rechts neben dem Punkt, nach unten = zu, nach oben = offen; verschiebt nichts */
.nav-subtoggle {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 1px;
  height: 1px;
  margin: -1px 0 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  background: none;
  color: #fff;
  -webkit-appearance: none;
  appearance: none;
}
.nav-subtoggle:focus-visible,
.is-open > .nav-subtoggle {
  width: 18px;
  height: 18px;
  margin: -9px 0 0 6px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  z-index: 101;
}
.nav-subtoggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}
.nav-subtoggle::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.nav-subtoggle[aria-expanded="true"]::before {
  top: 7px;
  transform: rotate(-135deg);
}
@media (max-width: 767px) {
  .nav-subtoggle { display: none; }
}
@media (min-width: 768px) and (max-width: 991px) {
  /* Tablet: nur 12 px zwischen den Hauptpunkten, schmaler Schalter in der Lücke */
  .navbar--account-in-main .nav-subtoggle:focus-visible,
  .navbar--account-in-main .is-open > .nav-subtoggle { width: 10px; margin-left: 1px; }
  .navbar--account-in-main .nav-subtoggle:focus-visible { outline-offset: -1px; }
  .navbar--account-in-main .nav-subtoggle::before { left: 2px; top: 5px; width: 6px; height: 6px; }
  .navbar--account-in-main .nav-subtoggle[aria-expanded="true"]::before { top: 8px; }
}
/* sichtbarer Fokus nur bei Tastaturbedienung */
.navbar__items .nav.navbar-nav a:focus-visible,
.navbar__items .dropdown-menu li a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.navbar__brand:focus-visible {
  outline: 2px solid #0047ab;
  outline-offset: -2px;
}

/* A-12 Ferientester-Formulare: Fragen mit Radio-Auswahl als fieldset/legend, sieht aus wie das bisherige <label>
   (Bootstrap setzt legend auf 21 px mit Linie und 20 px Abstand). */
.tx-rob-holidaytester legend.ft-legend {
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin-bottom: 5px;
  padding: 0;
  border: 0;
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  color: inherit;
}
/* fieldset hält den unteren Rand des letzten .radio (10 px) fest, im <div> fiel er mit dem der .form-group zusammen */
.tx-rob-holidaytester fieldset.form-group > .radio:last-child {
  margin-bottom: 0;
}

/* A-13 Kontraste (WCAG 1.4.3). Je Farbe die kleinste Änderung (gleicher Farbton, nur dunkler/heller), die 4,5:1
   erreicht; alte Werte in Klammern. */
/* Rang, TOP-Status (#9196A0 auf Weiß 2,96:1; neu 5,3:1 auf Weiß) */
.ranking,
.top-state {
  color: #676C77;
}
/* Flächen mit weißer Schrift (Prüfung 23.10.2026, Entscheidung: dunkler wie die Buttons): Türkis #00B1AA 2,7:1 ->
   #00847F 4,6:1, Rot #E6375F 4,1:1 -> #E3234F 4,6:1 (Personen-Karten, „Schon gewusst?!“, Abschnitte, Spalten, Mosaik, Infokreise) */
.clubhotline,
.mosaic__bg.mosaic__bg--green,
.infocircle__icon.infocircle__icon--green,
section.section--aqua,
.section__background-col.section__col--green,
.section__background-col.section__col--aqua {
  background-color: #00847F;
}
.mosaic__bg.mosaic__bg--red,
.website-header--box .circle.circle__bg--red,
.infocircle__icon.infocircle__icon--red,
section.section--red,
.section__background-col.section__col--red {
  background-color: #E3234F;
}
@media (max-width: 991px) {
  .section__content.section__col--green,
  .section__content.section__col--aqua { background-color: #00847F; }
  .section__content.section__col--red { background-color: #E3234F; }
}
/* Login-Hinweis: Rot auf Blau (#E6375F auf #0047AB 2,03:1) -> helles Rot 4,5:1 */
.felogin .error {
  color: #F4AABB;
}
/* Rote Buttons mit weißer Schrift (#E6375F 4,13:1 -> #E3234F 4,6:1) */
.felogin .pushbutton .pushbutton__btn {
  background-color: #E3234F !important;
}
.newsletter__more a,
.pushbutton__btn.btn-danger,
.counterhilfebuttons .counterhilfebuttons--button.korall .counterhilfebuttons--button-anchor {
  background-color: #E3234F;
}
.pushbutton__btn.btn-robinson-red,
.pushbutton__btn.btn-robinson-red:focus,
.pushbutton__btn.btn-robinson-red.focus,
.pushbutton__btn.btn-robinson-red:hover,
.pushbutton__btn.btn-robinson-red:active,
.pushbutton__btn.btn-robinson-red.active,
.pushbutton__btn.btn-robinson-red:active:hover,
.pushbutton__btn.btn-robinson-red.active:hover {
  background-color: #E3234F;
  border-color: #E3234F;
}
.pushbutton__btn.btn-robinson-red .badge {
  color: #E3234F;
}
/* Türkis mit weißer Schrift (#00B1AA 2,66:1 -> #00847F 4,6:1): Clubhotline, grüne Buttons, Counterhilfe, Cookie-Panel */
.clubhotline {
  background: #00847F;
  border-color: #00847F;
}
.counterhilfebuttons .counterhilfebuttons--button.aqua .counterhilfebuttons--button-anchor {
  background-color: #00847F;
}
.pushbutton__btn.btn-robinson-green,
.pushbutton__btn.btn-robinson-green:focus,
.pushbutton__btn.btn-robinson-green.focus,
.pushbutton__btn.btn-robinson-green:hover,
.pushbutton__btn.btn-robinson-green:active,
.pushbutton__btn.btn-robinson-green.active,
.pushbutton__btn.btn-robinson-green:active:hover,
.pushbutton__btn.btn-robinson-green.active:hover {
  background-color: #00847F;
  border-color: #00847F;
}
.pushbutton__btn.btn-robinson-green .badge {
  color: #00847F;
}
.om-cookie-panel .cookie-panel__button,
.om-cookie-panel.active .cookie-panel__button,
.om-cookie-panel .cookie-panel__button--color--green,
.om-cookie-panel.active .cookie-panel__button--color--green {
  background-color: #00847F;
  border-color: #00847F;
}
.om-cookie-panel .cookie-panel__button + .cookie-panel__button,
.om-cookie-panel.active .cookie-panel__button + .cookie-panel__button {
  background-color: transparent;
  border-color: #00847F;
}
/* Kiwi mit weißer Schrift (#FFF auf #A0E673 1,49:1): dunkelblaue Schrift wie die Kiwi-Buttons (.btn-robinson-kiwi, 7,1:1) */
.pushbutton__btn.btn-success,
.pushbutton__btn.btn-success:focus,
.news .page-navigation ul li.current {
  color: #0A4169;
}
/* News-Datum (#BEC3C8 auf #F7F7F7 1,65:1 -> #69727C 4,6:1) */
.article__date {
  color: #69727C;
}

/* A-14 Slider (Yas, "Dynamischer Header"): Pause/Start-Schalter, im Skript Yas.es5.js (.yas ist schon position: relative) */
.yas__toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: rgba(0, 71, 171, 0.85);
  cursor: pointer;
}
/* Symbol per CSS (kein Icon-Font): zwei Balken = anhalten, Dreieck = starten */
.yas__toggle-icon {
  display: block;
  box-sizing: border-box;
  width: 10px;
  height: 12px;
  margin: 0 auto;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
}
.yas__toggle--paused .yas__toggle-icon {
  width: 0;
  height: 0;
  margin-left: 12px;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #fff;
}
.yas__toggle:hover { background-color: #0047ab; }
.yas__toggle:focus-visible {
  outline: 2px solid #0047ab;
  outline-offset: 2px;
}
.yas--disabled .yas__toggle { display: none; }

/* ======================================== L63 Formular-Raster (24.10.2026)
   Alle Formulare gleich aufgebaut (Kontakt, Babyset, TOP-Antrag, Ferientester-Anmeldung und -Feedback, Newsletter,
   Registrierung, Meine Daten; Login bleibt L42): ab 768 px zweispaltig (L64), Text- und Auswahlfelder höchstens 545 px (wie
   die Login-Felder), Textareas, Gruppen, Einwilligungen, Inhaltselemente und ALTCHA volle Breite bis 1114 px
   (= 2 × 545 + 24). Paare nur PLZ | Ort und Von | Bis (.form-pair). Beschriftung über dem Feld, bündig mit Titel und
   Hinweis ohne Einzug. Gruppen als fieldset.form-choice mit legend. */
:is(.tx-powermail, .tx-rob-holidaytester, .tx-srfeuserregister-pi1) form,
.main-content form.newsletter { max-width: 1114px; }
:is(.tx-powermail, .tx-rob-holidaytester, .tx-srfeuserregister-pi1) form :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="hidden"], [type="button"]), select),
.main-content form.newsletter :is(input.form-control, select) { max-width: 545px; }

/* EXT:form: styles.css legt Kontakt zweispaltig (Flex, die ersten 9 Einträge 50 %, mobil zwei schmale Spalten), Babyset
   halbbreit (float 50 %) und rückt Titel, Felder, Inhaltselemente und Button 15 px ein: hier untereinander und bündig */
.tx-powermail form.form-horizontal > :is(h2.form-title, .form-hint) { padding-left: 0; padding-right: 0; }
.tx-powermail form.form-horizontal .controls { display: block; }
.tx-powermail form.form-horizontal .controls > .controls__item.control { float: none; width: auto; margin: 0; }
.tx-powermail form.form-horizontal .controls > .controls__item.control > .fieldwrap {
  float: none;
  width: auto;
  margin: 0 0 15px;
  padding-left: 0;
  padding-right: 0;
}

/* Paar (PLZ | Ort, Von | Bis): ab 768 px zwei Spalten wie das Login (L42), darunter untereinander */
@media (min-width: 768px) {
  .main-content form .form-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 545px)); column-gap: 24px; }
}

/* L64 Formulare zweispaltig (24.10.2026, ersetzt „ein Feld pro Zeile“ aus L63): ab 768 px Raster 2 × höchstens 545 px
   mit 24 px Abstand wie das Login (L42), darunter eine Spalte. Kurze Felder (Text, E-Mail, Telefon, Datum, Auswahl)
   laufen in der Reihenfolge des Formulars paarweise, ein übrig bleibendes steht links in halber Breite. Alles andere
   (Textareas, Gruppen, Einwilligungen, Inhaltselemente, ALTCHA, Zwischenüberschriften, Hinweise, Button) volle Breite.
   Ein kurzes Feld belegt zwei Rasterzeilen (Beschriftung | Feld, subgrid): Beschriftungen oben bündig, Felder auf einer
   Linie, auch wenn eine Beschriftung umbricht. Paare .form-pair bleiben zusammen. Registrierung/Meine Daten (dl/dt/dd):
   dt und dd liegen einzeln im Raster (dense), dd mit drei Zeilen Fehler | Hilfetext | Feld. */
@media (min-width: 768px) {
  .tx-powermail form.form-horizontal .controls,
  .tx-rob-holidaytester form,
  .main-content form.newsletter,
  .tx-srfeuserregister-pi1 form dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 545px));
    column-gap: 24px;
    row-gap: 0;
  }
  .tx-srfeuserregister-pi1 form dl { grid-auto-flow: row dense; }
  /* Clearfix-Pseudoelemente (Bootstrap .form-horizontal, .form-group) wären sonst Rasterzellen */
  .main-content form.newsletter::before, .main-content form.newsletter::after,
  .main-content form:is(.newsletter, .form-horizontal) .form-group::before,
  .main-content form:is(.newsletter, .form-horizontal) .form-group::after { content: none; }
  /* Standard: volle Breite */
  .tx-powermail form.form-horizontal .controls > *,
  .tx-rob-holidaytester form > *,
  .main-content form.newsletter > *,
  .tx-srfeuserregister-pi1 form dl > * { grid-column: 1 / -1; }
  .tx-rob-holidaytester form > input[type="submit"] { justify-self: start; }
  /* kurze Felder: eine Spalte, zwei Zeilen (Beschriftung, Feld samt Meldung) */
  .tx-powermail form.form-horizontal .controls > .controls__item:has(> .fieldwrap:is(.fieldwrap--input, .fieldwrap--select)),
  .tx-powermail form.form-horizontal .controls > .controls__item > .fieldwrap:is(.fieldwrap--input, .fieldwrap--select),
  :is(.tx-rob-holidaytester form, .main-content form.newsletter) > .form-group:has(> :is(input, select).form-control, > div > :is(input, select).form-control),
  :is(.tx-rob-holidaytester form, .main-content form.newsletter) > .form-pair > .form-group {
    grid-column: auto;
    grid-row: span 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
  }
  :is(.tx-rob-holidaytester form, .main-content form.newsletter) > .form-pair {
    grid-column: 1 / -1;
    grid-row: span 2;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
  }
}
/* dl: kurzes Feld = dt + dd mit Text-/Passwortfeld oder Auswahl; ungerade links, gerade rechts (ohne Unterstützung für
   :nth-child(… of :has()) bleibt es bei einer Spalte) */
@media (min-width: 768px) { @supports selector(:nth-child(odd of :has(+ dd))) {
  .tx-srfeuserregister-pi1 form dl > dt:nth-child(odd of :has(+ dd > :is(input.tx-srfeuserregister-pi1-text, input.tx-srfeuserregister-pi1-password, select))),
  .tx-srfeuserregister-pi1 form dl > dt:nth-child(odd of :has(+ dd > :is(input.tx-srfeuserregister-pi1-text, input.tx-srfeuserregister-pi1-password, select))) + dd { grid-column: 1; }
  .tx-srfeuserregister-pi1 form dl > dt:nth-child(even of :has(+ dd > :is(input.tx-srfeuserregister-pi1-text, input.tx-srfeuserregister-pi1-password, select))),
  .tx-srfeuserregister-pi1 form dl > dt:nth-child(even of :has(+ dd > :is(input.tx-srfeuserregister-pi1-text, input.tx-srfeuserregister-pi1-password, select))) + dd { grid-column: 2; }
  .tx-srfeuserregister-pi1 form dl > dt + dd:has(> :is(input.tx-srfeuserregister-pi1-text, input.tx-srfeuserregister-pi1-password, select)) {
    grid-row: span 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
  }
  /* 24.10.2026: message below the field (RegistrationErrorMarkup), was above it */
  .tx-srfeuserregister-pi1 form dl > dd > small { grid-row: 1; }
  .tx-srfeuserregister-pi1 form dl > dd > :is(input.tx-srfeuserregister-pi1-text, input.tx-srfeuserregister-pi1-password, select) { grid-row: 2; }
  .tx-srfeuserregister-pi1 form dl > dd > .form-field-error { grid-row: 3; align-self: start; }
} }

/* Gruppen: Legend wie eine Feldbeschriftung (fett, Stern darin), Optionen bündig darunter. Native Radios/Checkboxen,
   das Label umschließt den Input (Pfeiltasten, required bleiben). */
.main-content form fieldset.form-choice { min-width: 0; margin: 0 0 15px; padding: 0; border: 0; }
.main-content form fieldset.form-choice > legend {
  display: block;
  float: none;
  width: auto;
  max-width: 100%;
  margin: 0 0 5px;
  padding: 0;
  border: 0;
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  text-align: left;
  color: inherit;
}
.main-content form .form-choice__options { margin: 0; padding: 0; }
.main-content form label.form-choice__option {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0;
  font-weight: normal;
  cursor: pointer;
}
.main-content form label.form-choice__option > input { flex: none; margin: 0 8px 0 0; }
/* kurze Alternativen (Ja/Nein, Herr/Frau): nebeneinander, 32 px Abstand, auch mobil */
.main-content form .form-choice--inline .form-choice__options { display: flex; flex-wrap: wrap; column-gap: 32px; }
/* lange/viele Optionen (Verkaufsleiter, Babyset-Artikel): untereinander, Text hängend eingezogen (L44) */
.main-content form .form-choice--stacked :is(.radio, .checkbox) { min-height: 0; margin: 0; padding: 0; }
.main-content form .form-choice--stacked :is(.radio, .checkbox) > label { min-height: 0; margin: 0; padding-top: 5px; padding-bottom: 5px; font-weight: normal; }
.main-content form .form-choice--stacked :is(.radio, .checkbox) > label > input { top: 8px; }
@media (max-width: 991px) {
  .main-content form .form-choice--stacked :is(.radio, .checkbox) > label { padding-top: 10px; padding-bottom: 10px; }
  .main-content form .form-choice--stacked :is(.radio, .checkbox) > label > input { top: 13px; }
}
/* Bewertungsskala (Feedback): unter 992 px untereinander, „Keine Bewertung“ durch eine Linie abgesetzt; ab 992 px eine
   Reihe mit 5 gleich breiten Spalten, „Keine Bewertung“ mit Linie links */
.main-content form .form-choice--scale .form-choice__options { display: flex; flex-direction: column; }
.main-content form .form-choice--scale .form-choice__option:last-child { margin-top: 4px; border-top: 1px solid #d5d9e0; }
@media (min-width: 992px) {
  .main-content form .form-choice--scale .form-choice__options { display: grid; grid-template-columns: repeat(5, minmax(0, 180px)); }
  .main-content form .form-choice--scale .form-choice__option { white-space: nowrap; } /* "Keine Bewertung" in one line */
  .main-content form .form-choice--scale .form-choice__option:last-child { margin-top: 0; padding-left: 12px; border-top: 0; border-left: 1px solid #d5d9e0; }
}

/* Fehlermeldungen (24.10.2026): Liste über dem Formular bleibt (Einträge verlinken die Felder), zusätzlich die Meldung
   unter jedem fehlerhaften Feld bzw. jeder Gruppe (EXT:form, Ferientester). Rot #E3234F wie die Sterne; Text auf weißem
   Grund 4,55:1 (auf dem grauen Abschnitt #F7F7F7 nur 4,24:1, daher hinterlegt), Linie links als zweites Merkmal.
   Feld mit aria-invalid: roter Rahmen (4,55:1 auf Weiß). Liste: Text #9B2F2D statt #A94442 (5,0:1 statt 3,9:1 auf #EBCCD1). */
.main-content form .form-field-error {
  margin: 6px 0 0;
  padding: 6px 10px;
  border-left: 4px solid #e3234f;
  background-color: #fff;
  font-size: 16px;
  line-height: 1.4;
  font-weight: normal;
  color: #e3234f;
}
.main-content form fieldset.form-choice > .form-field-error,
.main-content form .powermail_field_error_container > .form-field-error { margin-top: 4px; }
.main-content form :is(input:not([type="checkbox"], [type="radio"]), select, textarea)[aria-invalid="true"] {
  border-color: #e3234f;
  box-shadow: inset 0 0 0 1px #e3234f;
}
.main-content form :is(input[type="checkbox"], input[type="radio"])[aria-invalid="true"] { accent-color: #e3234f; outline: 1px solid #e3234f; outline-offset: 1px; }
.main-content form :is(input[type="checkbox"], input[type="radio"])[aria-invalid="true"]:focus-visible { outline: 2px solid #0047ab; outline-offset: 2px; }
/* Liste: in EXT:form, Ferientester, Registrierung/Meine Daten und Passwort vergessen gleich (Ferientester bisher einzelne Flash-Meldungen) */
.main-content form .form-error-summary { margin: 0 0 24px; }
.main-content form .form-error-summary:focus { outline: none; }
.main-content form .form-error-summary .powermail_message { margin: 0; }
:is(.tx-rob-holidaytester, .tx-srfeuserregister-pi1, .tx-felogin-pi1) .powermail_message.powermail_message_error {
  padding: 5px 0 10px 20px;
  min-height: 65px;
  background: #ebccd1 url("../../legacy/powermail/icon_error.png") no-repeat 98% 10px;
  border: 1px solid #a94442;
  list-style: circle;
}
:is(.tx-rob-holidaytester, .tx-srfeuserregister-pi1, .tx-felogin-pi1) .powermail_message li { padding: 5px 50px 0 0; border: 0; background: none; }
:is(.tx-powermail, .tx-rob-holidaytester, .tx-srfeuserregister-pi1, .tx-felogin-pi1) .powermail_message.powermail_message_error li { color: #9b2f2d; }
.main-content .form-error-summary a { color: inherit; text-decoration: underline; }
/* Passwort setzen: mehrere Meldungen am Feld untereinander; in der Form-Zeile (.row) volle Breite */
.main-content form .form-field-error__line { display: block; }
/* Registrierung/Meine Daten: Abstand der Meldung zur nächsten Beschriftung (dd ohne eigenen Abstand nach unten) */
.tx-srfeuserregister-pi1 form dl > dd > .form-field-error { margin-bottom: 15px; }
.main-content form.row > .form-error-summary { margin-left: 0; margin-right: 0; }
.main-content .form-error-summary a:is(:hover, :focus) { text-decoration-thickness: 2px; }

/* Meine Daten: Zwischenüberschrift „Passwort ändern (optional)“ wie die H3 der Ferientester-Formulare */
.tx-srfeuserregister-pi1 form h3.form-subheading { margin: 40px 0 20px; font-size: 1.5rem; }

/* A11y-7 Eine H1 je Seite (Befund 7, 24.10.2026): diese Inhaltsüberschriften waren H1 und sind jetzt H2 (Unterzeile H3),
   Optik wie vorher. Unter dem Kopfbild macht L24 sie schon groß, hier nur der Abstand der H1 und die Unterzeile wie eine H2 */
:is(#c2, #c123, #c180, #c193, #c204, #c229, #c245, #c564, #c731, #c737, #c1488, #c1561, #c1682, #c4271, #c4397, #c5395,
    #c7021, #c7481, #c8477, #c8629, #c9521, #c11437, #c12097, #c13735, #c13955) > header > h2 { margin-bottom: 11px; }
:is(#c152, #c180, #c193, #c245, #c731, #c1682, #c4397) > header > h2 + h3 { text-transform: none; margin-bottom: 20px; }
/* nicht die erste Überschrift unter dem Kopfbild (Login-Seite, Sport, Pressemitteilungen, Ferientester): ganz wie die H1 */
:is(#c18, #c152, #c5535, #c15847) header > h2 { margin-bottom: 11px; font-size: 2rem; font-weight: normal; line-height: 1.1; text-transform: uppercase; }
@media (max-width: 991px) { :is(#c18, #c152, #c5535, #c15847) header > h2 { font-size: 6vw; } }
/* Unterzeile als eigenes Element (L24-Abstand) jetzt auch nach einer H2 (TOP300, TOP20, Werbemittelshop) */
.frame-type-header:has(> header > h2:only-child):has(+ .frame > header:first-child > h2:first-child) > header { margin-bottom: 0; padding-bottom: 0; }
/* Sport: auf "Sport" (H1) folgt das Versprechen jetzt als H2, die L24-Regel für die Unterzeile soll dort nicht greifen */
#c151 > header { margin-bottom: 10px; padding-bottom: 4px; }

/* TOP50-Mail-Button unter „Schon gewusst?!“ (Seite 205, ContentAdditionsCommand): zentriert wie der Kasten darüber */
#c30010 { margin-top: 24px; }
#c30010 .pushbutton { justify-content: center; }

/* form-anchor.js: content element focused after sending a form (for screen readers), without focus frame */
.frame[id^="c"][tabindex="-1"]:focus { outline: none; }

/* L65 nicht angemeldet: „Anmelden“ mit Personen-Symbol rechts in der Hauptnavigation (weiß wie die Kreise), springt zum
   Login-Formular der Startseite */
.navbar--account-in-main .navbar__items > .navbar-login { flex: none; display: flex; align-items: center; gap: 8px; height: 35px; margin-left: auto; padding: 0 16px 0 12px; border-radius: 18px; background: #fff; color: #0a4169; font-weight: 500; text-decoration: none; white-space: nowrap; }
.navbar--account-in-main .navbar__items > .navbar-login:is(:hover, :focus-visible) { color: #283e4f; text-decoration: none; }
/* L65 Startseite: rechts in der Logo-Leiste, auf schmalen Schirmen nur das Symbol im weißen Kreis */
.navbar.a > .container { position: relative; }
.navbar.a .navbar-login { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; height: 35px; padding: 0 16px 0 12px; border-radius: 18px; background: #fff; color: #0a4169; font-weight: 500; text-decoration: none; white-space: nowrap; }
.navbar.a .navbar-login:is(:hover, :focus-visible) { color: #283e4f; text-decoration: none; }
.navbar.a .navbar__account-icon { display: block; width: 21px; height: 21px; }
@media (max-width: 479px) {
    .navbar.a .navbar-login { width: 35px; padding: 0; justify-content: center; }
    .navbar.a .navbar-login span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Angebotsflyer: the 8.7 rule ".frame-type-dce_dceuid6:last-child .flyer" names the wrong DCE (6 = Eventteaser, flyer is 13),
   so the last flyer of a section kept its divider and 120px spacing */
.frame-type-dce_dceuid13:last-child .flyer { border: 0; padding: 0; margin: 0; }

/* Einheitliche Abstände (Nutzerwunsch 29.10.2026, Abweichung vom Altsystem): Bereiche am Desktop 60px statt 100px bzw.
   70px (expand-bg); folgt ein Bereich mit gleichem Hintergrund und ohne farbige Spalten direkt auf einen solchen, nur
   einmal Abstand (bisher bis 200px Lücke zwischen zwei weißen oder zwei grauen Bereichen) */
@media (min-width: 992px) {
  body section,
  body section.section--expand-bg { padding-top: 60px; padding-bottom: 60px; }
}
body section:is(.section--default, .section--white):not(:has(.section__content:is(.section__col--gray, .section__col--green, .section__col--blue, .section__col--red, .section__col--yellow, .section__col--aqua, .section__col--black, .section__col--primary)))
  + section:is(.section--default, .section--white):not(:has(.section__content:is(.section__col--gray, .section__col--green, .section__col--blue, .section__col--red, .section__col--yellow, .section__col--aqua, .section__col--black, .section__col--primary))),
body section.section--gray:not(:has(.section__content:is(.section__col--gray, .section__col--green, .section__col--blue, .section__col--red, .section__col--yellow, .section__col--aqua, .section__col--black, .section__col--primary)))
  + section.section--gray:not(:has(.section__content:is(.section__col--gray, .section__col--green, .section__col--blue, .section__col--red, .section__col--yellow, .section__col--aqua, .section__col--black, .section__col--primary))) { padding-top: 0; }
/* Abstände der Inhaltselemente („Abstand davor/danach“, ca. 100 von 2.000 Elementen gesetzt): bisher bis 5,5em (88px),
   jetzt höchstens 30px, damit Lücken zwischen Elementen und an Trennlinien gleich groß sind */
.frame.frame-space-before-extra-small { margin-top: 10px; }
.frame.frame-space-before-small { margin-top: 20px; }
.frame.frame-space-before-medium,
.frame.frame-space-before-large,
.frame.frame-space-before-extra-large { margin-top: 30px; }
.frame.frame-space-after-extra-small { margin-bottom: 10px; }
.frame.frame-space-after-small { margin-bottom: 20px; }
.frame.frame-space-after-medium,
.frame.frame-space-after-large,
.frame.frame-space-after-extra-large { margin-bottom: 30px; }

/* Passwort ändern: Abstand zwischen Knopf und Passwort-Anforderungen */
.tx-felogin-pi1 form + p { margin-top: 30px; }
/* Zwischenüberschrift (Textelement nur mit Überschrift): näher am folgenden Inhalt als am vorigen */
.frame-type-text:not(:has(.ce-bodytext)) > header { margin-bottom: 15px; padding-bottom: 0; }
.frame-type-text:not(:has(.ce-bodytext)) > header > :is(h1, h2, h3, h4) { margin-bottom: 0; }