/* Bugfix (07.09.2026): styles_fonts.css wird per @import geladen, hat aber
   (siehe .htaccess) Cache-Control max-age=31536000 (1 Jahr) UND besass bisher
   keinerlei Versions-Query - Aenderungen an Schriften waeren fuer Browser, die
   die Datei einmal gecacht haben, bis zu ein Jahr lang unsichtbar geblieben.
   Manueller Cache-Buster - bei jeder Aenderung an styles_fonts.css bitte
   hochzaehlen. */
@import url("/css/styles_fonts.css?v=20260907b");
@import url("/css/styles_forms.css");
:root {
	/* Bugfix (05.09.2026, Fabrik13-Relaunch): Farbpalette war 1:1 vom
	   Vorlagen-Projekt (warmes Beige/Sand, #d3b7ac / #D2B8AB) uebernommen und nie
	   auf Fabrik13 (Schwarz/Weiss + Cyan-Akzent laut Design-PDF) umgestellt.
	   Variablennamen bewusst beibehalten (werden im ganzen Stylesheet verwendet),
	   nur die Werte auf die im PDF gemessenen Fabrik13-Farben geaendert
	   (Cyan-Akzent aus dem PDF gemessen: rgb(0,233,255); Schwarz/Footer-Ton
	   dort ebenfalls gemessen: rgb(23,23,23)). */
	--black: #171717;
	--white: #ffffff;
	--grey: #1c1c1c;
	/* Kundenwunsch (30.09.2026): Akzent von Cyan (#00e9ff) auf Rostrot (#af4303) umgestellt;
	   Schrift auf Akzentflaechen dadurch weiss statt schwarz (Kontrast). */
	--toplinecolor: #af4303;
	--toplinecolor-font: #ffffff;
	--toplinecolor-font-alternativ: #ffffff;
	--toplinecolor-hover:#8a3502;
	--formborder: #cccccc;
	--formbackground: #ffffff;
	--formradius: 8px;
	--formcolor:#333333;
	--formfocus:#fefefe;
	--beige: #f2f2f2;
	--beigehell: rgba(0, 0, 0, 0.04); /* war beige 40% - jetzt neutrales, sehr helles Grau */
	--beigedunkel: #171717;
	--accent: var(--toplinecolor);
	--text: var(--black);
	--bg: var(--white);
	--bg2: #072834;
	--bg2-alpha: rgba(7,40,52,0.2);
	--content-breite:1080px;
	--content-breite2: 1200px;
	--nav-breite:1080px;
	/* Update (07.09.2026): Klare, eindeutig benannte Font-Variablen fuer
	   zukuenftige Anpassungen (vorher hiess die grosse Display-Schrift
	   verwirrenderweise "--arsenica", obwohl sie auf Andale Mono zeigte - das
	   war ein Ueberbleibsel des Vorlagen-Projekts). Benoetigte Schriften:
	   - Andale Mono: klassische, an vielen Systemen vorinstallierte Monospace-
	     Schrift (macOS/Windows-Zusatzpakete). NICHT auf Adobe Fonts/Typekit
	     verfuegbar (Apple/Microsoft-Systemfont, kein Foundry-Lizenzmodell) -
	     falls ihr sie nicht selbst hostet, bleibt der Google-Fonts-Fallback
	     "Space Mono" aktiv (optisch aehnlich: breite, geometrische Monospace).
	   - Inter: freie, offene Schrift (SIL Open Font License), ebenfalls nicht
	     bei Adobe Fonts, dafuer direkt und dauerhaft kostenlos ueber Google
	     Fonts oder als eigene woff2-Dateien (fonts.google.com/specimen/Inter)
	     selbst hostbar - Typekit ist hierfuer nicht noetig.
	   --arsenica/--font-fliesstext/--kometMedia bleiben als Alias-Variablen
	   fuer noch nicht ueberarbeitete, aeltere Regeln im Stylesheet bestehen. */
	--font-display: "Andale Mono", "Space Mono", monospace;
	--font-body: "Inter", sans-serif;
	--arsenica: var(--font-display);
	--font-fliesstext: var(--font-body); font-weight: 300; font-style: normal;
	--arsenica-settings: "opsz" 100, "wght" 700;
	--kometMedia: var(--font-body); font-weight: 500; font-style: bold;
	--menu-height: 150px;
	--content-area: calc(100vh - var(--menu-height))
}

* { margin:0px; padding:0px; box-sizing:border-box; }

/* Bugfix (07.09.2026): "Brands/About/Contact soll zu ... sliden" - sanftes
   Scrollen zu den Anker-Zielen statt hartem Sprung. scroll-padding-top
   sorgt dafuer, dass die Zielsektion nicht unter der jetzt sticky/fixed
   94px hohen Kopfzeile verschwindet (etwas Luft dazugerechnet). */
html { overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: 110px; }
body { font-family: var(--font-body); height:100%; width:100%; color:var(--text); font-size: 20px; line-height: 30px; font-weight: 300; background-color: var(--bg); margin:0px; padding:0px; }
body.menuOpen { height: 100vh; overflow: hidden }

body a {color: var(--black)}
.bigButton  a, .bigButton  {color: var(--black); text-decoration: none !important}

/* Klassen ---------------------------- */

