/* ============================================================= medworkx – Theme Aufbau: 1 Farben und Maße 6 Einstieg, Varianten A und B 2 Dunkle und helle Flächen 7 Seiten 3 Grundlagen 8 Bewegung: Einblenden, Maus-Effekte 4 Kopf, Fuß, Umschalter 9 Schmale Bildschirme, Druck 5 Bausteine Am -Element stehen data-hero (Einstieg a|b), data-thema (hell|dunkel) und data-bilder (an|aus); die Umschalter unten links wechseln sie ohne Neuladen. Alle Bausteine nehmen ihre Farben aus den Variablen in Abschnitt 1; innerhalb von .dunkel gelten die Werte aus Abschnitt 2. ============================================================= */ /* ---------- 1 Farben und Maße ---------- */ :root{ /* Palette „Klar“ aus der Logoentwicklung */ --primaer:#13294B; /* Dunkelblau: Schrift, dunkle Flächen */ --primaer-2:#1C3660; /* Fläche auf Dunkelblau */ --primaer-linie:#2E4A78; /* Linie auf Dunkelblau */ --akzent:#0FA3A3; /* Türkis: Linien, Punkte, Markierungen – nicht für kleinen Text auf Weiß */ --akzent-text:#0B6E6E; /* Türkis für Text auf Weiß (Kontrast 4,5:1) */ --akzent-ton:#CDEDEC; --akzent-ton-2:#F2FAFA; --akzent-tief:#0A4F4F; --grau:#5B6B7F; --bg:#ffffff; --bg-ton:#F5F7FA; /* ruhige Wechselfläche */ --flaeche:#ffffff; /* Karten, Kacheln */ --tinte:#13294B; --tinte-2:#3D4C61; --tinte-3:#5B6B7F; --linie:#D5DCE6; --linie-2:#E3E8EF; --dach:#0B6E6E; /* Dachzeile über Überschriften */ --verweis:#0B6E6E; --verweis-hover:#13294B; --knopf-bg:#13294B; --knopf-tinte:#ffffff; --knopf-hover-bg:#0B6E6E; --knopf-hover-tinte:#ffffff; --offen-linie:#9AA7B8; --offen-bg:#F5F7FA; /* Platzhalter */ --schrift:"Manrope","Segoe UI",system-ui,sans-serif; --schrift-titel:"Sora","Segoe UI",system-ui,sans-serif; --rand:clamp(1rem,4vw,1.5rem); --breite:75rem; --nav-h:4.75rem; --radius:.5rem; --radius-gross:.875rem; } /* ---------- 2 Dunkle und helle Flächen ---------- */ /* .dunkel an einem Abschnitt stellt alle Bausteine darin auf Dunkelblau um */ .dunkel{ --bg:#13294B; --bg-ton:#1C3660; --flaeche:#1C3660; --tinte:#ffffff; --tinte-2:#C9D3E1; --tinte-3:#C9D3E1; --linie:#2E4A78; --linie-2:#2E4A78; --dach:#C9D3E1; --verweis:#ffffff; --verweis-hover:#CDEDEC; --knopf-bg:#ffffff; --knopf-tinte:#13294B; --knopf-hover-bg:#CDEDEC; --knopf-hover-tinte:#13294B; --offen-linie:#7F93B2; --offen-bg:transparent; background:var(--bg);color:var(--tinte); } /* .hell setzt innerhalb einer dunklen Fläche wieder die hellen Werte (z. B. Formular auf Weiß) */ .hell{ --bg:#ffffff; --bg-ton:#F5F7FA; --flaeche:#ffffff; --tinte:#13294B; --tinte-2:#3D4C61; --tinte-3:#5B6B7F; --linie:#D5DCE6; --linie-2:#E3E8EF; --dach:#0B6E6E; --verweis:#0B6E6E; --verweis-hover:#13294B; --knopf-bg:#13294B; --knopf-tinte:#ffffff; --knopf-hover-bg:#0B6E6E; --knopf-hover-tinte:#ffffff; --offen-linie:#9AA7B8; --offen-bg:#F5F7FA; background:var(--bg);color:var(--tinte); } /* Dunkle Ansicht der ganzen Seite (data-thema="dunkel", Umschalter unten links oder app::THEMA_DEFAULT). Die Seitenfläche ist dunkler als die .dunkel-Abschnitte, damit sich diese weiter abheben. */ html[data-thema="dunkel"]{ color-scheme:dark; --bg:#0B1830; --bg-ton:#0F2140; --flaeche:#14284A; --tinte:#ffffff; --tinte-2:#C9D3E1; --tinte-3:#A9B7CC; --linie:#2E4A78; --linie-2:#213A63; --dach:#7FD6D6; --verweis:#7FD6D6; --verweis-hover:#ffffff; --knopf-bg:#ffffff; --knopf-tinte:#13294B; --knopf-hover-bg:#CDEDEC; --knopf-hover-tinte:#13294B; --offen-linie:#7F93B2; --offen-bg:transparent; --akzent-text:#7FD6D6; /* Türkis für Text und Symbole auf dunklem Grund */ --akzent-ton:#1C4A5A; --akzent-ton-2:#0E2A3B; --akzent-tief:#CDEDEC; } /* helle Insel (.hell) wird in der dunklen Ansicht zur dunklen Tafel */ html[data-thema="dunkel"] .hell{ --bg:#0F2140; --bg-ton:#14284A; --flaeche:#14284A; --tinte:#ffffff; --tinte-2:#C9D3E1; --tinte-3:#A9B7CC; --linie:#2E4A78; --linie-2:#2E4A78; --dach:#7FD6D6; --verweis:#7FD6D6; --verweis-hover:#ffffff; --knopf-bg:#ffffff; --knopf-tinte:#13294B; --knopf-hover-bg:#CDEDEC; --knopf-hover-tinte:#13294B; --offen-linie:#7F93B2; --offen-bg:transparent; } html[data-thema="dunkel"] .abschnitt--ton, html[data-thema="dunkel"] .kontaktkarte .platzhalter{--offen-bg:transparent} html[data-thema="dunkel"] .feld input, html[data-thema="dunkel"] .feld select, html[data-thema="dunkel"] .feld textarea{background:#0B1830;border-color:#7F93B2} html[data-thema="dunkel"] .meldung--fehler{border-color:#F2B8B5;color:#F2B8B5} /* Logo im Kopf: je Ansicht die passende Fassung */ .nur-dunkel{display:none} html[data-thema="dunkel"] .nur-hell{display:none} html[data-thema="dunkel"] .nur-dunkel{display:block} /* ---------- 3 Grundlagen ---------- */ html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--tinte);font-family:var(--schrift);font-weight:400;font-size:1.0625rem;line-height:1.55;overflow-wrap:break-word} h1,h2,h3{font-family:var(--schrift-titel);font-weight:700;line-height:1.15;margin:0;color:var(--tinte);letter-spacing:-.01em} /* Lange Komposita („Herstellerübergreifend“, „Verbraucherstreitbeilegung“): Trennung nur für Wörter ab zwölf Zeichen; overflow-wrap am body greift, wo der Browser kein Trennwörterbuch hat. */ h2,h3{hyphens:auto;hyphenate-limit-chars:12 5 5} @media (max-width:640px){p,li,summary{hyphens:auto;hyphenate-limit-chars:12 5 5}} p{margin:0 0 1em} a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px} a:hover{color:var(--verweis-hover)} main p a,main li a{color:var(--verweis)} main p a:hover,main li a:hover{color:var(--verweis-hover)} img{max-width:100%;height:auto;display:block} address{font-style:normal;margin:0} figure{margin:0} :focus-visible{outline:2px solid var(--akzent);outline-offset:3px} section[id]{scroll-margin-top:var(--nav-h)} .skip-link{position:absolute;left:1rem;top:1rem;z-index:200;background:var(--knopf-bg);color:var(--knopf-tinte);padding:.5rem 1rem} .rahmen{width:100%;max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand)} .rahmen--text{max-width:54rem} .abschnitt{padding-block:clamp(3.5rem,7vw,5.5rem)} .abschnitt--ton{background:var(--bg-ton);border-block:1px solid var(--linie-2);--offen-bg:#ffffff} .abschnitt--kopf{padding-bottom:clamp(1.5rem,3vw,2.5rem)} .abschnitt--kopf .abschnitt__kopf{margin-bottom:0} .abschnitt--kopf .titel{font-size:clamp(2.1rem,1.4rem + 2.6vw,3rem)} .abschnitt--anschluss{padding-top:0} .abschnitt--schmal{max-width:46rem;margin-inline:auto;padding-inline:var(--rand)} .abschnitt__kopf{display:flex;flex-direction:column;gap:.75rem;max-width:45rem;margin-bottom:clamp(2rem,4vw,3rem)} .abschnitt__kopf > *{margin:0} .titel{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.25rem);text-wrap:balance} .vorspann{font-size:1.0625rem;color:var(--tinte-2);max-width:42rem;margin:0} .dachzeile{font-family:var(--schrift);font-size:.875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dach);margin:0 0 1rem} .abschnitt__kopf .dachzeile{margin:0} .hinweis{font-size:.875rem;line-height:1.5;color:var(--tinte-2);margin:0} .notiz{color:var(--tinte-2);max-width:44em;margin:2rem 0 0} .bildhinweis{font-size:.8125rem;color:var(--tinte-3);margin-top:.875rem} /* Wortmarke im Text – wortmarke(), wortmarke_html(): „medworkx“ wie im Logo, Größe und Farbe folgen dem Umfeld. Die Buchstaben nehmen die Textfarbe an, das x bleibt Türkis; .mw--mono setzt auch das x in Textfarbe. */ .mw{font-family:"medworkx Wortmarke",var(--schrift-titel);font-weight:400;font-style:normal;font-synthesis:none; letter-spacing:0;text-transform:none;white-space:nowrap;hyphens:none} .mw--mono{font-family:"medworkx Wortmarke Mono",var(--schrift-titel)} /* in gesperrten Versal-Etiketten etwas größer, damit die Wortmarke neben den Versalien nicht zu klein wirkt */ .dachzeile .mw,.rolle__dach .mw{font-size:1.3em;line-height:1} .knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:3.25rem;padding:0 1.75rem;border:1.5px solid var(--tinte);color:var(--tinte); text-decoration:none;font-family:inherit;font-weight:700;font-size:1rem;line-height:1.2;background:transparent;border-radius:var(--radius);cursor:pointer} .knopf:hover{background:var(--tinte);color:var(--bg)} .knopf--voll{background:var(--knopf-bg);border-color:var(--knopf-bg);color:var(--knopf-tinte)} .knopf--voll:hover{background:var(--knopf-hover-bg);border-color:var(--knopf-hover-bg);color:var(--knopf-hover-tinte)} .knopf--klein{min-height:2.75rem;padding:0 1.25rem;font-size:.9375rem} .aktionen{display:flex;flex-wrap:wrap;gap:.75rem;margin:0} .zweispalt{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:start} .zweispalt--gleich{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .zweispalt--schmal-breit{grid-template-columns:minmax(0,4fr) minmax(0,8fr)} .zweispalt--mitte{align-items:center} .tafel{border-radius:1rem;padding:clamp(1.25rem,3vw,2rem)} /* ---------- 4 Kopf, Fuß, Umschalter ---------- */ .site-nav{position:sticky;top:0;z-index:100;background:var(--bg);border-bottom:1px solid var(--linie-2);transition:box-shadow .3s ease} .site-nav.is-fest{box-shadow:0 6px 18px -12px rgba(19,41,75,.35)} .site-nav__inner{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-inline:var(--rand);max-width:var(--breite);margin-inline:auto} .marke{display:flex;align-items:center;min-height:2.75rem;text-decoration:none;line-height:0} .marke .logo{height:2.25rem;width:auto} /* mit Zusatz „DIGITAL“ höher, damit die kleine Zeile lesbar bleibt */ .marke .logo--zusatz{height:2.875rem} .mainmenu ul{list-style:none;display:flex;align-items:center;gap:clamp(1rem,2.2vw,1.75rem);margin:0;padding:0} .mainmenu a{text-decoration:none;color:var(--tinte);font-size:.9375rem;font-weight:600;padding:.75rem 0;white-space:nowrap} .mainmenu a:not(.knopf){background:linear-gradient(var(--akzent),var(--akzent)) no-repeat 0 calc(100% - .45rem)/0 2px;transition:background-size .25s ease,color .2s ease} .mainmenu a:not(.knopf):hover{color:var(--akzent-text)} .mainmenu a:not(.knopf)[aria-current="page"]{background-size:100% 2px} .mainmenu a.knopf{padding:0 1.25rem;color:var(--knopf-tinte)} .mainmenu a.knopf:hover{color:var(--knopf-hover-tinte)} .nav-toggle{display:none;background:none;border:0;width:2.75rem;height:2.75rem;padding:0;position:relative;color:var(--tinte);cursor:pointer} .nav-toggle span{position:absolute;left:.55rem;right:.55rem;height:2px;background:currentColor;transition:transform .25s ease,top .25s ease} .nav-toggle span:nth-child(1){top:1.05rem}.nav-toggle span:nth-child(2){top:1.65rem} .nav-toggle[aria-expanded="true"] span:nth-child(1){top:1.35rem;transform:rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){top:1.35rem;transform:rotate(-45deg)} .site-footer{padding-block:clamp(3rem,6vw,4.5rem) 5.5rem;border-top:1px solid var(--linie);font-size:.9375rem} .site-footer a{color:inherit;text-decoration:none;border-bottom:1px solid transparent} .site-footer a:hover{color:inherit;border-bottom-color:currentColor} .site-footer__kopf{display:flex;gap:1.5rem 3rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3rem)} .site-footer__marke .logo{height:2.125rem;width:auto} .site-footer__marke .logo--zusatz{height:2.875rem} .site-footer__satz{font-family:var(--schrift-titel);font-size:1.125rem;font-weight:300;line-height:1.3;margin:0;color:var(--tinte-2)} .site-footer__spalten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;border-top:1px solid var(--linie);padding-top:2rem} .site-footer h2{font-family:var(--schrift);font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tinte-2);margin-bottom:.8em;line-height:1.3} .site-footer ul{list-style:none;margin:0;padding:0} .site-footer li{margin-bottom:.35em} .site-footer__fuss{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-top:2.5rem;font-size:.875rem;color:var(--tinte-2)} .site-footer__fuss p{margin:0} .site-footer__fuss nav{display:flex;gap:1.5rem} /* Umschalter für die Abstimmung: Einstieg A/B, Bilder, helle/dunkle Ansicht – bleibt in beiden Ansichten hell */ .schalter{position:fixed;left:1rem;bottom:1rem;z-index:150;display:flex;align-items:center;gap:.15rem;padding:.3rem;background:#fff;color:#13294B; border:1px solid rgba(19,41,75,.25);border-radius:var(--radius);box-shadow:0 6px 24px rgba(19,41,75,.22);font-size:1rem;line-height:1} .schalter__knopf{width:2.75rem;height:2.75rem;border:0;border-radius:.3rem;background:transparent;color:inherit;font-family:var(--schrift-titel);font-weight:600;font-size:1rem;padding:0;cursor:pointer;display:grid;place-items:center; transition:background-color .2s ease,color .2s ease} .schalter__knopf .bi{font-size:1.15rem} .schalter__knopf:hover{background:#E3E8EF} .schalter__knopf[aria-pressed="true"]{background:#13294B;color:#fff} .schalter__trenner{width:1px;height:1.75rem;background:#D5DCE6;margin-inline:.3rem} /* ---------- 5 Bausteine ---------- */ /* Platzhalter für Inhalte, die noch geliefert werden – platzhalter() */ .platzhalter{border:1.5px dashed var(--offen-linie);background:var(--offen-bg);border-radius:var(--radius);padding:.7rem .9rem;font-size:.875rem;line-height:1.45;color:var(--tinte-2)} .platzhalter__marke{display:inline-block;font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:1px solid currentColor;border-radius:.25rem;padding:.05rem .4rem;margin-right:.35rem;vertical-align:.08em} .platzhalter--block{padding:1.15rem 1.5rem;font-size:.9375rem;border-radius:.75rem;margin-top:1.5rem} .platzhalter--oben{margin-top:0;margin-bottom:clamp(2rem,4vw,3rem)} .platzhalter--bild{min-height:11rem;display:flex;align-items:center;justify-content:center;gap:.25rem;flex-wrap:wrap;text-align:center;border-radius:.75rem;margin-top:1rem;font-size:.9375rem;padding:1.5rem} .schritte + .platzhalter--block{margin-top:clamp(2rem,4vw,3rem)} /* Stichpunkte – punkte() */ .punkte{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;margin:0;padding:0;font-size:.9375rem;font-weight:600;color:var(--tinte-2)} .punkte li{display:flex;align-items:center;gap:.5rem} .punkte li::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--akzent);flex-shrink:0} /* Karten – karte(), karten() */ .karten{display:grid;gap:1.5rem} .karten--1{grid-template-columns:minmax(0,1fr);gap:1rem} .karten--2{grid-template-columns:repeat(2,minmax(0,1fr))} .karten--3{grid-template-columns:repeat(3,minmax(0,1fr))} .karten--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem} .karten--5{grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem} .karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-gross);padding:2rem;display:flex;flex-direction:column;gap:.875rem} .karte p{margin:0;font-size:1rem;color:var(--tinte-2)} .karte__icon{font-size:2.1rem;line-height:1;color:var(--tinte)} .karte__titel{font-weight:600;font-size:1.3125rem;line-height:1.25} .karte--kompakt{padding:1.5rem;gap:.7rem} .karte--kompakt .karte__titel{font-size:1.125rem} .karte--kompakt .platzhalter{margin-top:auto} .karte--offen{border:1.5px dashed var(--offen-linie);background:var(--offen-bg)} .karte__offen{font-size:.9375rem;color:var(--tinte-2)} /* Verweiskarte – verweise(): die ganze Karte ist ein Link */ .karte--verweis{text-decoration:none;color:var(--tinte)} .karte--verweis:hover{color:var(--tinte)} .karte__mehr{margin-top:auto;padding-top:.5rem;display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:.9375rem;color:var(--verweis)} .karte__mehr .bi{transition:transform .25s ease} /* Schritte – schritte() */ .schritte{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin:0;padding:0} .schritt{border-top:3px solid var(--akzent);padding-top:1.5rem;display:flex;flex-direction:column;gap:.875rem} .schritt__nr{font-family:var(--schrift-titel);font-weight:700;font-size:2.75rem;line-height:1;color:var(--tinte)} .schritt__titel{font-weight:600;font-size:1.3125rem;line-height:1.25} .schritt p{margin:0;font-size:1rem;color:var(--tinte-2)} /* Merkmale – merkmale() */ .merkmale{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.5rem} .merkmal{position:relative;padding-left:1.75rem} .merkmal::before{content:"";position:absolute;left:0;top:.42rem;width:.8rem;height:.8rem;box-sizing:border-box;border-radius:50%;border:2.5px solid var(--akzent)} .merkmal__titel{font-weight:600;font-size:1.1875rem;line-height:1.3;margin-bottom:.25rem} .merkmal p{margin:0;font-size:1rem;color:var(--tinte-2)} .merkmal .platzhalter{margin-top:.6rem} /* Kacheln – kacheln() */ .kacheln{list-style:none;margin:0;padding:0;display:grid;gap:.75rem} .kacheln--2{grid-template-columns:repeat(2,minmax(0,1fr))} .kacheln--3{grid-template-columns:repeat(3,minmax(0,1fr))} .kacheln--4{grid-template-columns:repeat(4,minmax(0,1fr))} .kachel{background:var(--flaeche);border:1px solid var(--linie);border-radius:.75rem;padding:1.35rem 1.25rem;display:flex;flex-direction:column;gap:.25rem;min-width:0;hyphens:auto;overflow-wrap:anywhere} .kachel__titel{font-family:var(--schrift-titel);font-weight:600;font-size:1.125rem;line-height:1.3} .kachel__text{font-size:.875rem;color:var(--tinte-2)} .kachel--offen{background:var(--offen-bg);border:1.5px dashed var(--offen-linie);justify-content:center} /* Vergleich – vergleich() */ .vergleich{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem} .vergleich__spalte{border:1px solid var(--linie);border-radius:var(--radius-gross);padding:2rem;background:var(--flaeche)} .vergleich__spalte--ohne{background:var(--bg-ton)} .vergleich__spalte--mit{border:2px solid var(--akzent);box-shadow:0 20px 40px -28px rgba(19,41,75,.35)} .vergleich__titel{font-weight:600;font-size:1.3125rem;line-height:1.25;margin-bottom:1.25rem} .vergleich ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem} .vergleich li{display:grid;grid-template-columns:1.5rem minmax(0,1fr);gap:.75rem;align-items:start;font-size:1rem;color:var(--tinte-2)} .vergleich li .bi{font-size:1.15rem;line-height:1.45;color:var(--tinte-3)} .vergleich__spalte--mit li{color:var(--tinte)} .vergleich__spalte--mit li .bi{color:var(--akzent-text)} /* Leitsatz – leitsatz() */ .leitsatz{background:var(--akzent-ton-2);border-block:1px solid var(--akzent-ton);padding-block:clamp(2.5rem,5vw,4rem);text-align:center} .leitsatz.dunkel{background:var(--bg);border-color:var(--linie)} .leitsatz__satz{font-family:var(--schrift-titel);font-weight:700;font-size:clamp(1.3rem,.85rem + 2.2vw,2.5rem);line-height:1.15;letter-spacing:-.015em;color:var(--tinte);margin:0;text-wrap:balance; /* lange Komposita (z. B. „Herstellerdatenbanken") dürfen auf schmalen Anzeigen getrennt werden */ hyphens:auto;overflow-wrap:break-word} .leitsatz__zusatz{font-size:1.0625rem;color:var(--tinte-2);margin:.9rem auto 0;max-width:40rem} .leitsatz__icon{display:block;font-size:clamp(1.75rem,1.3rem + 1.6vw,2.5rem);line-height:1;color:var(--akzent-text);margin-bottom:.9rem} /* Häufige Fragen – fragen() */ .fragen{border-top:1px solid var(--linie)} .frage{border-bottom:1px solid var(--linie)} .frage summary{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:3.5rem;padding:1rem 0;cursor:pointer;list-style:none;font-family:var(--schrift-titel);font-weight:600;font-size:1.125rem;line-height:1.3;color:var(--tinte)} .frage summary::-webkit-details-marker{display:none} .frage summary .bi{flex-shrink:0;font-size:1.1rem;color:var(--akzent-text);transition:transform .2s ease} .frage[open] summary .bi{transform:rotate(45deg)} .frage__antwort{padding:0 0 1.35rem;max-width:44rem} .frage__antwort p{margin:0;font-size:1rem;color:var(--tinte-2)} .frage__antwort .platzhalter{margin-top:.75rem} .frage__antwort > .platzhalter:first-child{margin-top:0} /* Verzeichnis – verzeichnis() */ .verzeichnis{display:flex;flex-direction:column;gap:clamp(2.5rem,5vw,3.5rem)} .verzeichnis__gruppe{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:1.5rem clamp(2rem,4vw,3.5rem);align-items:start;border-top:3px solid var(--akzent);padding-top:1.5rem} .verzeichnis__titel{font-weight:600;font-size:1.3125rem;line-height:1.25;margin-bottom:.5rem} .verzeichnis__kopf p{margin:0;font-size:1rem;color:var(--tinte-2)} .verzeichnis__liste{list-style:none;margin:0;padding:0} .verzeichnis__eintrag{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:.15rem 1.5rem;padding:.9rem 0;border-bottom:1px solid var(--linie-2)} .verzeichnis__eintrag:first-child{padding-top:0} .verzeichnis__name{font-family:var(--schrift-titel);font-weight:600;font-size:1.0625rem;line-height:1.35} .verzeichnis__name a{color:var(--tinte);text-decoration:none;border-bottom:1px solid var(--akzent)} .verzeichnis__name a:hover{color:var(--akzent-text)} .verzeichnis__text{font-size:1rem;color:var(--tinte-2)} .verzeichnis__firma{grid-column:2;font-size:.8125rem;color:var(--tinte-3)} /* mit Logo: Bildfeld links, Name, Text und Firma rechts untereinander */ .verzeichnis__eintrag--logo{grid-template-columns:9rem minmax(0,1fr);gap:.2rem 1.5rem;padding:1.1rem 0} .verzeichnis__logo{grid-row:1 / span 3;align-self:start;display:flex;align-items:center;justify-content:center;height:4.25rem;padding:.6rem .85rem; background:#fff;border:1px solid var(--linie-2);border-radius:.625rem;transition:border-color .25s ease,box-shadow .25s ease} .verzeichnis__logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain} .verzeichnis__eintrag--logo > :not(.verzeichnis__logo){grid-column:2} /* Abschluss einer Seite – abschluss() */ .abschluss{padding-block:clamp(2.75rem,5vw,4rem)} .abschluss__innen{display:flex;align-items:center;justify-content:space-between;gap:1.5rem 3rem;flex-wrap:wrap} .abschluss__text{max-width:38rem} .abschluss__titel{font-size:clamp(1.5rem,1.2rem + 1.1vw,1.9rem);text-wrap:balance} .abschluss__text p{margin:.6rem 0 0;color:var(--tinte-2)} /* Bild – bild(): sichtbar nur bei data-bilder="an" am -Element */ .bild{display:none;margin:0} html[data-bilder="an"] .bild{display:block} .bild img{width:100%;height:auto;border-radius:var(--radius-gross);border:1px solid var(--linie-2)} .bild--hoch img{width:auto;max-width:100%;max-height:44rem;margin-inline:auto} .bild--abstand{margin-top:1.5rem} .bild .platzhalter{margin-top:.75rem} /* Gegenstück: sichtbar nur, solange die Bilder ausgeblendet sind (z. B. Platzhalter für ein Foto) */ html[data-bilder="an"] .statt-bild{display:none} /* Erklärung – erklaerung(): Text, daneben wahlweise ein Bild */ .erklaerung__text{max-width:46rem} .erklaerung__text > p{color:var(--tinte-2);max-width:42rem} .erklaerung__text .abschnitt__kopf{margin-bottom:1.5rem} .erklaerung__text .punkte{margin:.5rem 0 1.5rem} .erklaerung__text .merkmale{margin-top:.5rem} .erklaerung__text .platzhalter{margin-top:1.5rem} .erklaerung__quelle{margin-top:1.25rem} html[data-bilder="an"] .erklaerung--bild{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center} html[data-bilder="an"] .erklaerung--bild-links .bild{order:-1} /* Grafik – grafik(): SVG aus images/grafik/, je Thema und Breite die passende Fassung */ .grafik{margin:0} .grafik img{width:100%;height:auto} /* die Sichtbarkeit der Fassungen regeln .nur-hell und .nur-dunkel */ .grafik .bildhinweis{text-align:center} /* in dunkelblauen Abschnitten gilt die dunkle Fassung auch in der hellen Ansicht */ .dunkel .nur-hell{display:none} .dunkel .nur-dunkel{display:block} .abstand{margin-top:clamp(2rem,4vw,3rem)} /* ---- Schaubilder als HTML – knoten(), fluss(), verzweigung(), zeitleiste(), systembild() ---- Texte sind echter Text; Pfeile und Linien kommen aus CSS und kleinen SVG. Farben folgen dem Thema. */ .schaubild{margin:0; --pfeil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 12'%3E%3Cpath d='M1.5 6h19' fill='none' stroke='%230FA3A3' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M27 6l-9-5v10z' fill='%230FA3A3'/%3E%3C/svg%3E"); --pfeil-unten:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 28'%3E%3Cpath d='M6 1.5v19' fill='none' stroke='%230FA3A3' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M6 27l-5-9h10z' fill='%230FA3A3'/%3E%3C/svg%3E"); --pfeil-oben:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 28'%3E%3Cpath d='M6 26.5v-19' fill='none' stroke='%230FA3A3' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M6 1l-5 9h10z' fill='%230FA3A3'/%3E%3C/svg%3E"); --spitze:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M10 6L0 0v12z' fill='%230FA3A3'/%3E%3C/svg%3E"); --spitze-links:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M0 6l10-6v12z' fill='%230FA3A3'/%3E%3C/svg%3E")} .schaubild .bildhinweis{text-align:center} .schaubild > .platzhalter{margin-top:1rem} /* Knoten: die Karte eines Schaubilds */ .knoten{position:relative;min-width:0;margin:0;background:var(--flaeche);border:1.5px solid var(--linie);border-radius:var(--radius-gross);padding:1.25rem 1.25rem 1.1rem;display:flex;flex-direction:column;gap:.45rem} .knoten > *{margin:0} .knoten.is-betont{border-color:var(--akzent);box-shadow:inset 0 0 0 1px var(--akzent)} .knoten.is-gedaempft{background:transparent} .knoten__kopf{display:flex;align-items:center;gap:.75rem;margin-bottom:.4rem} .knoten__kopf .bi{font-size:1.6rem;line-height:1;color:var(--tinte-3);margin-left:auto} .knoten__kopf .bi:first-child{margin-left:0} .knoten.is-betont .knoten__kopf .bi{color:var(--akzent-text)} .knoten__nr{width:1.9rem;height:1.9rem;border-radius:50%;background:var(--akzent);color:#fff;font-family:var(--schrift-titel);font-weight:700;font-size:.95rem;display:grid;place-items:center;flex-shrink:0} .knoten__dach{font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;line-height:1.35;color:var(--tinte-3)} .knoten.is-betont .knoten__dach{color:var(--akzent-text)} .knoten__titel{font-weight:600;font-size:1.0625rem;line-height:1.25} .knoten.is-gedaempft .knoten__titel{color:var(--tinte-2)} .knoten__text{font-size:.875rem;line-height:1.5;color:var(--tinte-2)} .knoten__technik{margin-top:auto;padding-top:.7rem;border-top:1px solid var(--linie);font-size:.75rem;font-weight:600;color:var(--tinte-3)} .knoten__schluss{margin-top:auto;padding-top:.8rem;border-top:1px solid var(--linie);font-size:.9375rem;font-weight:600;color:var(--tinte)} .knoten.is-gedaempft .knoten__schluss{color:var(--tinte-2)} .knoten__zeilen{margin-top:.35rem} .knoten__zeilen dt{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-3)} .knoten__zeilen dd{margin:0 0 .6rem;font-size:.9375rem;line-height:1.4;color:var(--tinte-2)} .knoten__zeilen dd:last-child{margin-bottom:0} .knoten.is-betont .knoten__zeilen dd{color:var(--tinte);font-weight:600} .knoten__liste{list-style:none;padding:0;margin:.35rem 0 .6rem;display:flex;flex-direction:column;gap:.5rem;font-size:.9375rem;line-height:1.4} .knoten__liste li{display:grid;grid-template-columns:1.2rem minmax(0,1fr);gap:.6rem;align-items:baseline;color:var(--tinte-2)} .knoten__liste strong{font-weight:700;color:var(--tinte)} .knoten__liste .ist-ja .bi{color:var(--akzent-text)} .knoten__liste .ist-nein,.knoten__liste .ist-nein strong{color:var(--tinte-3);font-weight:500} .knoten__marken{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.35rem} .knoten__marken span{font-size:.75rem;font-weight:700;padding:.2rem .65rem;border-radius:999px;background:var(--akzent-ton-2);border:1px solid var(--akzent-ton);color:var(--tinte)} /* Knoten als Zeile: Symbol links, Titel und Text rechts */ .knoten--zeile{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1rem;row-gap:.1rem;align-items:center;padding:1rem 1.25rem} .knoten--zeile .knoten__kopf{grid-row:1 / span 2;margin:0} .knoten--zeile .knoten__kopf .bi{font-size:1.9rem} .knoten--zeile.is-betont .knoten__text{color:var(--akzent-text);font-weight:600} /* Fluss: Knoten in einer Reihe, Pfeile dazwischen */ .fluss{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:2.5rem} .fluss > .knoten:not(:last-child)::after{content:"";position:absolute;left:calc(100% + .42rem);top:50%;width:1.7rem;height:.75rem;transform:translateY(-50%);background:var(--pfeil) center/contain no-repeat} /* Fluss mit beschrifteten Pfeilen (Knoten mit 'weg'): breiterer Abstand, der Text steht über dem Pfeil */ .fluss--wege{gap:7rem} .fluss--wege > .knoten:not(:last-child)::after{left:calc(100% + 2.65rem)} .fluss__weg{position:absolute;left:100%;top:50%;width:7rem;padding:0 .3rem;overflow-wrap:normal;word-break:normal;hyphens:manual;transform:translateY(calc(-100% - .6rem));text-align:center;font-size:.6875rem;font-weight:700;letter-spacing:.04em;line-height:1.25;color:var(--akzent-text);text-wrap:balance} .fluss__faden{margin:1.5rem 0 0;padding:1.1rem 1.5rem;border-radius:var(--radius-gross);background:var(--akzent-ton-2);border:1px solid var(--akzent-ton);text-align:center;font-size:.9375rem;color:var(--tinte-2)} .fluss__faden strong{color:var(--tinte);margin-right:.35rem} /* Verzweigung: ein Auftrag, ein Verteiler, mehrere Ziele */ .verzweigung{display:grid;grid-template-columns:minmax(0,1fr) 2.5rem minmax(0,1fr) 4rem minmax(0,1.1fr);align-items:center} .verzweigung__pfeil{height:.75rem;background:var(--pfeil) center/1.7rem no-repeat} .verzweigung__linien{align-self:stretch;width:100%;height:100%;min-height:8rem;overflow:visible} .verzweigung__linien path{fill:none;stroke:var(--linie);stroke-width:2;vector-effect:non-scaling-stroke} .verzweigung__linien path.is-aktiv{stroke:var(--akzent);stroke-width:2.6} .verzweigung__ziele{list-style:none;margin:0;padding:0;display:grid;gap:1rem} /* umgekehrte Richtung: mehrere Quellen links, Verteiler in der Mitte, ein Ziel rechts */ .verzweigung--ein{grid-template-columns:minmax(0,1.1fr) 4rem minmax(0,1fr) 2.5rem minmax(0,1fr)} .verzweigung--ein > .verzweigung__ziele{order:1} .verzweigung--ein > .verzweigung__linien{order:2;transform:scaleX(-1)} .verzweigung--ein > .knoten:nth-of-type(2){order:3} .verzweigung--ein > .verzweigung__pfeil{order:4} .verzweigung--ein > .knoten:nth-of-type(1){order:5} /* Zeitleiste */ .zeitleiste{list-style:none;margin:0;padding:0 3.25rem;display:grid;grid-template-columns:repeat(var(--n,8),minmax(0,1fr))} .zeitleiste li{position:relative;display:grid;grid-template-rows:1fr auto 1fr;justify-items:center;min-height:15.5rem} .zeitleiste li::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;background:var(--linie)} .zeitleiste li:first-child::before{left:50%} .zeitleiste li:last-child::before{right:50%} .zeitleiste li.ist-geplant::before{background:repeating-linear-gradient(90deg,var(--linie) 0 6px,transparent 6px 12px)} .zeitleiste__punkt{grid-row:2;position:relative;width:1rem;height:1rem;border-radius:50%;background:var(--akzent)} .zeitleiste .ist-geplant .zeitleiste__punkt{background:var(--bg);border:2.5px dashed var(--akzent)} .zeitleiste__inhalt{grid-row:1;align-self:end;width:11.25rem;padding-bottom:1rem;display:flex;flex-direction:column;gap:.2rem;text-align:center} .zeitleiste li:nth-child(even) .zeitleiste__inhalt{grid-row:3;align-self:start;padding:1rem 0 0} .zeitleiste__jahr{font-family:var(--schrift-titel);font-weight:700;font-size:1.1875rem;line-height:1.2;white-space:nowrap;color:var(--tinte)} .zeitleiste .ist-geplant .zeitleiste__jahr{color:var(--akzent-text)} .zeitleiste__text{font-size:.8125rem;line-height:1.4;color:var(--tinte-2)} /* Systembild: Mitte, Nachbarn links und rechts, Nutzer darunter, beschriftete Wege */ .systembild__reihe{display:grid;grid-template-columns:minmax(0,1fr) minmax(9rem,.72fr) minmax(0,1.2fr) minmax(9rem,.72fr) minmax(0,1fr);align-items:center} .systembild__mitte{flex-direction:row;align-items:center;gap:1.1rem;padding:1.5rem} .systembild__mitte > div{display:flex;flex-direction:column;gap:.4rem;min-width:0} .systembild__mitte > div > *{margin:0} .systembild__mitte .logo{width:3.5rem;height:3.5rem;flex-shrink:0;border-radius:50%;background:#fff} .systembild__mitte .knoten__titel{font-size:1.25rem} .systembild__stapel{display:grid;gap:1rem} .weg{display:flex;flex-direction:column;justify-content:center;gap:1.4rem;margin:0;padding-inline:.7rem} .weg__zeile{display:block;padding-bottom:1rem;font-size:.75rem;font-weight:700;line-height:1.3;text-align:center;color:var(--tinte-2); background:var(--spitze) right bottom/.65rem .75rem no-repeat,linear-gradient(var(--akzent),var(--akzent)) left bottom .28rem/calc(100% - .5rem) 2.4px no-repeat} .weg__zeile--links{background:var(--spitze-links) left bottom/.65rem .75rem no-repeat,linear-gradient(var(--akzent),var(--akzent)) right bottom .28rem/calc(100% - .5rem) 2.4px no-repeat} .weg--unten{align-items:center;padding:1.1rem 0 .9rem} .weg__zeile--unten{padding-bottom:2.1rem;background:var(--pfeil-unten) center bottom/.75rem 1.75rem no-repeat} .systembild__unten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem} /* Quellen – quellen(): Verweise auf externe Quellen unter einem Abschnitt */ .quellen{margin-top:clamp(2rem,4vw,2.75rem);padding-top:1.1rem;border-top:1px solid var(--linie);font-size:.875rem;line-height:1.5} .quellen__titel{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tinte-3);margin:0 0 .5rem} .quellen ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem 1.75rem} .quellen a{color:var(--verweis);text-decoration:none;border-bottom:1px solid transparent} .quellen a:hover{color:var(--verweis-hover);border-bottom-color:currentColor} .quellen .bi{font-size:.7em;margin-left:.35em;vertical-align:.1em} /* Merkmalliste zweispaltig (z. B. Dienste des Standards) */ .merkmale--raster .merkmale{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem clamp(2rem,4vw,3.5rem)} /* Fragen am Ende einer Inhaltsseite – fragen_abschnitt() */ .fragen-abschnitt .abschnitt__kopf{margin-bottom:0} .fragen-abschnitt .notiz{margin-top:1.25rem} /* Zwischentitel innerhalb eines Abschnitts */ .zwischentitel{font-weight:600;font-size:1.3125rem;line-height:1.25;margin:clamp(2.5rem,5vw,3.5rem) 0 1.5rem} .aktionen--unten{margin-top:clamp(2rem,4vw,3rem)} .hinweis--abstand{margin-top:2.5rem;max-width:48rem} /* Schematische Worklist – worklist_demo(); steht immer auf Weiß */ .worklist__fenster{--akzent-ton:#CDEDEC;--akzent-ton-2:#F2FAFA;--akzent-tief:#0A4F4F;background:#fff;color:#13294B;border:1px solid #D5DCE6;border-radius:1rem;box-shadow:0 24px 48px -24px rgba(19,41,75,.28);overflow:hidden} .worklist__kopf{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.5rem;background:#13294B;color:#fff} .worklist__marke{display:flex;align-items:center;gap:.75rem;font-family:var(--schrift-titel);font-weight:600;font-size:1rem} .worklist__marke .logo{width:1.875rem;height:1.875rem;border-radius:50%;background:#fff} .worklist__zahl{font-size:.875rem;color:#C9D3E1} .worklist__liste,.worklist__geraete{list-style:none;margin:0;padding:0} .worklist__zeile{display:flex;align-items:center;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;padding:1.1rem 1.5rem;border-bottom:1px solid #E3E8EF} .worklist__auftrag{display:flex;flex-direction:column;gap:.1rem;min-width:0} .worklist__auftrag strong{font-family:var(--schrift-titel);font-weight:600;font-size:1.0625rem} .worklist__auftrag span{font-size:.875rem;color:#5B6B7F} .worklist__status{font-size:.8125rem;font-weight:700;padding:.35rem .75rem;border-radius:999px;white-space:nowrap} .worklist__zeile.is-offen .worklist__status{border:1.5px solid #5B6B7F;color:#3D4C61} .worklist__zeile.is-aktiv{background:var(--akzent-ton-2)} .worklist__zeile.is-aktiv .worklist__status{background:var(--akzent-ton);color:var(--akzent-tief)} .worklist__zeile.is-fertig .worklist__status{background:#E3E8EF;color:#13294B} .worklist__geraete{display:flex;flex-wrap:wrap;gap:.5rem;padding:1rem 1.5rem;background:#F5F7FA;font-size:.8125rem;font-weight:600;color:#3D4C61} .worklist__geraete li{padding:.35rem .75rem;border-radius:.375rem;background:#fff;border:1px solid #D5DCE6} .worklist__geraete li.is-aktiv{border:1.5px solid var(--akzent)} /* Schematische Rollen – rollen_demo() */ .rollen{display:flex;flex-direction:column;gap:.75rem} .rollen__paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem} .rolle{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-gross);padding:1.35rem 1.5rem;display:flex;align-items:center;gap:1.1rem} .rolle__dach{display:block;font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tinte-2)} .rolle__titel{display:block;font-family:var(--schrift-titel);font-weight:600;font-size:1.1875rem;line-height:1.3} .rolle--mitte{background:#fff;color:#13294B;border:3px solid var(--akzent)} .rolle--mitte .rolle__dach{color:#3D4C61} .rolle--mitte .rolle__titel{font-size:1.3125rem} .rolle--mitte .logo{width:3.5rem;height:3.5rem;flex-shrink:0} /* Formular – kontakt_formular() */ .formular{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 1.25rem;margin:0} .formular p{margin:0} .feld{display:flex;flex-direction:column;gap:.35rem} .feld--breit{grid-column:1/-1} .feld label{font-size:.875rem;font-weight:700;color:var(--tinte)} .feld small{font-weight:400;color:var(--tinte-3)} .feld input,.feld select,.feld textarea{font:inherit;font-size:1rem;color:var(--tinte);background:#fff;border:1.5px solid var(--grau);border-radius:var(--radius);padding:.7rem .875rem;width:100%;min-height:3rem} .feld textarea{resize:vertical} .formular__falle{position:absolute;left:-9999px} .meldung{border:1.5px solid var(--tinte);border-radius:.75rem;padding:1.25rem 1.5rem;margin-bottom:1.5rem} .meldung h2{font-size:1.375rem;margin-bottom:.35em} .meldung p{margin:0} .meldung--ok{border-color:var(--akzent)} .meldung--fehler{border-color:#B3261E;color:#8C1D18} /* Kontaktkarte – kontaktkarte() */ .kontaktkarte{background:var(--bg-ton);border:1px solid var(--linie-2);border-radius:var(--radius-gross);padding:clamp(1.5rem,3vw,2.25rem)} .kontaktkarte h2{font-family:var(--schrift);font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tinte-2);margin:1.6em 0 .5em} .kontaktkarte h2:first-child{margin-top:0} .kontaktkarte p{margin:0} .kontaktkarte a{color:var(--verweis)} .kontaktkarte .platzhalter{margin-top:1.5rem;--offen-bg:#ffffff} /* ---------- 6 Einstieg, Varianten A und B ---------- */ /* Beide Varianten liegen im Dokument; sichtbar ist die am -Element gewählte. */ .hero__v{display:none} :root[data-hero="a"] .hero__v--a, :root[data-hero="b"] .hero__v--b{display:block} .hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:center; padding-block:clamp(3.5rem,7vw,5.5rem) clamp(4rem,7vw,6rem)} .hero__text{display:flex;flex-direction:column;gap:1.5rem} .hero__text > *{margin:0} .hero__titel{font-size:clamp(2.25rem,1.2rem + 3vw,3.25rem);line-height:1.08;letter-spacing:-.02em;text-wrap:balance} .hero__vorspann{font-size:1.1875rem;line-height:1.55;color:var(--tinte-2);max-width:35rem} .hero__text .aktionen{margin-top:.5rem} .hero__text .punkte{margin-top:.5rem} /* ---------- 7 Seiten ---------- */ .rechtstext h2{font-size:1.375rem;font-weight:600;margin:1.8em 0 .5em} .rechtstext code{font-size:.85em;color:var(--tinte)} .rechtstext ul{padding-left:1.25rem} /* ---------- 8 Bewegung: Einblenden, Maus-Effekte ---------- */ /* Einblenden beim Scrollen (app::ANIMATION). header.php setzt die Klasse „animiert“ am -Element, site.js gibt jedem Baustein „ist-da“, sobald er sichtbar wird, und danach „fertig“. Bei der Systemeinstellung „Bewegung reduzieren“ bleibt das Ein- und Überblenden, die Verschiebung entfällt (siehe Ende dieses Abschnitts); app::ANIMATION_SYSTEM = false hebt das über die Klasse „bewegt“ auf. Die Auswahl steht zweimal: als Variable für site.js und in der Regel darunter – beide gleich halten. */ :root{--ein-dauer:950ms;--ein-stufe:120ms; /* Dauer des Einblendens, Versatz zwischen Geschwistern – site.js liest beide Werte */ --ein-auswahl:".abschnitt__kopf,.karte,.schritt,.merkmal,.kachel,.vergleich__spalte,.leitsatz__satz,.leitsatz__zusatz,.frage,.verzeichnis__gruppe,.hero__text > *,.hero__bild,.zweispalt > .rollen,.abschluss__text,.abschluss .aktionen,.platzhalter--block,.platzhalter--bild,.tafel,.kontaktkarte,.notiz,.erklaerung__text,.bild,.grafik,.quellen,.schaubild"} html.animiert :is(.abschnitt__kopf,.karte,.schritt,.merkmal,.kachel,.vergleich__spalte,.leitsatz__satz,.leitsatz__zusatz,.frage,.verzeichnis__gruppe,.hero__text > *,.hero__bild,.zweispalt > .rollen,.abschluss__text,.abschluss .aktionen,.platzhalter--block,.platzhalter--bild,.tafel,.kontaktkarte,.notiz,.erklaerung__text,.bild,.grafik,.quellen,.schaubild):not(.fertig){ opacity:0;transform:translateY(1rem); transition:opacity var(--ein-dauer) ease,transform var(--ein-dauer) cubic-bezier(.22,.61,.36,1);transition-delay:var(--verz,0s)} /* dreifache Klasse: Vorrang vor der Regel darüber, unabhängig von der Länge der Auswahl */ html.animiert .ist-da.ist-da.ist-da:not(.fertig){opacity:1;transform:none} /* Maus-Effekte: nur auf Geräten mit Zeiger */ .karte,.kachel,.vergleich__spalte,.rolle{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease} .knopf{transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease} .frage summary{transition:color .2s ease} .schritt__nr{transition:color .25s ease} .schritt{transition:border-color .25s ease} @media (hover:hover){ .schritt:hover .schritt__nr{color:var(--akzent-text)} .karte:not(.karte--offen):hover{transform:translateY(-3px);border-color:var(--akzent);box-shadow:0 16px 32px -22px rgba(19,41,75,.45)} .karte--verweis:hover .karte__mehr .bi{transform:translateX(.3rem)} .kachel:not(.kachel--offen):hover{border-color:var(--akzent)} .vergleich__spalte--mit:hover{transform:translateY(-3px)} .knopf:hover{transform:translateY(-1px)} .knopf--voll:hover{box-shadow:0 10px 20px -12px rgba(19,41,75,.55)} .knopf:active{transform:none;box-shadow:none} .frage summary:hover{color:var(--akzent-text)} .verzeichnis__eintrag:hover .verzeichnis__logo{border-color:var(--akzent);box-shadow:0 10px 20px -16px rgba(19,41,75,.4)} .marke .logo{transition:opacity .2s ease} .marke:hover .logo{opacity:.82} } /* „Bewegung reduzieren“: Farben, Rahmen, Schatten und Einblenden bleiben, Verschiebungen entfallen */ @media (prefers-reduced-motion:reduce){ html:not(.bewegt){scroll-behavior:auto} html.animiert:not(.bewegt) :is(.abschnitt__kopf,.karte,.schritt,.merkmal,.kachel,.vergleich__spalte,.leitsatz__satz,.leitsatz__zusatz,.frage,.verzeichnis__gruppe,.hero__text > *,.hero__bild,.zweispalt > .rollen,.abschluss__text,.abschluss .aktionen,.platzhalter--block,.platzhalter--bild,.tafel,.kontaktkarte,.notiz,.erklaerung__text,.bild,.grafik,.quellen,.schaubild):not(.fertig){transform:none} html:not(.bewegt) :is(.karte,.vergleich__spalte,.knopf):hover, html:not(.bewegt) .karte--verweis:hover .karte__mehr .bi{transform:none!important} } /* ---------- 9 Schmale Bildschirme, Druck ---------- */ /* Hauptnavigation: ab hier als Menü hinter der Schaltfläche */ @media (max-width:72rem){ /* lange Flüsse und die Zeitleiste laufen ab hier von oben nach unten */ .fluss--viele,.fluss--wege{grid-template-columns:minmax(0,1fr);gap:2.25rem;max-width:30rem;margin-inline:auto} .fluss--viele > .knoten:not(:last-child)::after,.fluss--wege > .knoten:not(:last-child)::after{left:50%;top:calc(100% + .38rem);transform:translateX(-50%) rotate(90deg);transform-origin:center} /* beschriftete Pfeile: der Text steht rechts neben dem Pfeil nach unten */ .fluss.fluss--wege{gap:3rem} .fluss.fluss--wege > .knoten:not(:last-child)::after{top:calc(100% + .75rem)} .fluss__weg{left:calc(50% + 1.1rem);top:calc(100% + 1.5rem);width:auto;max-width:calc(50% - 1.3rem);padding:0;transform:translateY(-50%);text-align:left} .zeitleiste{display:block;padding:0;max-width:30rem;margin-inline:auto} .zeitleiste li{grid-template-rows:auto;grid-template-columns:1rem minmax(0,1fr);column-gap:1.25rem;justify-items:start;min-height:0;padding-bottom:1.4rem} .zeitleiste li::before,.zeitleiste li:first-child::before{left:.5rem;right:auto;top:.45rem;bottom:-.45rem;width:3px;height:auto;margin:0 0 0 -1.5px} .zeitleiste li:last-child::before{display:none} .zeitleiste li.ist-geplant::before{background:var(--linie)} .zeitleiste__punkt{grid-row:1;grid-column:1;margin-top:.3rem} .zeitleiste__inhalt,.zeitleiste li:nth-child(even) .zeitleiste__inhalt{grid-row:1;grid-column:2;width:auto;padding:0;flex-direction:row;gap:1rem;align-items:baseline;text-align:left} .zeitleiste__jahr{flex:none;min-width:3.75rem} .zeitleiste__text{font-size:.9375rem} .nav-toggle{display:block} .mainmenu{position:fixed;inset:var(--nav-h) 0 0 0;background:var(--bg);display:none;place-items:center;overflow:auto;padding:2rem var(--rand)} .mainmenu.offen{display:grid} .mainmenu ul{flex-direction:column;text-align:center;gap:1.1rem} .mainmenu a{font-size:1.375rem} .mainmenu a:not(.knopf){background-position:0 calc(100% - .35rem)} .mainmenu a.knopf{font-size:1rem;min-height:3.25rem;padding:0 1.75rem;margin-top:.75rem} } @media (max-width:68rem){ .karten--5{grid-template-columns:repeat(3,minmax(0,1fr))} .karten--4{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:60rem){ /* drei Spalten werden unter 960 px zu schmal für lange Titel */ .karten--3{grid-template-columns:repeat(2,minmax(0,1fr))} .zweispalt,.hero,.verzeichnis__gruppe{grid-template-columns:minmax(0,1fr)} /* Schaubilder: alle Flüsse, die Verzweigung und das Systembild untereinander */ .fluss{grid-template-columns:minmax(0,1fr);gap:2.25rem;max-width:30rem;margin-inline:auto} .fluss > .knoten:not(:last-child)::after{left:50%;top:calc(100% + .38rem);transform:translateX(-50%) rotate(90deg);transform-origin:center} .verzweigung{grid-template-columns:minmax(0,1fr);row-gap:.4rem;max-width:30rem;margin-inline:auto} .verzweigung__pfeil{height:1.9rem;background:var(--pfeil-unten) center/.75rem 1.75rem no-repeat} .verzweigung__linien{display:none} .verzweigung__ziele{margin-top:1.9rem;position:relative} .verzweigung__ziele::before{content:"";position:absolute;left:0;right:0;top:-2.05rem;height:1.9rem;background:var(--pfeil-unten) center/.75rem 1.75rem no-repeat} .verzweigung--ein{grid-template-columns:minmax(0,1fr)} .verzweigung--ein > .verzweigung__ziele{margin:0 0 1.9rem} .verzweigung--ein > .verzweigung__ziele::before{top:auto;bottom:-2.05rem} .systembild__reihe{grid-template-columns:minmax(0,1fr);max-width:30rem;margin-inline:auto} .systembild__unten{grid-template-columns:minmax(0,1fr);max-width:30rem;margin-inline:auto} .weg{padding:.9rem 0;gap:.9rem} .weg__zeile,.weg__zeile--links{padding-bottom:2.05rem;background:var(--pfeil-unten) center bottom/.75rem 1.75rem no-repeat} .weg__zeile--links{background-image:var(--pfeil-oben)} .fluss__faden{max-width:30rem;margin-inline:auto;margin-top:1.5rem} .grafik img{max-width:26rem;margin-inline:auto} html[data-bilder="an"] .erklaerung--bild{grid-template-columns:minmax(0,1fr)} html[data-bilder="an"] .erklaerung--bild-links .bild{order:0} } @media (max-width:48rem){ .karten--3,.karten--2,.schritte,.vergleich,.merkmale--raster .merkmale{grid-template-columns:minmax(0,1fr)} .vergleich__spalte{padding:1.5rem} .karten--5{grid-template-columns:repeat(2,minmax(0,1fr))} .site-footer__spalten{grid-template-columns:minmax(0,1fr)} .karte{padding:1.5rem} } @media (max-width:38rem){ .karten--5,.karten--4,.formular,.rollen__paar,.verzeichnis__eintrag{grid-template-columns:minmax(0,1fr)} .verzeichnis__firma{grid-column:1} .verzeichnis__eintrag--logo > :not(.verzeichnis__logo){grid-column:1} .verzeichnis__logo{grid-row:auto;width:10rem;justify-self:start;margin-bottom:.5rem} .abschluss .aktionen{width:100%} .kacheln--3,.kacheln--4{grid-template-columns:repeat(2,minmax(0,1fr))} .marke .logo{height:1.9rem} .marke .logo--zusatz{height:2.4rem} .kachel{padding:1.1rem .9rem} .kachel__titel{font-size:1rem} .worklist__kopf,.worklist__zeile,.worklist__geraete{padding-inline:1.1rem} } @media print{ html.animiert *{opacity:1!important;transform:none!important} html[data-thema="dunkel"]{--bg:#fff;--bg-ton:#F5F7FA;--flaeche:#fff;--tinte:#13294B;--tinte-2:#3D4C61;--tinte-3:#5B6B7F;--linie:#D5DCE6;--linie-2:#E3E8EF;--dach:#0B6E6E;--verweis:#0B6E6E;--akzent-text:#0B6E6E} .site-nav,.schalter,.site-footer,.formular,.abschluss{display:none!important} .dunkel{background:#fff;color:#13294B;--tinte:#13294B;--tinte-2:#3D4C61;--flaeche:#fff;--linie:#D5DCE6} }