/* ==========================================================================
   Bitblade Group Designsystem fuer RobustBook
   Wird NACH style.css geladen und ueberschreibt dessen Werte gezielt.
   Enthaelt: Inter (selbst gehostet), Farbvariablen, Typografie-Grundwerte,
   Kopf-/Hero-/Fussbereich in Deep Navy, sowie Formulare/Buttons/Tabellen/
   Karten-Feinschliff. Keine Aenderung an Text, URLs, Meta- oder SEO-Logik.
   ========================================================================== */

/* --- Inter, selbst gehostet (kein Google-Fonts-CDN) --------------------- */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Farbsystem (Bitblade Group Styleguide) ------------------------------
   Hausfarben + Abstufungen laut Styleguide. rb-blue-strong ist die
   dunkelste Blau-Abstufung (#1D4ED8) aus derselben Skala wie Electric Blue
   und wird gezielt dort eingesetzt, wo Electric Blue (#247BFF) als Text auf
   hellem Grund die WCAG-AA-Schwelle von 4.5:1 nicht erreichen wuerde
   (siehe Kontrastpruefung im Auslieferungsbericht). Cyan Accent bleibt auf
   dunklen Flaechen bzw. rein dekorativen Verwendungen beschraenkt, da Cyan
   auf Soft White als Text WCAG AA nicht besteht (2.05:1).
   -------------------------------------------------------------------------- */
:root {
  /* Hausfarben */
  --rb-navy:          #020B18; /* Deep Navy */
  --rb-graphite:       #111827; /* Graphite */
  --rb-blue:           #247BFF; /* Electric Blue: Akzent auf Deep Navy, Rahmen/Deko auf hell */
  --rb-blue-strong:    #1D4ED8; /* Blau-Abstufung 700: Text/Links/Buttons auf hellem Grund (AA) */
  --rb-cyan:           #38BDF8; /* Cyan Accent: nur auf Deep Navy / dekorativ */
  --rb-white:          #F8FAFC; /* Soft White */

  /* Navy-Abstufungen */
  --rb-navy-950: #020617;
  --rb-navy-900: #020B18;
  --rb-navy-800: #0B1220;
  --rb-navy-700: #111827;
  --rb-navy-600: #1F2937;

  /* Blau-Abstufungen */
  --rb-blue-700: #1D4ED8;
  --rb-blue-500: #247BFF;
  --rb-blue-400: #3B82F6;
  --rb-blue-300: #60A5FA;
  --rb-blue-200: #93C5FD;

  /* Cyan-Abstufungen */
  --rb-cyan-700: #0891B2;
  --rb-cyan-600: #06B6D4;
  --rb-cyan-400: #38BDF8;
  --rb-cyan-300: #67E8F9;
  --rb-cyan-200: #A5F3FC;

  /* Neutral-Abstufungen */
  --rb-neutral-900: #111827;
  --rb-neutral-600: #4B5563;
  --rb-neutral-400: #9CA3AF;
  --rb-neutral-200: #E5E7EB;
  --rb-neutral-50:  #F8FAFC;

  /* RGB-Tripel fuer rgba()-Verwendung (Transparenzen, Tints, Schatten) */
  --rb-navy-rgb:        2,11,24;
  --rb-blue-rgb:        36,123,255;
  --rb-blue-strong-rgb: 29,78,216;
  --rb-cyan-rgb:        56,189,248;

  /* Typografie */
  --rb-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
}

/* --- Typografie-Grundwerte ------------------------------------------------
   html{font-size} ueberschreibt style.css (14px mobil / 16px ab 768px) mit
   einem einheitlichen 16px-Basiswert, damit Fliesstext ueberall 16px ist.
   -------------------------------------------------------------------------- */
html {
  font-size: 16px;
}

body {
  font-family: var(--rb-font);
  color: var(--rb-graphite);
  line-height: 1.6;
  font-size: 1rem;
}

/* Sicherheitsnetz gegen horizontalen Ueberlauf durch einzelne lange, nicht
   umbrechbare Textlaeufe (ausgeschriebene URLs als Linktext, lange
   Unterstrich-Linien im Widerrufsformular u.ae.) - betrifft u.a. AGB,
   Datenschutz, Impressum bei 320px. Aendert nichts am sichtbaren Text,
   bricht nur bei Bedarf innerhalb eines zu langen Wortes um. */
body, p, a, td, th, li {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Eingebettete iframes (z.B. Matomo-Opt-out-Widget in der Datenschutzseite,
   feste Inline-Breite 600px) sollen die mobile Seitenbreite nicht sprengen.
   max-width setzt sich gegenueber der Inline-width durch (Box-Sizing-Regel),
   ohne dass die Inline-Angabe selbst geaendert werden muss. */
iframe {
  max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--rb-font);
  font-weight: 600;
  color: var(--rb-graphite);
}

/* --- Fluide Typografie (Redesign Stufe 3) ---------------------------------
   Ersetzt die feste Bootstrap-Groesse (.h1,h1{font-size:2.5rem} usw.) durch
   clamp(), damit die Schrift zwischen den Haltepunkten stufenlos mitwaechst
   statt an festen Breakpoints zu springen. Werte wie im Redesign-Plan
   (Kapitel 4.3) vorgegeben. h4-h6 behalten die Bootstrap-Groessen bei, da
   dafuer kein Sprung-Problem gemeldet wurde. */
h1, .h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
}
h2, .h2 {
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
}
h3, .h3 {
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
}

/* Zeilenlaenge im Fliesstext auf 65-75 Zeichen begrenzen (Lesbarkeit).
   max-width wirkt nur dort, wo die Spalte breiter waere - in mehrspaltigen
   Rastern (Karten, Kacheln) ist die Spalte ohnehin schmaler und die Regel
   damit wirkungslos. Vorhandene Inline-max-width (z.B. 760px auf einzelnen
   Lead-Absaetzen) hat als Inline-Style automatisch Vorrang. */
p {
  max-width: 68ch;
}

/* Ehemals 'Anton' (entfaellt) - Seitentitel/Markenueberschriften jetzt Inter Bold */
.text-robustbook-logo {
  font-family: var(--rb-font);
  font-weight: 700;
}

a {
  font-family: var(--rb-font);
}

/* --- Kopf-, Hero- und Fussbereich: Deep Navy ------------------------------ */

/* .bg-primary faerbt in style.css bereits Topbar + Navbar (siehe Farbsystem
   oben, dort auf --rb-navy gesetzt). Hier folgen die Kontext-Anpassungen,
   die noetig sind, weil dieselben Utility-Klassen (.text-primary, a, ...)
   sowohl auf hellem Content als auch auf dem neuen dunklen Fussbereich
   vorkommen. */

.footer {
  background-color: var(--rb-navy);
  color: var(--rb-white);
}

.footer a {
  color: var(--rb-blue);
}
.footer a:hover {
  color: var(--rb-cyan);
}
.footer .text-primary {
  color: var(--rb-blue) !important;
}
.footer .text-muted {
  color: rgba(248, 250, 252, 0.6) !important;
}
.footer .text-robustbook-logo {
  color: var(--rb-white);
}
/* Durabook-Markenblau (unveraendert auf hellem Grund) besteht auf Deep Navy
   nicht die 4.5:1-Schwelle (2.29:1) - im Fussbereich daher auf Cyan Accent,
   den Styleguide-Farbton fuer digitale Highlights auf dunklem Grund. */
.footer .text-durabook-model {
  color: var(--rb-cyan) !important;
}

/* Sprachwahl-Seite (/index.php) nutzt dieselbe Fusszeilen-Struktur ohne
   .footer-Klasse (footer class="footer" ist dort ebenfalls gesetzt, die
   Regeln oben greifen daher gleichermassen). */

/* Jumbotron-Hero (Branchenseiten): Verlauf ist bereits in style.css auf
   --rb-navy-rgb umgestellt; Ueberschriften nutzen dort durchgehend
   text-white (Bootstrap), das auf Deep Navy sehr sicher besteht (19.7:1). */

/* --- Formulare -------------------------------------------------------- */
.form-control {
  color: var(--rb-neutral-600);
  border: 1px solid var(--rb-neutral-400);
  border-radius: 6px;
  font-weight: 600;
}
.form-control:focus {
  color: var(--rb-blue-strong);
  border-color: var(--rb-blue);
  box-shadow: 0 0 0 0.2rem rgba(var(--rb-blue-rgb), 0.25);
}
.form-check-input:checked {
  background-color: var(--rb-blue);
  border-color: var(--rb-blue);
}
label {
  color: var(--rb-graphite);
}

/* --- Schaltflaechen ----------------------------------------------------
   Fuellung Electric-Blue-Abstufung (rb-blue-strong), Schrift Soft White.
   rb-blue-strong statt des reinen rb-blue, weil Soft-White-Text auf
   #247BFF nur 3.75:1 erreicht (AA-Fliesstext braucht 4.5:1); auf
   #1D4ED8 sind es 6.41:1. Beide Toene sind offizielle Blau-Abstufungen
   desselben Styleguide-Schemas. */
.btn {
  font-family: var(--rb-font);
  border-radius: 6px;
}
.btn-primary,
.btn-primary:not([disabled]):not(.disabled).active,
.btn-primary:not([disabled]):not(.disabled):active,
.show > .btn-primary.dropdown-toggle,
.btn-primary.focus,
.btn-primary:focus {
  background-color: var(--rb-blue-strong);
  border-color: var(--rb-blue-strong);
  color: var(--rb-white);
}
.btn-primary:hover {
  background-color: var(--rb-navy);
  border-color: var(--rb-navy);
  color: var(--rb-white);
}

.btn-secondary {
  color: var(--rb-blue-strong);
  background-color: var(--rb-white);
  border: 1px solid rgba(var(--rb-blue-strong-rgb), 0.35);
}
.btn-secondary:hover,
.btn-secondary:not([disabled]):not(.disabled).active,
.btn-secondary:not([disabled]):not(.disabled):active,
.show > .btn-secondary.dropdown-toggle,
.btn-secondary.focus,
.btn-secondary:focus {
  color: var(--rb-navy);
  background-color: var(--rb-white);
  border-color: var(--rb-navy);
}

.btn-outline-primary {
  color: var(--rb-blue-strong);
  border-color: var(--rb-blue);
}
.btn-outline-primary:hover,
.btn-outline-primary:not([disabled]):not(.disabled).active,
.btn-outline-primary:not([disabled]):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle {
  color: var(--rb-white);
  background-color: var(--rb-blue-strong);
  border-color: var(--rb-blue-strong);
}

.btn-grey {
  background-color: var(--rb-neutral-600);
}
.btn-grey:hover,
.btn-grey:not([disabled]):not(.disabled).active,
.btn-grey:not([disabled]):not(.disabled):active,
.show > .btn-grey.dropdown-toggle,
.btn-grey.focus,
.btn-grey:focus {
  background-color: var(--rb-neutral-900);
}

/* Bootstrap-Komponenten, die #007bff direkt nutzen und von style.css nicht
   bereits ueberschrieben werden (Badges, Pagination, Fortschrittsbalken,
   custom-Controls). bootstrap.min.css selbst wurde zusaetzlich per
   #007bff -> #247BFF ersetzt (siehe Bericht); diese Regeln sind ein
   zusaetzliches Sicherheitsnetz fuer AA-Konformitaet auf hellem Grund. */
.badge-primary {
  color: var(--rb-white);
  background-color: var(--rb-blue-strong);
}
.border-primary {
  border-color: var(--rb-blue) !important;
}
.page-link {
  color: var(--rb-blue-strong);
}
.page-item.active .page-link {
  background-color: var(--rb-blue-strong);
  border-color: var(--rb-blue-strong);
}
.progress-bar {
  background-color: var(--rb-blue-strong);
}
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--rb-blue-strong);
  border-color: var(--rb-blue-strong);
}
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(var(--rb-blue-rgb), 0.25);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--rb-blue-strong);
}

