hr {
  height: 0.25rem;
  border-style: dotted;
  border-style: none;
  background-image: linear-gradient(to right, currentColor 33%, transparent 33%);
  background-position: bottom;
  background-size: 5px 2px;
  background-repeat: repeat-x;
}

/* Styles für das eigene RTE-Preset (Configuration/RTE/Default.yaml).
   Reines CSS, absichtlich AUSSERHALB der Tailwind/PostCSS-Pipeline
   (wird per vite-plugin-static-copy 1:1 kopiert, siehe vite.config.js).
   Neue RTE-Klassen einfach hier ergänzen - kein Tailwind-Build, kein
   safelist-Eintrag nötig. */

.text-small {
  font-size: 1.0625rem;
  line-height: 1.4375rem;
}
.telefon-text,
.email-text {
  font-weight: 400;
}

/* Icon und Text zueinander vertikal zentrieren - gilt für alle Klassen
   nach dem "*-text"-Namensschema (siehe Icon-Größenregel weiter unten)
   sowie für telephone-link/email-link/file-link (Icon+Text-Links, RTE Default.yaml).
   line-height: 28px (= Icon-Höhe) verhindert, dass die Zeilenhöhe des
   Textes (mit zusätzlichem Font-Leading) höher ist als die Icon-Box und
   align-items:center dadurch gegen eine asymmetrische Box zentriert. */
[class$="-text"],
.external-link,
.page-link,
.telephone-link,
.email-link,
.file-link {
  display: inline-flex;
  align-items: center;
  line-height: 22px;
}

/* Größe gilt für alle Icon-Klassen nach dem "*-text"-Namensschema
   (telefon-text, email-text, künftige) sowie telephone-link/email-link/file-link -
   neue Klassen brauchen daher keinen eigenen Größen-Eintrag, nur ihre
   eigene background-image-Regel. */
