/* ============================================================ ROBERT FISCHBACH IT — Website Eine Stylesheet-Datei. Keine Frameworks, keine externen Fonts. Farbwelt und Grundprinzip (CSS-Variablen, Hell/Dunkel per data-Attribut) fortgeführt aus dem Westerwald-Quiz-Projekt. ============================================================ */ @font-face{ font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/poppins-600.woff2') format('woff2'); } @font-face{ font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/poppins-700.woff2') format('woff2'); } @font-face{ font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap; src:url('../fonts/poppins-800.woff2') format('woff2'); } @font-face{ font-family:'Inter';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/inter-variable.woff2') format('woff2'); } @font-face{ font-family:'Inter';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/inter-variable.woff2') format('woff2'); } @font-face{ font-family:'Inter';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/inter-variable.woff2') format('woff2'); } @font-face{ font-family:'Inter';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/inter-variable.woff2') format('woff2'); } :root{ --akzent:#2baae2; --akzent-dunkel:#1b87b8; --gruen:#3ddc97; --gold:#f5c451; --rot:#e0575b; /* Eigene Farben fuer den Hochkontrast-Modus (siehe weiter unten) -- bewusst getrennt von --akzent/--akzent-dunkel, die als Markenfarbe unveraendert bleiben sollen. Barrierefreiheit und Dunkelmodus schliessen sich gegenseitig aus (siehe main.js: Aktivieren des Kontrastmodus erzwingt das helle Schema) -- diese Farben muessen deshalb nur fuer EIN Schema funktionieren, keine Theme-Verzweigung noetig. */ --kontrast-text:#0d3c5c; --kontrast-flaeche:#0d3c5c; --kontrast-flaeche-hover:#082a41; --font-head:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --rand:1.25rem; --maxbreite:1180px; --radius:1rem; } @media (max-width:700px){ :root{--rand:1.75rem} } html[data-schema="dunkel"]{ --bg:#14243a; --bg-2:#0f1b2c; --panel:#1e3350; --panel-2:#26405f; --text:#ffffff; --text-2:#a9bdd4; --linie:#31527a; --schatten:rgba(3,9,20,.35); color-scheme:dark; } html[data-schema="hell"]{ --bg:#f5f8fb; --bg-2:#e8eef4; --panel:#ffffff; --panel-2:#f1f5f9; --text:#16233a; --text-2:#54687f; --linie:#dbe4ec; --schatten:rgba(22,35,58,.10); color-scheme:light; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} /* overflow-x:clip statt hidden: verhindert horizontales Wischen/Scrollen durch versehentlich zu breite Elemente, ohne (anders als "hidden") die Y-Achse in einen eigenen Scroll-Container zu verwandeln -- das hatte zuvor den Sticky/Fixed-Header durcheinandergebracht. */ html,body{overflow-x:clip} body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; transition:background .25s,color .25s; /* Lange deutsche Komposita ohne Trennzeichen (z.B. "Technologiekommunikation") duerfen bei Bedarf mitten im Wort umbrechen -- als unteilbares min-content zwingen sie sonst Grid-/Flex-Eltern zu einer Mindestbreite, die bei bestimmten schmalen Bildschirmbreiten das Container-Padding sprengt. hyphens:auto sorgt zusaetzlich fuer einen Trennstrich an einer sinnvollen Silbengrenze statt eines harten Schnitts mitten im Wort. */ overflow-wrap:break-word; -webkit-hyphens:auto;hyphens:auto; } h1,h2,h3,h4{ font-family:var(--font-head); font-weight:700; line-height:1.18; margin:0 0 .7em; letter-spacing:-.01em; /* Ueberschriften duerfen, anders als Fliesstext (siehe body), nicht automatisch/woerterbuchbasiert mitten im Wort trennen -- bei grosser, fetter Schrift wirkt ein beliebiger Trennstrich dort unruhig. "manual" statt "none": ein gezielt per ­ gesetzter Trennstrich (z.B. bei "Technologie­kommunikation") funktioniert dadurch weiterhin -- bei "none" wuerde der Browser sonst ersatzweise hart und ganz ohne Trennstrich mitten im Wort umbrechen, sobald der Platz nicht reicht. */ -webkit-hyphens:manual;hyphens:manual; } h1{font-weight:800} p{margin:0 0 1.1em} a{color:var(--akzent);text-decoration:none} a:hover{text-decoration:underline} img{max-width:100%;display:block} ul{padding-left:1.2em} button,input,textarea,select{font:inherit;color:inherit} .container{max-width:var(--maxbreite);margin:0 auto;padding:0 var(--rand)} section{padding:clamp(3rem,7vw,6rem) 0} /* Kompakterer unterer Abstand, wenn ein kurzer Absatz direkt in den naechsten Abschnitt uebergeht (z.B. ein Einleitungssatz vor einer Angebotsuebersicht), damit dort nicht zwei volle Section-Abstaende aufeinandertreffen. */ section.abschnitt-knapp{padding-bottom:clamp(1rem,2.5vw,2rem)} /* Ohne diese Regel bleibt zwischen einer .abschnitt-knapp-Section und der naechsten Section trotzdem die volle obere Section-Polsterung stehen -- der verkleinerte Abstand wirkt dann nur zur Haelfte. */ section.abschnitt-knapp+section{padding-top:clamp(1rem,2.5vw,2rem)} /* Dezente geometrische Formen als Hintergrund-Textur -- dieselbe Formensprache (abgerundete, gedrehte Quadrate) wie bei Icons, Logo und dem Westerwald-Quiz. Rein dekorativ, liegt hinter dem Inhalt. */ .deko-hintergrund{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .deko-hintergrund i{ position:absolute;display:block;background:var(--akzent);opacity:.07;border-radius:3rem; animation:deko-schweben 15s ease-in-out infinite; } .deko-hintergrund i:nth-child(2){animation-duration:19s;animation-delay:-4s} @keyframes deko-schweben{ 0%,100%{translate:0 0} 50%{translate:1.4rem -1rem} } @media (prefers-reduced-motion:reduce){.deko-hintergrund i{animation:none}} #einstieg{position:relative} #einstieg>.container{position:relative;z-index:1} /* Grosses, blasses Themen-Icon im grafischen Hero (Wiederverwendung der jeweiligen Leistungs-Icons als dezentes Wasserzeichen). Position/Breite liegen in eigenen Variablen, damit die Textspalte (siehe .hero-grafik h1/.lead weiter unten) ihre max-width direkt daraus berechnen und die Grenze so dicht wie moeglich an die linke Icon-Kante legen kann, statt einen pauschalen, geratenen Wert zu verwenden. */ .hero-grafik{ --icon-rand:clamp(-1.5rem,2vw,2.5rem); --icon-breite:clamp(13rem,24vw,20rem); } .hero-icon-deko{ position:absolute;top:50%;right:var(--icon-rand);transform:translateY(-50%); width:var(--icon-breite);height:var(--icon-breite); color:var(--akzent);opacity:.1;z-index:0;pointer-events:none; } @media (max-width:780px){.hero-icon-deko{display:none}} .schmal{max-width:62ch} .zentriert{text-align:center;margin-left:auto;margin-right:auto} .eyebrow{ display:inline-block;font-family:var(--font-head);font-weight:700; font-size:.8rem;letter-spacing:.14em;text-transform:uppercase; color:var(--akzent);margin-bottom:.9em; } h1{font-size:clamp(2.3rem,5vw,3.6rem)} h2{font-size:clamp(1.7rem,3.4vw,2.4rem)} h3{font-size:1.3rem} .lead{font-size:1.15rem;color:var(--text-2);max-width:60ch} /* ---------- Skip-Link ---------- */ .skip-link{ position:absolute;left:-999px;top:0;background:var(--akzent);color:#fff; padding:.7em 1.2em;border-radius:0 0 .5em 0;z-index:200; } .skip-link:focus{left:0} /* ---------- Header ---------- */ header.kopf{ position:sticky;top:0;z-index:100; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--linie); transition:background .25s,border-color .25s; } /* Auf Seiten mit Vollbild-Foto-Hero (.hero-voll): Header startet transparent direkt über dem Bild, bekommt erst beim Scrollen die normale Balkenoptik. Wird von main.js gesetzt (kopf-ueber-hero), solange noch nicht gescrollt wurde (kein .kopf-gescrollt). */ header.kopf.kopf-ueber-hero:not(.kopf-gescrollt){ background:transparent;border-bottom-color:transparent;backdrop-filter:none; } header.kopf.kopf-ueber-hero:not(.kopf-gescrollt) img.logo-hell{display:none} header.kopf.kopf-ueber-hero:not(.kopf-gescrollt) img.logo-dunkel{display:block} header.kopf.kopf-ueber-hero:not(.kopf-gescrollt) nav.hauptnav a{color:#fff} header.kopf.kopf-ueber-hero:not(.kopf-gescrollt) nav.hauptnav a:hover, header.kopf.kopf-ueber-hero:not(.kopf-gescrollt) nav.hauptnav a[aria-current="page"]{color:var(--akzent)} header.kopf.kopf-ueber-hero:not(.kopf-gescrollt) .werkzeug-btn{ color:#fff;border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.1); } header.kopf.kopf-ueber-hero:not(.kopf-gescrollt) .werkzeug-btn:hover{border-color:#fff;color:#fff} header.kopf.kopf-ueber-hero:not(.kopf-gescrollt) .werkzeug-btn[aria-pressed="true"]{ background:var(--kontrast-flaeche);border-color:var(--kontrast-flaeche);color:#fff; } header.kopf.kopf-ueber-hero:not(.kopf-gescrollt) .werkzeug-btn[aria-pressed="true"]:hover{ background:var(--kontrast-flaeche-hover);border-color:var(--kontrast-flaeche-hover);color:#fff; } header.kopf.kopf-ueber-hero:not(.kopf-gescrollt) .btn-kontakt{ background:var(--akzent);border-color:var(--akzent);color:#fff; } header.kopf.kopf-ueber-hero:not(.kopf-gescrollt) .menu-burger{ border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.1);color:#fff; } /* Header schwebt bei Vollbild-Hero-Seiten komplett losgelöst vom Dokumentfluss über dem Bild (statt per Negativ-Margin verschoben zu werden -- das erzeugte durch Rundung einen hauchdünnen sichtbaren Saum). Der Hero selbst startet dadurch ganz regulär am Seitenanfang. */ header.kopf.kopf-ueber-hero{position:fixed;top:0;left:0;right:0} .kopf-innen{ max-width:1360px;margin:0 auto;padding:0 var(--rand); display:flex;align-items:center;gap:1.2rem;min-height:4.4rem; } .marke{display:flex;align-items:center;gap:.6rem;flex:0 0 auto} .marke img{height:1.7rem;width:auto} img.logo-hell{display:none} html[data-schema="hell"] img.logo-dunkel{display:none} html[data-schema="hell"] img.logo-hell{display:block} nav.hauptnav{display:flex;align-items:center;justify-content:center;gap:1.6rem;margin-left:2.2rem;flex:1;min-width:0} nav.hauptnav ul{list-style:none;display:flex;gap:.7rem 1.15rem;margin:0;padding:0;flex-wrap:wrap;justify-content:center} nav.hauptnav a{ color:var(--text);font-weight:600;font-size:.92rem;white-space:nowrap; padding:.4em 0;border-bottom:2px solid transparent; } nav.hauptnav a:hover,nav.hauptnav a[aria-current="page"]{ color:var(--akzent);border-color:var(--akzent);text-decoration:none; } .kopf-werkzeuge{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex:0 0 auto} .werkzeug-btn{ display:inline-flex;align-items:center;gap:.4em; border:1px solid var(--linie);background:var(--panel);color:var(--text-2); border-radius:2rem;padding:.45em .9em;font-size:.82rem;font-weight:600; cursor:pointer;transition:.15s; } .werkzeug-btn:hover{border-color:var(--akzent);color:var(--akzent);text-decoration:none} .werkzeug-btn svg{width:1rem;height:1rem;flex:0 0 auto} /* Sichtbarer "aktiviert"-Zustand fuer echte Umschalter-Buttons (aktuell nur die Barrierefreiheits-Schaltflaeche) -- feste, kontraststarke Farbe statt --akzent, da dieser Zustand selbst gut lesbar sein muss. */ .werkzeug-btn[aria-pressed="true"]{background:var(--kontrast-flaeche);border-color:var(--kontrast-flaeche);color:#fff} .werkzeug-btn[aria-pressed="true"]:hover{background:var(--kontrast-flaeche-hover);border-color:var(--kontrast-flaeche-hover);color:#fff} .btn-kontakt{ background:var(--akzent);color:#fff;border-color:var(--akzent); padding:.5em 1.1em; } .btn-kontakt:hover{background:var(--akzent-dunkel);color:#fff} .menu-burger{ display:none;border:1px solid var(--linie);background:var(--panel); border-radius:.6rem;width:2.6rem;height:2.6rem;align-items:center;justify-content:center; cursor:pointer; } .menu-burger svg{width:1.3rem;height:1.3rem} /* 1300px statt vorher 1150px: bei z.B. 11"-iPad-Breite (~1194px) reichte der Platz fuer die volle Nav-Zeile knapp nicht mehr -- Eintraege quetschten sich zweizeilig zusammen, statt sauber ins Burger-Menue zu wechseln. Mit mehr Reserve gibt es nur noch "ganz oder gar nicht". */ .btn.btn-kontrast-mobil{display:none} @media (max-width:1300px){ nav.hauptnav{ position:fixed;top:4.4rem;right:0;bottom:0;left:0;background:var(--bg);margin-left:0; height:calc(100vh - 4.4rem);height:calc(100dvh - 4.4rem); flex-direction:column;align-items:stretch;justify-content:flex-start; padding:1.5rem var(--rand); transform:translateY(-8px);opacity:0;pointer-events:none;transition:.2s; overflow-y:auto; } nav.hauptnav.offen{transform:none;opacity:1;pointer-events:auto} nav.hauptnav ul{flex-direction:column;gap:0;justify-content:flex-start} nav.hauptnav a{display:block;padding:.9em 0;border-bottom:1px solid var(--linie);color:var(--text);white-space:normal} nav.hauptnav a:hover,nav.hauptnav a[aria-current="page"]{color:var(--akzent)} .kopf-werkzeuge .btn-kontakt{display:none} /* Die Barrierefreiheits-Schaltflaeche braucht in der Kopfzeile zu viel Platz (Text bleibt sichtbar, anders als frueher beim Theme-Toggle) -- verdraengte sonst den Menue-Button aus dem sichtbaren Bereich. Auf schmalen Bildschirmen zieht sie stattdessen in den Footer um (siehe .btn-kontrast-mobil weiter unten). */ .kopf-werkzeuge [data-kontrast-toggle]{display:none} .werkzeug-btn{padding:.45em .7em} .menu-burger{display:inline-flex} /* Das transparente Header-Overlay betrifft nur die schmale Kopfzeile über dem Hero-Bild -- sobald sich das mobile Menü als eigenes, blickdichtes Panel öffnet, gelten wieder normale, gut lesbare Theme-Farben statt des erzwungenen Weiß fürs Foto dahinter. */ header.kopf.kopf-ueber-hero:not(.kopf-gescrollt) nav.hauptnav.offen a{color:var(--text)} header.kopf.kopf-ueber-hero:not(.kopf-gescrollt) nav.hauptnav.offen a:hover, header.kopf.kopf-ueber-hero:not(.kopf-gescrollt) nav.hauptnav.offen a[aria-current="page"]{color:var(--akzent)} /* Dieselbe Ruecksetzung fuer den Hochkontrast-Modus -- ohne das erzwang die Hero-Regel (siehe Barrierefreiheit-Block) im geoeffneten, blickdichten Menue-Panel weiterhin weisse Schrift, die auf dem dort hellen Panel- Hintergrund unlesbar wurde. */ html[data-kontrast="hoch"] header.kopf.kopf-ueber-hero:not(.kopf-gescrollt) nav.hauptnav.offen a{color:var(--text)} html[data-kontrast="hoch"] header.kopf.kopf-ueber-hero:not(.kopf-gescrollt) nav.hauptnav.offen a:hover, html[data-kontrast="hoch"] header.kopf.kopf-ueber-hero:not(.kopf-gescrollt) nav.hauptnav.offen a[aria-current="page"]{color:var(--kontrast-text)} .btn.btn-kontrast-mobil{display:inline-flex} /* Reihenfolge im Footer auf schmalen Bildschirmen: Leichte Sprache, Barrierefreiheit, Farbschema -- unabhaengig von der Quellreihenfolge im HTML (die fuer breite Bildschirme unveraendert bleibt). */ .btn-leichte-sprache{order:1} .btn-kontrast-mobil{order:2} .btn-theme-toggle{order:3} /* Etwas kompakter, damit drei gestapelte Buttons auf kleinen Screens nicht zu wuchtig wirken -- Tastenfeld bleibt mit ca. 2.6rem Hoehe weiterhin komfortabel antippbar. */ .fuss-fernwartung>.btn{padding:.65em 1.2em;font-size:.88rem} } @media (max-width:420px){ .kopf-werkzeuge a.werkzeug-btn{padding:.45em .6em;font-size:.78rem} } /* ---------- Hero ---------- */ .hero{position:relative;overflow:hidden;min-height:100vh;min-height:100dvh;display:flex;align-items:center} .hero-bild{position:absolute;inset:0;z-index:0} .hero-bild img{width:100%;height:100%;object-fit:cover} .hero-bild::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(10,18,32,.55),rgba(10,18,32,.85) 75%); } html[data-schema="hell"] .hero-bild::after{ background:linear-gradient(180deg,rgba(10,18,32,.45),rgba(10,18,32,.78) 75%); } .hero-inhalt{position:relative;z-index:1;text-align:center;width:100%;color:#fff} .hero-inhalt h1{ font-size:clamp(2.2rem,4.6vw,3.4rem);color:#fff;margin-bottom:.3em; letter-spacing:.02em; } .hero-inhalt .lead{color:#dbe6f2;margin:0 auto;font-size:1.25rem} .hero-trenner{width:4rem;height:3px;background:var(--akzent);margin:1.3rem auto} .hero-scroll{ position:absolute;bottom:1.8rem;left:50%;transform:translateX(-50%); color:#cfe0ef;opacity:.8;animation:hupf 2.4s ease-in-out infinite; } @keyframes hupf{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}} .hero-signum{ position:absolute;bottom:4.4rem;left:50%;transform:translateX(-50%); width:1.5rem;height:auto;opacity:.55; } .hero-voll .hero-inhalt{max-width:46rem;margin-left:auto;margin-right:auto} /* Bewusst kein white-space:nowrap: Bei mittleren Breiten (z.B. iPad) reichte der Platz zwischen den Händen sonst nicht immer aus und der Text lief in die Hände hinein. So bricht er dort lieber sauber um, statt zu überlappen. */ .hero-voll .hero-inhalt h1{font-size:clamp(2.2rem,4.2vw,3.8rem);text-shadow:0 2px 20px rgba(0,0,0,.4)} .hero-voll .hero-inhalt .lead{font-size:1.05rem;text-shadow:0 1px 12px rgba(0,0,0,.4)} /* Dezenterer Schleier als bei anderen Foto-Heros, damit die Farben des Bilds (Orange/Cyan-Partikel) sichtbar bleiben -- nur so stark, wie es die Lesbarkeit von Überschrift und Slogan in der Bildmitte erfordert. */ .hero-voll .hero-bild::after{ background:linear-gradient(180deg,rgba(8,14,26,.2),rgba(8,14,26,.38) 55%,rgba(8,14,26,.55)); } html[data-schema="hell"] .hero-voll .hero-bild::after{ background:linear-gradient(180deg,rgba(8,14,26,.16),rgba(8,14,26,.3) 55%,rgba(8,14,26,.48)); } /* Kleine abgerundete Pille statt Linie oder Raute als Trenner -- Formensprache aus Logo/Banner/Quiz. */ .hero-akzent{ display:block;width:2.6rem;height:.5rem;border-radius:1rem;background:var(--akzent); margin:1.5rem auto; } /* Auf schmalen/hohen Bildschirmen (Handys) schneidet object-fit:cover die Hände an den Bildrändern weitgehend weg -- ein eingepasstes Bild sah dort aber wie ein "Kasten" mitten auf der Seite aus. Deshalb bleibt es bei cover: nahtloser dunkler Verlauf mit Text, ohne sichtbaren Bildrand; auf dem Desktop bleiben die Hände dagegen voll sichtbar. */ .hero-klein{min-height:26rem;padding:clamp(4rem,10vw,7rem) 0} .hero-klein-recht{min-height:auto;padding:3.5rem 0 1.5rem} .hero-klein .hero-bild img{object-position:center 22%} .hero-klein .hero-inhalt{text-align:left} .hero-klein .hero-inhalt .lead{margin:0} .hero-klein h1{font-size:clamp(2rem,4vw,2.8rem)} /* Grafische Hero-Variante ohne Foto (Säule 2 + 3) */ .hero-grafik{ background: radial-gradient(60% 90% at 85% 10%, color-mix(in srgb, var(--akzent) 30%, transparent), transparent 60%), radial-gradient(50% 70% at 5% 95%, color-mix(in srgb, var(--akzent) 18%, transparent), transparent 60%), var(--bg-2); min-height:auto;padding:clamp(4.5rem,11vw,7.5rem) 0 clamp(3rem,7vw,5rem); } .hero-grafik .hero-inhalt{color:var(--text);text-align:left} .hero-grafik h1{color:var(--text)} .hero-grafik .lead{color:var(--text-2);margin:0} .hero-grafik .hero-trenner{margin:1.3rem 0} /* max-width direkt auf Ueberschrift/Lead statt auf .hero-inhalt: dieses Element ist zugleich .container (margin:0 auto) -- eine max-width dort haette den ganzen Block zentriert statt ihn nur schmaler zu machen und dadurch den linksbuendigen Einklang mit dem Rest der Seite zerstoert. Die Breite wird aus denselben Variablen wie die Icon-Position berechnet (rechter Icon-Rand + Icon-Breite + 1.5rem Sicherheitsabstand), damit die Textspalte so breit wie moeglich bleibt und trotzdem nie unter das Icon laeuft -- statt eines pauschal geschaetzten festen Werts. Nur ab der Breite noetig, ab der das Icon ueberhaupt sichtbar ist. */ @media (min-width:781px){ .hero-grafik h1,.hero-grafik .lead{ max-width:calc(100vw - var(--icon-rand) - var(--icon-breite) - 1.5rem - max(0px,(100vw - var(--maxbreite)) / 2) - var(--rand)); } } /* Dekorative Formen (SVG, keine Fotos) */ .deko-form{position:absolute;pointer-events:none;opacity:.5} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:.5em; padding:.85em 1.6em;border-radius:.7rem;font-weight:700;font-family:var(--font-head); font-size:.95rem;border:2px solid transparent;cursor:pointer;transition:.15s; } .btn:hover{text-decoration:none} .btn-primaer{background:var(--akzent);color:#fff} .btn-primaer:hover{background:var(--akzent-dunkel);transform:translateY(-2px)} .btn-sekundaer{border-color:var(--linie);color:var(--text);background:transparent} .btn-sekundaer:hover{border-color:var(--akzent);color:var(--akzent);transform:translateY(-2px)} .btn-hero{border-color:rgba(255,255,255,.5);color:#fff} .btn-hero:hover{border-color:#fff;background:rgba(255,255,255,.12)} /* ---------- Nach-oben-Button ---------- */ .nach-oben-btn{ position:fixed;right:1.5rem;bottom:1.5rem;z-index:90; width:2.8rem;height:2.8rem;border-radius:50%;border:none; display:grid;place-items:center;cursor:pointer; background:var(--akzent);color:#fff;box-shadow:0 .6rem 1.4rem var(--schatten); opacity:0;transform:translateY(.6rem);pointer-events:none; transition:opacity .25s ease,transform .25s ease,background .15s; } .nach-oben-btn.sichtbar{opacity:1;transform:none;pointer-events:auto} .nach-oben-btn:hover{background:var(--akzent-dunkel)} .nach-oben-btn svg{width:1.3rem;height:1.3rem} @media (max-width:600px){.nach-oben-btn{right:1rem;bottom:1rem;width:2.5rem;height:2.5rem}} @media (prefers-reduced-motion:reduce){.nach-oben-btn{transition:opacity .15s}} /* ---------- Karten (drei Säulen etc.) ---------- */ .karten-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:2.5rem} @media (max-width:920px){.karten-grid{grid-template-columns:1fr}} .karte{ background:var(--panel);border:1px solid var(--linie);border-radius:var(--radius); padding:2rem;display:flex;flex-direction:column;gap:.9rem;min-width:0; transition:.18s;box-shadow:0 .4rem 1.2rem transparent; } a.karte{color:var(--text)} a.karte:hover{ text-decoration:none;transform:translateY(-4px);border-color:var(--akzent); box-shadow:0 1.2rem 2.4rem var(--schatten); } .karte-icon{ width:3rem;height:3rem;border-radius:.8rem;background:var(--panel-2); display:grid;place-items:center;color:var(--akzent);flex:0 0 auto; } .karte-icon svg{width:1.6rem;height:1.6rem} .karte h3{margin-bottom:.2em} .karte p{color:var(--text-2);margin-bottom:0;flex:1} .karte-pfeil{color:var(--akzent);font-weight:700;font-family:var(--font-head);font-size:.88rem} /* ---------- Angebotsblöcke (Leistungsseiten) ---------- */ .blockliste{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:2rem} @media (max-width:820px){.blockliste{grid-template-columns:1fr}} .blockliste .angebot-block:last-child:nth-child(odd){grid-column:1/-1} .angebot-block{ display:grid;grid-template-columns:3.4rem 1fr;gap:1.2rem; background:var(--panel);border:1px solid var(--linie);border-radius:var(--radius); padding:1.7rem 1.8rem;min-width:0; } /* Ohne dies bemisst sich die 1fr-Textspalte an ihrem Mindestinhalt, und der ist bei einem langen, ungetrennten Wort (siehe hyphens:manual bei Ueberschriften) manchmal breiter als die Spalte selbst -- die Box ueberlief dann seitlich statt das Wort umzubrechen. min-width:0 erlaubt der Spalte, schmaler als ihr Inhalt zu werden, overflow-wrap (siehe body) uebernimmt danach das eigentliche Umbrechen. */ .angebot-block>div{min-width:0} .angebot-block .karte-icon{width:2.6rem;height:2.6rem} .angebot-block h3{margin-bottom:.35em} .angebot-block p{color:var(--text-2);margin:0} /* Anonymisierte Praxisbeispiele (IT-Schulungen, Mandats-IT): bewusst schlichter/kleiner als .angebot-block (Leistungen) und .karte (Hauptangebote), damit die Hierarchie klar bleibt -- das sind unterstuetzende Belege, kein weiteres Hauptangebot. */ .praxisbeispiele{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2rem} /* Bleibt die letzte Karte als einzige in ihrer Zeile allein zurueck (z.B. bei 7 statt 6 Beispielen), nimmt sie die volle Breite ein statt schief in der linken Spalte zu haengen. */ .praxisbeispiele>:last-child:nth-child(3n+1){grid-column:1/-1} @media (max-width:900px){.praxisbeispiele{grid-template-columns:1fr}} .praxisbeispiel{ background:var(--panel);border:1px solid var(--linie);border-radius:var(--radius); padding:1.6rem;min-width:0; } .praxisbeispiel h3{font-size:1rem;color:var(--akzent);margin-bottom:.5em} .praxisbeispiel p{color:var(--text-2);font-size:.92rem;margin:0} /* Kompakte Merkmal-Chips, z.B. fuer "worauf sich die Flexibilitaet bezieht" */ .merkmale-liste{list-style:none;padding:0;margin:2rem 0 0;display:flex;flex-wrap:wrap;gap:.8rem} .merkmale-liste li{ display:flex;align-items:center;gap:.6em; background:var(--panel);border:1px solid var(--linie);border-radius:2rem; padding:.65em 1.2em;font-weight:600;font-size:.92rem;color:var(--text); } .merkmale-liste li::before{ content:"";width:.55rem;height:.55rem;border-radius:.16rem;background:var(--akzent); flex:0 0 auto; } /* ---------- Abschnitt-Kopf ---------- */ /* Kein eigenes max-width hier: der Fliesstext darunter begrenzt seine Breite bereits selbst (.schmal bzw. eigenes max-width), eine zusaetzliche Grenze am Wrapper wuerde nur die Ueberschrift unnoetig einengen und zu frueh umbrechen lassen. */ .abschnitt-kopf{margin-bottom:1rem} .abschnitt-kopf.mitte{margin-left:auto;margin-right:auto;text-align:center} /* Absaetze darin begrenzen ihre eigene Breite (.lead/.schmal), zentrieren sich dadurch aber nicht mehr von selbst, seit der Wrapper hier keine eigene max-width mehr hat -- sonst haengen sie links im nun breiteren Wrapper statt als eigener schmalerer Block mittig zu stehen. */ .abschnitt-kopf.mitte p{margin-left:auto;margin-right:auto} /* ---------- Kurzer Wegweiser (Startseite) ---------- */ .wegweiser{ background:var(--panel);border:1px solid var(--linie);border-radius:var(--radius); padding:clamp(2rem,5vw,3rem);text-align:center; } .wegweiser-optionen{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:1.6rem} .wegweiser-optionen[hidden]{display:none} .wegweiser-optionen button{ background:var(--panel-2);border:1px solid var(--linie);border-radius:2rem; padding:.7em 1.3em;font-weight:600;font-size:.92rem;font-family:inherit; color:var(--text);cursor:pointer;transition:.15s; } .wegweiser-optionen button:hover{border-color:var(--akzent);color:var(--akzent)} .wegweiser-optionen button.aktiv{background:var(--akzent);border-color:var(--akzent);color:#fff} .wegweiser-frage2{margin-top:1.6rem} .wegweiser-frage2[hidden]{display:none} .wegweiser-frage2 .wegweiser-optionen{margin-top:1rem} .wegweiser-zurueck{ display:inline-flex;align-items:center;gap:.3em;background:none;border:none; color:var(--text-2);font-size:.85rem;font-weight:600;font-family:inherit; cursor:pointer;padding:0; } .wegweiser-zurueck:hover{color:var(--akzent)} .wegweiser-frage2-titel{font-weight:700;font-family:var(--font-head);margin:.8rem 0 0} .wegweiser-ergebnis{ margin-top:1.8rem;padding-top:1.8rem;border-top:1px solid var(--linie); max-width:32rem;margin-left:auto;margin-right:auto; } .wegweiser-ergebnis[hidden]{display:none} .wegweiser-ergebnis p{color:var(--text-2);margin-bottom:1.2rem} /* ---------- Statistik-/Vertrauensleiste ---------- */ .vertrauensleiste{ background:linear-gradient(120deg,var(--akzent-dunkel),var(--akzent)); } .vertrauensleiste .container{ display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1.5rem; padding-top:3rem;padding-bottom:3rem; } .vertrauen-item{text-align:center} .vertrauen-item strong{ display:block;font-family:var(--font-head);font-size:clamp(2.2rem,5vw,3rem);color:#fff;font-weight:800; } .vertrauen-item span{color:rgba(255,255,255,.85);font-size:.92rem} /* ---------- Prozess-/Ablaufschritte ---------- */ .ablauf{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.2rem;counter-reset:schritt;position:relative} @media (max-width:700px){.ablauf{grid-template-columns:1fr}} .ablauf-schritt{position:relative;padding-top:3.4rem;min-width:0;text-align:center} .ablauf-schritt::before{ counter-increment:schritt;content:counter(schritt); position:absolute;top:0;left:50%;transform:translateX(-50%);width:2.2rem;height:2.2rem;border-radius:50%; background:var(--akzent);color:#fff;font-family:var(--font-head);font-weight:800; display:grid;place-items:center;font-size:.95rem;z-index:1; } .ablauf-schritt h3{font-size:1.05rem;margin-bottom:.3em} .ablauf-schritt p{color:var(--text-2);font-size:.92rem;margin:0} /* Verbindungslinie zwischen den drei Schritt-Nummern: dezente Spur (--linie) mit farbiger Fuellung, die beim Scrollen ins Blickfeld "einwaechst" (skalierender Kindknoten statt Breitenaenderung, das laesst sich performant animieren). Haengt am bestehenden .ablauf.sichtbar aus dem .einblenden-Scroll-Beobachter in main.js, keine neue JS-Logik noetig. Nur auf Desktop/Tablet sichtbar, da die drei Schritte darunter untereinander stehen -- eine horizontale Linie ergaebe dort keinen Sinn. */ .ablauf-linie{position:absolute;top:1.1rem;height:2px;background:var(--linie);z-index:0} .ablauf-linie span{position:absolute;inset:0;background:var(--akzent);transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.4,0,.2,1)} .ablauf-linie-1{left:calc(100%/6 + 1.6rem);right:calc(50% + 1.6rem)} .ablauf-linie-2{left:calc(50% + 1.6rem);right:calc(100%/6 + 1.6rem)} .ablauf.sichtbar .ablauf-linie span{transform:scaleX(1)} .ablauf.sichtbar .ablauf-linie-2 span{transition-delay:.25s} @media (max-width:700px){.ablauf-linie{display:none}} /* ---------- Bild-Text-Wechsel ---------- */ .bild-text{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center} @media (max-width:840px){.bild-text{grid-template-columns:1fr}} .bild-text img,.bild-text .grafik-flaeche,.bild-text .bild-copyright{border-radius:var(--radius);overflow:hidden} .bild-text.umgekehrt{direction:rtl} .bild-text.umgekehrt>*{direction:ltr} /* Bild mit Fotocredit-Hinweis (rechtlich erforderliche Urheberangabe) */ .bild-copyright{position:relative;margin:0;line-height:0} .bild-copyright figcaption{ position:absolute;right:.6rem;bottom:.6rem;line-height:1.2; background:rgba(15,23,42,.6);color:#fff; font-size:.7rem;padding:.3em .6em;border-radius:.3rem; } /* Mini-Slideshow fuer zwei Fotos an derselben Bild-Text-Stelle (z.B. "Ueber mich"): ernstes Foto zuerst, zweites Foto per Klick auf die Punkte darunter. Bewusst Punkte statt Hover, da Hover auf Touch-Geraeten gar nicht funktioniert. Hoehe richtet sich nach dem Seitenverhaeltnis des ersten (ernsten) Fotos, das zweite wird per object-fit:cover eingepasst, auch wenn es ein anderes Seitenverhaeltnis hat. */ /* Hoehe richtet sich nach der Text-Spalte (align-self:stretch fuellt die Grid-Zeile), statt einem festen Seitenverhaeltnis -- passt sich damit automatisch an, egal wie lang der begleitende Text gerade ist. */ .bild-slideshow{position:relative;border-radius:var(--radius);overflow:hidden;align-self:stretch;min-height:20rem} .bild-slideshow-folie{ margin:0;line-height:0;position:absolute;inset:0; opacity:0;transition:opacity .5s ease;pointer-events:none; } .bild-slideshow-folie.aktiv{opacity:1;pointer-events:auto} .bild-slideshow-folie img{width:100%;height:100%;object-fit:cover;display:block} .bild-slideshow-folie figcaption{ position:absolute;right:.6rem;bottom:2.2rem;line-height:1.2; background:rgba(15,23,42,.6);color:#fff; font-size:.7rem;padding:.3em .6em;border-radius:.3rem; } .bild-slideshow-punkte{ position:absolute;left:0;right:0;bottom:.9rem;z-index:1; display:flex;justify-content:center;gap:.5rem; } .bild-slideshow-punkte button{ position:relative; width:.6rem;height:.6rem;border-radius:50%;padding:0; border:1.5px solid #fff;background:rgba(255,255,255,.35);cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.35);transition:background .15s; } .bild-slideshow-punkte button.aktiv{background:#fff} /* Unsichtbar vergroesserte Trefferflaeche (ca. 1.6rem = 26px): der Punkt bleibt optisch klein, ist aber auf dem Handy zuverlaessig antippbar (WCAG 2.5.8, Mindestgroesse 24x24px). */ .bild-slideshow-punkte button::after{content:"";position:absolute;inset:-.5rem} .grafik-flaeche{ aspect-ratio:4/3; background: radial-gradient(60% 60% at 30% 30%, color-mix(in srgb, var(--akzent) 35%, transparent), transparent 70%), var(--panel-2); border:1px solid var(--linie); display:grid;place-items:center; } .grafik-flaeche svg{width:55%;height:55%;color:var(--akzent)} /* ---------- Hinweis-/Vertraulichkeits-Box ---------- */ .hinweis-box{ background:var(--panel);border:1px solid var(--linie);border-left:4px solid var(--akzent); border-radius:.6rem;padding:1.5rem 1.8rem;margin-top:2.5rem; } .hinweis-box h3{margin-bottom:.4em;font-size:1.05rem} .hinweis-box p{color:var(--text-2);margin:0} /* Zitat innerhalb einer Hinweis-Box, z.B. Presse-/Social-Media-Beleg */ .zitat{margin:.9rem 0 0;padding-left:1rem;border-left:3px solid var(--linie)} .zitat p{font-style:italic;color:var(--text);margin:0 0 .4em} .zitat footer{font-size:.85rem;color:var(--text-2)} /* Groesseres, freistehendes Kundenzitat (z.B. IT-Schulungen) -- bewusst ein eigener, praesenterer Stil als .zitat (dezentes Randlinien-Zitat innerhalb einer Hinweis-Box), mit grossem dekorativem Anfuehrungszeichen. Rein dekorativ, daher keine Hochkontrast-Sonderregel noetig -- der eigentliche Zitattext nutzt ohnehin --text. Die Anfuehrungszeichen sitzen freigestellt an den Ecken DES ZITATTEXTS (oeffnend oben links, schliessend unten rechts), beide ausserhalb der eigenen Box des

positioniert (negative Randwerte) -- dadurch koennen sie unabhaengig von Zeilenzahl und -laenge NIE mit dem Zitattext selbst kollidieren, weil dessen Zeichen nie ausserhalb der p-Box liegen (frueherer Bug bei der kuerzeren englischen Uebersetzung: Zeichen sassen innerhalb der Box-Kante und kollidierten mit einer langen letzten Zeile). */ .kundenzitat{max-width:56rem;margin:0 auto;text-align:center;padding:.5rem 2.4rem} .kundenzitat p{position:relative;font-size:1.2rem;font-style:italic;color:var(--text);line-height:1.65;margin:0} /* Anfuehrungszeichen als eigenes Inline-SVG statt Font-Zeichen (content: "\2018" etc.): Auf mehreren Mobilgeraeten sah das Zeichen dort leicht abgeschnitten aus -- Georgia ist eine reine Systemschrift ohne eigenes @font-face, ihre exakten Glyphen-Masse haengen vom jeweiligen Geraet/ der Fallback-Schrift ab und liessen sich von hier aus nicht zuverlaessig nachstellen. Ein SVG-Pfad rendert dagegen auf jedem Geraet identisch, das ganze Problem entfaellt strukturell. Ein einzelnes Doppelkomma-Motiv wird fuer oeffnend UND schliessend wiederverwendet, nur um 180 Grad gedreht (siehe .kundenzitat p::after) -- das ergibt automatisch die jeweils passende Form (66-Form oeffnend, 99-Form schliessend). */ .kundenzitat .zitat-marke{ position:absolute;width:2.6rem;height:auto;color:var(--akzent);opacity:.5;pointer-events:none; } .kundenzitat .zitat-auf{top:-.7rem;left:-3rem} .kundenzitat .zitat-zu{bottom:.2rem;right:-3rem;transform:rotate(180deg)} /* Deutsche Anfuehrungszeichen folgen einer anderen Konvention als die englischen: unten liegendes „ zum Auftakt, oben liegendes " zum Schluss (nicht wie im Englischen, wo beide Zeichen gleich hoch/symmetrisch sind -- daher braucht nur Deutsch eine eigene Positionierung). Das Auftakt- zeichen sitzt dadurch dem Wortanfang etwas naeher (weiter unten), das Schlusszeichen entsprechend naeher am Wortende (weiter oben). Da DE und EN hier die Form tauschen, wird bei DE einfach die jeweils andere Drehung angewendet. */ :lang(de) .kundenzitat .zitat-auf{top:.3rem;transform:rotate(180deg)} :lang(de) .kundenzitat .zitat-zu{bottom:.4rem;transform:none} .kundenzitat footer{margin-top:1.3rem;color:var(--text-2);font-size:.9rem} @media (max-width:600px){ .kundenzitat .zitat-marke{width:1.8rem} .kundenzitat .zitat-auf{top:-.5rem;left:-2.2rem} .kundenzitat .zitat-zu{bottom:.2rem;right:-2.2rem} :lang(de) .kundenzitat .zitat-auf{top:.3rem} :lang(de) .kundenzitat .zitat-zu{bottom:.4rem} } /* Hinweis-Box mit dezenter Deko (z.B. Sternenkranz), Deko liegt hinter dem Text */ .hinweis-box.mit-deko{position:relative;overflow:hidden} .hinweis-box.mit-deko .sterne-deko{ position:absolute;top:50%;right:1.3rem;transform:translateY(-50%); width:9.5rem;height:9.5rem;color:var(--akzent);opacity:.4;pointer-events:none; } .hinweis-box.mit-deko h3,.hinweis-box.mit-deko p{position:relative;z-index:1;max-width:42rem} @media (max-width:900px){.hinweis-box.mit-deko h3,.hinweis-box.mit-deko p{max-width:24rem}} @media (max-width:700px){.hinweis-box.mit-deko h3,.hinweis-box.mit-deko p{max-width:16rem}} @media (max-width:600px){.hinweis-box.mit-deko .sterne-deko{display:none}} /* ---------- Akkordeon (natives

) ---------- */ .akkordeon{ margin-top:1.6rem;background:var(--panel);border:1px solid var(--linie); border-radius:var(--radius);padding:1rem 1.4rem; } .akkordeon summary{ cursor:pointer;font-weight:700;font-family:var(--font-head);font-size:.95rem; list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem; } .akkordeon summary::-webkit-details-marker{display:none} .akkordeon summary::after{ content:"";width:.55rem;height:.55rem;border-right:2px solid var(--akzent);border-bottom:2px solid var(--akzent); transform:rotate(45deg);transition:transform .2s ease;flex:0 0 auto; } .akkordeon[open] summary::after{transform:rotate(-135deg)} .akkordeon-liste{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.6rem} .akkordeon-liste li{position:relative;padding-left:1.3rem;color:var(--text-2);font-size:.92rem} .akkordeon-liste li::before{ content:"";position:absolute;left:0;top:.5em;width:.5rem;height:.5rem;border-radius:.15rem;background:var(--akzent); } /* Hervorgehobener, eigenstaendiger Abschnitt fuer ein Angebot, das mehr Gewicht verdient als ein normaler Textblock (z.B. Strategieberatung). */ .strategie-box{ text-align:center;max-width:44rem;margin:0 auto; background:var(--panel);border:1px solid var(--linie);border-top:4px solid var(--akzent); border-radius:var(--radius);padding:clamp(2.2rem,5vw,3rem); box-shadow:0 1.2rem 2.8rem var(--schatten); } .strategie-box .lead{margin:0 auto} .strategie-box .merkmale-liste{justify-content:center;margin-top:1.6rem} /* Aufklappbarer Beweis-Punkt innerhalb der Strategieberatung-Karte (ersetzt eine frueher separate, volle Container-Breite nutzende Hinweis-Box, die optisch nicht zur schmaleren, zentrierten Strategie-Karte passte). Eigene Regeln statt .hinweis-box.mit-deko wiederzuverwenden, da diese Klasse auch unabhaengig auf der Mandats-IT-Seite genutzt wird. */ .strategie-akkordeon{margin-top:2rem;text-align:left;background:var(--panel-2)} .strategie-akkordeon-inhalt{ margin-top:1rem;display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap; } .strategie-akkordeon-inhalt p{flex:1 1 18rem;color:var(--text-2);margin:0} .strategie-akkordeon-inhalt .sterne-deko{ flex:0 0 auto;width:6.5rem;height:6.5rem;margin-right:1.6rem; color:var(--akzent);opacity:.35;pointer-events:none; } @media (max-width:600px){.strategie-akkordeon-inhalt .sterne-deko{display:none}} /* ---------- Partnerlogos ---------- */ .partner-leiste{margin-top:2.5rem} .partner-leiste .abschnitt-kopf{margin-bottom:1.2rem} .partner-grid{ display:flex;flex-wrap:wrap;gap:2.2rem;align-items:center; padding:1.6rem;background:var(--panel);border:1px dashed var(--linie);border-radius:var(--radius); } .partner-platz{ color:var(--text-2);font-size:.85rem;border:1px dashed var(--linie);border-radius:.5rem; padding:.8rem 1.2rem; } /* ---------- CTA-Band ---------- */ .cta-band{ background:linear-gradient(120deg,var(--akzent-dunkel),var(--akzent)); color:#fff;border-radius:var(--radius);padding:clamp(2.2rem,5vw,3.2rem); display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.6rem; } .cta-band h2{color:#fff;margin:0 0 .2em;font-size:clamp(1.5rem,3vw,2rem)} .cta-band p{color:rgba(255,255,255,.88);margin:0} .cta-band .btn-sekundaer{border-color:rgba(255,255,255,.6);color:#fff} .cta-band .btn-sekundaer:hover{background:rgba(255,255,255,.15);border-color:#fff} /* ---------- Formulare ---------- */ .formular-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:2.2rem;margin-top:2rem;align-items:start} @media (max-width:820px){.formular-grid{grid-template-columns:1fr}} .formular-karte{ background:var(--panel);border:1px solid var(--linie);border-radius:var(--radius); padding:2rem;min-width:0; } .formular-karte h3{margin-bottom:.2em} .formular-tab-inhalt>p{color:var(--text-2)} .formular-tabs{display:flex;gap:1.6rem;margin-bottom:1.6rem;border-bottom:1px solid var(--linie)} .formular-tab{ background:none;border:none;border-bottom:2px solid transparent;color:var(--text-2); font-weight:700;font-family:var(--font-head);font-size:.95rem; padding:.2em .1em .8em;margin-bottom:-1px;cursor:pointer;transition:.15s; } .formular-tab:hover{color:var(--text)} .formular-tab[aria-selected="true"]{color:var(--akzent);border-color:var(--akzent)} .formular-tab-inhalt[hidden]{display:none} .feld{margin-bottom:1.1rem} .feld label,.feld legend{display:block;font-weight:600;font-size:.9rem;margin-bottom:.4em} /* Radiogruppe "Bevorzugte Zeit" ist ein
(Screenreader lesen die als Gruppenfrage vor) -- Browser-Standardrahmen entfernen. */ fieldset.feld{border:0;padding:0;min-width:0} .feld legend{padding:0} .feld input,.feld textarea,.feld select{ width:100%;padding:.75em .9em;border-radius:.55rem;border:1px solid var(--linie); background:var(--bg);color:var(--text); } .feld input:focus,.feld textarea:focus,.feld select:focus{outline:2px solid var(--akzent);outline-offset:1px} .feld-radio{display:flex;gap:1.4rem;flex-wrap:wrap} .feld-radio label{display:flex;align-items:center;gap:.4em;font-weight:500;font-size:.92rem} .feld-radio input{width:auto} .website-feld{position:absolute;left:-9999px;top:-9999px} .formular-hinweis{font-size:.82rem;color:var(--text-2);margin-top:.8rem} .formular-status{ display:none;margin-top:1rem;padding:.9em 1.1em;border-radius:.6rem;font-size:.92rem; } .formular-status.zeigen{display:block} .formular-status.erfolg{background:color-mix(in srgb,var(--gruen) 18%,var(--panel));border:1px solid var(--gruen)} .formular-status.fehler{background:color-mix(in srgb,var(--rot) 18%,var(--panel));border:1px solid var(--rot)} .kontakt-info{display:grid;gap:1.4rem} .kontakt-item{display:flex;gap:1rem;align-items:flex-start} .kontakt-item .karte-icon{flex:0 0 auto} .kontakt-item h3{font-size:1rem;margin-bottom:.25em} .kontakt-item p{color:var(--text-2);margin:0} .kontakt-item p a{color:var(--text)} .btn-kontaktweg{padding:.5em 1em;font-size:.85rem;margin-top:.2em} .anfahrt-abschnitt{margin-top:3.2rem} .anfahrt-abschnitt h2{margin-bottom:1rem} .anfahrtskarte{ height:28rem;border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden; /* Leaflet vergibt intern hohe z-index-Werte (Zoom-Buttons/Popup bis 1000) -- ohne eigenen Stacking-Context "entkommen" die dem sticky Header (z-index:100) und ueberdecken ihn beim Hochscrollen. */ isolation:isolate; } @media (max-width:640px){.anfahrtskarte{height:20rem}} .karte-hinweis{margin-top:.6rem;font-size:.85rem} html[data-schema="dunkel"] .anfahrtskarte.leaflet-container{filter:grayscale(.3) invert(.92) contrast(.9)} /* Platzhalter vor dem Klick auf "Karte laden" (Zwei-Klick-Loesung, siehe main.js) -- es wird noch nichts von OpenStreetMap geladen. */ .karte-platzhalter{display:flex;align-items:center;justify-content:center;padding:1.5rem;background:var(--panel);text-align:center} .karte-einwilligung{max-width:32rem} .karte-einwilligung p{color:var(--text-2);font-size:.92rem;margin-bottom:1.1rem} /* Per Skript fokussierte, an sich nicht interaktive Bereiche (Wegweiser- Ergebnis/-Frage) ohne Fokusrahmen -- sie sind nur Sprungziel fuer Screenreader, keine Bedienelemente. */ [data-wegweiser] [tabindex="-1"]:focus{outline:none} /* ---------- Inhaltsseiten (Impressum/Datenschutz) ---------- */ .rechtstext h2{margin-top:1.4em;font-size:1.3rem} .rechtstext h3{font-size:1.05rem;margin-top:1.1em} .rechtstext p,.rechtstext li{color:var(--text-2)} .rechtstext{max-width:70ch} .en-hinweis{ background:var(--panel-2);border:1px solid var(--linie);border-radius:.6rem; padding:1rem 1.3rem;margin-bottom:2rem;font-size:.92rem;color:var(--text-2); } /* ---------- Leichte Sprache ---------- Groessere Schrift, mehr Zeilenabstand, mehr Absatzabstand, klarer Farbkontrast (--text statt --text-2) und immer linksbuendig (nie Blocksatz) -- gehoert zu den Grundregeln fuer Leichte Sprache. */ .leichte-sprache-text{ max-width:60ch;font-size:1.2rem;line-height:1.8;text-align:left; -webkit-hyphens:none;hyphens:none; } .leichte-sprache-text p{color:var(--text);margin-bottom:1.6em} .leichte-sprache-text h2{margin-top:1.6em;font-size:1.5rem} .leichte-sprache-text h3{margin-top:1.2em;font-size:1.2rem} .leichte-sprache-text a{text-decoration:underline} .leichte-sprache-text .btn{text-decoration:none;margin-top:.5em} /* ---------- Footer ---------- */ footer.fuss{border-top:1px solid var(--linie);background:var(--bg-2);margin-top:4rem} .fuss-oben{ display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.2rem; padding:3.2rem max(var(--rand),1.75rem) 2.2rem; } @media (max-width:820px){.fuss-oben{grid-template-columns:1fr 1fr}} @media (max-width:520px){.fuss-oben{grid-template-columns:1fr}} .fuss-marke img{height:2.1rem;width:auto;margin-bottom:.9rem} .fuss-marke p{color:var(--text-2);font-size:.9rem;max-width:26ch} .fuss-spalte h3{ font-family:var(--font-head);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase; color:var(--text-2);margin-bottom:.9em; } .fuss-spalte ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem} .fuss-spalte li,.fuss-spalte a{color:var(--text);font-size:.92rem} .fuss-fernwartung{ border-top:1px solid var(--linie);padding:1.6rem max(var(--rand),1.75rem); display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:2.2rem; } .fuss-fernwartung-gruppe{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center} /* Auf schmalen Bildschirmen erstmal ausgeblendet (Platz fuer die dort hinzukommende Barrierefreiheits-Schaltflaeche, siehe .btn-kontrast-mobil). Muss NACH der obigen Basis-Regel stehen, sonst gewinnt bei gleicher Spezifitaet die spaetere, unbedingte display:flex-Regel. */ @media (max-width:1300px){.fuss-fernwartung-gruppe{display:none}} /* max-width knapp ueber der Button-Breite: verhindert, dass der Hinweistext (breiter als der Button) die Flex-Box dieser Gruppe unsichtbar aufweitet -- sonst wird der Button darin zentriert und der optische Abstand zu den Nachbar-Buttons wirkt groesser als er tatsaechlich ist. */ .fuss-fernwartung-gruppe p{color:var(--text-2);font-size:.85rem;margin:0;max-width:13rem} .btn-fernwartung svg,.btn-leichte-sprache svg,.btn-theme-toggle svg,.btn-kontrast-mobil svg{width:1.1rem;height:1.1rem} .btn-leichte-sprache.aktiv{background:var(--akzent-dunkel);border-color:var(--akzent-dunkel)} /* ---------- Barrierefreiheit: Hochkontrast-Modus (opt-in per Schaltflaeche) ---------- Nur die tatsaechlich gemessenen Problemstellen (Links, Buttons mit weisser Schrift, Kennzahlen-Leiste, aktive Tab-/Wegweiser-Zustaende) werden auf die kontraststarken Farben umgestellt -- rein dekorative Verwendungen von --akzent (Deko-Formen, Icon-Wasserzeichen) bleiben unangetastet. */ /* :not(.btn-kontakt):not(.skip-link) ist noetig, weil beide keine .btn-Klasse tragen (eigene Button-Systeme) und sonst hier ihre Textfarbe verpasst bekaemen -- mit fataler Kollision, da sie dann identisch mit ihrer eigenen, weiter unten gesetzten Hintergrundfarbe waere (Text auf Hintergrund unsichtbar). Beide bekommen ihre Farben stattdessen ausschliesslich ueber die eigene Regel weiter unten. */ /* Bewusst auf main/footer beschraenkt statt per :not() beliebig viele Header-Ausnahmen anzuhaeufen -- jede weitere Ausnahme erhoeht sonst die Spezifitaet weiter und kann irgendwann sogar die Header/Hero-eigenen Regeln (Nav, werkzeug-btn) ueberstimmen. Der Header hat ohnehin komplett eigene, dedizierte Farbregeln (Nav, .werkzeug-btn, .btn-kontakt), braucht diese allgemeine Regel also gar nicht. */ html[data-kontrast="hoch"] main a:not(.btn):not(.hero-scroll), html[data-kontrast="hoch"] footer a:not(.btn){color:var(--kontrast-text)} /* .hero-scroll sitzt immer auf dem dunklen Hero-Foto, unabhaengig vom Farbschema -- bleibt daher bewusst weiss statt --kontrast-text. */ html[data-kontrast="hoch"] .hero-scroll{color:#fff} /* Navi-Links im transparenten Hero-Header: sitzen immer auf dem dunklen Foto, unabhaengig vom Schema -- muessen weiss bleiben statt --kontrast-text (das waere im hell-erzwungenen Kontrastmodus dunkles Navy, kaum lesbar). */ html[data-kontrast="hoch"] header.kopf.kopf-ueber-hero:not(.kopf-gescrollt) nav.hauptnav a{color:#fff} /* Barrierefreiheit und Dunkelmodus schliessen sich aus (siehe main.js) -- der Umschalter ist im Kontrastmodus ueberfluessig und wird versteckt. */ html[data-kontrast="hoch"] [data-theme-toggle]{display:none} html[data-kontrast="hoch"] .eyebrow{color:var(--kontrast-text)} html[data-kontrast="hoch"] .karte-pfeil{color:var(--kontrast-text)} html[data-kontrast="hoch"] .praxisbeispiel h3{color:var(--kontrast-text)} html[data-kontrast="hoch"] nav.hauptnav a:hover, html[data-kontrast="hoch"] nav.hauptnav a[aria-current="page"]{color:var(--kontrast-text)} html[data-kontrast="hoch"] .formular-tab[aria-selected="true"]{color:var(--kontrast-text);border-color:var(--kontrast-text)} /* Auch im normalen (nicht-transparenten) Kopfzeilen-Zustand sollen Sprache/ Barrierefreiheit/Kontakt gleich aussehen -- gleiche gefuellte Optik wie .btn-kontakt/[aria-pressed], die (spezifischeren) Regeln fuer jene bleiben unveraendert unbeeintraechtigt. */ html[data-kontrast="hoch"] .werkzeug-btn{background:var(--kontrast-flaeche);border-color:var(--kontrast-flaeche);color:#fff} html[data-kontrast="hoch"] .werkzeug-btn:hover{background:var(--kontrast-flaeche-hover);border-color:var(--kontrast-flaeche-hover);color:#fff} html[data-kontrast="hoch"] .btn-primaer{background:var(--kontrast-flaeche);border-color:var(--kontrast-flaeche)} /* Hover nutzt eine eigene, noch dunklere Flaechenfarbe -- NICHT --kontrast-text: die ist im Dunkel-Schema absichtlich hell (fuer lesbaren Fliesstext dort), waere als Hover-Hintergrund also viel zu hell fuer weisse Button-Schrift. */ html[data-kontrast="hoch"] .btn-primaer:hover{background:var(--kontrast-flaeche-hover);border-color:var(--kontrast-flaeche-hover)} html[data-kontrast="hoch"] .btn-sekundaer:hover{border-color:var(--kontrast-text);color:var(--kontrast-text)} /* :not(.aktiv) ist noetig, weil diese Regel sonst beim Hover eines bereits ausgewaehlten Buttons dessen Textfarbe (aus der .aktiv-Regel weiter unten) ueberstimmt -- mit derselben Farbe, die dort auch als Hintergrund gesetzt wird (Text auf Hintergrund unsichtbar). */ html[data-kontrast="hoch"] .wegweiser-optionen button:not(.aktiv):hover{border-color:var(--kontrast-text);color:var(--kontrast-text)} html[data-kontrast="hoch"] .wegweiser-optionen button.aktiv{background:var(--kontrast-flaeche);border-color:var(--kontrast-flaeche);color:#fff} html[data-kontrast="hoch"] .wegweiser-optionen button.aktiv:hover{background:var(--kontrast-flaeche-hover);border-color:var(--kontrast-flaeche-hover);color:#fff} html[data-kontrast="hoch"] .vertrauensleiste{background:var(--kontrast-flaeche)} html[data-kontrast="hoch"] .cta-band{background:var(--kontrast-flaeche)} html[data-kontrast="hoch"] .cta-band .btn-sekundaer:hover{background:var(--kontrast-flaeche-hover);border-color:#fff;color:#fff} html[data-kontrast="hoch"] .akkordeon summary::after{border-color:var(--kontrast-text)} html[data-kontrast="hoch"] .skip-link{background:var(--kontrast-flaeche);color:#fff} html[data-kontrast="hoch"] .nach-oben-btn{background:var(--kontrast-flaeche)} html[data-kontrast="hoch"] .nach-oben-btn:hover{background:var(--kontrast-flaeche-hover)} html[data-kontrast="hoch"] .ablauf-schritt::before{background:var(--kontrast-flaeche);color:#fff} html[data-kontrast="hoch"] .btn-kontakt{background:var(--kontrast-flaeche);border-color:var(--kontrast-flaeche);color:#fff} html[data-kontrast="hoch"] .btn-kontakt:hover{background:var(--kontrast-flaeche-hover);border-color:var(--kontrast-flaeche-hover);color:#fff} /* Muss die transparente Vollbild-Hero-Kopfzeile ueberstimmen (dort setzt eine spezifischere Regel .btn-kontakt sonst wieder auf --akzent zurueck). Fehlte bisher der eigene Hover-Fall dazu -- ohne ihn gewann in der Hero-Ansicht die nicht-Hover-Regel oben (hoehere Spezifitaet) und der Button wurde beim Hover gar nicht dunkler. */ html[data-kontrast="hoch"] header.kopf.kopf-ueber-hero:not(.kopf-gescrollt) .btn-kontakt{ background:var(--kontrast-flaeche);border-color:var(--kontrast-flaeche);color:#fff; } html[data-kontrast="hoch"] header.kopf.kopf-ueber-hero:not(.kopf-gescrollt) .btn-kontakt:hover{ background:var(--kontrast-flaeche-hover);border-color:var(--kontrast-flaeche-hover);color:#fff; } /* Der Sprachumschalter (und jeder andere schlichte .werkzeug-btn dort) sitzt in dieser Ansicht immer auf dem dunklen Hero-Foto, unabhaengig vom Hell/Dunkel-Schema der Seite selbst -- die allgemeine Link-Textfarben-Regel oben wuerde im hellen Schema faelschlich dunkle Schrift erzwingen (fast unlesbar auf dem dunklen Foto). Hier bleibt es bei der schon immer korrekten weissen Schrift dieser Ansicht. */ /* Alle drei Kopfzeilen-Buttons sollen in dieser Ansicht identisch aussehen und reagieren (Sprache, Barrierefreiheit, Kontakt) -- daher hier dieselbe gefuellte Optik wie bei .btn-kontakt/[aria-pressed], nicht der duennere, halbtransparente Hero-Standardstil. */ html[data-kontrast="hoch"] header.kopf.kopf-ueber-hero:not(.kopf-gescrollt) .werkzeug-btn{ background:var(--kontrast-flaeche);border-color:var(--kontrast-flaeche);color:#fff; } html[data-kontrast="hoch"] header.kopf.kopf-ueber-hero:not(.kopf-gescrollt) .werkzeug-btn:hover{ background:var(--kontrast-flaeche-hover);border-color:var(--kontrast-flaeche-hover);color:#fff; } .fuss-unten{ border-top:1px solid var(--linie);padding:1.3rem max(var(--rand),1.75rem); display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center; color:var(--text-2);font-size:.85rem; } .fuss-unten ul{list-style:none;display:flex;gap:1.4rem;padding:0;margin:0} /* Gestapelt statt nebeneinander: der rechtsbuendige Link sass sonst genau in der Ecke, in der auf schmalen Bildschirmen auch der fixierte "Nach oben"-Button sitzt (siehe .nach-oben-btn) und wurde davon verdeckt. */ /* Gleicher Umschaltpunkt wie das Burger-Menue (1300px): der "Nach oben"- Button sitzt auch in diesem ganzen Bereich noch rechts unten fixiert und ueberdeckt sonst den rechtsbuendigen Link hier. */ @media (max-width:1300px){.fuss-unten{flex-direction:column;text-align:center}} .fuss-unten a{color:var(--text-2)} /* ---------- Sprache/Utility ---------- */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0; } .einblenden{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease} .einblenden.sichtbar{opacity:1;transform:none}