.bg_0 {background-color: #ffffff}
.bg_1 {background-color: var(--beigehell)}
.bg_2 {background-color: var(--beige)}

.mw1070px, .layout_3 .contentInnen { width: 1070px; max-width: 100%; margin: 0px auto }

.abstand { clear: both; }
.abstand::after { content: " "; display: block; clear: both }
.center { text-align: center }
.pt_0 { padding-top:0px !important; display: block; width: 100%; height: 0px }
.pt_1 { padding-top:20px !important; display: block; width: 100%; height: 0px }
.pt_2 { padding-top:50px !important; display: block; width: 100%; height: 0px }
.pt_3 { padding-top:70px !important; display: block; width: 100%; height: 0px }
.pt_4 { padding-top:120px !important; display: block; width: 100%; height: 0px }
.pt_5 { padding-top:160px !important; display: block; width: 100%; height: 0px }
.pt_6 { padding-top:240px !important; display: block; width: 100%; height: 0px }
.abstand.pt_0 { display: none }
.pb_0 { padding-bottom:0px !important; display: block; width: 100%; height: 0px }
.pb_1 { padding-bottom:20px !important; display: block; width: 100%; height: 0px }
.pb_2 { padding-bottom:50px !important; display: block; width: 100%; height: 0px }
.pb_3 { padding-bottom:70px !important; display: block; width: 100%; height: 0px }
.pb_4 { padding-bottom:120px !important; display: block; width: 100%; height: 0px }
.pb_5 { padding-bottom:160px !important; display: block; width: 100%; height: 0px }
.pb_6 { padding-bottom:240px !important; display: block; width: 100%; height: 0px }
.pb_7 { padding-bottom:80px !important; display: block; width: 100%; height: 0px }
.abstand.pb_0 { display: none }
.uppercaser { text-transform: uppercase }
.cmstext p { margin-bottom: 30px; font-size: 18px; line-height: 26px; }
.w50pro { width: 50% }
.w70pro { width: 70% }
.mr30px { margin-right: 30px }
.kometMedia { font-family: var(--font-body); font-weight: bold }
.mobileOnly { display: none !important }
.hc_beige { color:var(--beige) !important }
.hc_schwarz { color:var(--black) !important }
.fs14, .fs14 * { font-size: 14px }
.fs18, .fs18 * { font-size: 18px; line-height: 26px }

/* diverse Divs  ---------------------- */
h1, .h1like {  font-family: var(--font-display); font-weight: bold; font-size: 40px; padding-top: 70px; padding-bottom: 70px; line-height: 50px }
h2, .h2like {  font-size: 32px; line-height: 40px; margin-bottom: 15px; width: 100% }
h3, .h3like {  font-size: 28px; line-height: 36px; width: 100% }
h4, .h4like {  font-size: 24px; line-height: 32px; width: 100% }
/* Update (07.09.2026): Laut exakter Kunden-Vorgabe (Farbwerte der Text-Layer)
   ist der eigentliche Footer HELL mit dunklem Text (#181717) - nur die separate
   .logoBar (Marken-Logos) ist schwarz. Vorherige Annahme "kompletter Footer
   schwarz" war falsch, hier korrigiert. */
.footer {background-color: #ffffff; color: #181717; padding-top: 70px;}
#adresse h1, #adresse h2, #adresse h3 { color: #181717 }
.headline-wrap { display: flex; align-items: center }
/* Footer (Spalten) - Core-Layout 11, Ausgabe renderFooterSpalten() in inc.footer.php (12.10.2026). Ersetzt die alten Klassen
   adresseThankyou/footerGrid/footerCol/footerHeading, Optik unveraendert: oben "Thank You" mittig, darunter
   3 Link-Spalten (Contact | Privacy Policy+Imprint | Facebook+Instagram). Aufbau: .footer-grid > .footer-col (erste Spalte = Danke-Text). */
.footer-spalten .footer-grid { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 30px; max-width: 1300px; margin: 0 auto 60px; padding: 0 20px; }
.footer-spalten .footer-col { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.footer-spalten .footer-col:first-child { margin-bottom: 30px; text-align: center; gap: 0; }
.footer-spalten .footer-col__heading { font-family: var(--font-display); font-weight: 400; font-size: 48px; line-height: 54px; letter-spacing: 0.15em; text-transform: uppercase; margin: 0 0 15px; padding: 0 !important; color: #181717; }
.footer-spalten .footer-text p { font-family: var(--font-display); font-size: 24px; line-height: 30px; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.85; color: #181717; margin: 0; }
.footer-spalten .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; align-items: inherit; }
.footer-spalten .footer-col li { margin: 0; padding: 0; line-height: 29px; font-size: 24px; }
.footer-spalten .footer-col ul:has(a[target="_blank"]) { flex-direction: row; gap: 30px; justify-content: center; align-items: flex-start; }
/* Korrektur (07.09.2026): Unterstreichung CYAN (wie ueberall sonst) statt dunkel. */
.footer-spalten .footer-col ul a { font-family: var(--font-body); font-size: 24px; line-height: 29px; letter-spacing: 0.15em; text-transform: uppercase; color: #181717; text-decoration: underline; text-decoration-color: var(--toplinecolor); text-underline-offset: 4px; }
.footer-spalten .footer-col ul a:hover { color: var(--toplinecolor-hover); }
/* Kundenwunsch (09.10.2026): gleichmaessige Abstaende, alle Link-Paare untereinander statt Social nebeneinander. */
@media screen and (min-width: 901px) {
    .footer-spalten .footer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; padding: 0 60px; text-align: left; align-items: stretch; }
    .footer-spalten .footer-col { align-items: stretch; }
    .footer-spalten .footer-col:first-child { grid-column: 1 / -1; align-items: center; text-align: center; margin: 0 -40px 20px; }
    .footer-spalten .footer-col ul:has(a[target="_blank"]) { flex-direction: column; gap: 8px; justify-content: flex-start; }
}
@media screen and (min-width: 1200px) {
    .footer-spalten .footer-grid { grid-template-columns: repeat(3, max-content); justify-content: space-between; }
    .footer-spalten .footer-col:first-child { contain: inline-size; } /* Danke-Text soll die Spaltenbreiten nicht aufweiten */
}
@media screen and (max-width: 480px) {
    .footer-spalten .footer-col ul:has(a[target="_blank"]) { flex-direction: column; justify-content: center; }
}
.adresseValues { display: flex; align-items: flex-end; margin-bottom: 40px; justify-content: space-between; padding: 0 60px; gap: 30px; flex-wrap: wrap; }
.adresseValues .textRight { text-align: right; font-family: var(--font-body); font-size: 25px; font-weight: bold; text-decoration: underline; line-height: 40px }
.footer .textRight a, .adresseValues a{color: #181717; }
.lastLine { height: 100px; display: flex; flex-wrap: wrap; justify-content: flex-end; background-color: #ffffff; color: #181717; align-items: center; font-family: var(--font-body); font-size: 25px; padding: 0 60px; }
.headline:not(:empty) { font-family: var(--font-display); font-weight: bold; font-size: 40px; padding-top: 70px; padding-bottom: 70px; line-height: 50px }
.header-content strong { font-family: var(--font-display); font-weight: bold; font-size: 30px }
.mainContent strong {font-family: var(--font-body); font-size: 22px; font-weight: bold}
.mainContent a {color: var(--black)}
.mobileOnly { display: none !important }
.lastLine .adresseValues { margin-bottom: 0px }
.subline .beigedunkel { color: var(--beigedunkel); font-family: var(--font-display); text-align: center; font-size: 50px; font-weight: bold; line-height: 50px; max-width: 80%; margin: 0px auto; }
.c0 { color: var(--text) }
.c1 { color: var(--dark-green) }
.c2 { color: var(--white) }
.black h1 { color: #fff }
.black h2 { color: #fff }
.split h2 { font-size: 50px; line-height: 65px; margin-top: 50px }
.contentAfter .block { margin-top: 126px; margin-left: 7px }
.contentAfter .block .line { width: 180px; height: 3px; margin-top: 30px; margin-bottom: 30px; border-radius: 20px; background-color: var(--white) }

/* FIXING Animation on Load */
.boxOuter { display: flex; justify-content: center }
.work { font-family: var(--font-body); font-weight: 400 }
.cblack { color: #000000 }
.bold { font-weight: bold }
.normal { font-weight: normal }
.tac { text-align: center }
.mb10 { margin-bottom: 10px }
.mb20 { margin-bottom: 20px }
.mb30 { margin-bottom: 30px }
.mb40 { margin-bottom: 40px }
.mb60 { margin-bottom: 60px }
.mb80 { margin-bottom: 80px }
.mt10 { margin-top: 10px }
.mt20 { margin-top: 20px }
.mt30 { margin-top: 30px }
.mt40 { margin-top: 40px }
.mt60 { margin-top: 60px }
.mt80 { margin-top: 80px }
.flex { display: flex }
.flex.justifyAround { justify-content: space-around }
.flex.justifyBetween { justify-content: space-between }
.flex.alignCenter { align-items: center }
.flex.gap15 { gap: 15px }
.text-center { text-align: center }
.wsnowrap { white-space: nowrap }
.uppercaser { text-transform: uppercase }

/* Basis-Styling für das Headerbild */
/* Bugfix (05.09.2026): Hero war nur in der Mobile-Media-Query (max-width: 900px)
   flaechenfuellend (100vh + object-fit:cover) - am Desktop wurde das per
   "@media (min-width:768px) { .headerbildOuter{height:auto} }" weiter unten
   wieder aufgehoben, wodurch das hochformatige Originalbild in voller
   natuerlicher Hoehe (und damit riesig) durchlief statt als Hero zu wirken.
   Jetzt als Basis fuer alle Breakpoints flaechenfuellend, die Mobile-Regel
   weiter unten ueberschreibt bei Bedarf nur noch object-position. */
.topSection { position: relative; width: 100%; }
.headerbildOuter { width: 100%; height: 100vh; min-height: 560px; overflow: hidden; position: relative; }
.headerbild { width: 100%; height: 100%; position: relative; }
.headerbild img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

/* Bugfix (07.09.2026): Headline/Subline (.header-content) lagen als eigener,
   separater weisser Bereich UNTER dem Hero statt wie im PDF-Design ueber dem
   Foto zu liegen. Auf Seiten MIT Hero-Bild (Klasse .has-hero auf <body>,
   siehe index.php) wird .header-content jetzt per negativem margin-top ueber
   den unteren Teil des Hero gezogen; Text/Farben/Schriften an das PDF
   angepasst (Zeile 1 der Headline = "FABRIK 13" gross/fett, Zeile 2 =
   "presents SELECTED BRANDS" mit Mix aus normal + fett, Subline = Tagline
   ganz unten im Hero mit weiter Laufweite).
   Erwartete Headline-Struktur im CMS (rich text): zwei <p>, im zweiten das
   fett hervorzuhebende Stueck in <strong>, z.B.:
   <p>FABRIK 13</p><p>presents <strong>SELECTED BRANDS</strong></p> */
/* Bugfix (07.09.2026): margin-top:-49vh zog die Headline zwar visuell nach
   oben ins Hero-Bild, verkuerzte aber gleichzeitig den Fliesstext-Platz, den
   .header-content danach im normalen Dokumentenfluss beansprucht - dadurch
   begann der naechste Bereich ("Brands we work for & with.") zu frueh und
   ueberlappte das Hero-Bild (und vermutlich Ursache des kurzen "Blitzers"
   beim Resize: bei jeder Groessenaenderung musste diese fragile, von der
   Fliesstext-Hoehe abhaengige Verschachtelung neu berechnet werden).
   Sauberer geloest: .header-content per position:absolute komplett aus dem
   Fliesstext herausnehmen (dadurch hat es NULL Einfluss auf die Position
   nachfolgender Bereiche) und stattdessen mit padding-top exakt an dieselbe
   Stelle im Hero setzen. Da .header-content im Markup direkt nach
   .topSection folgt und beide keinen positionierten Vorfahren haben, deckt
   sich ihr Ursprung (oben links der Seite) exakt mit dem Hero-Bild. */
.has-hero .header-content {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding-top: 49vh; /* aus Figma: FABRIK13 beginnt bei ~50.8% der Hero-Hoehe */
    z-index: 20;
    background: transparent !important;
    color: #ffffff;
    pointer-events: none;
}
.has-hero .header-content a { pointer-events: auto; }
.has-hero .header-content .headline {
    padding: 0 !important;
    color: #ffffff;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.35);
}
.has-hero .header-content .headline p { padding: 0; margin: 0; }
/* Update (07.09.2026): exakte Werte aus den Figma-Dev-Mode-Angaben des Kunden
   uebernommen (vorher grobe Annaeherung ohne Vorlage). */
/* Update (07.09.2026): Feste px-Groessen sprangen zwischen Desktop (>=901px)
   und Mobile (<=900px) hart um und liessen die Tagline (.subline) im ganzen
   Bereich dazwischen (~900-1440px) ueberlaufen, weil sie zusaetzlich
   white-space:nowrap hatte. Jetzt mit clamp() fluessig skaliert (waechst/
   schrumpft stufenlos mit der Viewport-Breite) statt an EINEM Breakpoint
   hart umzuschalten - bleibt so auf jeder Breite "sauber". */
.has-hero .header-content .headline p:first-child {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(34px, 6vw, 80px);
    line-height: 1.125;
    letter-spacing: -0.04em;
}
.has-hero .header-content .headline p:nth-child(2) {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.22;
    letter-spacing: 0.15em;
    padding-top: 16px !important;
}
.has-hero .header-content .headline p:nth-child(2) strong { font-weight: 400; }
/* Kundenwunsch (30.09.2026): Logo statt Headline-Text im Titelbild
   (content.headlineLogo, z.B. Markenlogos auf den Brands-Unterseiten). */
.header-content .headline--logo { text-align: center; }
.header-content .headline--logo img {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: min(520px, 70vw);
    max-height: 22vh;
    object-fit: contain;
    filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.35));
}
.has-hero .header-content .headline--logo { text-shadow: none; }
/* !important noetig: eine spaetere, gleich spezifische Alt-Regel
   (.content-part1 .subline:not(:empty)) ueberschrieb sonst Font/Groesse
   wieder auf Inter/28px zurueck - deshalb erschien die Tagline faelschlich
   in Inter statt Andale Mono. */
.has-hero .header-content .subline {
    color: #ffffff !important;
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 34vh;
    text-align: center !important;
    white-space: nowrap;
    font-family: var(--font-display) !important;
    font-weight: 400 !important;
    /* 2.6vw ist so gewaehlt, dass die Zeile bei ~90% der Viewport-Breite
       bleibt (rechnerisch aus der Zeichenanzahl x Buchstabenabstand
       hergeleitet) - dadurch KEIN Ueberlaufen mehr zwischen 900-1440px,
       ohne dass es an einem festen Punkt hart springt. */
    font-size: clamp(18px, 2.6vw, 36px) !important;
    line-height: 1.47 !important;
    letter-spacing: 0.15em !important;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.35);
    padding: 0 20px !important;
}
@media screen and (max-width: 900px) {
    .has-hero .header-content { padding-top: 38vh; }
    /* Bugfix (07.09.2026): Die Basisregel oben setzt "padding: 0 !important"
       auf .headline (Grund: die generischen .headline-Alt-Regeln sollten
       nicht hineinfunken, siehe weiter unten im File) - dadurch klebte
       "FABRIK 13 / presents SELECTED BRANDS" am Handy direkt an der linken
       Bildschirmkante. .subline hat bereits ihr eigenes Padding, der
       Headline hat hier bisher gefehlt - jetzt ergaenzt. */
    .has-hero .header-content .headline { padding: 0 20px !important; }
    .has-hero .header-content .subline {
        margin-top: 15vh;
        /* Sicherheitsnetz fuer sehr schmale Bildschirme: statt bei sehr
           kleinem font-size stur einzeilig zu bleiben, darf hier notfalls
           umgebrochen werden (der Wunsch "einzeilig" galt explizit nur fuer
           Desktop). */
        white-space: normal !important;
        letter-spacing: 2px !important;
    }
}

/* Korrektur (07.09.2026): Die generische "section + section"-Regel setzte die
   Linie an eine unvorhersehbare Stelle (z.B. faelschlich direkt nach "Brands
   we work for & with.", aber nicht sichtbar nach Dedicated). Ersetzt durch
   eine praezise Regel nur zwischen den Marken-Teasern (.first-brand
   markiert per PHP in inc.content_parts.php den allerersten Marken-Block,
   damit DAVOR keine Linie erscheint - danach aber vor jedem weiteren). */
.content.layout_1:not(.first-brand), .content.layout_2:not(.first-brand) { border-top: 1px solid var(--toplinecolor); }
/* Korrektur (07.09.2026): "die blaue Trennlinie weiter weg vom Bild - mit
   etwas padding" - die Trennlinie sitzt genau an der Boxkante von
   .content.layout_1/2 (Border liegt IMMER ausserhalb von Padding), das
   naechste Bild begann direkt danach ohne jeden Zwischenraum. padding-top
   schiebt nur den Inhalt (Bild) nach unten, die Linie bleibt an ihrer
   Stelle - dadurch entsteht der gewuenschte Abstand dazwischen. Gilt fuer
   alle Marken-Blöcke (auch den ersten ohne Linie), damit alle Bilder
   gleich weit vom oberen Rand starten. */
@media (max-width: 900px) {
    .content.layout_1, .content.layout_2 { padding-top: 20px; }
}

/* Bugfix (07.09.2026): Nav sollte sticky sein (immer sichtbar bleiben, auch
   nach dem Scrollen ueber den Hero hinaus). Vorher war die ganze Navigation
   (Logo, Burger, Desktop-Leiste) per position:absolute an .headerbildOuter
   gebunden - dadurch verschwand sie, sobald man ueber die Hero-Hoehe (100vh)
   hinausscrollte. Jetzt: diese Verdunkelungs-Leiste (frueher ein reiner
   Hero-Deko-Effekt) wird selbst zur position:fixed Kopfzeilen-Flaeche, die
   dauerhaft am oberen Rand bleibt - Logo/Nav werden weiter unten ebenfalls
   auf position:fixed umgestellt, damit sie inhaltlich darauf sitzen bleiben.
   Deckkraft/Blur leicht erhoeht, damit die weisse Nav-Schrift auch ueber
   normalen (hellen) Seiteninhalten noch lesbar ist, nicht nur ueber dem
   Hero-Foto. */
.headerbildOuter::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 94px;
    background: #181717;
    opacity: 0.55;
    backdrop-filter: blur(10px);
    z-index: 940;
    pointer-events: none;
    transition: height 0.3s ease, opacity 0.3s ease;
}
/* Ergaenzung (07.09.2026): "Navi sticky mit meinem kleinen Effekt, dass diese
   etwas kleiner wird" - reaktiviert/ersetzt den alten, auskommentierten
   Scroll-Effekt aus inc.javascriptBottom.php (dort auf #balkenoben/#logolink/
   #navOuter gemuenzt - Klassen, die es im neuen Markup nicht mehr gibt).
   Das Script setzt jetzt stattdessen die Klasse "nav-scrolled" auf <body>,
   sobald man > 80px runtergescrollt hat - die Kopfzeile (Leiste, Logo,
   Desktop-Nav-Abstand) wird dann etwas kompakter. */
body.nav-scrolled .headerbildOuter::before { height: 60px; opacity: 0.75; }
body.nav-scrolled .navLogo { height: 60px; }
body.nav-scrolled .navLogo img { max-height: 38px; }
/* Ergaenzung (07.09.2026): "Burger-Menue muss beim Schrinken auch etwas
   kleiner werden - sonst steht es ueber das Rectangel hinaus" - Burger
   (Kreis-Hintergrund + die drei Linien) verkleinert sich jetzt zusammen mit
   der Leiste. .menuOuter zentriert sich dank height:60px (siehe Basisregel
   oben, height:94px -> 60px) automatisch neu, dadurch reicht es, hier nur
   noch die sichtbare Groesse von .menu/.menuLine zu verkleinern. */
body.nav-scrolled .menuOuter { height: 60px; }
body.nav-scrolled .menu { padding: 6px 10px; }
body.nav-scrolled .menu .menuLine { width: 24px; height: 2px; margin-bottom: 6px; }
@media screen and (min-width: 901px) {
    body.nav-scrolled .mobile-menu { padding-top: 0px; background: #000000;}
}
@media screen and (max-width: 900px) {
    body.nav-scrolled .navLogo { height: 54px; }
    body.nav-scrolled .navLogo img { max-height: 30px; }
}

/* Navigation Elemente über dem Bild */
/* Bugfix (07.09.2026): "steht beim Schrinken ueber das Rectangel hinaus" -
   top:20px war ein fixer Versatz, unabhaengig von der Leisten-Hoehe. Auf
   top:0 + height:94px (wie .navLogo) umgestellt, damit align-items:center
   den Burger IMMER exakt in der Leiste zentriert - schrumpft die Leiste
   (body.nav-scrolled, siehe unten), zentriert er sich automatisch neu statt
   herauszuragen. */
.menuOuter { position: fixed; top: 0; height: 94px; right: 20px; z-index: 1000; display: flex; align-items: center; transition: height 0.3s ease; }
.menu { padding: 10px 15px; border-radius: 5px; cursor: pointer; font-weight: bold; backdrop-filter: blur(10px); transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
/* Korrektur (07.09.2026): rgba(210,180,170) war die warme Beige/Rosa-Farbe
   des alten Vorlagen-Projekts (siehe :root-Kommentar oben) - auf den
   Cyan-Akzent der Fabrik13-Palette umgestellt (dezentes, halbtransparentes
   Cyan-Glas statt Alt-Projekt-Rosa). */
.menu:hover { background: rgba(175, 67, 3, 0.18); transform: scale(1.05); }
/* Bugfix (07.09.2026): Die grosse, zentrierte Kreis-Badge-Logo-Variante mitten
   im Hero kommt im PDF-Design gar nicht vor - dort sitzt nur ein kleines,
   flaches Logo oben links in der Navigationsleiste (.navLogo). .logo bleibt
   als (ungenutzte) Klasse stehen falls an anderer Stelle noch referenziert. */
/* Korrektur (07.09.2026): Logo (80px hoch, top:40px) ragte ueber die 94px hohe
   Verdunkelungsleiste (.headerbildOuter::before) hinaus. Jetzt per Flexbox
   vertikal in der 94px-Leiste zentriert statt mit festem top-Versatz. */
/* Bugfix (07.09.2026): position:absolute (siehe oben) an position:fixed
   angeglichen, damit das Logo mit der jetzt sticky Kopfzeile mitwandert. */
.navLogo { position: fixed; top: 0; left: 44px; height: 94px; width: 176px; max-width: 45vw; display: flex; align-items: center; z-index: 960; transition: height 0.3s ease; }
.navLogo img { max-height: 56px; width: auto; display: block; transition: max-height 0.3s ease; }
.logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 900; color: white; font-size: 2.5rem; font-weight: bold; text-align: center; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); display: none; }
.logo img { max-width: 33vw; }
/* Korrektur (07.09.2026): #eadbdb war ebenfalls eine Alt-Projekt-Restfarbe
   (helles Rosa/Creme) - die drei Burger-Linien sind jetzt weiss wie der
   Rest der Nav-Schrift, auf Hover Cyan (Fabrik13-Akzentfarbe) statt Schwarz
   (Schwarz waere auf der jetzt dauerhaft dunklen Kopfzeile unsichtbar). */
.menu .menuLine { width: 32px; height: 3px; background-color: #ffffff; margin-bottom: 10px; transition: width 0.3s ease, height 0.3s ease, margin-bottom 0.3s ease; }
.menu .menuLine:last-child { margin-bottom: 0px; }
.menu:hover .menuLine { background-color: var(--toplinecolor); }
.langChanger { text-align: center; color: var(--white); margin-left: 20px; font-family: var(--font-body); font-size: 30px }
nav .langChanger {text-align: left; margin-left: 0px; font-size: 1.2rem; color: #333; line-height: 30px; font-weight: 300;}
nav .langChanger a {color: #333 !important; font-weight: 300 !important}
.menuOuter.invers .menu { backdrop-filter: unset; transition: unset; box-shadow: unset; }
.menuOuter.invers .langChanger { color: var(--beigedunkel) }
.menuOuter.invers .menuLine { background-color: var(--black) }
.menuOuter.invers .menu:hover .menuLine { background-color: var(--black) }

.buttons { position: fixed; right: 0px; top: 35vH; transform: translateY(-50%); z-index: 900; color: var(--black); justify-content: space-between; display: flex; flex-direction: column; font-family: var(--font-display); font-variation-settings: var(--arsenica-settings); }
.buttons .button { width: auto; height: auto; background-color: var(--beige); border-radius: 50px 0px 0px 47px; margin-top: 10px; margin-bottom: 10px; display: flex; justify-content: left; align-items: center; padding: 50px; font-weight: bold; font-size: 40px; border: 1px solid var(--white); line-height: 0px }
.site_ferienwohnungen .buttons {display: none}
.subline:empty, .einleitung:empty {display: none !important}

.textLinksGalRechts {display: flex;width: 1600px;max-width: 100%; margin: 0 auto; background: #ffffff;}
.textLinksGalRechts .texte {flex: 0 0 40%;  padding: 0px 50px; display: flex; flex-direction: column; justify-content: flex-start;}
.textLinksGalRechts /* Korrektur (07.09.2026): Das Cyan kommt laut vollstaendigem Layer-Export NICHT
   von einer dicken Linie unter dem Markennamen, sondern von duennen 1px-Trenn-
   linien ZWISCHEN den Sections (siehe .contentBox section unten). Der Marken-
   name selbst hat nur eine normale (schwarze) Unterstreichung. */
/* Korrektur (07.09.2026): "DEDICATED" (laengster Markenname, 9 Buchstaben)
   ragte bei 0.22em Laufweite in manchen Breiten als unteilbares Wort ueber
   die 40%-Textspalte hinaus - kuerzere Namen (JONES, SILVA, ...) passten.
   max-width:100% + break-word als Sicherheitsnetz: bricht ein zu langes Wort
   im Zweifel um, statt aus der Spalte hinauszulaufen. */
.headline {align-self: flex-start;  display: inline-block; max-width: 100%; overflow-wrap: break-word; word-break: break-word; border-bottom: 15px solid var(--toplinecolor); padding-bottom: 5px; padding-top: 0px; text-transform: uppercase; font-family: var(--font-body); font-weight: 600; font-size: 48px; line-height: 58px; letter-spacing: 0.22em; color: #000000}
/* Bugfix (07.09.2026): Markenname soll oben, "learn more" ganz unten bleiben,
   Headline2+Text dazwischen vertikal zentriert - via Auto-Margins (kein
   Wrapper-Div noetig): margin-top:auto auf dem ersten und margin-bottom:auto
   auf dem letzten Element der mittleren Gruppe teilen den uebrigen Platz in
   .texte gleichmaessig auf beide Seiten der Gruppe auf. */
.textLinksGalRechts .headline2 {font-size: 32px; line-height: 39px; font-family: var(--font-body); font-weight: 700; letter-spacing: 0.15em; color: #181717; margin-top: auto}
.textLinksGalRechts .subline {}
.textLinksGalRechts .text {margin-top: 30px; margin-bottom: auto; font-size: 20px; line-height: 24px; font-family: var(--font-body); font-weight: 400; letter-spacing: 0.15em; text-align: justify; color: #181717; }
.textLinksGalRechts .galerie {flex: 0 0 60% ;position: relative;}
/* Korrektur (07.09.2026): left/top:50px liess das Bild gegenueber dem
   Markennamen nach unten/rechts verrutschen - Bild soll oben mit dem Namen
   bündig abschliessen. */
.textLinksGalRechts  .content-part-galerie-bild {width: 100%;  height: 100%;  object-fit: cover;  display: block;position: relative; }
.textLinksGalRechts .bigButtonOuter {margin-top: 30px; padding: 0px; padding-top: 30px}


@media (max-width: 900px) {
  .content.layout_1:not(.first-brand), .content.layout_2:not(.first-brand) { border-top: 0px solid var(--toplinecolor); } 
/* Bugfix (07.09.2026): "top: -50px" verschob das Bild relativ um 50px nach
   oben - dadurch ragte es aus seiner eigenen .galerie-Box heraus und ueber-
   deckte die letzten 50px des VORHERIGEN Bereichs ("Brands we work for &
   with.", per getBoundingClientRect bestaetigt: Bild-Oberkante lag exakt
   50px oberhalb der Section-Grenze). Ebenso war "calc(100% - 150px)" ein
   Rest aus einer alten, schmaleren Zwischenbreite - in der jetzt echten
   1-spaltigen Mobile-Ansicht darf das Bild die volle Breite nutzen. */
/* Korrektur (07.09.2026): 100px Abstand zur naechsten Marke wirkte am Handy
   fast zu grosszuegig - auf 60px reduziert. */
.textLinksGalRechts {flex-direction: column-reverse; padding-bottom: 30px; background: #ffffff;}
.textLinksGalRechts .content-part-galerie-bild {width: 100%;}
/* Bugfix (07.09.2026): 25% Seitenpadding war fuer eine echte 1-Spalten-
   Breite (siehe Umstellung auf 900px-Breakpoint) viel zu viel Luft -
   reduziert auf einen normalen Seitenabstand, damit Text/Headline die
   Breite jetzt ausnutzen koennen. */
/* Korrektur (07.09.2026): padding-top:0 liess den Markennamen direkt am
   Bild kleben (kein Abstand mehr, seit "top:-50px" oben entfernt wurde) -
   kleiner Abstand ergaenzt. */
.textLinksGalRechts .texte {padding: 20px 20px 0px 20px}
/* Bugfix (07.09.2026): Die viel aeltere, generische Regel
   ".headline:not(:empty) {padding: 50px 20px}" (siehe weiter unten,
   fuer normale Seiten-Ueberschriften gedacht) hat zufaellig dieselbe
   Spezifitaet UND steht im Quellcode weiter unten - dadurch gewann sie
   und schob den Markennamen samt Cyan-Linie 50px nach unten UND liess
   50px Luft darunter ("Cyan-Linie an der falschen Stelle"). !important
   stellt sicher, dass hier wirklich kein Padding uebrig bleibt. */
.textLinksGalRechts .headline {font-size: 22px; line-height: 25px; padding: 0px !important}
/* Kundenwunsch (08.09.2026): Auf Mobile klebte die Headline2 direkt an der
   Cyan-Linie unter der Headline (das margin-top:auto von .headline2 greift
   im Mobile-Flex ohne Extra-Hoehe nicht) - Abstand ergaenzt. */
.textLinksGalRechts .headline2 {font-size: 16px; line-height: 18px; margin-top: 15px;}
.textLinksGalRechts .subline {font-size: 16px; line-height: 18px;}
.textLinksGalRechts .text {font-size: 16px; line-height: 18px;}
.textLinksGalRechts .galerie {}
}

/* Bugfix (05.09.2026): siehe .textLinksGalRechts weiter oben - selber Grund. */
.textRechtsGalLinks {display: flex;width: 1600px;max-width: 100%; margin: 0 auto; background: #ffffff; }
.textRechtsGalLinks .galerie {flex: 0 0 60%;position: relative}
.textRechtsGalLinks .content-part-galerie-bild { width: 100%;  height: 100%;  object-fit: cover;  display: block;position: relative; }
.textRechtsGalLinks .texte {flex: 0 0 40%;  padding: 0px 50px 0px 100px; display: flex; flex-direction: column; justify-content: flex-start;}
.textRechtsGalLinks /* Korrektur (07.09.2026): Das Cyan kommt laut vollstaendigem Layer-Export NICHT
   von einer dicken Linie unter dem Markennamen, sondern von duennen 1px-Trenn-
   linien ZWISCHEN den Sections (siehe .contentBox section unten). Der Marken-
   name selbst hat nur eine normale (schwarze) Unterstreichung. */
/* Korrektur (07.09.2026): "DEDICATED" (laengster Markenname, 9 Buchstaben)
   ragte bei 0.22em Laufweite in manchen Breiten als unteilbares Wort ueber
   die 40%-Textspalte hinaus - kuerzere Namen (JONES, SILVA, ...) passten.
   max-width:100% + break-word als Sicherheitsnetz: bricht ein zu langes Wort
   im Zweifel um, statt aus der Spalte hinauszulaufen. */
.headline {align-self: flex-start;  display: inline-block; max-width: 100%; overflow-wrap: break-word; word-break: break-word; border-bottom: 15px solid var(--toplinecolor); padding-bottom: 5px; padding-top: 0px; text-transform: uppercase; font-family: var(--font-body); font-weight: 600; font-size: 48px; line-height: 58px; letter-spacing: 0.22em; color: #000000}
.textRechtsGalLinks .headline2 {font-size: 32px; line-height: 39px; font-family: var(--font-body); font-weight: 700; letter-spacing: 0.15em; color: #181717; margin-top: auto}
.textRechtsGalLinks .subline {}
.textRechtsGalLinks .text {margin-top: 30px; margin-bottom: auto; font-size: 20px; line-height: 24px; font-family: var(--font-body); font-weight: 400; letter-spacing: 0.15em; text-align: justify; color: #181717; }
.textRechtsGalLinks .bigButtonOuter {padding: 0px; padding-top: 30px}

.textLinksGalRechts .galerie, .textRechtsGalLinks .galerie {}
/* Bugfix (07.09.2026): "learn more"-Link statt dem entfernten Buchen/Anfragen-Button */
/* Korrektur (07.09.2026): text-decoration wurde entfernt, aber nicht explizit
   auf "none" gesetzt - dadurch griff der Browser-Standard fuer <a>-Tags
   (Unterstreichung) weiterhin. Bei den Marken-Teasern soll "learn more" laut
   Layer-Export KEINE Unterstreichung haben, bei News/Newsletter/Kontakt
   dagegen schon (siehe Regel darunter). */
.learnMore { display: inline-block; color: #000000; font-family: var(--font-body); font-weight: 400; font-size: 32px; line-height: 39px; letter-spacing: 0.15em; text-decoration: none; }
.learnMore:hover { color: var(--toplinecolor-hover); }
/* News/Newsletter/Kontakt nutzen laut Layer-Export eine kleinere Groesse (24px)
   als die Marken-Teaser (32px) fuer "learn more" UND sind dort unterstrichen. */
.newsSection .learnMore, .splitSection .learnMore { font-size: 24px; line-height: 29px; color: #181717; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) {
    .learnMore { font-size: 16px; line-height: 20px; }
}
/* Feature (08.09.2026, Kundenwunsch): variabler Button-Stil ueber
   content_parts_buttonType - kommt zusaetzlich zur Klasse "learnMore" dazu
   (Standard bleibt unveraendert der reine Textlink ohne diese Klassen). */
.learnMore.btnPrimary, .learnMore.btnSecondary {
    padding: 14px 32px;
    border-radius: 999px;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.1em;
}
.learnMore.btnPrimary {
    background-color: var(--toplinecolor);
    color: var(--toplinecolor-font);
}
.learnMore.btnPrimary:hover { background-color: var(--toplinecolor-hover); color: var(--toplinecolor-font); }
.learnMore.btnSecondary {
    background-color: transparent;
    border: 2px solid var(--toplinecolor);
    color: #181717;
}
.learnMore.btnSecondary:hover { background-color: var(--toplinecolor); color: var(--toplinecolor-font); }
@media (max-width: 900px) {
    .learnMore.btnPrimary, .learnMore.btnSecondary { font-size: 16px; line-height: 20px; padding: 12px 24px; }
}
.textLinksGalRechts .galerie .gallery-slider img, .textRechtsGalLinks .galerie .gallery-slider img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}

/* Downloads-Tabelle (login-geschuetzter B2B-Bereich): siehe renderDownloadsList()
   in inc.functions_all.php, ausgegeben ueber content_parts_items je Marken-
   Content-Part. Icon/Name/Format/Groesse/Datum je Datei. */
.downloadsListe { margin-top: 30px; width: 100%; overflow-x: auto; }
.downloadsTable { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 16px; }
.downloadsTable th { text-align: left; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 13px; color: #767676; padding: 8px 10px; border-bottom: 2px solid var(--toplinecolor); white-space: nowrap; }
.downloadsTable th[data-sort-key] { cursor: pointer; user-select: none; padding-right: 18px; position: relative; }
.downloadsTable th[data-sort-key]::after { content: "\2195"; position: absolute; right: 4px; opacity: 0.35; font-size: 11px; }
.downloadsTable th[data-sort-key][data-sort-dir="asc"]::after { content: "\2191"; opacity: 1; color: var(--toplinecolor); }
.downloadsTable th[data-sort-key][data-sort-dir="desc"]::after { content: "\2193"; opacity: 1; color: var(--toplinecolor); }
.downloadsTable td { padding: 10px; border-bottom: 1px solid #e3e3e3; vertical-align: middle; }
.downloadsTable .downloadIconCell { width: 32px; }
.downloadsTable .downloadIconCell img { width: 24px; height: 24px; display: block; }
.downloadsTable .downloadNameCell a { color: #181717; text-decoration: none; font-weight: 500; word-break: break-word; }
.downloadsTable .downloadNameCell a:hover { color: var(--toplinecolor); text-decoration: underline; }
.downloadsTable .downloadFormatCell, .downloadsTable .downloadSizeCell, .downloadsTable .downloadDateCell { color: #767676; font-size: 14px; white-space: nowrap; }
/* ZIP-Button unter der Tabelle (23.09.2026, ajax/downloadsZip.php) */
.downloadsZip { margin-top: 20px; }
.downloadsZip .learnMore.btnPrimary { font-size: 14px; line-height: 20px; padding: 10px 24px; }
@media (max-width: 900px) {
    .downloadsTable { font-size: 14px; }
    .downloadsTable .downloadFormatCell, .downloadsTable th:nth-child(3) { display: none; }
}


a .buttonBuchen, a .buttonAnfragen, a .bigButton, a.noliner, .buttons a  {text-decoration: none !important}
a.white {color: var(--white) !important}

/* Kontaktformular */
.kontaktformular { margin: 0 auto; font-size: 1rem; color:var(--formcolor)}
.kontaktformular .split {  display: flex;  flex-wrap: wrap;gap: 1.5rem;  margin-bottom: 1.5rem;}
.kontaktformular .half {  flex: 1 1 45%; display: flex;flex-direction: column;}
.kontaktformular label { font-weight: 600; margin-bottom: 0.25rem;  display: block;color: #222;}
.kontaktformular label p {  display: inline;margin: 0;}
.kontaktformular input,
.kontaktformular textarea {  padding: 0.75rem;  border: 1px solid var(--formborder);  border-radius: var(--formradius);  font-size: 1rem;  background-color: var(--formbackground);  transition: border-color 0.3s ease;}
.kontaktformular input:focus,
.kontaktformular textarea:focus { outline: none;  border-color: var(--black);  background-color: var(--formfocus);}
.kontaktformular textarea { min-height: 120px; resize: vertical; width: 100%}
.accentButton { font-weight: bold; background-color: var(--toplinecolor); color: var(--toplinecolor-font);  border: none;  padding: 0.8rem 1.5rem;  border-radius: 8px;  font-size: 1rem;  cursor: pointer;  transition: background-color 0.3s ease; margin-top: 2rem;font-family: var(--font-body);	}
.accentButton:hover { background-color: var(--toplinecolor-hover);}
.kontaktformular select { padding: 0.75rem;  border: 1px solid var(--formborder);  border-radius: var(--formradius);  font-size: 1rem; background-color: var(--formbackground);transition: border-color 0.3s ease;  appearance: none;}
.kontaktformular select:focus {outline: none; border-color: var(--black);  background-color: var(--formfocus);}
.kontaktformular input[type="checkbox"] + label::before{font-size: 0.95rem;color: var(--black);}
.kontaktformular .labelLike{font-size: 0.95rem;color: var(--black); font-weight: 600; line-height: 1.2rem}
.checkboxWrapper input[type="checkbox"] {appearance: none;  -webkit-appearance: none;  width: 20px;  height: 20px;  border: 2px solid var(--formborder);  border-radius: 50%;  background-color: var(--formbackground);  cursor: pointer;  position: relative;  transition: background-color 0.2s ease;}
.checkboxWrapper input[type="checkbox"]:checked { background-color: var(--toplinecolor-hover);border-color: var(--toplinecolor-hover);}
.checkboxWrapper input[type="checkbox"]:checked::after {  content: '✔';  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -52%);  font-size: 14px;  color: var(--white);font-weight: bold;}		
button:disabled, button[disabled] {background-color: var(--toplinecolor-hover);color: var(--white);opacity: 0.2;}	
.checkmark {  display: inline-block;  width: 28px;  height: 28px;  border: 2px solid var(--formborder);  border-radius: 50%;  background-color: var(--formbackground);  position: relative;  cursor: pointer;  transition: background-color 0.2s ease;}
.checkmark.aktiv {background-color: var(--toplinecolor-hover); border:var(--toplinecolor-hover);}
.checkmark.aktiv::after {content: '✔'; position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -52%);  font-size: 14px;  color: white;  font-weight: bold;}
.date-wrapper {position: relative;display: flex;align-items: center;}
.date-wrapper input[type="text"] {width: 100%;padding-right: 30px; /* Platz für das Icon */}
.calendar-icon {position: absolute;	right: 10px;	cursor: pointer;	font-size: 18px;	color: #666;}
.awesomplete {width: 100%; display: block}
.styled-input {width: 100%;  padding: 10px 12px;  border: 1px solid var(--formborder);  border-radius: var(--formradius);  font-size: 1rem;}
.awesomplete li {display: flex;align-items: center;  gap: 8px;}
.awesomplete li .flag-icon {display: inline-block;  width: 20px;  height: 15px;  margin-right: 8px;  vertical-align: middle;  background-size: contain !important;  background-position: 50% 50% !important;background-repeat: no-repeat !important;}
.awesomplete > ul > li[aria-selected="true"] {background: var(--toplinecolor) !important; color: var(--toplinecolor-font) !important;}
.adresseSmall {  font-size: 0.9rem;line-height: 1.4;  margin-top: 2rem;}
.adresseSmall .line {margin-bottom: 0.3rem;}
.adresseSmall .line strong {font-weight: 600}
.adresseSmall a {  color: var(--toplinecolor-hover);  text-decoration: none;}
.adresseSmall a:hover {text-decoration: underline;}

@media (max-width: 900px) {
.kontaktformular {padding: 1rem;}
.kontaktformular .half {flex: 1 1 100%;}
.accentButton {width: 100%;margin-top: 1rem;}
.adresseSmall {margin-top: 2rem;width: 100%;}
}
/* Kontaktformular */

/* Kunden-Login / Registrierung / Downloads (siehe classes/CustomerAuth.php,
   anwendungen/registration.php, anwendungen/login.php, anwendungen/downloads.php) */
.kdauth { max-width: 480px; margin: 0 auto; font-size: 1rem; color: var(--formcolor); }
.kdauth.kdauth-wide { max-width: 640px; }
.kdauth .kdauth-field { display: flex; flex-direction: column; margin-bottom: 1.1rem; }
.kdauth .kdauth-grid { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.kdauth .kdauth-grid .kdauth-field { flex: 1 1 45%; }
.kdauth label { font-weight: 600; margin-bottom: 0.25rem; display: block; }
.kdauth input[type="text"],
.kdauth input[type="email"],
.kdauth input[type="password"],
.kdauth input[type="tel"],
.kdauth select { width: 100%; padding: 0.75rem; border: 1px solid var(--formborder); border-radius: var(--formradius); font-size: 1rem; background-color: var(--formbackground); transition: border-color 0.3s ease; appearance: none; font-family: inherit; }
.kdauth input:focus,
.kdauth select:focus { outline: none; border-color: var(--black); background-color: var(--formfocus); }
.kdauth input.kdauth-err { border-color: #b3261e; }
.kdauth input[readonly] { background-color: #f2f2f2; color: #777; }
.kdauth .kdauth-checkbox { display: flex; align-items: center; gap: 0.6rem; margin: 0.25rem 0 1.1rem; font-size: 0.9rem; font-weight: normal; line-height: 1.3; }
.kdauth .kdauth-checkbox input { width: 18px; height: 18px; margin: 0; flex: 0 0 18px; }
.kdauth .kdauth-note { background: #f4f4f4; border-radius: var(--formradius); padding: 0.75rem 1rem; font-size: 0.85rem; color: #555; margin-bottom: 1.1rem; }
.kdauth .kdauth-btn { display: inline-block; background: var(--black); color: #fff; border: none; padding: 0.85rem 1.6rem; border-radius: var(--formradius); font-size: 1rem; cursor: pointer; transition: opacity 0.2s ease; }
.kdauth .kdauth-btn:hover { opacity: 0.85; }
.kdauth .kdauth-btn:disabled { opacity: 0.5; cursor: default; }
.kdauth .kdauth-msg { padding: 0.75rem 1rem; border-radius: var(--formradius); font-size: 0.9rem; margin-bottom: 1.1rem; }
.kdauth .kdauth-msg--error { background: #fdecea; color: #b3261e; }
.kdauth .kdauth-msg--success { background: #e8f5e9; color: #1e7d32; }
.kdauth .kdauth-links { margin-top: 1rem; font-size: 0.9rem; }
.kdauth .kdauth-links a { color: var(--toplinecolor-hover); text-decoration: none; }
.kdauth .kdauth-links a:hover { text-decoration: underline; }
.kdauth .kdauth-title { font-size: 1.3rem; margin: 0 0 1rem; }
.kdauth .kdauth-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Autofill (z.B. vom Browser gespeicherte Zugangsdaten) soll optisch wie der
   normale, nicht ausgefüllte Feld-Zustand bleiben statt der gelblichen
   Browser-Autofill-Farbe. */
.kdauth input:-webkit-autofill,
.kdauth input:-webkit-autofill:hover,
.kdauth input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--formbackground) inset;
    box-shadow: 0 0 0 1000px var(--formbackground) inset;
    -webkit-text-fill-color: var(--formcolor);
    caret-color: var(--formcolor);
    transition: background-color 5000s ease-in-out 0s;
}
@media (max-width: 900px) {
.kdauth { padding: 0 1rem; }
.kdauth .kdauth-grid .kdauth-field { flex: 1 1 100%; }
.kdauth .kdauth-btn { width: 100%; }
}


 @media (max-width: 900px) {
/* Bugfix (07.09.2026): siehe .textLinksGalRechts weiter oben - identischer
   Grund (top:-50px liess Bild in den vorherigen Bereich hineinragen und ihn
   verdecken; calc(100% - 150px) und 25% Seitenpadding waren Reste einer
   schmaleren Zwischenbreite; .headline:not(:empty) weiter unten gewann sonst
   das Padding-Duell gegen die 0px hier und schob die Cyan-Linie 50px tiefer
   mit 50px Luft danach). */
/* Korrektur (07.09.2026): siehe .textLinksGalRechts weiter oben - identische
   Gruende (100px zu grosszuegig, kein Abstand mehr zwischen Bild und Text). */
.textRechtsGalLinks {flex-direction: column; margin-bottom: 30px; background: #ffffff;}
.textRechtsGalLinks .content-part-galerie-bild {width: 100%;}
.textRechtsGalLinks .texte {padding: 20px 20px 0px 20px;}
.textRechtsGalLinks .headline {font-size: 22px; line-height: 25px; padding: 0px !important}
/* Kundenwunsch (08.09.2026): siehe .textLinksGalRechts .headline2 weiter oben - selber Grund. */
.textRechtsGalLinks .headline2 {font-size: 16px; line-height: 18px; margin-top: 15px;}
.textRechtsGalLinks .subline {font-size: 16px; line-height: 18px;}
.textRechtsGalLinks .text {font-size: 16px; line-height: 18px;}
.textRechtsGalLinks .galerie {}
.textLinksGalRechts .galerie, .textRechtsGalLinks .galerie {padding-bottom: 0px}
}

.dreiSpalten {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.dreiSpalten .spalte {
  flex: 1 1 200px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dreiSpalten .bild {
  width: 100%;
  aspect-ratio: 3 / 2; /* z.B. 1.5 Verhältnis */
  overflow: hidden;
}

.dreiSpalten .bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dreiSpalten .text {
  margin-top: 10px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 500;
}

@media (max-width: 900px) {
  /* Bugfix (07.09.2026): "display: block" hat den Flex-Container beendet -
     der "gap: 20px" von der Basis-Regel greift aber NUR bei display:flex/grid,
     dadurch klebten die News-Elemente beim Stapeln in 1 Spalte ohne jeden
     Abstand aneinander. Fix: Flex bleibt erhalten (nur Richtung auf Spalte
     umgestellt), Abstand fuer die gestapelte Ansicht zusaetzlich vergroessert. */
  .dreiSpalten {
	display: flex;
	flex-direction: column;
	gap: 40px;
  }

 .dreiSpalten .spalte {
	width: 100%;
  }
}


#openmap {
  width: 100%;
  height: 500px;
  max-width: 100%;
}

/* Optional: etwas responsiver bei sehr kleinen Geräten */
@media (max-width: 900px) {
  #openmap {
    height: 400px; /* kleinere Höhe auf kleinen Geräten */
  }
}


/* Mobile Navigation - Slide-in Menü */
.mobile-menu { position: fixed; top: 0; right: -100%; width: 400px; max-width: 80%; height: 100vh; background: var(--beigedunkel); backdrop-filter: blur(15px); z-index: 1100; transition: right 0.4s ease-in-out; padding: 60px 30px 30px; box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1); }
.mobile-menu.active { right: 0; }
.mobile-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.5); z-index: 1050; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.mobile-menu-overlay.active { opacity: 1; visibility: visible; }


@media screen and (min-width: 901px) {
    .menuOuter .menu { display: none; }
    .mobile-menu {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        height: auto;
        background: transparent;
        backdrop-filter: none;
        box-shadow: none;
        z-index: 950;
        padding: 30px 60px 0 60px;
        display: flex;
        justify-content: flex-end;
        transition: padding 0.3s ease;
    }
    .mobile-menu-overlay { display: none !important; }
    .menu-close { display: none; }
    .mobile-menu nav ul {
        display: flex !important;
        align-items: center;
        gap: 40px;
    }
    .mobile-menu nav ul li { margin: 0 !important; }
    .mobile-menu nav ul li a {
        color: #ffffff !important;
        font-family: var(--font-body);
        font-size: 20px !important;
        line-height: 24px;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        font-weight: 400 !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
    }
    .mobile-menu nav ul li a:hover { color: var(--toplinecolor) !important; }
    .mobile-menu nav { display: flex; align-items: center; }

    .mobile-menu nav .navLogin { margin-left: 130px; }
}

.navLogin { color: #ffffff !important; font-family: var(--font-body); font-size: 20px; line-height: 24px; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600 !important; text-decoration: none; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); }
.navLogin:hover { color: var(--toplinecolor) !important; }
.mobile-menu .navLogin { display: block; margin: 20px 0; font-size: 1.2rem; }

.menu-close { position: absolute; top: 15px; right: 20px; font-size: 30px; cursor: pointer; color: #ffffff; }
.menu-close:hover { color: var(--toplinecolor); }

/* Bugfix (30.09.2026): Aufzaehlungspunkte vor Menuepunkten ohne Submenue (z.B. Contact/About) entfernt */
.mobile-menu nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu nav ul li { margin: 20px 0; list-style: none; }
.mobile-menu nav ul li a {
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 400;
    text-decoration: none;
}
.mobile-menu nav ul li a:hover { color: var(--toplinecolor); }

/* Submenue (Kundenwunsch 08.09.2026, siehe getMainNavigation()/renderMainNav()
   in inc.functions_all.php) - z.B. "Brands" mit den dort in der Redaktion
   angelegten Marken-Unterseiten (Flag "insubnav"). Gleiches Markup/
   Grundgeruest fuer Mobile (Akkordeon im Slide-in-Panel, Pfeil-Button per
   Klick, Scripts/mainNav.js - Touch kennt kein Hover) und Desktop (Dropdown-
   Karte, erscheint rein per :hover/:focus-within, siehe @media weiter unten,
   kein Klick/kein dauerhaft-offen) - nur die Praesentation des .submenu
   selbst unterscheidet sich zwischen den beiden Breakpoints. */
.navItem.hasSubmenu { display: flex; flex-wrap: wrap; align-items: center; }
.submenuToggle { background: none; border: none; padding: 6px; margin-left: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.submenuToggle img { width: 14px; height: 14px; transition: transform .25s ease; }
.navItem.hasSubmenu.open .submenuToggle img { transform: rotate(180deg); }

/* Bugfix (08.09.2026): ".mobile-menu nav ul { display:flex !important; }"
   weiter oben (Desktop-Breakpoint, urspruenglich nur fuer die oberste
   Menue-Liste gedacht) griff wegen des reinen Nachfahren-Selektors "ul" OHNE
   Klasse auch auf JEDES verschachtelte ".submenu"-<ul> - das Submenue war
   dadurch immer sichtbar, unabhaengig von Hover. ".submenu" (Klasse statt
   nacktem "ul") + "!important" ist noetig, um das zuverlaessig zu schlagen. */
.mobile-menu nav ul.submenu { display: none !important; list-style: none; margin: 0; padding: 0; width: 100%; }
.navItem.hasSubmenu.open > ul.submenu { display: block !important; }
.submenu li { margin: 12px 0 0 !important; padding-left: 20px; }
.submenu li a { font-size: 16px !important; text-transform: none !important; letter-spacing: 0.05em !important; opacity: .8; }
.submenu li a:hover, .submenu li a.active { opacity: 1; color: var(--toplinecolor) !important; }

@media screen and (min-width: 901px) {
    /* Kundenwunsch (08.09.2026): Auf der Desktop-Leiste erscheint das
       Submenue rein per Hover (bzw. Tastatur-Fokus) - nicht per Klick/dauerhaft
       offen. Der Pfeil-Button ist daher hier nicht mehr noetig (Mobile-only). */
    .navItem.hasSubmenu { position: relative; }
    .submenuToggle { display: none; }
    .navItem.hasSubmenu:hover > ul.submenu,
    .navItem.hasSubmenu:focus-within > ul.submenu {
        display: block !important;
    }
    .submenu {
        position: absolute;
        top: 100%;
        left: 0;
        width: auto;
        min-width: 220px;
        background: rgba(0, 0, 0, 0.92);
        backdrop-filter: blur(10px);
        padding: 14px 0;
        border-radius: 8px;
        margin-top: 14px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    }
    .submenu li { margin: 0 !important; padding: 0; }
    .submenu li a { display: block; padding: 9px 24px; white-space: nowrap; }
}

/* Desktop und Tablet: Basis-Regeln oben sind bereits flaechenfuellend (90vh),
   hier bewusst kein Reset mehr auf height:auto (siehe Bugfix-Kommentar oben). */

/* Mobile Geräte - Fullscreen Hero mit Scroll-Möglichkeit */
@media screen and (max-width: 900px) {
/* Bugfix (07.09.2026): "auch am Handy sticky belassen" - position:absolute
   hat den Burger (samt Basis-Regel weiter oben, die eigentlich schon
   position:fixed war) am Handy wieder an .headerbildOuter gebunden, wodurch
   er beim Scrollen verschwand. Jetzt fixed, wie am Desktop. */
.menuOuter { display: flex; flex-direction: column; justify-content: center; position: fixed }
.mobile-menu {width: 90%; max-width: 90%}	
.langChanger { margin-left: 0px; font-size: 25px; margin-top: 10px; font-family: var(--font-body); font-weight: bold }
nav .langChanger {font-weight: normal}	
.adresseValues { flex-direction:column; padding: 0 20px; gap:30px; text-align: center; align-items: center;}
.adresseValues .textRight {text-align: center; font-size: 22px; line-height: 35px}
.lastLine {justify-content: center; padding: 0 20px;}
.lastLine .textRight {font-weight: normal; font-size: 15px}
.mobileOnly { display: block !important }
.header-content strong { font-family: var(--font-display); font-weight: bold;  line-height: 20px }	
.pt_0 { padding-top:0px !important; display: block; width: 100%; height: 0px }
.pt_1 { padding-top:0px !important; display: block; width: 100%; height: 0px }
.pt_2 { padding-top:0px !important; display: block; width: 100%; height: 0px }
.pt_3 { padding-top:0px !important; display: block; width: 100%; height: 0px }
.pt_4 { padding-top:0px !important; display: block; width: 100%; height: 0px }
.pt_5 { padding-top:0px !important; display: block; width: 100%; height: 0px }
.pt_6 { padding-top:0px !important; display: block; width: 100%; height: 0px }
.pb_0 { padding-bottom:10px !important; display: block; width: 100%; height: 0px }
.pb_1 { padding-bottom:10px !important; display: block; width: 100%; height: 0px }
.pb_2 { padding-bottom:10px !important; display: block; width: 100%; height: 0px }
.pb_3 { padding-bottom:10px !important; display: block; width: 100%; height: 0px }
.pb_4 { padding-bottom:10px !important; display: block; width: 100%; height: 0px }
.pb_5 { padding-bottom:10px !important; display: block; width: 100%; height: 0px }
.pb_6 { padding-bottom:20px !important; display: block; width: 100%; height: 0px }
.pb_7 { padding-bottom:10px !important; display: block; width: 100%; height: 0px }
.subline { padding-left: 40px; padding-right: 40px; font-size: 16px; line-height: 18px }
.headline { font-size:20px; line-height: 25px; padding: 30px 50px }
.headerbildOuter { height: 100vh; max-height: 100vh; overflow: hidden; position: relative; }
.headerbild { height: 100%; width: 100%; }
.headerbild img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
body { overflow-y: auto !important; overflow-x: hidden; }
html, body { height: auto !important; min-height: 100%; }
/* Korrektur (07.09.2026): "Logo am Handy koennte etwas groesser sein - ist
   schon sehr klein geraten", danach "noch eine Spur groesser" - erst 28px,
   dann 38px, jetzt 44px. */
.navLogo { top: 0; left: 20px; height: 76px; }
.navLogo img { max-height: 44px; }
.logo { top: 40% }
.logo img { max-width: 90vW }
.menu { top: 15px; right: 15px; padding: 8px 12px; font-size: 0.9rem; }
.logo { font-size: 2rem; }
}



/* Sehr kleine Handys */
@media screen and (max-width: 480px) {
/* Bugfix (07.09.2026): ueberschrieb objektposition wieder auf seitlich statt
   obenbuendig (siehe Basis-Regel weiter oben) - entfernt. */
.menu { top: 10px; right: 10px; padding: 6px 10px; font-size: 0.8rem; }
.logo { font-size: 1.8rem; }
.buttons { position: fixed; right: -10px; top: 70%; transform: none; padding: 10px; font-size: 0.8rem; }
}

/* Optional: Scroll-Indikator hinzufügen */
@media screen and (max-width: 900px) {
.headerbildOuter::after { content: ""; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 30px; height: 20px; border: 2px solid rgba(255, 255, 255, 0.8); border-top: none; border-radius: 0 0 15px 15px; animation: scrollIndicator 2s infinite; }
@keyframes scrollIndicator {
0%, 20% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
50% { opacity: 1; transform: translateX(-50%) translateY(0px); }
80%, 100% { opacity: 0; transform: translateX(-50%) translateY(5px); }
}
}

/* Den nachfolgenden Content sichtbar machen */
.topSection > div:not(.headerbildOuter) { position: relative; z-index: 2; }
.mailIcon { position: absolute; left: 20px; top: 15px; z-index: 100; }
.arrowDown { position: relative; left: 0px; width: 60px; height: auto; text-align: center; margin: 0px auto; top: -80px; }

.content-part1 .subline:not(:empty) {font-size: 28px; line-height: 35px;  font-family: var(--font-body);font-weight: 100; width: 1070px; max-width: 100%}
div.h1like:empty {padding-top: 0px; padding-bottom: 0px; line-height: 0px; height: 0px; overflow: hidden; display: none}

/* Bildergalerie Home */
.BildergalerieHomeMobile { display: none }
.BildergalerieHomeDesktop { display: block }
.BildergalerieHomeDesktop .wrapper { }
.BildergalerieHomeDesktop .content { position: relative; width: 80%; }
.BildergalerieHomeDesktop .bild-gross { width: 100%; display: block; position: relative; z-index: 1; }
.BildergalerieHomeDesktop .bild-rechts-oben, .BildergalerieHomeDesktop .bild-rechts-unten { position: absolute; width: 45%; right: -5%; z-index: 2; box-shadow: 0 5px 20px rgba(0,0,0,0.1); }
.BildergalerieHomeDesktop .bild-rechts-oben { top: -5%; }
.BildergalerieHomeDesktop .bild-rechts-unten { bottom: -10%; }
.BildergalerieHomeDesktop .text { width: 30%; margin-left: 15%; padding-top: 80px; }
.BildergalerieHomeMobile .text { padding: 20px 50px; text-align: center;  }
.BildergalerieHomeMobile .content { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.bildreihe { display: flex; width: 100%; gap: 10px; opacity: 0; transform: translateY(10px); animation: fadeInUp 0.6s ease forwards; }
.bildreihe img { height: auto; object-fit: cover; display: block; transition: transform 0.3s ease; }
.bildreihe img:hover { transform: scale(1.02); }

@keyframes fadeInUp {
to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 2100px) {
.BildergalerieHomeDesktop .textOuter { margin-top: 4% }
}

.roundbutton.bett { background-image: url("/UserFiles/Icons/bett.png") }
.roundbutton.therme { background-image: url("/UserFiles/Icons/therme.png") }
.roundbutton.berg { background-image: url("/UserFiles/Icons/berg.png") }
.roundbutton.brot { background-image: url("/UserFiles/Icons/brot.png") }
.roundbutton.seilbahn { background-image: url("/UserFiles/Icons/seilbahn.png") }
.roundbutton .text { font-family: var(--font-display); font-weight: bold; position: absolute; text-align: center; width: 100%; top: 50%; font-size: 1.5rem; line-height: 1.5rem}
body.lang_en .roundbutton .text {font-size: 1.3rem}
.roundButtonsOuter { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; padding: 1rem; width: 1350px; max-width: 100%; margin: 100px auto; }
.roundbutton { aspect-ratio: 1 / 1; width: clamp(80px, 18vw, 230px); border-radius: 50%; background-repeat: no-repeat; background-position: top 10px center; background-size: 47%; border: 1px solid var(--black); position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1.5rem; text-align: center; }
body.lang_en .roundbutton {font-size: 17px !important}

/* Teaser Sommer / Winter Home */
#teaserSommer h2 { font-family: var(--font-display) }
#teaserSommer { width: 100%; position: relative; }
.teaserInner { background: linear-gradient(to bottom, transparent 80%, white 0), linear-gradient(to right, var(--beige) 80%, white 0); display: flex; flex-wrap: wrap; position: relative;  padding-bottom: 50px}
.textBlock { display: flex; text-align: right; padding-top: 90px; max-width: 100%; padding-right: 40px }
.textInner { width: 50%; padding-right: 50px }
.textDescription {width: 550px; max-width: 100%; float: right; font-size: 28px; line-height: 35px;  font-family: var(--font-body);font-weight: 100;}
#teaserWinter .textDescription {float: left}
.textDescription a {padding-top: 20px; padding-bottom: 50px}
.image { width: 50%; position: relative; display: inline-block; }
.bild-gross { width: 100% }
.image::after { content: ""; position: absolute; top: 20px; left: 20px; width: 100%; height: 100%; border: 2px solid var(--black); z-index: 0; }
#teaserWinter h2 { font-family: var(--font-display) }
#teaserWinter { width: 100%; position: relative; }
#teaserWinter .teaserInner { background: linear-gradient(to bottom, transparent 80%, white 0), linear-gradient(to left, var(--beige) 80%, white 0); display: flex; flex-wrap: wrap; position: relative; padding-bottom: 50px }
#teaserWinter .textBlock.reverse { display: flex; text-align: left; padding-top: 90px; max-width: 100%; padding-left: 40px; flex-direction: row;}
#teaserWinter .textBlock.reverse .textInner { width: 50%; padding-left: 50px; padding-right: 0; }
#teaserWinter .textBlock.reverse .image { width: 50%; position: relative; display: inline-block; }
#teaserWinter .image::after { content: ""; position: absolute; top: 20px; left: -20px; width: 100%; height: 100%; border: 1px solid var(--black); z-index: 0; }
.teaserLink { display: block; text-transform: uppercase; font-family: var(--font-display); color: var(--black); font-weight: bold }
.teaserLink:hover { text-decoration: none }

.BildergalerieHomeDesktop .textOuter { display: flex; align-items: center; font-size: 28px; line-height: 35px;  font-family: var(--font-body);font-weight: 100;}
.bigButtonOuter { text-align: center; padding: 0px 15% }
.bigButton { font-size: 30px; font-family: var(--font-display); border:1px solid var(--black); border-radius: 50px; height: auto; width: auto; padding: 15px; font-weight: bold; }

/* --- Mobile Layout --- */

@media (max-width: 1350px) {
	#teaserWinter .teaserInner{background: linear-gradient(to bottom, transparent 90%, white 0), linear-gradient(to left, var(--beige) 90%, white 0);}
	#teaserSommer .teaserInner{background: linear-gradient(to bottom, transparent 90%, white 0), linear-gradient(to right, var(--beige) 90%, white 0);}
}

@media (max-width: 1050px) {
.roundbutton .text { font-size: 16px}
.buttons { position: fixed; right: -15px; top: 70vH !important; transform: none; padding: 12px; font-size: 0.9rem;}
.buttons .button { width: auto; height: auto; background-color: var(--beige); border-radius: 50px 0px 0px 47px; margin-top: 10px; margin-bottom: 10px; display: flex; justify-content: left; align-items: center; padding: 30px; font-weight: bold; font-size: 20px; border: 1px solid var(--white) }
	
}
@media (max-width: 900px) {
.roundbutton .text { font-size: 14px; line-height: 1em }
}
@media (max-width: 900px) {
.content-part1 .subline { padding-bottom: 50px }	
.bigButton { font-size: 20px; }
.buttons { position: absolute; }
.arrowDown { display: none }
.BildergalerieHomeMobile { display: block }
.BildergalerieHomeDesktop { display: none }
.BildergalerieHomeDesktop .bild-rechts-oben, .BildergalerieHomeDesktop .bild-rechts-unten { display: none; }
.roundButtonsOuter { justify-content: center; margin: 50px auto 20px auto }
.roundbutton { flex: 0 0 calc(33.333% - 0.75rem); font-size: 16px }
.roundButtonsOuter > .roundbutton:nth-child(5) { margin-left: 1rem; }
.teaserLink { margin-top: 20px }
#teaserSommer .textInner { width: 50%; margin-left: 30%; padding-right: 0px; padding-top: 50px; padding-bottom: 50px; font-size: 16px; line-height: 18px }
#teaserSommer .teaserInner { background: linear-gradient(to top, transparent 85%, white 0), linear-gradient(to left, var(--beige) 80%, white 0); display: flex; flex-wrap: wrap; position: relative; padding-bottom: 0px}
#teaserSommer .textBlock { display: flex; flex-direction: column-reverse; flex: 1 1 100%; position: relative; padding-left: 10%; padding-right: 0px; padding-top: 0px; }
#teaserSommer .image { position: relative; display: inline-block; margin-top: 2rem; width: 80%; }
#teaserSommer .image img { display: block; width: 100%; height: auto; position: relative; z-index: 2; }
#teaserSommer .image::after { content: ""; position: absolute; top: 10px; left: 10px; width: 100%; height: 100%; border: 1px solid var(--black); box-sizing: border-box; z-index: 2; }
#teaserWinter .textInner { width: 50%; margin-left: 30%; padding-right: 0px; padding-top: 50px; padding-bottom: 50px }
#teaserWinter .teaserInner { background: linear-gradient(to top, transparent 70%, white 0), linear-gradient(to right, var(--beige) 80%, white 0); display: flex; flex-wrap: wrap; position: relative; padding-bottom: 0px}
#teaserWinter .textBlock.reverse { padding-left: 10% }
#teaserWinter .textBlock.reverse .image { width: 80%; position: relative; display: inline-block; }
#teaserWinter .textBlock { display: flex; flex-direction: column !important; flex: 1 1 100%; position: relative; padding-left: 40px; padding-right: 0px; }
#teaserWinter .textBlock.reverse .textInner { padding-left: 0px; margin-left: 0px; font-size: 16px; line-height: 18px}
#teaserWinter .image { position: relative; display: inline-block; margin-top: 2rem; width: 80%; }
#teaserWinter .image img { display: block; width: 100%; height: auto; position: relative; z-index: 2; }
#teaserWinter .image::after { content: ""; position: absolute; top: 10px; left: 10px; width: 100%; height: 100%; border: 1px solid var(--black); box-sizing: border-box; z-index: 2; }
.subline .beigedunkel { font-size: 22px; line-height: 30px; max-width: none; text-align: right; margin-right: calc(10% + 5px); padding-top: 60px; padding-bottom: 60px }
#teaserSommer .textInner h2, #teaserWinter .textInner h2, .h1like  {font-size: 22px; line-height: 25px}	
.h1like {padding: 30px 20px}
#teaserSommer .textInner .textDescription, #teaserWinter .textInner .textDescription, .content-part1 .subline:not(:empty), .BildergalerieHomeMobile {font-size: 16px; line-height: 25px}	
.headline:not(:empty), .header-content strong {font-size: 22px; line-height: 25px}	
.textDescription a {padding-bottom: 0px}	
.mainContent, .haupttext{padding: 0px 20px; white-space: normal;}
.headline:not(:empty) {padding: 50px 20px}

}

@media (max-width: 580px) {
.roundbutton .text { font-size: 14px }
}

@media (max-width: 480px) {
	.roundbutton .text { font-size: 12px}	
}



/* ==========================================================================
   Neue Home-Bereiche (07.09.2026): News, Newsletter, Kontakt-Teaser, Counter,
   Logo-Leiste - laut PDF-Design ergaenzt, als freie HTML-Bloecke ueber
   content_parts_content (Standard-Layout) statt eigener PHP-Templates.
   ========================================================================== */

/* "Brands we work for & with." - Zwischenueberschrift zwischen Hero und den
   Marken-Teasern (war komplett vergessen). Grosse Display-Headline wie
   "What's New?"/"Stay Up To Date" (siehe .newsSection h2 etc. unten). */
.brandsIntro { max-width: 1400px; margin: 0 auto; padding: 80px 40px 20px; }
.brandsIntro h2 { font-family: var(--font-display); font-weight: 400; font-size: 64px; line-height: 72px; letter-spacing: -0.04em; color: #181717; text-transform: uppercase; margin: 0; }

/* News ("WHAT'S NEW?") - nutzt die schon vorhandene .dreiSpalten-Basis */
.newsSection { max-width: 1400px; margin: 0 auto; padding: 90px 40px 60px; }
/* Korrektur (07.09.2026): links statt zentriert; dicke CYAN Unterstreichung
   statt duenner schwarzer - text-decoration statt border-bottom, damit bei
   mehrzeiligen Ueberschriften (z.B. "STAY UP"/"TO DATE") JEDE Zeile einzeln
   unterstrichen wird (border-bottom wuerde nur einmal ganz unten erscheinen). */
.newsSection h2 { font-family: var(--font-display); font-weight: 400; font-size: 80px; line-height: 90px; letter-spacing: -0.04em; text-align: left; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--toplinecolor); text-decoration-thickness: 8px; text-underline-offset: 8px; color: #181717; margin-bottom: 20px; }
.newsIntro { max-width: 620px; margin-bottom: 50px; font-family: var(--font-body); font-weight: 400; font-size: 24px; line-height: 29px; letter-spacing: 0.15em; color: #181717; }
.newsSection .dreiSpalten { align-items: flex-start; }
.newsSection .dreiSpalten .text { text-align: left; width: 100%; }
.newsSection .dreiSpalten .text strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 18px; text-transform: uppercase; margin: 15px 0 10px; }
.newsSection .dreiSpalten .text p { font-size: 14px; line-height: 20px; font-weight: 300; margin-bottom: 12px; }

/* Newsletter ("STAY UP TO DATE") und Kontakt ("TALK TO US") - gleiche Basis,
   Kontakt spiegelt die Seite via .reverse */
.splitSection { display: flex; flex-wrap: wrap; align-items: stretch; max-width: 1600px; margin: 60px auto; }
.splitSection.reverse { flex-direction: row-reverse; }
.splitSection .img { flex: 1 1 400px; min-height: 320px; }
.splitSection .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.splitSection .content { flex: 1 1 400px; display: flex; flex-direction: column; justify-content: center; padding: 60px; background: none; }
.splitSection h2 { font-family: var(--font-display); font-weight: 400; font-size: 80px; line-height: 90px; letter-spacing: -0.04em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--toplinecolor); text-decoration-thickness: 8px; text-underline-offset: 8px; margin-bottom: 20px; align-self: flex-start; color: #181717; }
.splitSection p { font-family: var(--font-body); font-size: 24px; line-height: 29px; letter-spacing: 0.15em; font-weight: 400; color: #181717; margin-bottom: 20px; }

/* "Talk To Us" Sonderfall: laut Layer-Export steht der kleine Zusatztext
   ("if you have some ideas for any collaboration") NICHT unter der ganzen
   Ueberschrift, sondern rechts neben deren zweiter Zeile ("Us"). */
.talkHeading { margin-bottom: 20px; }
.talkLine1, .talkLine2 {
    font-family: var(--font-display); font-weight: 400; font-size: 80px; line-height: 90px;
    letter-spacing: -0.04em; text-transform: uppercase; color: #181717;
    text-decoration: underline; text-decoration-color: var(--toplinecolor);
    text-decoration-thickness: 8px; text-underline-offset: 8px;
}
.talkLine2Row { display: flex; align-items: flex-end; gap: 25px; flex-wrap: wrap; }
.talkTagline { font-family: var(--font-body); font-weight: 500; font-size: 24px; line-height: 29px; letter-spacing: 0.15em; color: #000000; padding-bottom: 12px; }
@media (max-width: 900px) {
    .talkLine1, .talkLine2 { font-size: 36px; line-height: 42px; }
    .talkTagline { font-size: 16px; line-height: 20px; padding-bottom: 4px; }
}
.splitSection.reverse p:first-of-type { font-weight: 500; color: #000000; }
.newsletterForm { display: flex; flex-wrap: wrap; gap: 10px; max-width: 420px; }
.newsletterForm input[type=email] { flex: 1 1 220px; padding: 14px 16px; border: 1px solid #cccccc; font-size: 14px; font-family: var(--font-body); }
.newsletterForm button { background: var(--black); color: #fff; border: none; padding: 14px 26px; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; cursor: pointer; font-family: var(--font-body); }
.newsletterForm button:hover { background: var(--toplinecolor); color: var(--toplinecolor-font); }
.newsletterNote { font-size: 12px; margin-top: 10px; opacity: 0.7; }
/* Korrektur (07.09.2026): laut Layer-Export ist "CONTACT US!" ein schlichter
   Text-Link (24px/29px/0.15em, Inter, schwarz), kein gefuellter Button. */
.contactButton { display: inline-block; background: none; color: #000000 !important; text-decoration: underline !important; text-underline-offset: 4px; padding: 0; text-transform: uppercase; font-family: var(--font-body); letter-spacing: 0.15em; font-size: 24px; line-height: 29px; font-weight: 400; align-self: flex-start; }
.contactButton:hover { color: var(--toplinecolor-hover) !important; }

@media (max-width: 900px) {
    .splitSection, .splitSection.reverse { flex-direction: column; margin: 30px auto; }
    .splitSection .content { padding: 30px; }
    .splitSection h2 { font-size: 36px; line-height: 42px; }
    .newsSection h2, .brandsIntro h2 { font-size: 36px; line-height: 42px; }
    /* Bugfix (07.09.2026): .newsSection/.brandsIntro hatten fix 40px
       Seitenpadding, waehrend die Marken-Teaser (.texte) am Handy nur 20px
       haben - dadurch wirkte News seitlich "eingerueckter" als die Marken.
       Auf denselben 20px-Wert vereinheitlicht. */
    .newsSection, .brandsIntro { padding-left: 20px; padding-right: 20px; }
}

/* Kontaktseite + About-Seite (Kundenwunsch 30.09.2026, anwendungen/kontakt.php + about.php) */
.teamContact { max-width: 1300px; margin: 0 auto; padding: 60px 40px; }
.teamContact__intro { max-width: 900px; margin-bottom: 50px; }
.teamContact__intro h2, .aboutPage__claim { font-family: var(--font-display); font-weight: 400; font-size: 80px; line-height: 90px; letter-spacing: -0.04em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--toplinecolor); text-decoration-thickness: 8px; text-underline-offset: 8px; margin-bottom: 20px; color: #181717; }
.teamContact__intro p, .aboutPage__text p { font-family: var(--font-body); font-size: 20px; line-height: 1.5; letter-spacing: 0.05em; font-weight: 400; color: #181717; margin-bottom: 20px; }
.teamContact__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; }
.teamContact__card { border-top: 4px solid var(--toplinecolor); padding-top: 20px; }
.teamContact__name { font-family: var(--font-body); font-weight: 600; font-size: 22px; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; color: #181717; }
.teamContact__role { font-family: var(--font-body); font-size: 16px; line-height: 1.4; letter-spacing: 0.05em; color: #555555; margin: 6px 0 16px; }
.teamContact__links { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-body); font-size: 17px; line-height: 1.4; }
.teamContact__links a { color: #181717; text-decoration: underline; text-decoration-color: var(--toplinecolor); text-underline-offset: 4px; overflow-wrap: anywhere; }
.teamContact__links a:hover { color: var(--toplinecolor); }
.teamContact__info { font-size: 15px; color: #555555; }
.teamContact__more { margin-top: 60px; }
.aboutPage__text { max-width: 1000px; margin: 0 auto; padding: 0 40px 60px; }
.aboutPage__en { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--toplinecolor); }
.aboutPage__claim { display: inline-block; margin: 40px 0 30px; }
.aboutPage__text .contactButton { display: table; }
@media (max-width: 900px) {
    .teamContact { padding: 40px 20px; }
    .teamContact__intro h2, .aboutPage__claim { font-size: 36px; line-height: 42px; }
    .teamContact__intro p, .aboutPage__text p { font-size: 17px; }
    .teamContact__grid { gap: 30px; }
    .aboutPage__text { padding: 0 20px 40px; }
}

.countersSection { max-width: 1400px; margin: 0 auto; padding: 60px 40px; display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 40px; }
/* Ergaenzung (07.09.2026): erzwingt einen Zeilenumbruch vor "1 Office" (5.
   Element), da es sonst als schmalstes Element noch rechts in Zeile 1
   hineinrutscht statt Zeile 2 zu beginnen. Bestehende Counter-Regeln
   darueber/darunter bewusst unveraendert gelassen. */
.counterBreak { flex-basis: 100%; width: 0; height: 0; margin: 0; padding: 0; }
.counterItem {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 14px;
}
.counterItem .num {
    font-family: var(--font-body); font-weight: 400; font-size: 96px; line-height: 116px;
    letter-spacing: -0.04em; color: #181717;
    text-decoration: underline; text-decoration-color: var(--toplinecolor); text-decoration-thickness: 20px; text-underline-offset: 10px;
}
.counterItem .label {
  font-family: var(--font-body);
  text-transform: none;
  font-size: 18px;
  line-height: 8px;
  letter-spacing: 0.15em;
  color: #181717;
  padding-bottom: 0px;
}
@media (max-width: 900px) {
    .countersSection { justify-content: space-between; }
    .counterItem { flex: 0 1 45%; gap: 8px; }
    .counterItem .num { font-size: 52px; line-height: 62px; text-decoration-thickness: 6px; text-underline-offset: 6px; }
    .counterItem .label { font-size: 14px; padding-bottom: 8px; }
}

/* Logo-Leiste (dunkler Streifen mit allen Marken-Logos) */
/* Korrektur (07.09.2026): Bereich vergroessert (mehr Padding) und duenne
   Cyan-Linie ergaenzt, so breit wie die Logo-Reihe selbst (nicht die volle
   schwarze Flaeche), mit Abstand zu den Logos darunter. */
.logoBar { background: #171717; padding: 70px 30px 60px; display: flex; flex-direction: column; align-items: center; }
.logoBar__line { width: 100%; max-width: 1300px; border-top: 1px solid var(--toplinecolor); margin-bottom: 50px; }
/* Korrektur (07.09.2026): Logos sollen die volle Breite der Cyan-Linie
   ausfuellen (automatischer Abstand dazwischen), nicht zentriert mit festem
   Gap - Zeile bekommt dieselbe max-width wie .logoBar__line. */
.logoBar__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; max-width: 1300px; }
/* Update (08.09.2026, Kundenwunsch): Die bisherigen 7 markennamen-abhaengigen
   Klassen (.logo-happysocks, .logo-silva, ...) sind weg - Logo-Leiste laeuft
   jetzt strukturiert ueber das Redaktionssystem (Tabelle "logos", Preset
   "Logo-Leiste", siehe renderLogoBar() in inc.functions_all.php). Jedes Logo
   bekommt dort EINMALIG eine generische Groessen-Klasse (s/m/l/xl,
   helpTables-Referenz "logoGroesse") zugewiesen - nur noch die Breite wird
   gesetzt, height:auto uebernimmt automatisch das native Seitenverhaeltnis
   der jeweiligen Bilddatei (object-fit:contain bleibt als Absicherung stehen,
   falls doch mal eine Bilddatei mit fester Hoehe eingebunden wird). Neues
   Logo = Bild hochladen + Groesse waehlen, kein CSS-Update mehr noetig. */
.logoBar img { display: block; height: auto; object-fit: contain; opacity: 0.95; }
.logoBar .logoSize-s { width: 80px; }
.logoBar .logoSize-m { width: 120px; }
.logoBar .logoSize-l { width: 160px; }
.logoBar .logoSize-xl { width: 200px; }
@media (max-width: 900px) {
    .logoBar { gap: 0px; padding: 35px 20px; }
    .logoBar .logoSize-s { width: 56px; }
    .logoBar .logoSize-m { width: 84px; }
    .logoBar .logoSize-l { width: 112px; }
    .logoBar .logoSize-xl { width: 140px; }
}
/* Kompatibilitäts-Fallback (08.09.2026): Auf /home läuft die Logoleiste noch
   über das ALTE Roh-HTML im WYSIWYG-Feld von content_parts_id=12 (mit den
   alten Klassennamen unten) - der Umstieg auf den neuen Content-Part mit
   Preset "Logo-Leiste" (siehe renderLogoBar()) ist dort noch nicht gemacht.
   Ohne diesen Block hatten die Logos seit dem CSS-Update keine Breiten-/
   Höhen-Regel mehr und wurden in Originalgröße gerendert (bis zu 800px
   breit). Sobald der Content-Part umgestellt ist, kann dieser ganze Block
   ersatzlos gelöscht werden. */
.logoBar .logo-happysocks { width: 70px; height: 70px; }
.logoBar .logo-silva { width: 140px; height: 80px; }
.logoBar .logo-amplifi { width: 135px; height: 31px; }
.logoBar .logo-jones { width: 200px; height: 81px; }
.logoBar .logo-dedicated { width: 186px; height: 23px; }
.logoBar .logo-primus { width: 157px; height: 63px; }
.logoBar .logo-nidecker { width: 130px; height: 21px; }
@media (max-width: 900px) {
    .logoBar .logo-happysocks { width: 49px; height: 49px; }
    .logoBar .logo-silva { width: 98px; height: 56px; }
    .logoBar .logo-amplifi { width: 95px; height: 22px; }
    .logoBar .logo-jones { width: 140px; height: 57px; }
    .logoBar .logo-dedicated { width: 130px; height: 16px; }
    .logoBar .logo-primus { width: 110px; height: 44px; }
    .logoBar .logo-nidecker { width: 91px; height: 15px; }
}

/* Galerie 2-spaltig (Kundenwunsch 08.09.2026, Preset "tpl_duo_gallery",
   layoutvariante 10, siehe renderDuoGallery() in inc.functions_all.php und
   Scripts/duoGallery.js). Desktop: 2 Bilder nebeneinander (Filmstreifen-
   Prinzip - alle Bilder liegen nebeneinander, der Viewport zeigt nur 2), bei
   mehr als 2 Bildern schwarze Pfeile aussen + Punkte darunter (immer 2 aktiv
   - die beiden gerade sichtbaren Bilder). Mobile (<=900px, Projekt-
   Breakpoint wie sonst ueberall, NICHT der 768px-Breakpoint aus
   mySlider.js): identisch zu den anderen Galerie-Layouts der normale
   1-Bild-mySlider. */
.duoGalerieOuter { width: 1600px; max-width: 100%; margin: 0 auto; }
.duoGalerie { position: relative; display: flex; align-items: center; }

/* Viewport zeigt nur 2 Slides, der Track dahinter enthaelt ALLE Bilder in
   einer Reihe und wird per JS (Scripts/duoGallery.js) um jeweils 1 Slide-
   Breite verschoben (translateX) - siehe DuoGallery.update(). */
.duoGalerie__viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.duoGalerie__track { display: flex; gap: 20px; transition: transform .5s ease; }

/* Kundenwunsch (08.09.2026): einheitliche Hoehe fuer alle Bilder, unabhaengig
   vom jeweiligen Quellformat - festes Seitenverhaeltnis pro Slide +
   object-fit:cover. Die beiden !important sind noetig, weil
   generateResponsiveImageTag() dem <img> bereits ein inline
   style="...height:auto" mitgibt (fuer die Verwendung an anderen Stellen
   gewollt), das sonst Vorrang vor dieser Regel haette. */
.duoGalerie__slide { flex: 0 0 calc((100% - 20px) / 2); min-width: 0; position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.duoGalerie__slide img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }

.duoGalerie__arrow { flex: 0 0 auto; background: none; border: none; padding: 0 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.duoGalerie__arrow img { width: 32px; height: 32px; filter: brightness(0); }
.duoGalerie__arrow--prev img { transform: rotate(90deg); }
.duoGalerie__arrow--next img { transform: rotate(-90deg); }

.duoGalerie__dots { position: absolute; bottom: -30px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; }
.duoGalerie__dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.35); background: transparent; padding: 0; cursor: pointer; transition: all .3s ease; }
.duoGalerie__dot.active { background: #000; border-color: #000; }

.duoGalerie__mobile { display: none; }

@media (max-width: 900px) {
	.duoGalerieOuter { margin-top: 20px}
    .duoGalerie { display: none; }
    .duoGalerie__mobile { display: block; width: 1600px; max-width: 100%; margin: 0 auto; }
}

/* Seiten-Kennwort-Formular (Kundenwunsch 08.09.2026, siehe pagePasswordForm()
   in inc.functions_all.php) - vorher komplett unformatiert (Browser-Default),
   jetzt als zentrierte Karte im Design-System der Seite (Pill-Button im
   .learnMore.btnPrimary-Stil weiter oben). Erscheint direkt unter dem Header
   anstelle des eigentlichen Seiteninhalts (siehe index.php). */
.pagePasswordOuter { display: flex; justify-content: center; padding: 120px 20px; }
.pagePasswordForm { width: 420px; max-width: 100%; padding: 50px 40px; border: 1px solid #e5e5e5; border-radius: 12px; background: var(--white); box-shadow: 0 10px 40px rgba(0,0,0,0.06); text-align: center; }
.pagePasswordForm__text { font-family: var(--font-body); font-size: 18px; line-height: 26px; letter-spacing: 0.05em; color: #181717; margin: 0 0 25px; }
.pagePasswordForm__error { font-family: var(--font-body); font-size: 15px; line-height: 20px; color: #c0392b; background: #fdecea; border-radius: 6px; padding: 10px 14px; margin: 0 0 20px; }
.pagePasswordForm__input { display: block; width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: 16px; padding: 14px 16px; border: 1px solid #ccc; border-radius: 8px; margin-bottom: 20px; outline: none; transition: border-color .2s ease; }
.pagePasswordForm__input:focus { border-color: var(--toplinecolor); }
.pagePasswordForm__submit { display: inline-block; width: 100%; box-sizing: border-box; font-family: var(--font-body); font-weight: 400; font-size: 18px; letter-spacing: 0.1em; color: var(--toplinecolor-font); background-color: var(--toplinecolor); border: none; border-radius: 999px; padding: 14px 32px; cursor: pointer; transition: background-color .2s ease; }
.pagePasswordForm__submit:hover { background-color: var(--toplinecolor-hover); }
@media (max-width: 900px) {
    .pagePasswordOuter { padding: 70px 20px; }
    .pagePasswordForm { padding: 35px 25px; }
}

/* Styles für CMS Editor */
 
body#tinymce {padding: 20px !important; cursor:text; background-color: var(--white); color: var(--black); background: #fff} 
body#tinymce ul {margin-left: 20px}
body#tinymce p, body#tinymce ul {line-height: 22px; font-size: 16px; font-family: var(--font-body); margin-bottom: 3px} 
body#tinymce .buttonblue {background-color: var(--dark-blue) }
body#tinymce .buttongreen {background-color: var(--green)}
body#tinymce .formattedLink.formattedLinkunderline {cursor: default}

body#tinymce .accord .accordText {max-height: none; font-size: 18px; line-height: 26px; margin-bottom: 30px}
 
/* Rechtstexte (Privacy Policy, Imprint) - 12.10.2026: Modul "legal", Text steckt im Haupttext des Content-Bereichs.
   Lesbare Textbreite, Abstaende, Ueberschriften-Hierarchie, Listen/Tabellen, Anker-Sprung unter die fixe Navigation. */
.content_part_legal .contentInnen { width: 1070px; max-width: 100%; margin: 0 auto; padding: 60px 20px 90px; box-sizing: border-box; }
.content_part_legal .haupttext { padding: 0; font-family: var(--font-body); font-size: 18px; line-height: 28px; color: #181717; overflow-wrap: break-word; }
.content_part_legal .haupttext > :first-child { margin-top: 0; }
.content_part_legal .haupttext h2, .content_part_legal .haupttext h3, .content_part_legal .haupttext h4, .content_part_legal .haupttext h5 { font-family: var(--font-display); font-weight: bold; color: #181717; scroll-margin-top: 110px; }
.content_part_legal .haupttext h2 { font-size: 28px; line-height: 34px; margin: 56px 0 18px; padding-top: 24px; border-top: 1px solid rgba(24,23,23,.18); text-transform: none; }
.content_part_legal .haupttext h3 { font-size: 22px; line-height: 28px; margin: 36px 0 12px; }
.content_part_legal .haupttext h4 { font-size: 30px; line-height: 38px; margin: 0 0 24px; }
.content_part_legal .haupttext h5 { font-size: 20px; line-height: 26px; margin: 32px 0 12px; }
.content_part_legal .haupttext p { margin: 0 0 16px; }
.content_part_legal .haupttext ul, .content_part_legal .haupttext ol { margin: 0 0 20px; padding-left: 26px; }
.content_part_legal .haupttext li { margin: 0 0 6px; padding-left: 4px; }
.content_part_legal .haupttext a { color: #181717; text-decoration: underline; text-decoration-color: var(--toplinecolor); text-underline-offset: 3px; word-break: break-word; }
.content_part_legal .haupttext a:hover { color: var(--toplinecolor-hover); }
.content_part_legal .haupttext blockquote { margin: 0 0 20px; padding: 4px 0 4px 20px; border-left: 3px solid var(--toplinecolor); }
.content_part_legal .haupttext table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 16px; line-height: 24px; }
.content_part_legal .haupttext td, .content_part_legal .haupttext th { padding: 8px 12px; border: 1px solid rgba(24,23,23,.18); vertical-align: top; text-align: left; }
@media screen and (max-width: 600px) {
    .content_part_legal .contentInnen { padding: 40px 20px 60px; }
    .content_part_legal .haupttext { font-size: 16px; line-height: 25px; }
    .content_part_legal .haupttext h2 { font-size: 23px; line-height: 29px; margin-top: 40px; }
    .content_part_legal .haupttext h4 { font-size: 26px; line-height: 32px; }
}