/* --- Tabellen: feine Linien, hohe Informationsdichte -------------------- */
thead tr {
  background-color: var(--rb-navy);
  color: var(--rb-white);
}
.table {
  font-size: 0.9375rem;
}
.table th,
.table td {
  border-color: var(--rb-neutral-200);
  padding: 0.6rem 0.75rem;
}
.table-bordered,
.table-bordered th,
.table-bordered td {
  border: 1px solid var(--rb-neutral-200);
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(var(--rb-navy-rgb), 0.02);
}

/* --- Karten --------------------------------------------------------------
   Card-Header nutzte bislang Lavendel (#ede5ed), passend zum alten
   Tuerkis-Schema. An das Neutral-System angeglichen (Soft White + feine
   Trennlinie), damit Karten neben Navy/Blau/Cyan nicht mehr aus dem
   System fallen (Auftrag Punkt 6: "Karten ... an das System angleichen"). */
.card {
  border: 1px solid var(--rb-neutral-200);
}
.card-header {
  background-color: var(--rb-neutral-50);
  border-bottom: 1px solid var(--rb-neutral-200);
}
.rb-package-card--recommended {
  border: 2px solid rgba(var(--rb-blue-rgb), 0.35);
  box-shadow: 0 12px 32px rgba(var(--rb-blue-rgb), 0.12);
}
.rb-badge {
  background: rgba(var(--rb-blue-rgb), 0.12);
  color: var(--rb-blue-strong);
  border: 1px solid rgba(var(--rb-blue-rgb), 0.25);
}