[class$="-text"]::before,
.external-link::before,
.page-link::before,
.telephone-link::before,
.email-link::before,
.file-link::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-right: calc(0.05em + 10px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* "*-text"-Klassen (telefon-text, email-text): Das Icon ist aus dem Fluss
   genommen (absolut, vertikal zentriert). Sonst liefert das leere ::before die
   Grundlinie der inline-flex-Box und das 28px-Icon vergrößert die Zeilenbox -
   die Zeilen mit Icon hätten einen anderen Abstand als reine Textzeilen.
   So bestimmt allein der Text die Grundlinie - Text und Icon-Text-Zeilen
   liegen auf einem gemeinsamen Raster.
   Zeilenabstand zwischen zwei Icon-Zeilen: 22px (line-height) + margin-top +
   margin-bottom = 35px (der ursprünglich gewünschte Abstand zwischen den
   Icon-Zeilen). Der Abstand zur Textzeile darüber ist ca. 7px + margin-top +
   Textoberkante (~16px) = 35px. Zum Feinjustieren: margin-top verschiebt den
   Abstand zur Zeile darüber, die Summe beider Margins den Icon-Zeilenabstand.
   Nicht im Footer (footer *): dort gilt das ursprüngliche Layout (Icon im Fluss,
   Abstand über _footer.scss). */
[class$="-text"]:not(footer *) {
  position: relative;
  padding-left: calc(28px + 0.05em + 10px);
  margin-top: 12px;
  margin-bottom: 1px;
}

[class$="-text"]:not(footer *)::before {
  position: absolute;
  left: 0;
  top: 50%;
  margin-right: 0;
  transform: translateY(-50%);
}

/* Link-Icons als Maske statt background-image: das Icon wird in
   currentColor eingefärbt und übernimmt so immer dieselbe Farbe wie der
   Linktext - auch beim Hover (siehe .page-link:hover etc. weiter unten).
   Die Farbe in den SVG-Dateien selbst spielt dafür keine Rolle. */
.external-link::before,
.page-link::before,
.telephone-link::before,
.email-link::before,
.file-link::before,
.page-link-arrow::after {
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.external-link::before {
  width: 22px;
  height: 22px;
  -webkit-mask-image: url("../Icons/external-link.svg");
  mask-image: url("../Icons/external-link.svg");
}


.page-link::before {
  width: 22px;
  height: 22px;
  -webkit-mask-image: url("../Icons/pfeil_rechts_klein.svg");
  mask-image: url("../Icons/pfeil_rechts_klein.svg");
}

/* Hover: Icon invertiert (gefüllter Kreis, Pfeil ausgespart) - wie die
   Circle-Arrow-Buttons (group-hover:fill-current). */
.page-link:hover::before {
  -webkit-mask-image: url("../Icons/pfeil_rechts_klein_invert.svg");
  mask-image: url("../Icons/pfeil_rechts_klein_invert.svg");
}

.page-link-arrow:hover::after {
  -webkit-mask-image: url("../Icons/pfeil_rechts_invert.svg");
  mask-image: url("../Icons/pfeil_rechts_invert.svg");
}

.telefon-text::before {
  background-image: url("../Icons/telephone.svg");
}

.email-text::before {
  background-image: url("../Icons/envelope.svg");
}
.telephone-link::before {
  width: 22px;
  height: 22px;
  -webkit-mask-image: url("../Icons/telephone-link.svg");
  mask-image: url("../Icons/telephone-link.svg");
}

.email-link::before {
  width: 22px;
  height: 22px;
  -webkit-mask-image: url("../Icons/email-link.svg");
  mask-image: url("../Icons/email-link.svg");
}

.file-link::before {
  width: 22px;
  height: 22px;
  -webkit-mask-image: url("../Icons/download-link.svg");
  mask-image: url("../Icons/download-link.svg");
}

.page-link,
.page-link-arrow,
.external-link,
.file-link,
.folder-link,
.telephone-link,
.email-link,
.link-no-icon {
  color: var(--color-bfw-blue-tertiary);
  transition: color 150ms;
}

.page-link:hover,
.page-link-arrow:hover,
.external-link:hover,
.file-link:hover,
.folder-link:hover,
.telephone-link:hover,
.email-link:hover,
.link-no-icon:hover {
  color: var(--color-bfw-blue-dark);
  /* Wie .btn-link:hover (_buttons.scss). Die Icons (::before/::after) sind
     leere Flex-Items ohne Text, die Unterstreichung trifft daher nur den Linktext. */
  text-decoration-line: underline;
  text-underline-offset:5px;
}

/* Page-Link(-Arrow): immer rechtsbündig mit Pfeil-Icon (Kreis + Pfeil), siehe
   Screenshot. Optische Entsprechung zu .btn-link.btn-link--circle-arrow
   (Resources/Private/Frontend/StyleSheets/components/_buttons.scss,
   z.B. in den News-Teasern) - hier als reines CSS nachgebaut, da RTE-Links
   nur ein einzelnes <a>-Element ohne verschachteltes <svg> sind.
   width: fit-content + margin-left: auto sorgt für die Rechtsbündigkeit
   unabhängig von der Textausrichtung des umgebenden Absatzes.
   .page-link-arrow ist eine optisch identische Alternative zu .page-link
   (eigene Klasse, damit Redakteure im Link-Dialog explizit zwischen
   "Seitenlink" und "Seitenlink (Pfeil)" wählen können, siehe RTE/Default.yaml). */
.page-link-arrow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  width: fit-content;
  margin-left: auto;
  font-size: 1.25rem;
  font-weight: 500;
  text-decoration: none;
}

.page-link-arrow::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 51px;
  height: 51px;
  -webkit-mask-image: url("../Icons/pfeil_rechts.svg");
  mask-image: url("../Icons/pfeil_rechts.svg");
}

