@font-face{ font-family: "Geneva"; src: local("Geneva"), local("Geneva Regular"), /* nutzt die Systemschrift, wenn vorhanden */ url("../fonts/fontgeneva/geneva-webfont.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap;/* barrierearm & performant */ unicode-range: U+000-5FF;/* optional, kleiner machen (Latin Basic + Supplement je nach Bedarf erweitern) */ } :root { --clr-accent: darkorange; --clr-accent-trans: rgb(255, 140, 0, 0.5); --clr-accent-inverse: gainsboro; --clr-grey-light: #e9ecef; --bs-border-color: rgb(125, 129, 133); --bs-link-color: inherit; --bs-link-color-rgb: var(--bs-body-color); --bs-focus-ring-color: var(--clr-accent-trans); --bs-border-radius: 4px; --bs-body-font-family: "Geneva", "Helvetica Neue", Arial, "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", sans-serif; --sticky-top: clamp(0.75rem, 1.5vw, 1.5rem); --mobile-sidebar-w: clamp(240px, 85vw, 340px); /* Mobilbreite Offcanvas */ --min-content-w: 320px; /* mind. sichtbarer Content */ --page-max: 1300px; /* max. Seitenbreite */ --sidebar-min: 13em; /* 12–16 rem (Menü + Puffer) */ --sidebar-ideal: 19rem; /* 18–24 vw */ --sidebar-max: 20rem; /* 20–24 rem */ --sticky-top: 1rem; /* 1rem / 24px … */ --brand-offset: 54px; /* Logo Mindesthoehe */ --brand-py: .75rem; /* Logo vertikales Padding */ --brand-size: 2rem; /* Logo-Startgroesse, kleine Screens */ --brand-size-scrolled: 1.4rem; /* wenn gescrollt */ --motion-fast: 300ms; --motion-medium: 300ms; } /* Schrumpf-Zustand aktivieren, wenn die Klasse .scrolled hat */ @media (min-width: 768px) { :root { --brand-size: 4.5rem; /* --brand-size-scrolled: 3rem; */ } } :root.scrolled { --brand-size: var(--brand-size-scrolled); --brand-py: .5rem; } /* Optischer Schutz für Anker-Ziele */ :target{ scroll-margin-top: var(--sticky-top); } /* Barrierefreiheit: „Bewegung reduzieren“ */ @media (prefers-reduced-motion: reduce){ :root{ --motion-fast: 0ms; --motion-medium: 0ms; } } html { scroll-padding-top: var(--sticky-top); /* Optischer Schutz für Anker-Ziele */ scrollbar-gutter: stable both-edges; /* Beruhigt Layout bei Scrollbar-Ein-/Ausblendung */ scroll-behavior: auto; /* Smooth-Scroll kann „Nachschwingen“ erzeugen */ } /* Falls Viewport der Scroller ist */ html, body { overscroll-behavior-y: none; } /* * ELEMENTS, HELPER CLASSES * -------------------------------------------------------------- */ img,svg,video,canvas{ max-width:100%; height:auto; } .visually-hidden-focusable:not(:focus){ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } a:hover, a:focus, a:active { color: var(--clr-accent); text-decoration: none; } /* BUTTONS */ .btn { box-shadow: inset 0 0 0 2px white; } .btn:active { --bs-btn-active-bg: var(--clr-accent); --bs-btn-active-border-color: var(--clr-accent); } btn:focus-visible { --bs-btn-hover-bg: var(--clr-accent); --bs-btn-hover-border-color: var(--clr-accent); box-shadow: inset 0 0 0 2px white; } .btn, .btn-primary { --bs-btn-bg: var(--clr-accent-inverse); --bs-btn-border-color: var(--clr-accent-inverse); } .btn:hover, .btn-primary:hover { --bs-btn-hover-bg: var(--clr-accent); --bs-btn-hover-border-color: var(--clr-accent); } .btn-secondary { --bs-btn-bg: var(--clr-accent); --bs-btn-border-color: var(--clr-accent); } .btn-secondary:hover { --bs-btn-hover-bg: var(--clr-accent-inverse); --bs-btn-hover-border-color: var(--clr-accent-inverse); } h1, .h1 { font-size: 1.5rem; margin-block: 1em; } @media (min-width: 1200px) { h1, .h1 { font-size: 2rem; } } h2, .h2 { color: red; font-size: 1.2rem; margin-top: 2em; } hr { color: var(--clr-grey-light); opacity: 1; } .nowrap{ white-space: nowrap; } .schriftSmaller { font-size: 0.9em; } img.analogon { max-width: min(700px, 100%); } img.text-flow-right { float: right; max-width: min(500px, 50%); margin: 0.5em 0 0.5em 0.5em; } /* * LAYOUT: ALL * --------------------------------------------------------- */ /* Seite horizontal zentrieren + Platz für fixe Top-Zeile */ .container.layout-centered{ max-width: var(--page-max); } /*.site-container { margin-bottom: 2rem; }*/ /* * LAYOUT / SIDEBAR / ALL MODULES: ALL SCREENS * --------------------------------------------------------- */ /* Module-Abstände in der Sidebar */ .sidebar-module { width: 100%;/*###*/ } /* NEU ### */ .sidebar-module{ padding:.5rem 0; } /* NEu ENDE */ /* * LAYOUT / SIDEBAR: SMALL SCREENS ONLY * --------------------------------------------------------- */ #mobileSidebar{ --bs-offcanvas-width: min(var(--mobile-sidebar-w), 100vw); --bs-offcanvas-width: min(var(--mobile-sidebar-w), 100svw); max-width: 100vw; max-width: 100svw; } /* Offcanvas und Backdrop unterhalb des Logos starten lassen */ @media (max-width: 767.98px) { #mobileSidebar, body:has(#mobileSidebar.show) .offcanvas-backdrop { top: var(--brand-offset); height: calc(100vh - var(--brand-offset));/*FALLBACK*/ height: calc(100dvh - var(--brand-offset)); } /* Content beim Öffnen nach rechts schieben (nur mobil) */ .site-container { transition: transform var(--motion-medium) ease; will-change: transform; padding-top: calc(var(--brand-offset) + 1rem); /* Platz oberhalb des Inhalts (nur mobil) */ } body:has(#mobileSidebar.show) .site-container { transform: translateX(min(var(--mobile-sidebar-w), calc(100vw - var(--min-content-w)))); } /* horizontalen Scroll verhindern, wenn Offcanvas offen ist */ html, body.offcanvas-open{ overflow-x: hidden; } } /* * LAYOUT / ASIDE: BIG SCREENS ONLY * --------------------------------------------------------- */ .site-container aside .sidebar-stick { position: static; } /* Desktop: linke Sidebar fix breit, Content flexibel; alles auf weiß */ @media (min-width: 768px) { .site-container > .row { align-items: stretch; flex-wrap: nowrap; } .site-container aside .sidebar-pad { padding-top: var(--sticky-top); } .site-container aside .sidebar-stick { position: sticky; top: var(--sticky-top); align-self: flex-start; box-sizing: border-box; /* falls Sidebar hoeher: interner Scroll */ max-height: calc(100vh - var(--sticky-top)); overflow: auto; -webkit-overflow-scrolling: touch; } main.col { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; word-break: break-word; padding-bottom: 3rem; border-left: 1px solid var(--clr-grey-light); } .site-container aside.col-md-auto{ flex: 0 0 var(--sidebar-min); max-width: var(--sidebar-max); min-width: var(--sidebar-min); } } @media (min-width: 1100px) { .site-container aside.col-md-auto{ flex: 0 0 clamp(var(--sidebar-min), var(--sidebar-ideal), var(--sidebar-max)); max-width: clamp(var(--sidebar-min), var(--sidebar-ideal), var(--sidebar-max)); min-width: var(--sidebar-min); } } /* * LOGO: ALL SCREENS * --------------------------------------------------------- */ .mobile-bar .brand-link, .brand-in-content .brand-wordmark { color: var(--clr-accent); font-size: var(--brand-size); transition: font-size var(--motion-fast) ease, padding var(--motion-fast) ease; transform-origin: left center; text-decoration: none; } /* * LOGO (+ menu button): SMALL SCREENS ONLY * --------------------------------------------------------- */ .mobile-bar { position: fixed; top: 0; left: 0; right: 0; min-height: var(--brand-offset); display: flex; align-items: center; justify-content:flex-start; gap: .5rem; z-index: 1046; background: white; padding: var(--brand-py) 1rem; box-shadow: 0 1px 0 var(--clr-accent-inverse); } .mobile-bar .brand-link { line-height: 1; } .mobile-bar .menu-label { font-size: 0.8em; margin-inline-start: auto; text-transform: uppercase; } /* menu button */ .menu-toggle { padding: .1em .6em .25em; } /* * LOGO: BIG SCREENS ONLY * --------------------------------------------------------- */ .brand-in-content{ position: sticky; top: 0; z-index: 2; background-color: white; padding-block: .75rem; } .brand-in-content .brand-wordmark { line-height: 1; } /* * LANGUAGE SWITCHER * --------------------------------------------------------- */ .sidebar-module.sprachwechsler { border-bottom: 1px solid var(--clr-grey-light); margin-bottom: 1rem; padding-block: 1rem; } /* NEU START ### */ .sidebar-module.sprachwechsler{ padding-bottom:1rem; padding-top:initial; } /* NEU ENDE */ .sidebar-module.sprachwechsler div.mod-languages .mod-languages__list { display: flex; justify-content: center; align-items: center; gap: .5rem; } .sidebar-module.sprachwechsler div.mod-languages a { box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); display: inline-block; font-size: 16px; padding: .1rem; width: 3em; text-align: center; border-radius: var(--bs-border-radius); text-decoration: none; } .sidebar-module.sprachwechsler div.mod-languages a:link, .sidebar-module.sprachwechsler div.mod-languages a:visited { background-color: black; color: white; } .sidebar-module.sprachwechsler div.mod-languages a:hover, .sidebar-module.sprachwechsler div.mod-languages a:focus, .sidebar-module.sprachwechsler div.mod-languages a:active { box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19); background-color: var(--clr-accent-inverse); color: white; } .sidebar-module.sprachwechsler div.mod-languages li.lang-active a:link, .sidebar-module.sprachwechsler div.mod-languages li.lang-active a:visited, .sidebar-module.sprachwechsler div.mod-languages li.lang-active a:hover, .sidebar-module.sprachwechsler div.mod-languages li.lang-active a:focus, .sidebar-module.sprachwechsler div.mod-languages li.lang-active a:active { background-color: var(--clr-accent); color: white; } .sidebar-module.sprachwechsler div.mod-languages li.lang-active a:hover, .sidebar-module.sprachwechsler div.mod-languages li.lang-active a:focus, .sidebar-module.sprachwechsler div.mod-languages li.lang-active a:active { box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); cursor: default; } /* * MENU: ALL SCREENS * --------------------------------------------------------- */ .sidebar-module.mainmenu ul { list-style: none; margin: 0; padding: 0; } /* eingeruecktes sub-menu */ .sidebar-module.mainmenu ul ul { padding-left: 1rem; } @media (min-width: 768px) { .sidebar-module.mainmenu ul ul { line-height: 1.3; } } .sidebar-module.mainmenu li { margin: 0; } .sidebar-module.mainmenu a, .sidebar-module.mainmenu span { display: inline-block; padding: .25rem .75rem; } .sidebar-module.mainmenu a { text-decoration: none; border-radius: var(--bs-border-radius); white-space: normal; word-break: normal; overflow-wrap: break-word; } .sidebar-module.mainmenu a:hover, .sidebar-module.mainmenu a:focus { background: var(--clr-grey-light); color: var(--clr-accent); } .sidebar-module.mainmenu li.current > a, .sidebar-module.mainmenu li.active > a { color: var(--clr-accent); } /* 1. Ebene: Links fett, alle, bis auf Ueberschrift padding */ /*.sidebar-module.mainmenu .mod-menu > li > a, .sidebar-module.mainmenu .mod-menu > li > .mod-menu__heading { font-weight: bold; }*/ /* 2. Ebene: Abstand nach letztem Submenu-Link */ .sidebar-module.mainmenu .mod-menu .mod-menu__sub li:last-child { margin-bottom: .75rem; } /* Trennlinie */ .sidebar-module.mainmenu li.divider { border-top: 1px solid #e5e5e5; margin: .35rem 0; } .sidebar-module.mainmenu li.divider > .separator { display: none; /* Text ausblenden, nur Linie zeigen */ } /* * BACK-TO-TOP * --------------------------------------------------------- */ .back-to-top { position: fixed; right: 1rem; bottom: 1rem; display: none; gap: .4rem; } .back-to-top.btn.show { display: inline-flex; align-items: center; --bs-btn-active-bg: var(--clr-accent-inverse); --bs-btn-active-border-color: var(--clr-accent-inverse); } .back-to-top.btn.show:hover { --bs-btn-active-bg: var(--clr-accent); --bs-btn-active-border-color: var(--clr-accent); } /* * SPECIALS: PAGES * --------------------------------------------------------- */ .com-content-article__body .content--links { margin-top: 2rem; } .com-content-article__body ul.liste--strich { line-height: 1.7; } /* Preise */ .preise { border: 0; margin: 3em 0 1em; width: 100%; } .preise td, .preise th { vertical-align: top; } .preise th { height: 4em; padding-right: 10px; } .preise td { text-align: right; } /* * FORMS * --------------------------------------------------------- */ #visformcontainer form .row [class*="offset-"] { margin-left: 0 !important; } #visformcontainer form .row > [class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; } #visformcontainer h1 { margin-bottom: 0.5em; } #visformcontainer form label { display:block; font-weight: normal; margin-bottom: .25rem; margin-top: 1rem; } #visformcontainer form .asterix-ancor::after { padding-left: 0 !important; } /* Gesten, Tastaturfokus * checkboxen & radio-buttons: * input.form-check-input[type="checkbox"] * input.form-check-input[type="radio"] ### * * input (Text) & textarea: * input.form-control[type="text"] * input.form-control[type="email"] * * textarea.form-control * * select: select.form-select * * senden: * input.btn.btn-secondary[type="submit"] * input.btn.btn-secondary[type="submit"] * input.btn.btn-secondary[type="submit"] * [type="submit"]:not(:disabled) */ :is(input:not([type=submit]), textarea, select, .form-control):hover, :is(input:not([type=submit]), textarea, select, .form-control):focus, :is(input:not([type=submit]), textarea, select, .form-control):focus-visible, :is(input:not([type=submit]), textarea, select, .form-control):focus-within, :is(input:not([type=submit]), textarea, select, .form-control):active { border-color: white !important; box-shadow: none; outline: 2px solid var(--clr-accent); outline-offset: 2px; } /* :is(input:not([type=submit]):not([type=button]):not([type=reset]), textarea, select, .form-control):focus { border-color: mediumaquamarine!important; } */ /* checkboxen & radio-buttons */ #visformcontainer form .form-check-input:checked { background-color: var(--clr-accent); border-color: white; } /* SPECIALS * --------------------------------------------- */ /* Betriebssystem-Wahl col-12 field81 required */ #visformcontainer form .betriebssystem .col-9 { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; } #visformcontainer form .betriebssystem .form-check { display: flex; align-items: center; gap: .5rem; padding-left: 0; margin-block: 1rem; min-height: 0; } #visformcontainer form .betriebssystem .form-check label{ margin: 0; } #visformcontainer form .betriebssystem .form-check-input { float: none; margin: 0; align-self: center; } /* Text "Bei Bestellung der Demoversion …" */ #visformcontainer .bs-after { margin-bottom: 2rem; } /* Text Datenschutz vor Sende-Button */ #visformcontainer form .visCustomText { font-size: .9em; margin-top: 2rem; text-align: left !important; }