/* =========================================================================== Kanzlei — aufsetzendes Stylesheet Wird nach site.css geladen (siehe partials/head.blade.php) und ändert nur, was diese Branche anders braucht. Alles Übrige — Blockarten, Formulare, Ratgeber, Rechtstexte — bleibt das des Basis-Themes und wird hier nicht ein zweites Mal gepflegt. Die Haltung dahinter: eine Kanzleiseite darf nicht nach Werbung aussehen. Deshalb viel Weissraum, eine einzige Akzentfarbe, zentrierte Ueberschriften mit einem duennen Strich darunter und Grossbuchstaben statt Farbflaechen. Was Aufmerksamkeit bekommt, ist die Rufnummer. =========================================================================== */ :root { /* Die Kundenfarben kommen aus der Datenbank und stehen als Variablen im ; hier steht nur, was das Theme selbst festlegt. */ --color-bg-muted: #f2f2f2; --color-border: #dcdcdc; --color-text: #2b2b2b; --color-text-muted: #6b6b6b; --radius-sm: 2px; --radius-md: 3px; --radius-lg: 3px; --header-height: 5rem; /* Hoehe des Aufmachers. Nicht 100vh: ein Aufmacher, der den ganzen Bildschirm fuellt, verbirgt genau die Rechtsgebiete, wegen derer jemand gekommen ist. */ --law-hero-height: 34rem; } :root[data-theme="dark"] { --color-bg-muted: #131313; --color-border: #333333; --color-text: #e8e8e8; --color-text-muted: #a0a0a0; } /* ---- Kopfbereich ---------------------------------------------------------- Bleibt beim Scrollen stehen. Eine Kanzleiseite wird gelesen, nicht ueberflogen — wer unten im Text auf eine Frage stoesst, soll den Weg zum Rechtsgebiet nicht suchen muessen. --------------------------------------------------------------------------- */ .law-header { position: sticky; top: 0; z-index: 50; background: var(--color-bg); border-bottom: 1px solid var(--color-border); } .law-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: var(--header-height); } .law-brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-text); text-decoration: none; } .law-brand__mark { color: var(--color-primary); font-size: 2.25rem; font-weight: 700; line-height: 1; } .law-brand__name { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .law-brand__logo { max-height: 3rem; width: auto; } .law-header__actions { display: flex; align-items: center; gap: var(--space-3); } .law-header__phone { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-primary); font-weight: 600; text-decoration: none; white-space: nowrap; } .law-header__phone-icon { width: 1.1rem; height: 1.1rem; } /* ---- Navigation ----------------------------------------------------------- Die zweite Ebene liegt als Flaeche unter ihrem Punkt. Aufgeklappt wird per Klick —
/ aus dem gemeinsamen Einschub. Ein Menue, das beim Darueberfahren aufgeht, ist auf dem Telefon nicht bedienbar und verschwindet am Schreibtisch, sobald die Maus danebengeraet. --------------------------------------------------------------------------- */ .law-nav__list { display: flex; align-items: center; gap: var(--space-6); margin: 0; padding: 0; list-style: none; } .law-nav__list .menu__item { position: relative; margin: 0; padding: 0; } .law-nav__list a, .law-nav__list .menu__summary { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-2) 0; color: var(--color-text); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; cursor: pointer; list-style: none; } .law-nav__list .menu__summary::-webkit-details-marker { display: none; } .law-nav__list a:hover, .law-nav__list .menu__summary:hover, .law-nav__list a[aria-current="page"] { color: var(--color-primary); } .law-nav__list a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--color-primary); } .law-nav__list .menu__chevron svg { width: 0.9rem; height: 0.9rem; } .law-nav__list .menu__dropdown[open] > .menu__summary { color: var(--color-primary); } .law-nav__list .menu__children { position: absolute; top: 100%; left: 0; z-index: 60; min-width: 15rem; margin: 0; padding: var(--space-3) 0; list-style: none; background: var(--color-bg); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); } .law-nav__list .menu__children li { margin: 0; padding: 0; } .law-nav__list .menu__children a { display: block; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.02em; text-transform: none; } /* Das Paragrafenzeichen vor jedem Unterpunkt — es macht aus einer Liste von Woertern eine Liste von Rechtsgebieten. */ .law-nav__list .menu__children a::before { content: "§"; margin-right: 0.5em; color: var(--color-primary); font-weight: 700; } .law-nav__list .menu__children a:hover { background: var(--color-bg-muted); } .law-nav__phone { display: none; } /* ---- Aufklappmenue auf schmalen Bildschirmen ------------------------------ */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: transparent; cursor: pointer; } .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 1.25rem; height: 2px; background: var(--color-text); } .nav-toggle__bars { position: relative; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; } .nav-toggle__bars::before { top: -6px; } .nav-toggle__bars::after { top: 6px; } @media (max-width: 63.99rem) { .nav-toggle { display: inline-flex; } .law-header__phone-number { display: none; } .law-header__inner { position: relative; } .law-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: var(--space-4) var(--space-6) var(--space-6); background: var(--color-bg); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-md); } .law-header[data-nav-open="true"] .law-nav { display: block; } .law-nav__list { flex-direction: column; align-items: stretch; gap: 0; } .law-nav__list .menu__item { border-bottom: 1px solid var(--color-border); } .law-nav__list a, .law-nav__list .menu__summary { justify-content: space-between; padding: var(--space-4) 0; } /* Aufgeklappt steht die zweite Ebene im Fluss und nicht als schwebende Flaeche — auf dem Telefon ist fuer ein Aufklappfenster kein Platz. */ .law-nav__list .menu__children { position: static; min-width: 0; padding: 0 0 var(--space-3); border: 0; box-shadow: none; background: transparent; } .law-nav__list .menu__children a { padding: var(--space-3) 0 var(--space-3) var(--space-4); } .law-nav__phone { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); color: var(--color-primary); font-weight: 700; text-decoration: none; } .law-nav__phone-icon { width: 1.1rem; height: 1.1rem; } } /* ---- Aufmacher ------------------------------------------------------------ Bild dahinter, Text darueber, alles mittig. Der dunkle Schleier liegt als eigene Ebene ueber dem Bild statt als Filter auf ihm: so bleibt der Text lesbar, egal wie hell das Motiv ist. --------------------------------------------------------------------------- */ .law-hero { position: relative; display: flex; align-items: center; min-height: var(--law-hero-height); padding: var(--space-16) 0; color: #ffffff; background: #1c2733; overflow: hidden; } .law-hero__media { position: absolute; inset: 0; } .law-hero__media picture, .law-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .law-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 20, 28, 0.35), rgba(12, 20, 28, 0.65)); } .law-hero__inner { position: relative; text-align: center; } .law-hero__kicker { margin: 0 0 var(--space-2); font-size: var(--text-xl); font-weight: 400; } .law-hero__heading { /* Ausdrueckliche Farbe: Ueberschriften tragen sonst die dunkle Sekundaerfarbe und verschwinden im Aufmacher. */ color: #ffffff; margin: 0 0 var(--space-8); font-size: var(--text-3xl); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .law-hero__subheading { margin: 0 0 var(--space-2); font-size: var(--text-xl); } .law-hero__address { margin: 0 0 var(--space-8); font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; } .law-hero__contact { margin: 0 0 var(--space-8); } .law-hero__contact p { margin: 0 0 var(--space-1); font-size: var(--text-sm); } .law-hero__contact-label { margin-bottom: var(--space-3); font-size: var(--text-lg); font-weight: 600; } .law-hero__contact a { color: #ffffff; font-weight: 700; } /* Die Wege unter dem Aufmacher: flache Kaesten mit farbiger Oberkante. Bewusst gleich gewichtet — welcher der richtige ist, weiss der Besucher besser als wir. */ .law-hero__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); } .law-hero__link { min-width: 9rem; padding: var(--space-2) var(--space-4); border-top: 3px solid var(--color-primary); background: rgba(255, 255, 255, 0.85); color: #1c2733; font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; } .law-hero__link:hover { background: #ffffff; } /* ---- Seiteninhalt --------------------------------------------------------- Abschnittsueberschriften stehen mittig ueber einem duennen Strich — das ist die Handschrift dieses Auftritts und der Grund, warum die Seite ohne eine einzige Farbflaeche gegliedert wirkt. --------------------------------------------------------------------------- */ .law-page { padding-top: var(--space-16); } /* Der Seitenkopf einer Unterseite steht mittig wie alles andere. Links ausgerichtet ueber mittigen Abschnitten sieht er aus, als gehoerte er nicht dazu. */ .page__header { max-width: 44rem; margin: 0 auto var(--space-12); text-align: center; } .page__intro { margin-left: auto; margin-right: auto; } /* Der Blockabschnitt des Basis-Themes traegt eine farbige Leiste mit weisser Ueberschrift und einen Rahmen in derselben Farbe. Das ist die Handschrift dort und hier die falsche: acht Symbolkacheln unter einer roten Leiste sehen nach Angebotsblatt aus. Also Rahmen und Fuellung weg, Ueberschrift mittig ueber einem duennen Strich. Gilt fuer alle Seiten dieses Auftritts und nicht nur fuer die Startseite — eine Unterseite, die anders gegliedert ist als die Startseite, wirkt wie eine fremde Webseite. */ .content-card { margin-bottom: var(--space-16); padding: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; } .content-card__heading { max-width: 44rem; margin: 0 auto var(--space-8); padding: 0 0 var(--space-4); border-bottom: 2px solid var(--color-primary); background: transparent; color: var(--color-text); font-size: var(--text-2xl); font-weight: 400; letter-spacing: 0.06em; text-align: center; text-transform: uppercase; } .content-card__body { max-width: none; padding: 0; } /* Fliesstext bleibt bei der Lesebreite und steht mittig; Raster duerfen die volle Breite nehmen. Unterschieden am Klassenattribut: was aus dem Editor kommt, hat keines — was eine Blockart ausgibt, immer. Ohne diese Unterscheidung stuende auch das Kachelraster in Lesebreite und haette drei Spalten statt fuenf. */ .content-card__body > p:not([class]), .content-card__body > ul:not([class]), .content-card__body > ol:not([class]), .content-card__body > h2:not([class]), .content-card__body > h3:not([class]), .content-card__body > h4:not([class]), .content-card__body > blockquote:not([class]) { max-width: var(--measure); margin-left: auto; margin-right: auto; } /* ---- Kontaktband ueber dem Fussbereich ------------------------------------ */ .law-contactband { padding: var(--space-16) 0; background: var(--color-bg-muted); text-align: center; } .law-contactband__label { margin: 0 0 var(--space-6); font-size: var(--text-xl); } .law-contactband__actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin: 0; } .law-contactband__actions .button { min-width: 18rem; } /* ---- Fussbereich ---------------------------------------------------------- */ .law-footer { padding: var(--space-12) 0; background: #2b2b2b; color: #d6d6d6; font-size: var(--text-sm); } .law-footer__columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-8); } .law-footer__heading { margin: 0 0 var(--space-4); color: #ffffff; font-weight: 600; letter-spacing: 0.04em; } .law-footer__address, .law-footer__text { margin: 0 0 var(--space-4); font-style: normal; line-height: 1.7; } .law-footer a { color: #d6d6d6; } .law-footer a:hover { color: #ffffff; } .law-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); } .law-footer__legal a { text-decoration: underline; } /* ---- Feinheiten ----------------------------------------------------------- */ @media (min-width: 48rem) { .law-hero__heading { font-size: var(--text-4xl); } .law-contactband__actions { flex-direction: row; justify-content: center; } }