/* --- Hero-Ueberschrift ueber der Wellen-SVG (Regression-Fix) ---------------
   Betrifft ausschliesslich die zwei H1 in /index.php und /de/index.php, die
   per .mt-md--10 absichtlich in Richtung der navy Wellen-SVG hochgezogen
   werden. Graphit (--rb-graphite) faellt auf Deep Navy auf 1.11:1 (siehe
   Redesign-Bericht). Electric Blue erreicht 5.03:1 auf Deep Navy UND 3.92:1
   auf Weiss / 3.75:1 auf Soft White - beides ueber der AA-Schwelle 3:1 fuer
   grosse Schrift (h1 hier: 40px/700, qualifiziert als "large text"). Wirkt
   zusammen mit der vw-gekoppelten Geometrie in style.css (.mt-md--10) als
   zweite, unabhaengige Absicherung gegen dieselbe Regression - unabhaengig
   davon, was hinter der Ueberschrift tatsaechlich gemalt ist. */
.hero-heading {
  color: var(--rb-blue);
}

/* --- Barrierefreiheit (Redesign Stufe 5) ----------------------------------
   Sprunglink, Fokusrahmen, Mindestgroesse fuer Bedienelemente. */

/* "Zum Inhalt springen": erstes fokussierbares Element, per Default
   ausserhalb des sichtbaren Bereichs, erscheint bei Tastaturfokus. */
