/* ================================================================== BICOS Computer GmbH – Stylesheet Neugestaltung 25.07.2026. Gestaltungsrichtung und Begründungen siehe LIESMICH.txt, Abschnitt "Neugestaltung". Grundsätze: - Markenblau und Gold bleiben unverändert; Gold trägt jetzt die Struktur (Marken-Zeile, Kartenkante, Fokusrahmen). - Größen fließen über clamp() statt über Breakpoints. - Klassennamen der Vorgängerversion bleiben erhalten, damit die Inhalte der Unterseiten unangetastet bleiben. ================================================================== */ @font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap; src:url("fonts/open-sans-v44-latin-regular.woff2") format("woff2");} @font-face{font-family:"Open Sans";font-style:italic;font-weight:400;font-display:swap; src:url("fonts/open-sans-v44-latin-italic.woff2") format("woff2");} @font-face{font-family:"Open Sans";font-style:normal;font-weight:500;font-display:swap; src:url("fonts/open-sans-v44-latin-500.woff2") format("woff2");} @font-face{font-family:"Open Sans";font-style:normal;font-weight:600;font-display:swap; src:url("fonts/open-sans-v44-latin-600.woff2") format("woff2");} @font-face{font-family:"Open Sans";font-style:normal;font-weight:700;font-display:swap; src:url("fonts/open-sans-v44-latin-700.woff2") format("woff2");} :root{ --tinte:#071a2f; --tinte-2:#0d2742; --blau:#0b5394; --blau-hell-akt:#0e69bb; --blau-dunkel:#073b6b; --blau-hell:#e8f1f9; --messing:#cda434; --messing-hell:#e9c45a; --papier:#f6f5f2; --weiss:#ffffff; --grau:#4a4f55; --grau-dunkel:#2e3338; --grau-hell:#f5f6f8; --akzent:#f29400; --gold:#cda434; --gold-hell:#e9c45a; --rand:#dde3ea; --rand-dunkel:rgba(255,255,255,.16); /* Eigene Namen für Stellen, die im Dunkelmodus NICHT einfach mitwandern dürfen – siehe Block "Dunkelmodus" weiter unten. */ --blau-flaeche:#0b5394; /* Knopfhintergrund (trägt weiße Schrift) */ --blau-flaeche-akt:#0e69bb; /* derselbe Knopf beim Überfahren */ --kopf-glas:rgba(255,255,255,.94); --karte-flaeche:var(--weiss); --karte-flaeche-papier:var(--weiss); --logo-kachel:#ffffff; /* bleibt in BEIDEN Modi weiß, s. unten */ --schatten:rgba(7,26,47,.12); --fokus-schein:rgba(11,83,148,.16); --status-ok:#1d7a4c; --status-fehler:#b3261e; color-scheme:light; --t-display:clamp(2.15rem,5.4vw,4.05rem); --t-h1:clamp(1.85rem,3.8vw,2.9rem); --t-h2:clamp(1.5rem,3vw,2.2rem); --t-h3:1.12rem; --t-body:clamp(1rem,.55vw + .85rem,1.1rem); --t-lead:clamp(1.06rem,.9vw + .84rem,1.28rem); --t-klein:.9rem; --t-marke:.76rem; --bahn:min(1180px,92vw); --sektion:clamp(3.25rem,7vw,6rem); --radius:10px; } /* ================================================================== DUNKELMODUS Wird über das Attribut data-thema="dunkel" am -Element eingeschaltet; gesetzt vom Skript THEMA_JS in tools/generate.py. STANDARD ist die Systemeinstellung des Besuchers, der Schalter im Kopfbereich sticht sie. Ohne JavaScript bleibt die Seite hell. Die Palette steht bewusst NUR HIER und nicht zusätzlich in einem @media (prefers-color-scheme: dark) - die Systemeinstellung wertet das Skript aus. Zwei Fassungen derselben 20 Farben würden früher oder später auseinanderlaufen. GRUNDGEDANKE: Nicht invertieren, sondern die Tonleiter verschieben. Die Gestaltung lebt vom Wechsel der Bänder hell -> papier -> dunkel. Würde man nur umdrehen, verschwände genau dieser Rhythmus. Deshalb behalten alle vier Ebenen ihre Reihenfolge, nur enger gestaffelt: --tinte #04101d tiefste Ebene: Hero, Seitenkopf, dunkle Bänder --tinte-2 #0a1929 Footer, Faktenband --weiss #0f2032 Grundfläche der Seite --papier #132639 Papier-Band, eine Stufe heller Das Markenblau kann NICHT einfach mitwandern: als Linkfarbe muss es hell werden, als Knopffläche unter weißer Schrift dunkel bleiben. Dafür gibt es --blau (Schrift) und --blau-flaeche (Fläche). ================================================================== */ [data-thema="dunkel"]{ --tinte:#04101d; --tinte-2:#0a1929; --weiss:#0f2032; --papier:#132639; --grau:#b6c3d0; --grau-dunkel:#eaf1f8; --grau-hell:#0f2032; --blau:#7cb8ee; /* Links: 7,8:1 auf der Grundfläche */ --blau-dunkel:#a9d2f6; /* Hover geht nach OBEN, nicht nach unten */ --blau-hell:#12304d; /* Fläche der .info-box */ --blau-hell-akt:#1a72b8; --blau-flaeche:#1668b8; /* weiße Schrift darauf: 5,7:1 */ --blau-flaeche-akt:#1a72b8; /* weiße Schrift darauf: 5,1:1 */ --rand:rgba(255,255,255,.14); --rand-dunkel:rgba(255,255,255,.14); --kopf-glas:rgba(15,32,50,.94); --karte-flaeche:#16293c; --karte-flaeche-papier:#1b3149; --schatten:rgba(0,0,0,.55); --fokus-schein:rgba(124,184,238,.28); --status-ok:#5fd0a0; --status-fehler:#ff8478; color-scheme:dark; } /* Das Logo ist ein GIF mit hartem Ein-Bit-Rand und der Tinte #0069b4. Auf dem dunklen Kopf ergäbe das nur 3,1:1 – lesbar, aber matt. brightness(0) invert(1) macht daraus eine weiße Wortmarke. Das ist kein neuer Look: der frühere Willkommens-Banner benutzte genau diese weiß eingefärbte Wortmarke. Die saubere Lösung bleibt ein SVG-Logo (offener Punkt seit dem Audit vom 26.07.). */ [data-thema="dunkel"] .logo img{filter:brightness(0) invert(1)} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; font-family:"Open Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; font-size:var(--t-body); line-height:1.72; color:var(--grau); background:var(--weiss); text-rendering:optimizeLegibility; } img{max-width:100%;height:auto} a{color:var(--blau);text-decoration-thickness:1px;text-underline-offset:.18em} a:hover{color:var(--blau-dunkel)} h1,h2,h3,h4{color:var(--grau-dunkel);line-height:1.18;margin:0 0 .6em; overflow-wrap:break-word;hyphens:manual} /* Silbentrennung in Ueberschriften NUR auf schmalen Displays, siehe @media (max-width:760px). Deutsche Komposita ("Betriebshaftpflicht- versicherung") sprengen dort sonst die Zeile. Auf breiten Schirmen wirkt getrennter Fliesstext in Ueberschriften dagegen gedraengt ("ge-loest"), deshalb hier manual. overflow-wrap bleibt als Notnagel. */ h1{font-size:var(--t-h1);font-weight:700;letter-spacing:-.02em} h2{font-size:var(--t-h2);font-weight:700;letter-spacing:-.015em} h3{font-size:var(--t-h3);font-weight:600} h4{font-size:1rem;font-weight:600} p{margin:0 0 1.05em} p:last-child{margin-bottom:0} ul,ol{padding-left:1.2em} li{margin-bottom:.35em} .sr-nur{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} a:focus-visible,button:focus-visible,label:focus-visible, input:focus-visible,textarea:focus-visible,select:focus-visible{ outline:3px solid var(--messing);outline-offset:3px;border-radius:2px; } .container{width:var(--bahn);margin-inline:auto} /* ---------------------------------------- Marken-Zeile (Strukturmerkmal) */ .marke{ display:flex;align-items:center;gap:.85rem; font-size:var(--t-marke);font-weight:700; letter-spacing:.15em;text-transform:uppercase; color:var(--messing);margin:0 0 1.1rem; } .marke::after{content:"";flex:1 1 auto;height:1px;max-width:5.5rem; background:currentColor;opacity:.55} .marke--hell{color:var(--blau)} /* --------------------------------------------------------- Topbar */ .topbar{background:var(--tinte);color:rgba(255,255,255,.72);font-size:.82rem} .topbar .container{display:flex;justify-content:flex-end} .topbar-rechts{display:flex;gap:1.6rem;padding:.5rem 0} .topbar a{color:inherit;text-decoration:none} .topbar a:hover{color:var(--messing-hell)} /* --------------------------------------------------------- Header */ header{ position:sticky;top:0;z-index:60; background:var(--kopf-glas); backdrop-filter:blur(10px); border-bottom:1px solid var(--rand); } .header-inner{display:flex;align-items:center;justify-content:space-between; gap:1.5rem;padding:.9rem 0;position:relative} .logo img{width:150px;display:block} /* margin-left:auto: seit dem Umschalter stehen DREI Elemente in der Kopfzeile. Ohne die Auto-Marge würde space-between die Navigation in die Mitte schieben; so bleibt sie rechts wie bisher, der Umschalter hängt sich dahinter. */ header nav{margin-left:auto} header nav ul{display:flex;align-items:center;gap:1.75rem;list-style:none;margin:0;padding:0} header nav li{margin:0;position:relative} header nav a{ color:var(--grau-dunkel);text-decoration:none;font-weight:600;font-size:.94rem; padding:.35rem 0;display:inline-block;position:relative; } header nav a::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:2px; background:var(--messing);transform:scaleX(0);transform-origin:left; transition:transform .22s ease; } header nav a:hover::after,header nav a.aktiv::after{transform:scaleX(1)} /* Ausklappmenü "Leistungen" */ header nav li ul{ display:none;position:absolute;left:0;top:100%;min-width:15rem; background:var(--weiss);border:1px solid var(--rand);border-top:2px solid var(--messing); border-radius:0 0 var(--radius) var(--radius); flex-direction:column;gap:0;padding:.35rem 0; box-shadow:0 12px 28px var(--schatten); } header nav li:hover ul,header nav li:focus-within ul{display:flex} header nav li ul a{display:block;padding:.55rem 1.1rem;font-weight:500} header nav li ul a::after{display:none} header nav li ul a:hover{background:var(--blau-hell);color:var(--blau)} .nav-schalter{display:none} .nav-knopf{display:none;cursor:pointer;font-weight:600;font-size:.9rem; color:var(--grau-dunkel);border:1.5px solid var(--rand);border-radius:var(--radius); padding:.5rem .9rem;user-select:none} /* --------------------------------------------- Umschalter hell/dunkel Ohne JavaScript hat der Knopf keine Wirkung, deshalb ist er auch nicht zu sehen: sichtbar wird er erst, wenn das Skript im data-js am gesetzt hat. */ .thema-knopf{ display:none;align-items:center;gap:.5rem;flex:0 0 auto; font:inherit;font-size:.86rem;font-weight:600;line-height:1; color:var(--grau-dunkel);background:transparent; border:1.5px solid var(--rand);border-radius:var(--radius); padding:.5rem .8rem;cursor:pointer;white-space:nowrap; transition:border-color .18s ease,color .18s ease; } [data-js] .thema-knopf{display:inline-flex} .thema-knopf:hover{border-color:var(--messing);color:var(--messing)} .thema-knopf svg{width:17px;height:17px;flex:0 0 auto; fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} /* Der Knopf zeigt den AKTUELLEN Zustand, nicht das Ziel des Klicks. Bei zwei Zuständen ginge auch "wohin" ("Dunkel" im hellen Modus), bei dreien im Kreis nicht mehr - dann müsste man raten, wo man steht. Gesteuert über data-wahl am (auto|hell|dunkel), das getrennt von data-thema geführt wird: data-thema faerbt, data-wahl beschriftet. Bei "auto" sind beide Farbfassungen möglich. */ .thema-form{display:none} [data-wahl="auto"] .thema-form--auto, [data-wahl="hell"] .thema-form--hell, [data-wahl="dunkel"] .thema-form--dunkel{display:inline-block} /* ----------------------------------------------------------- Hero */ .hero{background:var(--tinte);color:#fff;position:relative;overflow:hidden; padding:clamp(3.25rem,6.5vw,6rem) 0 clamp(2.75rem,5.5vw,5rem)} .hero::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(58% 78% at 78% 32%,rgba(15,87,147,.55),transparent 68%)} /* Wasserzeichen: sitzt bewusst NUR hier, in der leeren rechten Fläche des Hero – nicht hinter Fließtext und nicht auf jedem Bildschirm. Unter 1100px ausgeblendet, dort gibt es die freie Fläche nicht. */ .hero::after{ content:"";position:absolute;pointer-events:none; right:9%;top:50%;transform:translateY(-50%); width:min(30%,400px);aspect-ratio:553/196; background:url("../bilder/logo-wasserzeichen.png") right center/contain no-repeat; opacity:.42; } @media (max-width:1100px){.hero::after{display:none}} /* ------------------------------------------------------------------ ALTERNATIVE: Wasserzeichen wie in der Vorgängerversion, also fest hinter ALLEN Inhalten auf jeder Seite. Bewusst nicht aktiv, weil es hinter Fließtext sitzt und die Lesbarkeit mindert. Wer es trotzdem will, entfernt die Kommentarzeichen um den folgenden Block: body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background:url("../bilder/logo-wasserzeichen.png") center/clamp(240px,36vw,520px) no-repeat; } ------------------------------------------------------------------ */ .hero .container{position:relative} .hero h1{color:#fff;font-size:var(--t-display);font-weight:700; letter-spacing:-.025em;line-height:1.06;margin:0 0 1.2rem; max-width:17ch;text-wrap:balance} .hero-lead{font-size:var(--t-lead);color:rgba(255,255,255,.82); max-width:52ch;margin:0 0 2.1rem} /* -------------------------------------------------------- Seitenkopf Kompakte Variante des Hero für alle Unterseiten. */ .seitenkopf{background:var(--tinte);color:#fff;position:relative;overflow:hidden; padding:clamp(2.5rem,5vw,3.75rem) 0} .seitenkopf::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(60% 90% at 82% 40%,rgba(15,87,147,.5),transparent 70%)} .seitenkopf > *{position:relative} .seitenkopf .container{position:relative} .seitenkopf h1{color:#fff;margin:0;max-width:24ch;text-wrap:balance} .seitenkopf p{color:rgba(255,255,255,.8);max-width:60ch;margin:.9rem 0 0; font-size:var(--t-lead)} /* --------------------------------------------------------- Knöpfe */ .btn{ display:inline-block;padding:.82rem 1.6rem;border-radius:var(--radius); background:var(--blau-flaeche);color:#fff !important; font-weight:600;font-size:.98rem;text-decoration:none; border:1.5px solid var(--blau-flaeche); transition:background .18s ease,border-color .18s ease; } /* Fest #fff statt var(--weiss): --weiss ist die Variable für FLÄCHEN und wird im Dunkelmodus dunkel. Die Knopfschrift muss weiß bleiben. */ .btn:hover{background:var(--blau-flaeche-akt);border-color:var(--blau-flaeche-akt); text-decoration:none} .btn.sekundaer{background:var(--akzent);border-color:var(--akzent)} .btn.sekundaer:hover{background:#c97a00;border-color:#c97a00} .btn.rand{background:transparent;border-color:rgba(255,255,255,.4)} .btn.rand:hover{background:transparent;border-color:var(--messing); color:var(--messing-hell) !important} .btn-gruppe{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem} /* ------------------------------------------------------- Abschnitte */ main{display:block} main > .container{padding:var(--sektion) 0} .abschnitt{padding:var(--sektion) 0;margin-bottom:0} /* margin-bottom:0 hebt die section-Regel weiter unten auf: farbige Vollbreit-Baender stossen direkt aneinander, statt durch einen weissen Streifen getrennt zu werden. */ .abschnitt--papier{background:var(--papier)} .abschnitt--dunkel{background:var(--tinte);color:rgba(255,255,255,.8)} .abschnitt--dunkel h2,.abschnitt--dunkel h3{color:#fff} .abschnitt--dunkel a:not(.btn){color:var(--messing-hell)} section{margin-bottom:var(--sektion)} section:last-child{margin-bottom:0} main > .container > section:first-child{margin-top:0} .zweispalt{display:grid;gap:clamp(2rem,5vw,4.5rem); grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center} .zweispalt--umgekehrt .zweispalt-medium{order:-1} .textbahn{max-width:60ch} .mittebahn{max-width:62ch;margin-inline:auto;text-align:center} .mittebahn h2{text-wrap:balance} /* 56ch waren an der Fliesstextgroesse gemessen und damit fuer die h2 (bis 2.2rem) zu eng - rund 15 Zeichen pro Zeile. */ .mittebahn .marke{justify-content:center} .mittebahn .marke::before{content:"";flex:1 1 auto;height:1px;max-width:5.5rem; background:currentColor;opacity:.55} .gross{font-size:var(--t-lead);color:#fff;margin-bottom:1.2rem; text-wrap:balance} /* balance verteilt die Zeilen gleichmaessig und verhindert damit, dass ein einzelnes Wort ("passt.") allein auf der letzten Zeile steht. Wirkt nur bei kurzen Bloecken - genau richtig hier. */ /* ------------------------------------------------------ Faktenband */ .fakten{background:var(--tinte-2);color:#fff;border-top:2px solid var(--messing)} .fakten ul{list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(4,1fr)} .fakten li{padding:1.5rem 1.4rem;border-left:1px solid var(--rand-dunkel);margin:0} .fakten li:first-child{border-left:0;padding-left:0} .fakten b{display:block;font-size:clamp(1.05rem,1.6vw,1.42rem);font-weight:700; color:#fff;letter-spacing:-.01em;line-height:1.25;margin-bottom:.15rem; overflow-wrap:break-word;hyphens:auto} .fakten span{display:block;font-size:var(--t-klein); color:rgba(255,255,255,.66);line-height:1.45} /* -------------------------------------------- Leistungsregister */ .register{border-top:1px solid var(--rand);margin-top:2.4rem} .register-zeile{ display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr) auto; gap:clamp(1rem,3vw,2.5rem);align-items:baseline; padding:1.5rem 0;border-bottom:1px solid var(--rand); text-decoration:none;color:inherit;position:relative; transition:padding-left .22s ease; } .register-zeile::before{content:"";position:absolute;left:0;top:-1px; height:calc(100% + 1px);width:3px;background:var(--messing); transform:scaleY(0);transform-origin:top;transition:transform .22s ease} .register-zeile:hover{padding-left:1.1rem} .register-zeile:hover::before{transform:scaleY(1)} .register-name{font-size:1.24rem;font-weight:700;color:var(--grau-dunkel); letter-spacing:-.01em;line-height:1.25} .register-inhalt{font-size:.97rem;color:var(--grau);line-height:1.6} .register-pfeil{color:var(--blau);font-weight:600;font-size:.93rem; white-space:nowrap;opacity:.55;transition:opacity .22s ease} .register-zeile:hover .register-pfeil{opacity:1} /* ------------------------------------------------ Karten und Raster */ .grid{display:grid;gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(255px,1fr))} .karte{ background:var(--karte-flaeche);border:1px solid var(--rand); border-top:3px solid var(--messing);border-radius:14px; padding:clamp(1.4rem,2.5vw,1.9rem); } .karte h3{margin:0 0 .55rem;color:var(--grau-dunkel)} .karte > :last-child{margin-bottom:0} .karte ul{padding-left:1.1em} .abschnitt--dunkel .karte{background:var(--tinte-2);border-color:var(--rand-dunkel)} .abschnitt--dunkel .karte h3{color:#fff} .abschnitt--papier .karte{background:var(--karte-flaeche-papier)} .info-box{background:var(--blau-hell);border-radius:14px; border-left:3px solid var(--blau);padding:clamp(1.3rem,2.5vw,1.7rem); margin:1.8rem 0} .info-box h3{margin-top:0} .info-box > :last-child{margin-bottom:0} /* Merkmalliste mit Messinghaken */ .merkmale{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.85rem} .merkmale li{display:flex;gap:.75rem;align-items:flex-start; font-size:.99rem;line-height:1.6;margin:0} .merkmale svg{flex:0 0 auto;width:20px;height:20px;margin-top:.2rem; stroke:var(--messing);fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} /* Kachelzellen der Startseite (bleiben für etwaige Wiederverwendung) */ .zelle{display:flex;flex-direction:column;align-items:center;text-align:center} .icon-kreis{display:inline-flex;align-items:center;justify-content:center; width:64px;height:64px;border-radius:50%;border:1px solid var(--rand); margin-bottom:-32px;background:var(--weiss);position:relative;z-index:2} .icon-kreis svg{width:28px;height:28px;stroke:var(--blau);fill:none;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} .zelle .karte{padding-top:2.6rem;width:100%} /* --------------------------------------------------- Logoraster Statt Endlos-Laufband: ruhiges Raster, nach Art der Beziehung gruppiert. Logos in Volltonfarbe – der frühere Graustufen-Trick mit Einfärbung beim Überfahren funktioniert auf Touchgeräten nicht und lässt die Logos dort dauerhaft grau erscheinen. */ .logo-gruppen{display:grid;gap:clamp(2rem,4vw,2.75rem);margin-top:2.25rem} .logo-gruppe{} .logo-titel{font-size:.82rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--messing);margin:0 0 .2rem} .abschnitt--papier .logo-titel,main .logo-titel{color:var(--blau)} .logo-unter{font-size:var(--t-klein);color:var(--grau);margin:0 0 1.1rem; opacity:.85} .logo-raster{list-style:none;margin:0;padding:0;display:grid;gap:.75rem; grid-template-columns:repeat(auto-fill,minmax(140px,1fr))} .logo-raster li{margin:0} /* --logo-kachel bleibt in BEIDEN Modi weiß. Die 16 Herstellerlogos sind Volltongrafiken, die auf Weiß gezeichnet wurden – mehrere haben Weiß fest im Bild. Auf dunklem Grund entstünden sonst weiße Kästen in unterschiedlichen Größen. Die weiße Kachel ist die ehrlichere Lösung und normiert die Logos wie bisher. */ .logo-raster img{ display:block;width:100%;height:74px;object-fit:contain; background:var(--logo-kachel);border:1px solid var(--rand);border-radius:var(--radius); padding:.75rem 1rem; } /* Altbestand: .partner-grid bleibt als Name erhalten, falls er noch irgendwo auftaucht. */ .partner-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.75rem;align-items:center} .partner-grid img{width:100%;height:74px;object-fit:contain;background:var(--logo-kachel); border:1px solid var(--rand);border-radius:var(--radius);padding:.75rem 1rem} /* ------------------------------------------------------- Webcams */ .webcam-grid{display:grid;gap:1.5rem; grid-template-columns:repeat(2,minmax(0,1fr))} /* Feste 2 Spalten statt auto-fit: bei 1180px Bahn und 300px Mindest- breite passten vorher DREI Spalten - drei Bilder oben, eines allein darunter. Mit 2x2 wird jedes Bild rund doppelt so gross. Unter 760px eine Spalte, siehe Media-Query. */ .webcam-grid figure{margin:0;border:1px solid var(--rand);border-radius:14px; overflow:hidden;background:var(--weiss)} .webcam-grid img{display:block;width:100%} .webcam-grid figcaption{padding:.85rem 1.1rem;font-size:.95rem;font-weight:600; color:var(--grau-dunkel);border-top:1px solid var(--rand); display:flex;align-items:baseline;justify-content:space-between; gap:.5rem .75rem;flex-wrap:wrap} /* Die drei Unterschriften ohne Zusatzlink haben nur EIN Kind und bleiben durch space-between unveraendert linksbuendig. Unter etwa 940px rutscht der HD-Link auf eine zweite Zeile. Das ist hingenommen: die Unterschrift "Stadtwerke - Bielefelder Bahnhof und Boulevard" bricht bei denselben Breiten ohnehin schon um, ungleich hohe Unterschriften sind also nichts Neues in diesem Raster. */ .webcam-hd{font-size:.86rem;white-space:nowrap} /* -------------------------------------------------------- KI-Seite */ .ki-ueberblick{display:grid;gap:clamp(1.5rem,4vw,3rem); grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center; margin-bottom:2rem} .ki-ueberblick-text > :last-child{margin-bottom:0} /* 357px ist die native Breite von bilder/ki-fruehstueck-einladung.png. Ohne die Deckelung fuellt der Button seine Rasterspalte und wird auf ~470px hochgerechnet - rund ein Drittel groesser als das Bild, was man der ohnehin weichen Grafik ansieht. Die Deckelung macht den Button knapp ein Viertel kleiner UND beendet die Hochrechnung. Wer das Bild austauscht, prueft diesen Wert mit. margin-inline haelt die rechte Kante buendig zur Textspalte; mobil wird mittig gestellt. */ .ki-badge{display:block;border-radius:14px;overflow:hidden; max-width:357px;margin-inline:auto 0; border:1px solid var(--rand);text-decoration:none; transition:transform .2s ease,box-shadow .2s ease} .ki-badge:hover{transform:translateY(-3px);box-shadow:0 14px 30px var(--schatten)} .ki-badge img{display:block;width:100%} .ki-badge-text{display:block;padding:.85rem 1.1rem;background:var(--weiss); font-weight:600;font-size:.95rem;color:var(--blau);border-top:1px solid var(--rand)} /* ------------------------------------------------ Newsletterformular */ .nl-form{display:grid;gap:1.1rem;max-width:34rem;margin-top:1.6rem} .nl-feld{display:grid;gap:.35rem} .nl-feld label{font-weight:600;font-size:.93rem;color:var(--grau-dunkel)} .nl-feld input{ font:inherit;font-size:1rem;padding:.7rem .9rem; border:1.5px solid var(--rand);border-radius:var(--radius); background:var(--weiss);color:var(--grau-dunkel);width:100%; transition:border-color .18s ease; } .nl-feld input:focus{border-color:var(--blau);outline:none; box-shadow:0 0 0 3px var(--fokus-schein)} .nl-pflicht{color:var(--akzent);font-weight:700} .nl-consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.93rem; line-height:1.55} .nl-consent input{margin-top:.28rem;flex:0 0 auto;width:1.05rem;height:1.05rem; accent-color:var(--blau)} .nl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .nl-status{font-size:.95rem;font-weight:600;min-height:1.4em} .nl-status[data-art="ok"]{color:var(--status-ok)} .nl-status[data-art="fehler"]{color:var(--status-fehler)} /* --------------------------------------------------------- Footer */ footer{background:var(--tinte-2);color:rgba(255,255,255,.68); padding:clamp(2.75rem,5vw,3.75rem) 0 1.5rem;font-size:.93rem; border-top:2px solid var(--messing)} footer .fuss-titel{color:#fff;font-size:.82rem;font-weight:600;letter-spacing:.12em; text-transform:uppercase;margin:0 0 1rem;line-height:1.4} footer a{color:inherit;text-decoration:none} footer a:hover{color:var(--messing-hell)} footer strong{color:#fff;font-weight:600} footer ul{list-style:none;margin:0;padding:0} footer li{margin-bottom:.5rem} footer img{border-radius:var(--radius)} .footer-grid{display:grid;gap:2.2rem; grid-template-columns:repeat(auto-fit,minmax(215px,1fr))} .footer-aktion{display:inline-block;margin-top:.5rem;padding:.5rem 1rem; border:1.5px solid var(--rand-dunkel);border-radius:var(--radius); font-weight:600;font-size:.88rem;transition:border-color .18s ease} .footer-aktion:hover{border-color:var(--messing)} .footer-bottom{margin-top:2.5rem;padding-top:1.3rem; border-top:1px solid var(--rand-dunkel); display:flex;flex-wrap:wrap;gap:.6rem 1.5rem; justify-content:space-between;align-items:center;font-size:.86rem} .footer-bottom ul{display:flex;flex-wrap:wrap;gap:1.2rem} .footer-bottom li{margin:0} /* --------------------------------------------- Scroll-Einblendung */ .auftritt{opacity:0;transform:translateY(18px); transition:opacity .6s ease,transform .6s ease} .auftritt.da{opacity:1;transform:none} /* ---------------------------------------------------------- Mobil */ @media (max-width:900px){ .hero .container,.zweispalt,.ki-ueberblick{grid-template-columns:1fr} .ki-badge{margin-inline:auto} .zweispalt--umgekehrt .zweispalt-medium{order:0} .fakten ul{grid-template-columns:repeat(2,1fr)} .fakten li:nth-child(odd){border-left:0;padding-left:0} .fakten li:nth-child(n+3){border-top:1px solid var(--rand-dunkel)} .register-zeile{grid-template-columns:1fr;gap:.4rem;padding:1.25rem 0} .register-pfeil{opacity:1} } @media (max-width:760px){ h1,h2,h3,h4{hyphens:auto} .webcam-grid{grid-template-columns:1fr} .topbar{display:none} .nav-knopf{display:inline-block;margin-left:auto} /* Auf dem Handy liegt die Navigation absolut; Menüknopf und Umschalter rücken zusammen an den rechten Rand. */ header nav{display:none;position:absolute;left:0;right:0;top:100%; background:var(--weiss);border-bottom:1px solid var(--rand); padding:.25rem 4vw 1rem;max-height:75vh;overflow-y:auto} .nav-schalter:checked ~ nav{display:block} header nav ul{flex-direction:column;align-items:stretch;gap:0} header nav li{border-top:1px solid var(--rand)} header nav a{display:block;padding:.8rem 0} header nav a::after{display:none} header nav li ul{display:block;position:static;border:0;box-shadow:none; padding:0 0 .4rem .9rem;min-width:0;background:transparent} header nav li ul a{padding:.55rem 0} .fakten ul{grid-template-columns:1fr} .fakten li{border-left:0;padding-left:0;padding-block:1.1rem} .fakten li+li{border-top:1px solid var(--rand-dunkel)} .btn-gruppe{flex-direction:column;align-items:stretch} .btn{text-align:center} .footer-bottom{flex-direction:column;align-items:flex-start} } @media (max-width:900px){ /* Ab hier trägt der Umschalter nur noch sein Symbol. GRUND: Zwischen 760 und 900 px steht die Navigation noch waagerecht (das Burger-Menü beginnt erst bei 760). Mit dem Wort daneben lief die Kopfzeile bei 768 px um 16 px über - gemessen, nicht geschätzt. Unterhalb von 760 px ist es ebenso eng, dort neben dem Menüknopf. Das Wort wird nur OPTISCH ausgeblendet, NICHT mit display:none. Sonst verlöre der Knopf seinen zugänglichen Namen und ein Screenreader läse nur noch "Darstellung umschalten auf". Die Werte sind die von .sr-nur. */ .thema-knopf{padding:.5rem .62rem;gap:0} .thema-wort{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important} .auftritt{opacity:1;transform:none} } /* ------------------------------------------------------- IP-Prüfung (ip.html) Die Adressen in Festbreitenschrift: IPv6 ist lang und wird nur so zuverlässig ablesbar. word-break, weil eine IPv6-Adresse auf schmalen Displays sonst über den Rand hinausläuft. */ .ip-wert{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:1.15rem;font-weight:600;color:var(--grau-dunkel); word-break:break-all;margin:.35rem 0 0} .ip-wert--fehlt{font-weight:400;font-size:1rem;color:var(--grau)} .ip-host{font-size:.86rem;color:var(--grau);word-break:break-all;margin:.45rem 0 0} .ip-hinweis{font-size:.9rem;color:var(--grau);margin-top:1.1rem} .ip-hinweis:empty{display:none} .ip-kopf{ margin-top:.9rem;font:inherit;font-size:.82rem;font-weight:600; color:var(--blau);background:transparent;border:1.5px solid var(--rand); border-radius:var(--radius);padding:.4rem .8rem;cursor:pointer; transition:border-color .18s ease,color .18s ease} .ip-kopf:hover{border-color:var(--blau);color:var(--blau-dunkel)} .ip-aktionen{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem} .btn--zweit{background:transparent!important;color:var(--blau)!important; border-color:var(--rand)!important} .btn--zweit:hover{border-color:var(--blau)!important;background:transparent!important}