/* Link ohne Icon (RTE Link-Dialog und Style-Dropdown, siehe RTE/Default.yaml).
   Im Link-Dialog ersetzt die Klasse die automatisch gesetzte Standardklasse
   (page-link, external-link, ...). Über das Style-Dropdown kommt sie dagegen
   zusätzlich zu dieser Klasse ans <a> - daher a.-Präfix für höhere Spezifität,
   damit Icon und Icon-Layout der Link-Klassen sicher überschrieben werden.
   Gleiche Box wie die Icon-Links (inline-flex, 22px), das ::before bleibt als
   unsichtbarer 0px breiter Platzhalter: Die inline-flex-Box sitzt auf der
   Grundlinie und macht die Zeile höher als die normale Zeilenhöhe - ohne
   diesen Ausgleich hätten Zeilen mit und ohne Icon unterschiedliche Abstände. */
a.link-no-icon {
  text-decoration: none;
  display: inline;
  align-items: center;
  line-height: 22px;
}

a.link-no-icon::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 22px;
  margin: 0;
  background: none;
  -webkit-mask-image: none;
  mask-image: none;
}

a.link-no-icon::after {
  content: none;
  display: none;
}


.very-big-text {
  font-size: 65px;
  line-height: 65px;
  font-weight: 400;
}

/* Absatz unterstrichen (RTE Style-Dropdown, siehe Configuration/RTE/Default.yaml).
   Optische Entsprechung zur gepunkteten h2-Unterstreichung
   (Resources/Private/Frontend/StyleSheets/_typo.scss, "border-b border-dotted
   border-bfw-gray-500"), hier als reines CSS für Absätze im RTE-Fließtext. */
.underlined-paragraph {
  padding-bottom: 8px;
  border-bottom: 2px dotted var(--color-bfw-gray-500);
}

/* Halber Absatz (RTE Style-Dropdown, siehe Configuration/RTE/Default.yaml):
   verkleinerter Abstand nach unten. */
p.half-paragraph {
  margin-bottom: 0.5rem;
}

.arrow-list {
  list-style-type: none;
  padding-left: 0;
}

.arrow-list li {
  position: relative;
  padding-left: 45px;
  margin-bottom: 0.5rem;
  min-height: 28px;
  display: flex;
  align-items: center;
}

.arrow-list li::before {
  content: "";
  position: absolute;
  left: 0;
  display: inline-block;
  width: 28px;
  height: 28px;
  background-image: url("../Icons/pfeil_rechts.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Button-Links (RTE Style-Dropdown, siehe Configuration/RTE/Default.yaml).
   Optische Entsprechung zu .btn-primary/.btn-outline (Resources/Private/
   Frontend/StyleSheets/components/_buttons.scss), hier aber als reines CSS
   nachgebaut statt der Tailwind-Klassen, da rte.css bewusst außerhalb der
   Tailwind-Pipeline steht (s.o.) und ein Link im RTE-Fließtext trotzdem wie
   ein Button aussehen soll. Maße wie .btn (dort bei Änderungen mitpflegen). */
.link-button,
.link-button-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 46px;
  padding: 0 24px;
  border: 2px solid var(--color-bfw-blue-tertiary);
  border-radius: 999px;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color 150ms, color 150ms, border-color 150ms;
  min-width: 282px;
}

@media (min-width: 768px) {
  .link-button,
  .link-button-outline {
    min-height: 56px;
    font-weight: 600;
    font-size: 20px;
  }
}

.link-button {
  background-color: var(--color-bfw-blue-tertiary);
  color: #fff;
}

.link-button:hover {
  background-color: var(--color-bfw-blue-dark);
  border-color: var(--color-bfw-blue-dark);
  color: #fff;
}

.link-button-outline {
  background-color: #fff;
  color: var(--color-bfw-blue-tertiary);
}

.link-button-outline:hover {
  background-color: var(--color-bfw-light-gray-blue);
  color: var(--color-bfw-blue-tertiary);
}

.redaktion {
  color: #ff00ff;
}