/* CSS Document - Modern mit rem/em Einheiten für TYPO3 */
@charset "utf-8";

/* Font-Face Definitionen */
@font-face {font-family:'Montserrat'; src:url('../fonts/Montserrat-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap;}
@font-face {font-family:'Montserrat'; src:url('../fonts/Montserrat-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap;}
@font-face {font-family:'Montserrat'; src:url('../fonts/Montserrat-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap;}
@font-face {font-family:'Montserrat'; src:url('../fonts/Montserrat-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap;}
@font-face {font-family:'Montserrat'; src:url('../fonts/Montserrat-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap;}
@font-face {font-family:'PlayfairDisplay'; src:url('../fonts/PlayfairDisplay-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap;}
@font-face {font-family:'PlayfairDisplay'; src:url('../fonts/PlayfairDisplay-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap;}

/* DESIGN TOKENS - Modern mit rem */
:root {
  --primary-color: #281e64;
  --primary-color-light: #a0aadc;
  --secondary-color: #5a5a96;
  --accent-color: #fdcf7a;
  --accent-dark: #9d7f2a;
  --success-color: #008f00;
  --success-light: #8dff7a;
  
  --text-color: #242436;
  --text-color-light: #ffffff;
  --text-color-alpha: #87a;
  --text-color-muted: #ffffff66;
  
  --background-white: #fff;
  --background-light: #fcfdfe;
  --background-shadow-light: rgba(40,30,100,0.03);
  
  --font-primary: 'Montserrat', Arial, sans-serif;
  --font-display: 'PlayfairDisplay', serif;
  
  --font-size-xs: 0.8125rem;    /* 13px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 0.9375rem;  /* 15px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.5rem;       /* 24px */
  --font-size-2xl: 2rem;        /* 32px */
  --font-size-3xl: 2.5rem;      /* 40px */
  --font-size-4xl: 2.625rem;    /* 42px */
  --font-size-5xl: 3rem;        /* 48px */
  
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;
  
  --content-width: 62.5rem;     /* 1000px */
  --content-width-big: 87.5rem; /* 1400px */
  
  --spacing-xs: 0.625rem;   /* 10px */
  --spacing-sm: 1.25rem;    /* 20px */
  --spacing-md: 1.875rem;   /* 30px */
  --spacing-lg: 2.5rem;     /* 40px */
  --spacing-xl: 3.75rem;    /* 60px */
  --spacing-xxl: 6.25rem;   /* 100px */
  
  --radius-sm: 0.3125rem;   /* 5px */
  --radius-md: 0.5rem;      /* 8px */
  --radius-lg: 1.875rem;    /* 30px */
  --radius-full: 50%;
}

/* Basis Reset */
html body *:focus {outline:none;}
html {-ms-touch-action: manipulation; touch-action: manipulation; font-size:100%; scroll-behavior:smooth;}
html, body {width:100%; margin:0; padding:0; background: var(--background-white);}
audio, video, div, iframe, img, input, textarea, p, ul, ol, h1, h2, h3, h4, h5, h6 {position:relative; display:block; box-sizing:border-box;}
a, a:focus, a:hover {text-decoration:none; outline:none;}

body, button, input, textarea, select, table {
font-family: var(--font-primary); 
font-size: var(--font-size-base);
line-height: var(--line-height-loose);
font-weight:400; 
color: var(--text-color);
}

/* Trennlinien */
hr {display:block; height:0; border:0 none; border-bottom:1px dotted var(--primary-color); padding:0; margin: var(--spacing-lg) 0;}
.hrlight {border-bottom:1px dotted var(--text-color-muted);}

/* Überschriften */
h1, h2, h3, h4, h5, h6 {display:block; clear:both;}
h1, h2, h3, h4 {font-family: var(--font-display); font-weight:600; color: var(--primary-color);}
h1 {font-size: var(--font-size-4xl); line-height: var(--line-height-tight); margin:0 0 var(--spacing-md); padding:0;}
h2 {font-size: var(--font-size-3xl); line-height: var(--line-height-tight); margin: var(--spacing-md) 0 3rem; padding:0;}
h3 {font-size: var(--font-size-2xl); line-height: var(--line-height-normal); margin: var(--spacing-md) 0; padding:0;}
h4 {font-size: var(--font-size-xl); line-height: var(--line-height-normal); margin: var(--spacing-md) 0; padding:0;}
h5 {font-size: var(--font-size-lg); line-height: var(--line-height-normal); margin: var(--spacing-md) 0; padding:0; font-weight:700;}
h6 {padding: 0.9375rem var(--spacing-md); margin:0 0 var(--spacing-sm) 15%; font-size: var(--font-size-5xl); line-height: var(--line-height-tight); font-weight:600; width:max-content; background:rgba(40,30,50,0.55); color: var(--text-color-light);}

.fachbereich {font-size: var(--font-size-base); line-height: var(--line-height-loose); font-weight:400; text-transform:uppercase;}
.lichtweisheit {font-family: var(--font-display); font-size: 1.625rem; line-height: var(--line-height-relaxed); font-weight:400; font-style:italic;}

p {padding:0; margin:0 0 var(--spacing-md); display:block;}
ul, ol {margin-bottom: var(--spacing-md);}
li {margin-bottom: var(--spacing-xs);}
ul, ol, li {text-align:left;}

strong {font-weight:600;}
.minitext {font-size:75%; margin-bottom:0;}

/* Navigation */
.navi {margin:0; padding:0 0 var(--spacing-xs); background: var(--background-white); color: var(--primary-color); text-align:right; height:10rem; border-bottom:1px solid rgba(245,240,250,0.8); box-shadow: 0 0.3125rem var(--spacing-xs) rgba(40,30,100,0.03);}

.topline {padding:0; margin:0; height: 2.625rem; line-height: var(--spacing-md); background: var(--primary-color); color: var(--text-color-light); text-align: right;}
.social {width: var(--spacing-md); height: var(--spacing-md); display:inline-block; padding:0; margin: 0.375rem 2% -0.25rem 0; opacity:0.6; transition: opacity 0.12s ease-in-out;}
.social:hover {opacity:1;}

.topnavi {margin:0; padding:0 2% 0 0; display:inline-block;}
.topnavi li {position:relative; margin:0; padding:0; list-style:none; vertical-align:top; display:inline-block;}
.topnavi li a {position:relative; padding:0; margin:0 0.9375rem; font-size: var(--font-size-xs); line-height: 1.25rem; font-weight:400; color: var(--text-color-light); display:block; box-sizing:border-box; hyphens: auto; word-break: break-word;}

.mainnavi {position:absolute; top: 6.25rem; right:2%; margin:0; padding:0; z-index:901 !important;}
.mainnavi li {position:relative; margin:0; padding:0; list-style:none; vertical-align:top; text-align:center; display:inline-block;}
.mainnavi li a {position:relative; padding: 0.875rem var(--spacing-sm) 1rem; margin:0; font-size: var(--font-size-xs); line-height: 1.75rem; font-weight:500; text-transform:uppercase; color: var(--primary-color); display:block; box-sizing:border-box;}
.mainnavi li:hover a, .mainnavi li.active a {background:rgba(245,240,250,0.6); color: var(--primary-color);}
.mainnavi li a br {display:none;}

.mainnavi li ul {position:absolute; top: 3.75rem; left:0; padding: var(--spacing-xs) 0; margin:0; width:max-content; display:none; background:rgba(255,255,255,0.95); box-shadow: 0 0.3125rem var(--spacing-xs) rgba(40,30,100,0.03);}
.mainnavi li:last-child ul {top: 3.75rem; left:auto; right:0;}
.mainnavi li:nth-last-child(2) ul {top: 3.75rem; left:auto; right:0;}
.mainnavi li:hover ul {display:block;}
.mainnavi li:hover ul li {position:relative; margin:0; padding:0; list-style:none; vertical-align:center; display:block; text-align:left;}
.mainnavi li:hover ul li a {position:relative; padding: 0.5rem var(--spacing-sm); margin:0; width:100%; line-height: 1.25rem; color: var(--primary-color); background:none; text-transform:none; display:block;}
.mainnavi li:hover ul li:hover a, .mainnavi li:hover ul li.active a {background:rgba(245,240,250,1);}

/* Mobile Navigation */
input[type="checkbox"].opennavi:checked ~ .mainnavi {transform:translateX(0);}
input[type=checkbox].opennavi {transition:all 0.3s; box-sizing:border-box; display:none;}
.sidebarIconToggle {position:absolute; top: 4.25rem; right:4%; width: 1.375rem; height: 1.375rem; box-sizing:border-box; z-index:99; cursor:pointer; display:none; transition:all 0.3s; z-index:999;}
.spinner {position:absolute; width:100%; height: 0.1875rem; background: var(--primary-color); box-sizing:border-box; transition:all 0.3s;}
.horizontal {position:relative; float:left; margin-top: 0.1875rem; box-sizing:border-box; transition:all 0.3s;}
.diagonal.part-1 {position:relative; float:left; box-sizing:border-box; transition:all 0.3s;}
.diagonal.part-2 {position:relative; float:left; box-sizing:border-box; transition:all 0.3s; margin-top: 0.1875rem;}
input[type=checkbox].opennavi:checked ~ .sidebarIconToggle > .horizontal {box-sizing:border-box; transition:all 0.3s; opacity:0;}
input[type=checkbox].opennavi:checked ~ .sidebarIconToggle > .diagonal.part-1 {box-sizing:border-box; transition: all 0.3s; margin-top: 0.5rem; transform: rotate(135deg);}
input[type=checkbox].opennavi:checked ~ .sidebarIconToggle > .diagonal.part-2 {box-sizing:border-box; transition:all 0.3s; margin-top: -0.5625rem; transform: rotate(-135deg);}

/* TYPO3 Layout Container */
.container {width:92%; max-width: var(--content-width); padding: var(--spacing-xxl) 0; margin:0 auto;}
.container-big {width:92%; max-width: var(--content-width-big); padding: var(--spacing-xxl) 0; margin:0 auto;}

/* TYPO3 Content Blocks */
.content-block {display: block; position: relative;}

/* Utility Classes */
.center {text-align:center;}
.clear {clear:both;}
.drittel {width:32%; margin:0 2% 0 0; float:left;}
.doppel {width:65%; margin:0 3% 0 0; float:left;}
.halb {width:48%; margin:0 4% 0 0; float:left;}
.last {margin-right:0;}
.right {text-align:right;}
.boxcontent {padding: var(--spacing-sm) var(--spacing-lg);}

/* TYPO3 THEME SYSTEM */
.theme--licht {background: var(--background-light); box-shadow: 0 0 var(--spacing-sm) rgba(40,30,100,0.03) inset;}
.theme--akademisch {color: var(--text-color-light); background:#281e64cc;}
.theme--wald {color: var(--text-color-light); background:#3b8034cc;}
.theme--himmel {color: var(--text-color-light); background-size:100% 100%; background-color: var(--secondary-color); background-image: radial-gradient(70% 53% at 36% 76%, #48EEFF96 0%, #073AFF00 100%),radial-gradient(42% 53% at 34% 72%, #FFFFFF4A 3%, #073AFF00 100%),radial-gradient(31% 43% at 7% 98%, #FFFFFF96 5%, #073AFF00 100%),radial-gradient(150% 150% at 100% 0%, #C3B4F6F2 1%, #073AFF00 100%),linear-gradient(125deg, #4EB5FFFF 1%, #535CCEFF 100%);}
.theme--kontakt {background:#281e6444;}
.theme--footer {background: var(--primary-color); color: var(--text-color-light);}

.theme--akademisch h3, .theme--wald h3, .theme--himmel h3, .theme--footer h2, .theme--footer h3, .theme--footer h5 {color: var(--text-color-light);}
.theme--footer a {color: var(--text-color-muted); text-decoration:none;}
.theme--footer a:hover {color: var(--text-color-light);}

/* LBA Alpha-Variationen */
.lba11 {background:#281e6411;} 
.lba22 {background:#281e6422;} 
.lba33 {background:#281e6433;}
.lba66 {background:#281e6466; color: var(--text-color-light);}
.lba77 {background:#281e6477; color: var(--text-color-light);}
.lba88 {background:#281e6488; color: var(--text-color-light);}
.lbaaa {background:#281e64aa; color: var(--text-color-light);}
.lbabb {background:#281e64bb; color: var(--text-color-light);}
.lbacc {background:#281e64cc; color: var(--text-color-light);}

.lba66 a, .lba77 a, .lba88 a, .lbaaa a, .lbabb a, .lbacc a,
.lba66 h2, .lba77 h2, .lba88 h2, .lbaaa h2, .lbabb h2, .lbacc h2,
.lba66 h3, .lba77 h3, .lba88 h3, .lbaaa h3, .lbabb h3, .lbacc h3,
.lba66 h4, .lba77 h4, .lba88 h4, .lbaaa h4, .lbabb h4, .lbacc h4 {color: var(--text-color-light);}

/* Images */
img {max-width:100%;}
.logo {position:absolute; top: 3.75rem; left:2%; width: 19.25rem; padding:0; margin:0; display:inline-block; box-sizing:border-box; z-index:900;}

/* Banner */
.bilderbanner {background-size:100% auto; background-position:center center;}
.bigbanner {display:none;}
.minibanner {display:block;}
.startseite {background-image:url(../images/banner/mini/Lichtbewusstseinakademie-Startseite.jpg);}
.hero-banner {position: relative;}

/* Kurz-Info Komponente */
.kurz-info {margin: var(--spacing-lg) 0;}
.kurz-info__image {width:70%; padding:0;}
.kurz-info__content {padding: var(--spacing-lg) 5rem; color: var(--text-color-light);}
.kurz-info__content h3 {color: var(--text-color-light);}

[data-layout="bild-links"] .kurz-info__image {margin:0 30% 0 0;}
[data-layout="bild-links"] .kurz-info__content {margin: -8.125rem 0 0 30%;}
[data-layout="bild-rechts"] .kurz-info__image {margin:0 0 0 30%;}
[data-layout="bild-rechts"] .kurz-info__content {margin: -8.125rem 30% 0 0;}

/* Aktuelles Cards */
.aktuelles {padding-top: 11.25rem; background:rgba(0,0,0,0.7); color: var(--text-color-light); transition:all 0.4s;}
.aktuelles:hover {background:rgba(0,0,0,0.1); cursor:pointer;}
.aktuelles h3, .aktuelles h4, .aktuelles h5 {color: var(--text-color-light);}
.akt1, .akt2, .akt3 {background-position:center center; background-size:auto 100%; background-repeat:no-repeat;}
.akt1 {background-image:url(../images/aktuelles/akt1.jpg);}
.akt2 {background-image:url(../images/aktuelles/akt2.jpg);}
.akt3 {background-image:url(../images/aktuelles/akt3.jpg);}

/* Fachbereiche */
.fach {position:relative; padding:0; margin:0; text-align:center;}
.fach li {position:relative; width:24%; margin:0; padding:0.2% 0.25%; text-align:center; list-style-type:none; display:inline-block;}
.fach li img {position:relative; width:100%; max-width: 32rem;}
.fach li img.fachlogo {position:absolute; top:0; left:0; opacity:1; transition: opacity 0.4s;}
.fach li img.fachlogo:hover {opacity:0;}

.avatars {padding:0; margin:0; text-align:center;}
.avatars li {width: 11.25rem; margin:0; padding:0.2% 0.25%; text-align:center; list-style-type:none; display:inline-block;}
.avatars li img {width:100%; max-width: 11.25rem;}

/* Button System */
.weiterbutton {padding: 0.625rem 1.625rem; margin: var(--spacing-md) auto 0; width:max-content; max-width: 90%; display:block; box-sizing:border-box; background: var(--primary-color); color: var(--text-color-light); transition: padding 0.2s, background 0.2s; font-size: var(--font-size-base); line-height: var(--line-height-loose); font-weight:400; text-decoration:none; border-radius: var(--radius-sm); text-align: center; hyphens: auto; word-break: break-word; overflow-wrap: break-word;}
.weiterbutton:hover {padding: 0.625rem var(--spacing-md); background: var(--primary-color);}

.greybutton {padding: 0.625rem 1.625rem; margin: var(--spacing-md) auto 0; width:max-content; max-width: 90%; display:block; box-sizing:border-box; background:#281e6477; color: var(--text-color-light); transition: padding 0.2s, background 0.2s; font-size: var(--font-size-base); line-height: var(--line-height-loose); font-weight:400; text-decoration:none; border-radius: var(--radius-sm); text-align: center; hyphens: auto; word-break: break-word; overflow-wrap: break-word;}
.greybutton:hover {padding: 0.625rem var(--spacing-md); background:#281e6488;}

.whitebutton {padding: 0.625rem 1.625rem; margin: var(--spacing-md) auto 0; width:max-content; max-width: 90%; display:block; box-sizing:border-box; background:rgba(255,255,255,0.7); color: var(--primary-color); transition: padding 0.2s, background 0.2s; font-size: var(--font-size-base); line-height: var(--line-height-loose); font-weight:400; text-decoration:none; border-radius: var(--radius-sm); text-align: center; hyphens: auto; word-break: break-word; overflow-wrap: break-word;}
.whitebutton:hover {padding: 0.625rem var(--spacing-md); background:#ffffffee;}

.topspace {margin-top: var(--spacing-xl);}
.bottomspace {margin-bottom: var(--spacing-md);}

/* Utility Buttons */
.totop {position:fixed; bottom: 0.9375rem; right: 0.9375rem; width: 0.125rem; height: 0.125rem; padding: 0.9375rem 1.375rem 1.5625rem 1.1875rem; margin:0; border-radius: var(--radius-full); background: var(--primary-color-light); z-index:999; opacity:0.3; transition: opacity 0.2s;}
.totop:hover {opacity:0.5;}
.totop i:before, .totop i:after {content:""; position:absolute; background-color: var(--text-color-light); width: 0.1875rem; height: 0.5625rem;}
.totop i:before {transform: translate(-0.125rem, 0) rotate(45deg);}
.totop i:after {transform: translate(0.125rem, 0) rotate(-45deg);}

/* Footer */
.footerliste {padding:0; margin:0 0 var(--spacing-md);}
.footerliste li {padding:0; margin:0 0 var(--spacing-xs); list-style-type:none;}
.copyright {font-size: var(--font-size-sm); color: var(--text-color-alpha); margin-bottom:0;}

/* Accordion */
ul.accord {list-style:none; perspective:900; padding:0 0 var(--spacing-md) 0; margin:0;}
ul.accord li.accor {position:relative; padding: var(--spacing-sm) 0; margin:0; border-bottom:1px dotted var(--primary-color);}
ul.accord li.accor:nth-of-type(1) {border-top:1px dotted var(--primary-color);}
ul.accord h3 {font-size: 1.625rem; line-height: 2.375rem; padding:0 var(--spacing-xl) 0 0; margin: var(--spacing-sm) 0 var(--spacing-md);}
ul.accord h3.vortext {font-family: var(--font-primary); font-size: var(--font-size-base); line-height: var(--line-height-loose); font-weight:400; margin:0 0 var(--spacing-md); color: var(--text-color);}
ul.accord li.accor i {position: absolute; transform: translate(-0.375rem, 0); margin-top: 0.75rem; right: var(--spacing-xs);}
ul.accord li.accor i:before, ul.accord li.accor i:after {background-color: var(--primary-color); content:""; position:absolute; width: 0.1875rem; height: 0.5625rem; transition: all 0.25s ease-in-out;}
ul.accord li.accor i:before {transform: translate(-0.125rem, 0) rotate(45deg);}
ul.accord li.accor i:after {transform: translate(0.125rem, 0) rotate(-45deg);}
ul.accord li.accor input[type=checkbox] {position:absolute; width:100%; height:100%; z-index:1; opacity:0; cursor:pointer; z-index:800;}
ul.accord li.accor input[type=checkbox]:checked ~ h4, ul.accord li.accor input[type=checkbox]:checked ~ p, ul.accord li.accor input[type=checkbox]:checked ~ ul, ul.accord li.accor input[type=checkbox]:checked ~ ol, ul.accord li.accor input[type=checkbox]:checked ~ img, ul.accord li.accor input[type=checkbox]:checked ~ table {margin:0; max-height:0; opacity:0; display:none; transform: translate(0, 50%);}
h3.weiterbutton {padding: 0.625rem 1.625rem !important; margin: var(--spacing-md) 0 var(--spacing-sm) !important; width:max-content; box-sizing:border-box; font-size: var(--font-size-base); line-height: var(--line-height-loose); font-weight:400; text-align:center; color: var(--text-color-light) !important; background: var(--primary-color); display:none;}
ul.accord li.accor input[type=checkbox]:checked ~ h3.weiterbutton {display:block; transition: padding 0.2s, background 0.2s;}
ul.accord li.accor input[type=checkbox]:checked:hover ~ h3.weiterbutton {padding: 0.625rem var(--spacing-md) !important; background: var(--primary-color);}
ul.accord li.accor input[type=checkbox]:checked ~ i:before {transform: translate(0.125rem, 0) rotate(45deg);}
ul.accord li.accor input[type=checkbox]:checked ~ i:after {transform: translate(-0.125rem, 0) rotate(-45deg);}

/* Responsive Media Queries - px für Breakpoints */
@media (min-width: 901px) {
.bigbanner {display:block;}
.minibanner {display:none;}
.startseite {background-image:url(../images/banner/Lichtbewusstseinakademie-Startseite.jpg);}
}

@media (min-width: 1540px) {
.mainnavi li a {padding: 1rem var(--spacing-sm) 1.125rem;}
}

@media (min-width: 1024px) and (max-width: 1540px) {
.mainnavi li a br {display:inline-block;}
.mainnavi li a {padding: 0.625rem var(--spacing-sm) 0.75rem; line-height: 1.25rem; text-transform: none;}
h1, h2 {margin-bottom: var(--spacing-md);}
}

@media (max-width: 1023px) {
html, body {overflow-x:hidden;}
.sidebarIconToggle {display:block;}
.mainnavi {position:absolute; top: 7.8125rem; left:auto; right:0; width:100%; max-width: 22.5rem; padding: 0.5rem 0 1rem; margin:0; display:block; box-sizing:border-box; background: var(--primary-color); transform:translateX(22.5rem); transition:transform 600ms ease-in-out;}
.mainnavi li {display:block; padding:0; margin:0;}
.mainnavi li a {width:100%; padding: 0.5rem 1.5rem !important; height:auto; color: var(--text-color-light); font-size: var(--font-size-base); text-transform: none;}
.mainnavi li:hover ul {display:none;}
}

@media (max-width: 900px) {
.container, .container-big {padding: var(--spacing-xl) 0;}
.halb, .drittel, .doppel {width:100%; margin:0 auto; padding:0; float:none;}
.boxcontent {padding: var(--spacing-sm);}
.aktuelles {padding-top: 11.25rem; padding-bottom: var(--spacing-xl);}
.right {text-align:left;}
.fach li {width:49%;}
h1, h2 {font-size: var(--font-size-2xl); line-height: 2.5rem;}
h3 {font-size: var(--font-size-xl); line-height: 2.25rem;}
h4 {font-size: var(--font-size-lg); line-height: var(--line-height-normal);}
}

@media (max-width: 800px) {
.container, .container-big {padding: var(--spacing-lg) 0;}
[data-layout="bild-links"] .kurz-info__image, [data-layout="bild-rechts"] .kurz-info__image {width:100%; padding:0; margin: var(--spacing-lg) 0 0;}
[data-layout="bild-links"] .kurz-info__content, [data-layout="bild-rechts"] .kurz-info__content {padding: var(--spacing-lg); margin: var(--spacing-sm) 0 var(--spacing-lg);}
.lichtweisheit {font-size: 1.25rem; line-height: var(--line-height-loose);}
}

@media (max-width: 560px) {
.topline {height: auto; min-height: 2.625rem; padding: 0.25rem 0; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem;}
.topnavi {order: 1; width: 100%; justify-content: center; padding: 0 1rem; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem;}
.topnavi li a {padding: 0.25rem 0.375rem; font-size: 0.75rem; line-height: 1.1rem; margin: 0;}
.social {margin: 0.375rem 0.25rem -0.25rem 0;}
.topline .social {display:none;}
.logo {width: 13.75rem; top: 3.375rem;}
.navi {height: auto; min-height: 10rem; padding-bottom: 1rem;}
.fach li {width:100%; padding:0 0 var(--spacing-xs);}
.lichtweisheit br {display:none;}
.weiterbutton, .greybutton, .whitebutton {font-size: 0.875rem; padding: 0.5rem 1rem; max-width: 95%; line-height: 1.4;}
.weiterbutton:hover, .greybutton:hover, .whitebutton:hover {padding: 0.5rem 1.25rem;}
}

/* Mobile Breakpoints für bessere Navigation */
@media (max-width: 480px) {
.topnavi li a {font-size: 0.7rem; padding: 0.2rem 0.3rem;}
.topline {padding: 0.2rem 0;}
.topnavi {flex-wrap: wrap; gap: 0.25rem;}
.topnavi li {flex: 0 0 auto;}
.weiterbutton, .greybutton, .whitebutton {white-space: normal; min-height: 2.5rem;}
}

@media (max-width: 420px) {
.topnavi li a {font-size: 0.65rem; padding: 0.15rem 0.25rem;}
}