.skip-link {
  position: absolute;
  top: -60px;
  left: 0;
  z-index: 100000;
  background-color: var(--rb-navy);
  color: var(--rb-white);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease-in-out;
}
.skip-link:focus {
  top: 0;
  color: var(--rb-white);
}

/* Sichtbarer Fokusrahmen auf allen Bedienelementen (2px Electric Blue,
   2px Abstand). :focus-visible wird bevorzugt (kein Ring bei Maus-Klick),
   mit :focus als Sicherheitsnetz fuer Browser ohne :focus-visible. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--rb-blue);
  outline-offset: 2px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible) {
  outline: none;
}
/* Fallback fuer Browser ohne :focus-visible-Unterstuetzung */
.no-focus-visible a:focus,
.no-focus-visible button:focus,
.no-focus-visible input:focus,
.no-focus-visible select:focus,
.no-focus-visible textarea:focus,
.no-focus-visible [tabindex]:focus,
.no-focus-visible .btn:focus {
  outline: 2px solid var(--rb-blue);
  outline-offset: 2px;
}

/* Touch-Ziele: mindestens 44x44px mit ausreichend Abstand (WCAG 2.5.5).
   Fusszeilen-Links bekommen stattdessen vertikales Padding (waechst die
   Trefferflaeche mit, ohne die Zeilen optisch zu vergroessern). */
