/* ================================================================== priedemann-queries.css — Neuaufbau, Stand 17.08.2026 Auf das Funktionale zusammengestrichen, wie priedemann.css. Der komplette bisherige Stand liegt in priedemann-queries-old.css und wird nur gelesen. +++ Hier gehoert alles hin, was von einer Bildschirmbreite abhaengt. +++ In priedemann.css steht davon nichts, auch nicht "nur diese eine Zeile". Blockstruktur steht auf dem BS5-Raster (DS-19, 03.08.2026) und bleibt so: >=1200 (kein Block) / 992-1199.98 / 768-991.98 / 576-767.98 / <=575.98. Die .98-Obergrenzen sind Absicht - bei gebrochenen Viewport-Breiten faellt sonst eine Regel zwischen zwei Bloecke. Vorgehen und Reihenfolge des Wiederaufbaus: docs/css-strategy.md ================================================================== */ /* ----------- XXL - ab 1400px start ----------- */ @media (min-width: 1400px) { .carousel-cell { width: 1320px; } } /* ----------- XXL ende ----------- */ /* ----------- LG - 992px bis 1199.98px start ----------- */ @media (min-width: 992px) and (max-width: 1199.98px) { .carousel-cell { width: 960px; } /* Logo: Grundwert in priedemann.css ist height:28px (~161px breit bei 345x60 Bildmasse). Aus priedemann-queries-old.css uebernommen - 25px ergeben ~144px. */ .logo { height: 25px; } /* FUNKTION · Ladeanzeige Modul 26: das Logo ist im Grundwert 1136px breit und muss mitskalieren, sonst laeuft die fixierte Abdeckung ueber. */ .js div#preloader2 > img {width:900px;height:152px;margin-left:-450px;margin-top:-76px;} h2.cases { font-size: 5.625rem; } /* Service-Navigator (Modul 60, 63): Phasen-Headline (Icon + h4) auf ~80% verkleinert - transform statt einzeln Icon-Hoehe und Schriftgroesse nachzurechnen, skaliert beides (und den Gap dazwischen) im selben Verhaeltnis. transform-origin:left, damit die Gruppe an ihrer linken Kante (dem Zellenrand) verankert bleibt statt von der Mitte aus zu schrumpfen. */ h4.service-navigator__headline, .mod-service-navigator h4:has(.service-navigator__phase-icon) { transform: scale(0.8); transform-origin: left; } /* Auftraggeber-Badge (h4.hl-auftraggeber): nur der Text auf 80% verkleinert (Grundwert hier effektiv Bootstraps h4, ~1.5rem -> 1.2rem), der Rahmen bleibt bewusst spaltenbreit. transform:scale wuerde die ganze Box samt Rahmen verkleinern statt nur den Inhalt - deshalb font-size statt transform. Darueber und darunter Grundgroesse aus priedemann.css. */ h4.hl-auftraggeber { font-size: 1.2rem; } } /* ----------- LG ende ----------- */ /* ----------- Ueberschriften unter 1200px start ----------- Ein Block statt drei: die Altdatei trug dieselben zwei Werte in LG, MD und SM. Grundwerte in priedemann.css, XS-Stufe im XS-Block. */ @media (max-width: 1199.98px) { h2 { font-size: 1.875rem; margin-bottom: 8px; } h2.firstLevel { font-size: 1.625rem; padding-top: 10px; } } /* ----------- Ueberschriften unter 1200px ende ----------- */ /* ----------- MD - 768px bis 991.98px start ----------- */ @media (min-width: 768px) and (max-width: 991.98px) { .carousel-cell { width: 720px; } /* Logo: aus priedemann-queries-old.css uebernommen - 22px ergeben ~126px. */ .logo { height: 22px; } /* Service-Navigator (Modul 60, 63): dieselbe Phasen-Headline wie im LG-Block, hier auf ~60% statt ~80%. */ h4.service-navigator__headline, .mod-service-navigator h4:has(.service-navigator__phase-icon) { transform: scale(0.6); transform-origin: left; } .js div#preloader2 > img {width:700px;height:118px;margin-left:-350px;margin-top:-99px;} /* Typo-Massstab MD (768-991.98px): Ausloeser war .navbar-nav .nav-link (priedemann.css, Grundwert 1.125rem), das hier auf 1rem soll. Statt nur diese eine Regel zu aendern, skaliert der ganze Bereich um denselben Faktor (1 / 1.125 = 8/9 ≈ 0.8889) mit - jede Schriftgroesse behaelt so ihr Verhaeltnis zu allen anderen. Werte auf 4 Nachkommastellen gerundet. Ausnahme: .zitat-text .bi-quote (1.35em) haengt an keiner hier skalierten rem-Regel und bleibt unveraendert. */ h2 { font-size: 1.6667rem; } h2.firstLevel { font-size: 1.4444rem; } h2.cases { font-size: 4.4444rem; } h2.caseindex, h2.black { font-size: 1.3333rem; padding-top: 0; } h3 { font-size: 1.5556rem; } h6 { font-size: 1.6rem; } .copy-big { font-size: 1.1556rem; } .footer { font-size: 0.8889rem; } .footer .small { font-size: 0.7778rem; } .footer-textcol h3 { font-size: 1.4444rem; } .navbar-nav .nav-link { font-size: 1rem; } .navbar-intranet .navbar-nav .nav-link.toggler { font-size: 1rem; } .carousel-caption p, .carousel-caption p.text-start, .carousel-caption p.text-end, .carousel-caption p.text-center, .carousel-caption p.text-left, .carousel-caption p.text-right { font-size: 0.7778rem; } div.zitat-text > p { font-size: 1.4444rem; } p.zitat-autor { font-size: 0.8889rem; } .sn-audience-label { font-size: 0.6667rem; } .indermitte { font-size: 2rem; } span.pro-black { font-size: 0.8889rem; } span.pro-bold { font-size: 0.8889rem; } a.size16 { font-size: 0.8889rem; } a.size18 { font-size: 1rem; } .card-title { font-size: 1.1667rem; } } /* ----------- MD ende ----------- */ /* ----------- ab 768px start ----------- */ @media (min-width: 768px) { /* Modul 59: Abstand ueber dem Karussell. Haengt am Attributselektor, nicht an .carousel allein - die Klasse gehoert auch dem Bootstrap-Slider in Modul 9. padding statt margin, damit der Wert nicht mit dem Aussenabstand des Elternelements kollabiert. */ .carousel[data-flickity] { padding-top: 30px; } /* Dieselben 30px, die am 11.08.2026 aus body{padding-top} herausgeloest wurden und seitdem an den Modulen haengen, die sie brauchen (siehe body in priedemann.css und Modul 59). .mod-service-subnavi statt .mod-service-navigator: die zweite Klasse steht am selben Wurzelelement, aber auch an Modul 60, das diesen Abstand nicht bekommen soll. padding statt margin, damit der Wert nicht mit dem Aussenabstand des Elternelements kollabiert - .sn-frame traegt bereits margin-bottom:40px. */ .mod-service-subnavi { padding-top: 30px; } } /* ----------- ab 768px ende ----------- */ /* ----------- Bodycopy unter 768px start ----------- Eigener Block, weil er SM und XS gemeinsam abdeckt. Die Datei ist sonst nach Bereichen sortiert; genau dort lag das Problem, das DS-23 aufloest - dieselbe Klasse in zwei Bloecken zu pflegen hat die frueheren zwoelf Groessenregeln erzeugt. Eine Stufe gehoert an einen Ort. Steht zwischen MD und SM, damit die Reihenfolge absteigender Breiten lesbar bleibt und ein spaeterer Sonderfall in SM oder XS diese Regel noch ueberschreiben kann. Grundwerte bei .copy-big / .copy-small in priedemann.css. 1.125rem = 18px. .copy-small bleibt in allen Breiten bei 1rem. */ @media (max-width: 767.98px) { .copy-big { font-size: 1.125rem; } /* Navigation (Template 5), Hamburger-Zustand unter 768px - gilt fuer beide Navbar-Varianten (navbar-expand-md klappt bei beiden hier um). Aus priedemann-queries-old.css uebernommen, dort identisch doppelt im SM- und XS-Block gepflegt; body{padding-top:80px} dort war deckungsgleich mit dem Grundwert in priedemann.css und faellt hier als Wiederholung ohne Wirkung weg. Auskommentierte Altregeln (.navbar-fixed-bottom, .floatleft, .navbar-nav > li > a:hover) ebenfalls nicht uebernommen. */ /* height:auto + feste Mindesthoehe auf Brand/Toggler - sonst springt die Logo-Zeile beim Aufklappen. priedemann.css setzt .navbar{height:80px} nur fuer den eingeklappten Zustand. */ .navbar { background-color: #fff; border: none; height: auto; min-height: 70px; color: #000; --bs-navbar-padding-y: 0; } .navbar > .container > .navbar-brand, .navbar > .container > .navbar-toggler { display: flex; align-items: center; min-height: 70px; } /* Linien ueber die volle Breite: BS5 gibt .container Innenabstand ueber --bs-gutter-x. Innerhalb der Navbar aufheben, Abstand pro Element setzen. */ .navbar > .container { padding-left: 0; padding-right: 0; } .navbar > .container > .navbar-brand { padding-left: 13px; } .navbar > .container > .navbar-brand .logo { margin-left: 0; } .navbar > .container > .navbar-toggler { padding: 0 8px 0 0; margin: 0; } /* Fokus-Ring nur fuer Tastatur, nicht fuer Maus */ .navbar-toggler:focus { box-shadow: none; } .navbar-toggler:focus-visible { outline: 2px solid #CC151A; outline-offset: -4px; } /* Menue umbricht unter 768px in eine eigene Zeile - braucht eigenen Hintergrund */ .navbar-collapse { background-color: #fff; border-top: 1px solid var(--linie); } .navbar-collapse.show { max-height: calc(100vh - 70px); overflow-y: auto; } .navbar-nav > .nav-item { background-color: #fff; } .navbar-nav > .nav-item > .nav-link { background-color: #fff; padding: 12px 13px; float: none; border-bottom: 1px solid silver; } /* Letztes Element (Handy-Servicezeile) ohne den rechten 5px-Abstand der Desktop-Grundregel - im gestapelten Menue nicht mehr passend. */ .navbar-nav > .nav-item:last-child { padding: 0; } /* Servicezeile als Flex statt floats - BS5-Flexkontext umschliesst floats nicht */ .navbar-nav > .nav-item.phone { display: flex; align-items: stretch; min-height: 45px; background-color: #fff; border-bottom: 1px solid silver; } .navbar-nav > .nav-item.phone > a, .navbar-nav > .nav-item.phone > span { display: flex; align-items: center; justify-content: center; float: none; width: auto; padding: 10px 15px; background-color: #fff; border-right: 1px solid silver; text-transform: uppercase; } .navbar-nav > .nav-item.phone > a.icons_top { font-size: 1rem; } .navbar-nav > .nav-item.phone > a.anfragen { flex: 1 1 auto; border-right: none; } /* Cards / Akkordeon (Modul 27, 50): Grundwerte in priedemann.css. Nur die Werte, die sich unter 768px tatsaechlich aendern - border/border-radius/ box-shadow:none gilt dort schon unbedingt, hier nur die zusaetzlichen margin-top:0 gegen den Abstand der Grundregel (.card-title: 8px). */ .accordion .card + .card { margin-top: 0; } .card { margin-top: 0; } .card-title { margin-top: 0; } /* Service-Navigator (Modul 60): Die Phasenleiste ist auf Desktop vier Reiter nebeneinander, von denen nur der aktive beschriftet ist - col-md-3 stapelt sie unter 768px zu vier Boxen untereinander. Ohne diese Regel bleiben die drei inaktiven als leere Kaesten mit Rahmen und grauem Grund stehen (DS-02). :not(.mod-service-subnavi) ist Pflicht: Modul 63 traegt dieselben Klassen, dort sind die inaktiven Zellen echte Phasenlinks und muessen sichtbar bleiben. Aus priedemann-queries-old.css uebernommen (dort nur im XS-Block ab 575.98px, hier fuer den ganzen Bereich unter 768px, wo col-md-3 stapelt). */ .mod-service-navigator:not(.mod-service-subnavi) .sn-phase-inactive { display: none; } /* 4. Spalte .sn-audience-col (Modul 60: Referenzprojekt / Modul 63: Zielgruppen-Umschalter): auf Desktop bekommt nur diese Spalte ihr eigenes Padding (rechts 42px, links nichts - sie lebt vom Bootstrap-Gutter und einer Trennlinie zur dritten Spalte). Die 42px sind kein Zufallswert, sondern dieselbe Kompensation wie beim Grundwert in priedemann.css: das -12px-Gutter der Zeile frisst zusammen mit .sn-frames overflow:hidden 12px vom gesetzten Padding, 42px ergeben so sichtbare 30px - denselben Wert wie Spalte 1-3 (.service-navigator__col). Gestapelt ist die Spalte auf beiden Seiten Rahmenkante statt nur rechts, also greift dieselbe Rechnung jetzt auch links - flaches padding:30px zeigte sichtbar nur noch rund 20px, deshalb hier ebenfalls 42px auf beiden Seiten. Gilt fuer beide Module: Modul 63 hat dieselbe Spalten-/Zeilenmechanik fuer den Zielgruppen-Umschalter, nur .sn-audience-grid als Karteninhalt. */ .mod-service-navigator .sn-audience-col { padding-left: 42px; padding-right: 42px; } .mod-service-navigator .sn-audience-col::before { display: none; } /* Abstand zwischen den vier gestapelten Spalten von .service-navigator__section (Modul 60 + 63): nebeneinander trennt sie nur der Gutter, gestapelt liegen sie sonst ohne jeden Zwischenraum direkt untereinander. Letzte Spalte ohne margin-bottom, sonst kaeme zum padding-bottom der Section (24px) noch einmal 20px dazu. Startwert 20px, kann bei Bedarf nachjustiert werden. */ .mod-service-navigator .service-navigator__section > [class*="col-"] { margin-bottom: 20px; } .mod-service-navigator .service-navigator__section > [class*="col-"]:last-child { margin-bottom: 0; } /* Landingpage-Hero (Modul 59): das INNERE Bildraster einer Zelle stapelt jetzt einheitlich unter 768px statt nur unter 576px - dafuer im Markup col-sm-6/col-sm-3 auf col-md-6/col-md-3 umgestellt (output.php). Diese Regeln zogen deshalb aus dem alten XS-Block hierher, unveraendert. Die AEUSSERE Zellenbreite ist davon unabhaengig und bleibt je Bereich eigenstaendig (SM 540px, XS fluid, beide weiter unten) - sie spiegelt Bootstraps eigene .container-Breite je Breakpoint, damit die sichtbare Zelle mit dem uebrigen Seiteninhalt fluchtet und Nachbarzellen seitlich hereinragen. Hoehe aus dem Inhalt statt fester Ratio - alle drei Layouts sind auf dieselbe Hoehe gerechnet. Alle Kachelhoehen leiten sich aus --tile-s ab, der Hoehe der kleinen Bilder in Prozent ihrer Spaltenbreite (skaliert dadurch in jeder Zellenbreite mit). Nur diese Zahl anfassen: kleines Bild = S · hohes Bild = 2S + 15px Sizer + 2px Rahmen breites Bild = S, sitzt aber in col-12, also doppelte Spaltenbreite: S/2 - 5px */ .carousel-cell { height: auto; padding-bottom: 0; --tile-s: 72%; } .square-container { padding-bottom: var(--tile-s); } .square-container-hoch { padding-bottom: calc(2 * var(--tile-s) + 17px); } .square-container2 { height: auto; padding-bottom: 0; } .square-container2 > div { position: relative; top: auto; left: auto; right: auto; bottom: auto; } .square-container2.xs-tuner > div { height: 0; padding-bottom: calc(var(--tile-s) / 2 - 5px); overflow: hidden; } .sizer30px { min-height: 15px; } .mtxs { margin-top: 15px; } .xs-nopad-left { padding-left: 7px; } .xs-nopad-right { padding-right: 7px; } .xs-tuner { width: 100%; margin-top: -15px; } } /* ----------- Bodycopy unter 768px ende ----------- */ /* ----------- SM - 576px bis 767.98px start ----------- */ @media (min-width: 576px) and (max-width: 767.98px) { /* Modul 59: sichtbare Zelle so breit wie Bootstraps .container in diesem Bereich (540px) - dieselbe Breite wie der uebrige Seiteninhalt, Nachbar- zellen ragen links/rechts herein. Das INNERE Bildraster stapelt hier trotzdem schon (siehe .square-container etc. im gemeinsamen <768px-Block) - beides sind unabhaengige Regeln. */ .carousel-cell { width: 540px; } .js div#preloader2 > img {width:560px;height:95px;margin-left:-280px;margin-top:-50px;} /* In der Altdatei fehlte dieser Wert - h2.cases sprang hier auf den Wert der Grundregel zurueck, also hoeher als im Bereich darueber. */ h2.cases { font-size: 5rem; } } /* ----------- SM ende ----------- */ /* ----------- XS - unter 576px start ----------- */ @media (max-width: 575.98px) { /* Modul 59: unter 576px hat .container keine feste max-width mehr (Bootstrap- Grundverhalten) - die Zelle folgt fluid statt einem festen px-Wert. */ .carousel-cell { width: calc(100% - 30px); } .js div#preloader2 > img {width:280px;height:47px;margin-left:-140px;margin-top:-76px;} h2 { font-size: 1.5rem; margin-bottom: 8px; } h2.firstLevel { font-size: 1.25rem; padding-top: 10px; } h2.cases { font-size: 2.25rem; } /* FUNKTION · Sichtbarkeitsschalter Desktop/Telefon. Grundregel in priedemann.css; hier dreht sie sich um. Ohne beide Haelften sind die zwei Varianten desselben Links gleichzeitig sichtbar. */ a.xs-hide {display: block;} a.noxs-show {display: none;} } /* ----------- XS ende ----------- */