/* ========================================================================== CarTradeCenter Rossol — site.css 1. Farben, Abstände, Schrift (hier ändern, nicht in einzelnen Regeln) 2. Grundlagen 3. Kopfzeile und Navigation 4. Bausteine: Buttons, Karten, Abschnitte 5. Startseite 6. Über uns 7. Kontakt: Formular, Infokarten 8. Zwei-Klick-Flächen (Karte, Buchungswidget) 9. Fußzeile 10. Rechtstexte ========================================================================== */ /* 1. Farben, Abstände, Schrift ============================================ */ :root { color-scheme: light; /* Die drei Markenfarben. Vom Kunden vorgegeben. */ --blau: #10255E; --hellblau: #D7DEEF; --gelb: #FFCC00; /* Abgeleitete Töne. Nur hier ableiten, nirgends sonst neu mischen. */ --blau-tief: #0a1840; /* Fußzeile, Hover auf blauen Flächen */ --blau-karte: #1b3372; /* Karten im blauen Band */ --blau-rand: #2c4a94; --hellblau-tief: #c2cde5; --gelb-tief: #e6b800; --weiss: #ffffff; --papier: #f6f8fc; /* sehr helle Trennfläche */ --text: #1d2537; --text-leise: #55607a; --linie: #dfe4ef; /* Schrift: bewusst die Systemschrift, keine Webfont-Nachladung. Das Mockup nutzt eine geometrische Grotesk (Poppins/Montserrat-Art). Soll die nachgebaut werden, muss sie lokal unter css/fonts/ liegen — eingebunden ist bisher keine. */ --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --breite: 1180px; --breite-eng: 840px; --rand: clamp(1rem, 4vw, 2.5rem); --luft-abschnitt: clamp(3.5rem, 8vw, 6rem); --radius: 16px; --radius-klein: 10px; --radius-pille: 999px; --schatten: 0 2px 10px rgba(16, 37, 94, .07); --schatten-hoch: 0 12px 34px rgba(16, 37, 94, .14); } /* 2. Grundlagen =========================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--schrift); font-size: clamp(1rem, .96rem + .18vw, 1.075rem); line-height: 1.65; color: var(--text); background: var(--weiss); overflow-x: hidden; } h1, h2, h3, h4 { margin: 0 0 .6em; line-height: 1.18; color: var(--blau); font-weight: 700; letter-spacing: -.01em; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } a { color: var(--blau); } img { max-width: 100%; height: auto; display: block; } ul { margin: 0; padding: 0; list-style: none; } /* Sichtbarer Fokus für Tastaturbedienung — nie wegnehmen. */ :focus-visible { outline: 3px solid var(--gelb); outline-offset: 3px; border-radius: 4px; } /* Sprungmarke für Screenreader und Tastatur */ .zum-inhalt { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--blau); color: var(--weiss); padding: .8rem 1.3rem; border-radius: 0 0 var(--radius-klein) 0; text-decoration: none; } .zum-inhalt:focus { left: 0; } .nur-fuer-screenreader { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .huelle { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; } .huelle-eng { width: min(100% - 2 * var(--rand), var(--breite-eng)); margin-inline: auto; } /* Abschnitte mit .zeigen werden beim Scrollen eingeblendet. Greift nur, wenn die Klasse js trägt — ohne JavaScript bleibt alles sichtbar. */ .js .zeigen { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; } .js .zeigen.sichtbar { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .zeigen { opacity: 1; transform: none; transition: none; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* 3. Kopfzeile und Navigation ============================================= */ .kopf { position: sticky; top: 0; z-index: 100; background: var(--weiss); border-bottom: 1px solid var(--linie); } .kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 84px; padding-block: .7rem; } .marke { display: inline-flex; flex: 0 0 auto; } .marke img { height: clamp(50px, 8vw, 62px); width: auto; } .haupt-nav ul { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2.4rem); } .haupt-nav a { display: block; padding: .45rem .15rem; color: var(--blau); font-weight: 600; font-size: .97rem; text-decoration: none; border-bottom: 2px solid transparent; transition: border-color .18s ease, color .18s ease; } .haupt-nav a:hover { border-bottom-color: var(--gelb); } .haupt-nav a[aria-current="page"] { border-bottom-color: var(--blau); } /* Schalter erscheint erst im Handy-Layout */ .nav-schalter { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-klein); color: var(--blau); cursor: pointer; } .nav-schalter:hover { background: var(--hellblau); } .nav-schalter svg { width: 24px; height: 24px; } .nav-schalter .balken-zu { display: none; } .nav-schalter[aria-expanded="true"] .balken-auf { display: none; } .nav-schalter[aria-expanded="true"] .balken-zu { display: block; } /* 4. Bausteine ============================================================ */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .78rem 1.5rem; border: 2px solid transparent; border-radius: var(--radius-pille); font: inherit; font-weight: 700; font-size: .95rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease; } .knopf:active { transform: translateY(1px); } .knopf svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; } .knopf-gelb { background: var(--gelb); color: var(--blau); border-color: var(--gelb); } .knopf-gelb:hover { background: var(--gelb-tief); border-color: var(--gelb-tief); } .knopf-blau { background: var(--blau); color: var(--weiss); border-color: var(--blau); } .knopf-blau:hover { background: var(--blau-tief); border-color: var(--blau-tief); } .knopf-rand { background: transparent; color: var(--blau); border-color: var(--blau); } .knopf-rand:hover { background: var(--blau); color: var(--weiss); } /* Abschnitts-Grundformen */ .abschnitt { padding-block: var(--luft-abschnitt); } .abschnitt-blau { background: var(--blau); color: var(--weiss); } .abschnitt-blau h2, .abschnitt-blau h3 { color: var(--weiss); } .abschnitt-hell { background: var(--hellblau); } .abschnitt-papier { background: var(--papier); } .ueberschrift-mitte { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); } /* Die großen Abschnittsüberschriften des Mockups: versal, gesperrt */ .versal { text-transform: uppercase; letter-spacing: .07em; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); } .kicker { display: block; margin-bottom: .5rem; color: var(--text-leise); font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } .abschnitt-blau .kicker { color: var(--hellblau); } .lauftext-gross { font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem); color: var(--text-leise); } /* Brotkrumen — bisher nur auf kleinbusse.html, weil das die einzige Seite ist, die nicht direkt in der Hauptnavigation steht. */ .brotkrumen { padding-block: 1rem; background: var(--papier); border-bottom: 1px solid var(--linie); font-size: .88rem; } .brotkrumen ol { display: flex; flex-wrap: wrap; gap: .3rem .6rem; margin: 0; padding: 0; list-style: none; } .brotkrumen li { display: flex; align-items: center; gap: .6rem; color: var(--text-leise); } .brotkrumen li + li::before { content: "›"; color: var(--hellblau-tief); } .brotkrumen a { color: var(--blau); text-decoration: none; } .brotkrumen a:hover { text-decoration: underline; } .brotkrumen [aria-current="page"] { font-weight: 600; color: var(--text); } /* 5. Startseite =========================================================== */ /* --- Hero --- */ .hero { position: relative; min-height: clamp(320px, 52vw, 600px); background-color: var(--blau); background-image: image-set(url("../img/hero-1100.jpg") 1x); background-size: cover; background-position: center 58%; } @media (min-width: 800px) { .hero { background-image: image-set(url("../img/hero-1920.jpg") 1x); } } /* Ab etwa 1200 px ist der Rahmen breiter, als das Foto hoch ist (Foto 2:1, Rahmen bis zu 3,2:1). Dann muss senkrecht beschnitten werden — und mit der gedeckelten Höhe von 600 px fiel die Unterkante des Wohnmobils weg. Zwei Stellschrauben dagegen: mehr Höhe, und der Ausschnitt rückt nach unten, damit oben der Himmel wegfällt statt unten das Fahrzeug. Unterhalb von 1200 px entsteht gar kein senkrechter Überstand, dort ist die Bildposition ohne Wirkung. Die Prozentwerte sind durchgerechnet, nicht geschätzt: das Fahrzeug endet im Bild bei y=861 von 900. Bei 1920 px bleiben darunter 17 px Luft. */ @media (min-width: 1200px) { .hero { min-height: clamp(600px, 40vw, 720px); background-position: center 88%; } } /* Ab 1600 px würde die 1920er Datei hochskaliert und weich werden. */ @media (min-width: 1600px) { .hero { background-image: image-set(url("../img/hero-2560.jpg") 1x); } } /* Sehr breite Bildschirme (WQHD, 4K, 21:9). Hier reicht die Höhe von 720 px nicht mehr, um das Fahrzeug im Bild zu halten. Der Preis ist, dass die Bergspitzen oben wegfallen — bei 3,5:1 auf einem 2:1-Foto ist das nicht zu vermeiden, und ein angeschnittenes Fahrzeug wäre der schlechtere Tausch. */ @media (min-width: 2000px) { .hero { min-height: clamp(720px, 36vw, 880px); background-position: center 96%; } } /* --- Mietkategorien --- */ .kategorien { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.2rem, 3vw, 2.2rem); } .kategorie { position: relative; display: flex; flex-direction: column; /* Wie im Mockup: das Bild sitzt eingerückt in der Karte, nicht bündig. overflow:hidden brauchen wir, damit die Fußleiste unten sauber in die Kartenrundung geschnitten wird — sie bricht aus dem Innenabstand aus. */ overflow: hidden; padding: .75rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); transition: box-shadow .22s ease, transform .22s ease; } .kategorie:hover { box-shadow: var(--schatten-hoch); transform: translateY(-3px); } /* Trägt das Foto und das darübergelegte Siegel. overflow:hidden sorgt dafür, dass das Siegel in der oberen linken Ecke von der Bildrundung beschnitten wird — es braucht dadurch selbst keinen Radius. */ .kategorie-bild { position: relative; overflow: hidden; border-radius: var(--radius-klein); } /* Das Seitenverhältnis muss dem der erzeugten Dateien entsprechen (900x600), sonst schneidet object-fit:cover die Fahrzeuge noch einmal an. */ .kategorie-foto { width: 100%; aspect-ratio: 9 / 6; object-fit: cover; } /* ADAC-Siegel oben links auf dem Wohnmobil-Foto, wie im Mockup. */ .kategorie-siegel { position: absolute; top: 0; left: 0; width: 23%; min-width: 82px; max-width: 134px; height: auto; } /* Die Fußleiste ist hellblau und läuft über die volle Kartenbreite. Dafür hebt sie den Innenabstand der Karte mit negativen Außenabständen wieder auf — ändert sich das Padding oben, muss es hier mitgeändert werden. */ .kategorie-fuss { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .75rem -.75rem -.75rem; padding: 1rem 1.25rem; background: var(--hellblau); } .kategorie-fuss h3 { margin: 0; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; } /* Die ganze Karte ist klickbar, ohne den Link zu verschachteln. */ .kategorie-link::after { content: ""; position: absolute; inset: 0; } .kategorien-claim { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: var(--text-leise); } .kategorien-claim strong { color: var(--blau); font-weight: 600; } /* --- Leistungen --- */ .leistungen { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.6rem); } .leistung { padding: 1.7rem 1.5rem; background: var(--blau-karte); border: 1px solid var(--blau-rand); border-radius: var(--radius); } .leistung-symbol { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 1.1rem; background: rgba(255, 204, 0, .16); border-radius: var(--radius-klein); color: var(--gelb); } .leistung-symbol svg { width: 24px; height: 24px; } .leistung h3 { margin-bottom: .45rem; font-size: 1.08rem; } .leistung p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--hellblau); } /* --- Fahrzeughandel --- */ .handel { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .handel-bild { align-self: center; } .handel-bild img { width: 100%; } .haken { display: grid; gap: .85rem; margin: 1.8rem 0 2rem; } .haken li { display: flex; align-items: flex-start; gap: .8rem; font-weight: 500; } .haken-symbol { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 26px; height: 26px; margin-top: .12rem; background: var(--blau); border-radius: 50%; color: var(--gelb); } .haken-symbol svg { width: 15px; height: 15px; } .handel-kontakt { display: flex; flex-wrap: wrap; gap: .9rem; } /* Kontaktknopf mit zwei Zeilen: Bezeichnung klein, Wert groß */ .knopf-kontakt { display: inline-flex; align-items: center; gap: .85rem; padding: .8rem 1.4rem; background: var(--blau); color: var(--weiss); border-radius: var(--radius-klein); text-decoration: none; transition: background-color .18s ease; } .knopf-kontakt:hover { background: var(--blau-tief); } .knopf-kontakt svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--gelb); } .knopf-kontakt span { display: block; } .knopf-kontakt .bezeichnung { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hellblau); } .knopf-kontakt .wert { font-weight: 700; } /* --- ADAC-Band --- */ .adac { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; } .adac-kachel { border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); } .adac-text p { color: var(--text-leise); } .adac-aktion { margin-top: 1.6rem; } /* 6. Über uns ============================================================= */ .ueber { display: grid; grid-template-columns: minmax(240px, 400px) 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; } .ueber-bild img { width: 100%; border-radius: var(--radius); box-shadow: var(--schatten-hoch); } .ueber-schluss { margin-top: clamp(2.5rem, 5vw, 4rem); text-align: center; font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); font-weight: 600; color: var(--blau); } /* 7. Kontakt ============================================================== */ .kontakt-claim { max-width: 46rem; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); text-align: center; font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: var(--text-leise); } .kontakt-raster { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.8rem, 4vw, 3rem); align-items: start; } /* --- Formular --- */ .formular-karte { padding: clamp(1.6rem, 3vw, 2.4rem); background: var(--hellblau); border-radius: var(--radius); } .formular-karte h2 { margin-bottom: .35rem; } .formular-karte .hinweis { color: var(--text-leise); font-size: .95rem; } .feld { margin-bottom: 1.1rem; } .feld label { display: block; margin-bottom: .35rem; font-weight: 600; font-size: .93rem; color: var(--blau); } .feld input, .feld textarea { width: 100%; padding: .8rem 1rem; font: inherit; font-size: .98rem; color: var(--text); background: var(--weiss); border: 1px solid var(--hellblau-tief); border-radius: var(--radius-klein); transition: border-color .16s ease, box-shadow .16s ease; } .feld textarea { min-height: 9.5rem; resize: vertical; } .feld input:focus, .feld textarea:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px rgba(16, 37, 94, .16); } .feld input::placeholder, .feld textarea::placeholder { color: #8791a8; } .feld input[aria-invalid="true"], .feld textarea[aria-invalid="true"] { border-color: #b3261e; } .feld-fehler { display: none; margin-top: .3rem; font-size: .87rem; color: #8c1d18; } .feld-fehler.zeigen-fehler { display: block; } /* Honigtopf gegen einfache Formularroboter — für Menschen unsichtbar */ .honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .formular-meldung { margin-top: 1.1rem; padding: .9rem 1.1rem; border-radius: var(--radius-klein); font-size: .95rem; } .formular-meldung[hidden] { display: none; } .formular-meldung.gut { background: #e3f4e8; color: #14512a; border: 1px solid #a8d8b8; } .formular-meldung.schlecht{ background: #fbe6e4; color: #8c1d18; border: 1px solid #eab6b1; } /* --- Infokarten --- */ .info-liste { display: grid; gap: 1rem; } .info-karte { display: flex; gap: 1.1rem; padding: 1.3rem 1.4rem; background: var(--blau); color: var(--weiss); border-radius: var(--radius); } .info-symbol { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 42px; height: 42px; background: rgba(255, 204, 0, .16); border-radius: var(--radius-klein); color: var(--gelb); } .info-symbol svg { width: 22px; height: 22px; } .info-karte h3 { margin: 0 0 .35rem; color: var(--weiss); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; } /* Ohne diese Regel bräuchte die Anschrift ein style-Attribut — und das verbietet die Content-Security-Policy. */ .info-karte address { font-style: normal; } .info-karte a { color: var(--weiss); text-decoration-color: var(--gelb); } .info-karte a:hover { color: var(--gelb); } .info-zeile { display: flex; justify-content: space-between; gap: 1rem; font-size: .96rem; } .info-zeile + .info-zeile { margin-top: .2rem; } .info-zeile dt { color: var(--hellblau); } .info-zeile dd { margin: 0; text-align: right; } .info-karte dl { margin: 0; } /* 8. Zwei-Klick-Flächen =================================================== */ /* Weder Karte noch Buchungswidget laden von selbst. Erst auf Klick. So bleibt die ausgelieferte Seite bei null Anfragen an fremde Server. Wer das ändert, muss die Datenschutzerklärung mitziehen. */ .zweiklick { position: relative; display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 5vw, 3.5rem) var(--rand); background: var(--hellblau); border: 1px solid var(--hellblau-tief); border-radius: var(--radius); text-align: center; } .zweiklick-flach { border-radius: 0; border-inline: 0; } .zweiklick-innen { max-width: 34rem; } .zweiklick h3 { margin-bottom: .5rem; font-size: 1.15rem; } .zweiklick p { margin-bottom: 1.3rem; font-size: .95rem; line-height: 1.6; color: var(--text-leise); } .zweiklick-symbol { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin: 0 auto 1.1rem; background: var(--weiss); border-radius: 50%; color: var(--blau); } .zweiklick-symbol svg { width: 28px; height: 28px; } /* Karte */ .karte-flaeche { min-height: clamp(300px, 42vw, 460px); background: var(--hellblau); } .karte-flaeche .leaflet-container { min-height: inherit; height: 100%; } #karte { height: clamp(300px, 42vw, 460px); } /* Der Leaflet-Marker in Markenfarben, als eigenes Symbol statt der mitgelieferten Bilddateien — spart drei weitere Dateien. */ .karten-nadel { display: block; filter: drop-shadow(0 3px 5px rgba(0,0,0,.35)); } .karte-hinweis { margin-top: .8rem; font-size: .85rem; color: var(--text-leise); text-align: center; } /* Buchungswidget */ .widget-flaeche { min-height: 200px; } .widget-flaeche:empty { display: none; } /* 9. Fußzeile ============================================================= */ .fuss { padding-block: clamp(2.8rem, 6vw, 4rem) 0; background: var(--blau); color: var(--hellblau); font-size: .95rem; } .fuss-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.6rem, 4vw, 2.8rem); } .fuss h2 { margin-bottom: 1rem; color: var(--weiss); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; } .fuss a { color: var(--hellblau); text-decoration: none; } .fuss a:hover { color: var(--gelb); text-decoration: underline; } .fuss li + li { margin-top: .5rem; } .fuss dl { margin: 0; } .fuss dt { color: var(--weiss); font-weight: 600; } .fuss dd { margin: 0 0 .7rem; } .fuss dd:last-child { margin-bottom: 0; } .sozial { display: flex; gap: .7rem; } .sozial a { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: rgba(255, 255, 255, .1); border-radius: 50%; color: var(--weiss); transition: background-color .18s ease, color .18s ease; } .sozial a:hover { background: var(--gelb); color: var(--blau); } .sozial svg { width: 20px; height: 20px; } .fuss-schluss { margin-top: clamp(2rem, 5vw, 3rem); padding-block: 1.3rem; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .87rem; } .fuss-schluss-innen { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center; justify-content: space-between; } /* 10. Rechtstexte ========================================================= */ .rechtstext { padding-block: var(--luft-abschnitt); } .rechtstext h2 { margin-top: 2.2rem; font-size: 1.25rem; } .rechtstext h3 { margin-top: 1.6rem; font-size: 1.05rem; } .rechtstext ul { list-style: disc; padding-left: 1.3rem; margin-bottom: 1.1em; } .rechtstext li { margin-bottom: .4rem; } /* Sichtbare Markierung für alles, was der Kunde noch zuliefern muss. Vor dem Livegang muss diese Klasse aus dem Quelltext verschwunden sein. */ .luecke { padding: 1rem 1.2rem; margin-bottom: 1.2em; background: #fff8e1; border-left: 4px solid var(--gelb); border-radius: 0 var(--radius-klein) var(--radius-klein) 0; font-size: .95rem; color: #5c4700; } .luecke strong { color: #3d2f00; } /* ========================================================================== Handy und Tablet ========================================================================== */ @media (max-width: 980px) { .leistungen { grid-template-columns: repeat(2, 1fr); } .fuss-raster { grid-template-columns: repeat(2, 1fr); } .handel, .kontakt-raster { grid-template-columns: 1fr; } .handel-bild { order: -1; max-width: 30rem; } .ueber { grid-template-columns: 1fr; } .ueber-bild { max-width: 26rem; } .adac { grid-template-columns: 1fr; justify-items: start; } .adac-kachel { max-width: 15rem; } } @media (max-width: 760px) { /* Navigation klappt unter die Kopfzeile */ .nav-schalter { display: inline-flex; } .haupt-nav { position: absolute; left: 0; right: 0; top: 100%; display: none; padding: .5rem var(--rand) 1.2rem; background: var(--weiss); border-bottom: 1px solid var(--linie); box-shadow: var(--schatten-hoch); } .haupt-nav.offen { display: block; } .haupt-nav ul { flex-direction: column; align-items: stretch; gap: 0; } .haupt-nav a { padding: .85rem .2rem; border-bottom: 1px solid var(--linie); } .haupt-nav a:hover { border-bottom-color: var(--gelb); } .haupt-nav li:last-child a { border-bottom: 0; } .kategorien { grid-template-columns: 1fr; } .kategorie-fuss { flex-direction: column; align-items: flex-start; } .kategorie-fuss .knopf { width: 100%; } .handel-kontakt .knopf-kontakt { width: 100%; } } @media (max-width: 560px) { .leistungen { grid-template-columns: 1fr; } .fuss-raster { grid-template-columns: 1fr; } .info-zeile { flex-direction: column; gap: .1rem; } .info-zeile dd { text-align: left; } .fuss-schluss-innen { justify-content: flex-start; } } /* ========================================================================== Druck ========================================================================== */ @media print { .kopf, .fuss, .zweiklick, .nav-schalter, .zum-inhalt { display: none !important; } body { color: #000; } .abschnitt { padding-block: 1rem; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; } }