.navbar-nav .nav-link,
.btn,
.navbar-toggler {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.dropdown-item {
  min-height: 44px;
}
.footer p > a,
.footer p > button {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  display: inline-block;
}
.btn-xs {
  min-height: 44px;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Testumgebungs-Banner-Link und Kontaktleiste ueber der Navbar: beide sind
   schmale Textlinks mit zu geringer Trefferhoehe (37px / 20px gemessen). */
body > div[style*="position:sticky"] a,
.container-fluid.bg-primary a,
.container-fluid.bg-primary .text-muted {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.container-fluid.text-md-right.bg-primary,
.container-fluid.text-md-right.text-sm-center.bg-primary {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

/* Telefon-/E-Mail-Links in Fliesstext-Absaetzen (z.B. "Noch Fragen? +49...",
   Impressum "Telefon: ..."): stehen im Markup bereits auf einer eigenen
   Zeile (nach <br> bzw. als eigener Absatz), daher ist eine groessere
   Trefferflaeche hier ohne Ueberlappungsrisiko moeglich. */
.product-feature a[href^="tel:"],
a[href^="tel:"],
a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Formularfelder: min-height fuer Touch-Ziele */
.form-control {
  min-height: 44px;
}

/* Tabellenverlinkungen (z.B. "IP Schutz", "RFID-Reader" mit externem Link-
   Icon): zusaetzliches vertikales Padding erhoeht die Trefferflaeche, ohne
   die Zeilenhoehe der dichten Vergleichstabelle unnoetig aufzublaehen. */
.table-responsive th a,
.table-responsive td a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 2px;
}
/* Dieselben Info-/Tooltip-Links kommen ausserhalb von Tabellen vor (z.B. im
   Jumbotron-Intro der Branchenseiten), dort jeweils als eigene Zeile in
   einem eigenen <p class="h5">. */
p.h5 > .info-tooltip > a,
p.h5 > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  padding: 0 4px;
}

/* --- Vergleichstabellen: fixierte erste Spalte + Sticky-Kopfzeile ---------
   Wichtigster Einzelpunkt aus dem Redesign-Plan (Kapitel 4.4). Betrifft die
   vier Seiten vergleichstabelle-{laptops,tablets,zubehoer-laptops,
   zubehoer-tablets}. Ohne fixierte erste Spalte ist ein Haekchen in Spalte 4
   nach dem Wegwischen der Merkmalsbezeichnung bedeutungslos. */
.table-responsive table th:first-child,
.table-responsive table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: #fff;
}
.table-responsive table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background-color: var(--rb-navy);
  color: var(--rb-white);
}
.table-responsive table thead th:first-child {
  z-index: 4; /* Kopfzeile UND erste Spalte gleichzeitig fixiert -> oberste Ebene */
  /* Bugfix 2026-08-07 (Vergleichsseiten-Auftrag): die :first-child-Regel oben (Zeile ~530)
     hat hoehere Spezifitaet als ".table-responsive table thead th" und ueberschreibt
     bislang deren Navy-Hintergrund mit #fff - dadurch war eine beschriftete erste
     Kopfzellen-Spalte (z.B. "Modell") weiss auf weiss. Bislang unbemerkt, weil die
     bestehenden vier Detailtabellen dort keinen sichtbaren Text fuehren. */
  background-color: var(--rb-navy);
  color: var(--rb-white);
}

/* Wischhinweis, nur unter 768px sichtbar (dort ist die Tabelle breiter als
   der Bildschirm - ab 768px zeigt das Layout in der Praxis alle Spalten). */
.table-wipe-hint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  color: var(--rb-neutral-600);
  margin: 0 0 0.5rem;
}
.table-wipe-hint::before {
  content: "\2194"; /* <-> */
  font-weight: 700;
  color: var(--rb-blue-strong);
}
@media (min-width: 768px) {
  .table-wipe-hint {
    display: none;
  }
}

/* Weicher Farbverlauf am rechten Rand als Andeutung, dass es weitergeht.
   Liegt auf einem nicht scrollenden Wrapper um .table-responsive, damit er
   beim Wischen am rechten Bildschirmrand stehen bleibt statt mitzuscrollen. */
.table-scroll-shadow {
  position: relative;
}
@media (max-width: 767.98px) {
  .table-scroll-shadow::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95));
    pointer-events: none;
  }
}

/* --- Branchenkacheln (Startseite) -----------------------------------------
   Nachtrag 2026-08-04/05: .carousel-caption ist bei Bootstrap unten
   verankert (bottom:20px) mit fester Zeilenhoehe ueber .h1 (40/48px) -
   bei mehrzeiligen Beschriftungen und schmaler Kachel (4-Spalten-Rechner-
   Layout) wuchs der Textblock nach oben aus der Kachel heraus. Eigene
   Klasse statt .h1 (das andernorts unveraendert bleiben muss), Flex-
   Zentrierung ueber die gesamte Kachelflaeche statt Bottom-Anchor, und
   fluide Schriftgroesse per clamp() statt fixer 40px. Sichtbarer Text der
   Beschriftungen bleibt unveraendert - nur Layout-Mechanik geaendert. */
.branchen-tile {
  position: relative;
  display: block;
  overflow: hidden; /* Sicherheitsnetz: garantiert 0px Ueberlauf auch bei
                        abweichenden Schriftmetriken/Zoom, auch wenn die
                        clamp()-Werte unten so bemessen sind, dass dieser
                        Fall in der Praxis nicht eintritt. */
}
.branchen-tile-label {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem;
  margin: 0;
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: clamp(1.1rem, 0.8rem + 1.4vw, 2.5rem);
  line-height: 1.15;
}
.branchen-tile-label .btn {
  font-size: clamp(0.8125rem, 0.7rem + 0.5vw, 1rem);
}