/* ========================================================= BRUECKE — Elementors DOM auf die Gestaltung dieser Seite ========================================================= Die Gestaltung in pixelwerk.css ist fuer handgeschriebenes HTML entstanden. Elementor baut anders: jedes Widget bekommt einen Rahmen-
mit eigener Klasse, Container bringen eigene Flex-Werte mit, und Astra setzt eigene Schriften. Diese Datei uebersetzt zwischen beidem. Sie wird NACH pixelwerk.css geladen. Jede Regel hier hat einen Grund, der dabeisteht — wer eine entfernt, soll wissen, was zurueckkommt. ========================================================= */ /* --------------------------------------------------------- 1 · Ueberschriften und Fliesstext gehoeren dem Rahmen --------------------------------------------------------- Elementor setzt die CSS-Klasse an den RAHMEN des Widgets, nicht an das

darin. Astra wiederum setzt fuer h1–h6 eine eigene Schrift (Roboto) mit hoeherer Spezifitaet als unsere Klassen — gemessen: h1 kam als "Roboto, sans-serif" heraus statt Playfair Display. Loesung: die Ueberschrift im Widget erbt alles vom Rahmen. Damit wirkt die Klasse am Rahmen genau so, wie sie in der Entwurfsseite am

wirkte. --------------------------------------------------------- */ /* Die Auszeichnung des Elementtyps ist noetig, weil Astra eine Regel mit genau dieser Form ausgibt: .elementor-widget-heading h1.elementor-heading-title{line-height:1.4em} Ohne den Elementtyp waere unsere Regel weniger spezifisch und verloere. Gemessen: Rahmen 72px Zeilenhoehe,

darin 100,8px — die Ueberschrift brach dadurch auf drei Zeilen statt zwei. Das vorangestellte "body" hebt uns eine Stufe darueber, ohne !important. */ body .elementor-widget-heading h1.elementor-heading-title, body .elementor-widget-heading h2.elementor-heading-title, body .elementor-widget-heading h3.elementor-heading-title, body .elementor-widget-heading h4.elementor-heading-title, body .elementor-widget-heading h5.elementor-heading-title, body .elementor-widget-heading h6.elementor-heading-title, body .elementor-widget-heading p.elementor-heading-title, body .elementor-widget-heading div.elementor-heading-title, body .elementor-widget-heading span.elementor-heading-title{ font-family:inherit; font-size:inherit; font-weight:inherit; line-height:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; margin:0; } .elementor-widget-text-editor{line-height:inherit} .elementor-widget-text-editor p:last-child{margin-bottom:0} /* Der Rahmen selbst soll sich wie der ersetzte Absatz verhalten. */ .elementor-widget-heading, .elementor-widget-text-editor{display:block} /* --------------------------------------------------------- 2 · Knoepfe --------------------------------------------------------- Elementor gibt aus. Unsere .btn-Regeln greifen dort nicht — gemessen: Hintergrund weiss UND Schrift weiss, also ein unsichtbarer Knopf. .elementor-button wird deshalb zum Zwilling von .btn erklaert. Die Auspraegung (solid/ghost/light) steht als Klasse am Rahmen. --------------------------------------------------------- */ .elementor-widget-button .elementor-button{ display:inline-flex;align-items:center;justify-content:center;gap:clamp(6px,.8vw,10px); padding:clamp(12px,1.5vw,15px) clamp(17px,2.6vw,28px); border-radius:999px;font-family:var(--schrift-text);font-weight:500; font-size:clamp(.85rem,1.05vw,.95rem);letter-spacing:.01em; white-space:nowrap;border:0;background:none;text-decoration:none; transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease); } .elementor-widget-button .elementor-button-content-wrapper{gap:0} .elementor-widget-button .elementor-button-text{flex-grow:0} .hat-solid .elementor-button{background:var(--ink);color:var(--on-ink)} .hat-solid .elementor-button:hover{background:var(--clay-deep);color:var(--on-ink)} .hat-light .elementor-button{background:var(--paper);color:var(--ink)} .hat-light .elementor-button:hover{background:var(--clay-tint);color:var(--ink)} .hat-ghost .elementor-button{border:1px solid rgba(20,17,16,.28);color:var(--ink)} .hat-ghost .elementor-button:hover{background:rgba(20,17,16,.06)} .ink-bg .hat-ghost .elementor-button{border-color:var(--ink-line);color:var(--on-ink)} .ink-bg .hat-ghost .elementor-button:hover{background:rgba(243,237,233,.08)} /* Die Knopfreihe soll nicht die ganze Breite fuellen. */ .hero__actions>.elementor-widget-button, .book__knopf>.elementor-widget-button, .menu__foot>.elementor-widget-button{width:auto} /* --------------------------------------------------------- 3 · Container zuruecksetzen --------------------------------------------------------- Elementor gibt jedem Container eigene Innenabstaende, eine Breite und display:flex mit. Unsere Abschnitte bringen ihre Masse selbst mit — ohne das Zuruecksetzen liegen zwei Rastersysteme uebereinander. --------------------------------------------------------- */ .e-con,.e-con-inner{--padding-block-start:0;--padding-block-end:0; --padding-inline-start:0;--padding-inline-end:0; --gap:0px;--width:100%;--content-width:100%; /* Elementor stellt Container auf flex-wrap:wrap. Eine Flex-SPALTE mit wrap bricht bei Platzmangel in eine zweite Spalte NEBEN sich um. Genau das ist passiert: der komplette Kopfbereich stand auf dem Handy bei x=1296 statt bei x=0 — also ausserhalb des Bildschirms. Sichtbar waren nur Navi und Laufband. Im Entwurf ist nowrap der Normalfall; Container, die wirklich umbrechen sollen (hero__actions, tabs, ba__cases), sagen es selbst und schlagen diese Zeile ueber ihre Spezifitaet. */ --flex-wrap:nowrap; /* UND die Mobilfassung. Elementor setzt eigens --flex-wrap-mobile:wrap und wertet sie unter 768px aus. Deshalb war der Desktop in Ordnung und nur das Handy zerlegt — der Fehler war unter 768px unsichtbar, wenn man nur am Schreibtisch prueft. */ --flex-wrap-mobile:nowrap; --flex-wrap-tablet:nowrap} .e-con>.e-con-inner{padding:0} /* HIER STANDEN FESTE SPALTENWERTE — entfernt am 25.08.2026. Sie lagen ausserhalb jeder Medienabfrage und waren spezifischer als die Mobilregeln in pixelwerk.css. Folge: die Spalten stapelten sich auf Handy und Tablet NIE. Gemessen bei 390px Breite: .hero__grid 398px statt 587px, .ba 320px statt 615px — beides, weil zweispaltig geblieben. Die Spezifitaet wird jetzt an der ORIGINALREGEL angehoben, durch bauen/spezifitaet.py. Damit gilt sie in jeder Medienabfrage mit dem dort hinterlegten Wert. An dieser Stelle stehen keine Layoutwerte mehr. Wer hier wieder welche eintraegt, zerstoert die mobile Ansicht. */ .e-con.menu__head>.elementor-widget-text-editor{max-width:60ch;flex:0 1 auto} /* --------------------------------------------------------- 4 · HTML-Bloecke sollen im Raster nicht mitzaehlen --------------------------------------------------------- Ein HTML-Widget bringt einen eigenen Rahmen mit. In einem Raster wird dieser Rahmen zur Rasterzelle — und das eigentliche Element darin verliert seine Breite. Gemessen: .ba__stage war 470px statt 660px. display:contents loest den Rahmen aus dem Layout heraus; das Kind rutscht an seine Stelle. --------------------------------------------------------- */ /* Gilt fuer JEDEN HTML-Block dieser Seite, nicht nur fuer eine Liste. Die Aufzaehlung war unvollstaendig: .hero__arch fehlte, und dort mass der Rahmen 350x0 waehrend das Foto darin 350x467 gross war — der Kopfbereich auf dem Handy war dadurch 234px statt 587px hoch. Elementor gibt Widget- Rahmen in Flex-Containern eine eigene Hoehe; display:contents nimmt den Rahmen aus dem Layout, und das Kind steht da, wo es im Entwurf stand. */ .e-con>.elementor-widget-html{display:contents} /* --------------------------------------------------------- 5 · Preistafeln --------------------------------------------------------- Die Reiterlogik schaltet die Tafeln ueber das hidden-Attribut um. Elementors .e-con{display:flex} schlaegt die Voreinstellung von [hidden] — gemessen: alle vier Tafeln standen gleichzeitig da, .menu__body war 1924px hoch statt rund 500px. --------------------------------------------------------- */ .panel[hidden]{display:none !important} /* --------------------------------------------------------- 6 · Sprungmarken --------------------------------------------------------- Elementors Anker-Widget bringt einen Rahmen mit, der im Fluss Platz belegt und Abschnittsabstaende verfaelscht. --------------------------------------------------------- */ .elementor-widget-menu-anchor{position:absolute;height:0;margin:0;padding:0} .section{position:relative} /* --------------------------------------------------------- 7 · Astra zuruecknehmen --------------------------------------------------------- Astra setzt Randabstaende und eine Hoechstbreite auf den Inhaltsbereich. Unsere Abschnitte laufen ueber die volle Breite und bringen ihre eigenen Raender mit (.wrap). --------------------------------------------------------- */ .ast-container,.site-content .ast-container{max-width:none;padding:0} .site-content>.ast-container>#primary{margin:0;padding:0;width:100%;max-width:none} #primary,#content{margin:0;padding:0} .entry-content>.elementor{margin:0} .ast-page-builder-template .site-content>.ast-container{display:block} /* --------------------------------------------------------- 8 · Abstaende der Container --------------------------------------------------------- Elementor gibt jedem Container einen Grundabstand zwischen den Widgets (--gap, Voreinstellung 20px). Im Entwurf entstehen die Abstaende aber ueber die Aussenabstaende der Elemente selbst. Beides zusammen macht jede Preiszeile 20px zu hoch — gemessen: 127px statt 107px. Genannt werden nur unsere eigenen Huellen. .row__meta, .hero__actions und .menu__foot behalten ihren gestalteten Abstand. --------------------------------------------------------- */ .e-con.row__links,.e-con.hero__text,.e-con.hero__arch,.e-con.kennzahl, .e-con.ba__kopf,.e-con.book__text,.e-con.stimmen__kopf,.e-con.menu__titel, .e-con.kontakt__links,.e-con.kontakt__rechts,.e-con.panel,.e-con.book__buchung, .e-con.section{gap:0} /* .wrap steht hier NICHT — zum zweiten Mal aus demselben Grund. Die Rasterhuellen heissen "wrap dual", "wrap ba", "wrap book", "wrap hero__grid". Beide Klassen sitzen am selben Element, also entscheidet die Reihenfolge — und diese Datei laedt nach pixelwerk.css. Ein gap:0 auf .wrap loescht damit den Spaltenabstand JEDES Rasters. Gemessen 25.08.2026: Kontaktspalten 0px Abstand statt 86,4px; die Kontaktwege klebten an "Frag einfach". */ /* --------------------------------------------------------- 9 · Kontaktformular --------------------------------------------------------- Der Entwurf trug ein Formular ohne Versand. Hier steht das Formular-Widget von Elementor Pro: es versendet wirklich und protokolliert die Anfragen. Es bringt aber eigene Masse mit — gemessen: 376px hoch statt 579px. Die folgenden Regeln uebertragen die Gestaltung von .field auf Elementors Feldgruppen. --------------------------------------------------------- */ .elementor-widget-form .elementor-form-fields-wrapper{gap:16px;margin:0} .elementor-widget-form .elementor-field-group{ display:grid;gap:7px;padding:0;margin:0;width:100%;flex-basis:100%;max-width:100%; } .elementor-widget-form .elementor-field-group>label{ font-size:.72rem;letter-spacing:.16em;text-transform:uppercase; font-weight:600;opacity:.7;padding:0; } .elementor-widget-form .elementor-field-group .elementor-field{ font:inherit;font-size:.98rem;padding:14px 16px; border:1px solid rgba(20,17,16,.2);border-radius:10px; background:var(--paper);color:var(--ink); transition:border-color .3s var(--ease);width:100%; } .elementor-widget-form .elementor-field-group .elementor-field:focus{ outline:none;border-color:var(--ink);box-shadow:none; } .elementor-widget-form textarea.elementor-field{min-height:130px;resize:vertical} /* Der Absendeknopf traegt die Gestaltung des vollflaechigen Knopfes. */ .elementor-widget-form .elementor-button[type="submit"]{ display:inline-flex;align-items:center;justify-content:center; padding:clamp(12px,1.5vw,15px) clamp(17px,2.6vw,28px); border-radius:999px;background:var(--ink);color:var(--on-ink); font-family:var(--schrift-text);font-weight:500; font-size:clamp(.85rem,1.05vw,.95rem);border:0;width:auto; } .elementor-widget-form .elementor-button[type="submit"]:hover{background:var(--clay-deep)} .elementor-widget-form .elementor-field-type-submit{justify-items:start;margin-top:2px} /* --------------------------------------------------------- 10 · Reine Huellcontainer sind Bloecke, keine Flex-Kaesten --------------------------------------------------------- Im Entwurf sind das schlichte
. Elementor macht aus jedem Container einen Flex-Kasten. Das aendert das Verhalten der Kinder grundlegend: .hero__photo hat ein festes Seitenverhaeltnis 3:4 und holt seine Hoehe daraus. Als Flex-Kind bekommt es stattdessen die Hoehe des Elternteils — die ist auto, also 0. Gemessen auf 390px: .hero__photo 350x0, der ganze Kopfbereich 234px statt 587px. Genannt werden nur Container OHNE eigene display-Regel. Alle anderen (hero__grid, ba, book, dual, row, hero__actions ...) bringen ihre Anordnung selbst mit und stehen hier bewusst nicht. */ .e-con.hero__text,.e-con.hero__arch,.e-con.kennzahl,.e-con.ba__kopf, .e-con.menu__titel,.e-con.panel,.e-con.row__links,.e-con.stimmen__kopf, .e-con.book__text,.e-con.book__knopf,.e-con.book__buchung, .e-con.kontakt__links,.e-con.kontakt__rechts{display:block} /* .wrap steht hier BEWUSST NICHT. Die Rasterhuellen heissen "wrap dual", "wrap ba", "wrap hero__grid" — beide Klassen am selben Element. .e-con.wrap{display:block} haette dort das Raster geschlagen und die Spalten auch am Desktop gestapelt. Gemessen: Kontakt 1432px statt 986px, Seite 7222px statt 6082px. */ /* --------------------------------------------------------- 11 · Hoehe des Bogen-Echos --------------------------------------------------------- Das Echo hinter dem Portraet holt seine Hoehe aus aspect-ratio 3/4. Im WordPress-Aufbau wurde sie auf die volle Hoehe des Kopfbereichs gesetzt — gemessen 1000px statt 405px. Das Echo war dadurch ein uebergrosser Streifen statt einer Bogenform. Die Breiten des Bogens stehen BEWUSST nicht hier: sie haengen an zwei Medienabfragen (max-width:767px und zusaetzlich max-height:680px) und werden an der Originalregel angehoben, nicht dupliziert. Ein frueherer Versuch mit fest eingetragenen Werten hatte die falsche Abfrage (max-width:480px) und machte das Portraet auf dem Handy zu klein. */ .e-con.hero::before{height:auto} /* --------------------------------------------------------- 12 · Kein Spaltenumbruch auf kleinen Schirmen --------------------------------------------------------- Elementor fuehrt eine eigene Regel: @media (max-width:767px){ .e-con.e-flex{--flex-wrap:var(--flex-wrap-mobile)} } mit --flex-wrap-mobile:wrap. Eine Flex-SPALTE mit wrap bricht bei Platzmangel in eine zweite Spalte NEBEN sich um. Genau das ist passiert: der komplette Kopfbereich stand bei x=1296 statt bei x=0, also ausserhalb des 390px breiten Bildschirms. Sichtbar waren nur Navi und Laufband — die Seite sah aus, als fehle der halbe Inhalt. Der Fehler ist am Desktop unsichtbar. Wer nur am Schreibtisch prueft, findet ihn nie. Die Variable an .e-con zu setzen reicht nicht: ein spaeterer Elementor-Stil ueberschreibt sie. Deshalb hier dieselbe Spezifitaet in derselben Medienabfrage — diese Datei laedt danach und gewinnt. --------------------------------------------------------- */ @media (max-width:767px){ .e-con.e-flex{--flex-wrap:nowrap} } @media (max-width:1024px){ .e-con.e-flex{--flex-wrap:nowrap} } /* --------------------------------------------------------- 13 · Verweise bleiben in ihrer Farbe --------------------------------------------------------- Astra faerbt jeden Verweis beim Ueberfahren blau: a:hover,a:focus{color:var(--ast-global-color-1)} Das ist spezifischer (0,1,1) als unsere Grundregel a{color:inherit} (0,0,1). Folge: In der Menueschublade wurden "Schliessen", die Menuepunkte, die WhatsApp-/Instagram-Knoepfe, Impressum, Datenschutz und die Pixelwerk-Zeile beim Ueberfahren blau. Im Entwurf passiert das nicht — dort gibt es kein fremdes Stylesheet. Das vorangestellte "body" hebt uns auf (0,1,2), ohne !important. Eigene Hover-Wirkungen bleiben unberuehrt: sie haengen an Klassen und sind damit ohnehin spezifischer. */ /* Genannt werden die Bauteile, in denen Astras Blau auftauchte. Eine pauschale Regel "body a:hover" war zu grob: sie hat den Farbwechsel der Fussverweise mitgenommen, obwohl deren eigene Regel spezifischer aussah. Der Fussbereich fehlt hier deshalb bewusst — er regelt seinen Hover selbst (.footer a:hover{color:var(--clay)}). */ body .nav a:hover, body .nav a:focus, body .drawer a:hover, body .drawer a:focus, body .rail a:hover, body .rail a:focus, body .mobar a:hover, body .mobar a:focus, body .wege a:hover, body .wege a:focus, body .stimmen a:hover, body .stimmen a:focus, body .elementor a:hover, body .elementor a:focus{color:inherit} /* :visited steht ABSICHTLICH in einer eigenen Regel. Browser behandeln Farbangaben in Regeln, deren Selektorliste :visited enthaelt, aus Datenschutzgruenden gesondert — die Regel kann dadurch fuer die ganze Liste anders wirken als erwartet. Gemessen: der Farbwechsel der Fussverweise blieb aus, obwohl die eigene Regel spezifischer war. */ body a:visited{color:inherit} /* Astra unterstreicht Verweise im Inhaltsbereich beim Ueberfahren. */ body .entry-content a:hover, body .elementor a:hover{text-decoration:none} /* Die EINE eigene Farbwirkung wiederherstellen, die von der Zeile oben mitgenommen wurde: im Fussbereich werden Verweise beim Ueberfahren hell (--clay). Alle anderen Hover-Wirkungen dieser Seite aendern keine Farbe, sondern Rahmen, Innenabstand oder einen Unterstrich — die sind unberuehrt: .nav__links a:hover::after Unterstrich waechst von links .drawer__nav a:hover rueckt 10px ein .drawer__knopf:hover Hintergrund wird heller .made:hover wird voll deckend .tab:hover Rahmen wird heller Erfundene Hover-Wirkungen gehoeren NICHT hierher. Ein frueherer Versuch mit opacity:.7 hat das Verhalten der Menueschublade veraendert — sie rueckt ein, sie blendet nicht ab. */ /* Der Schliessen-Knopf der Menueschublade wurde beim Ueberfahren WEISS — also unsichtbar auf hellem Grund. Im Entwurf bleibt er dunkel; es gibt dort gar keine Hover-Regel fuer ihn. Die Faerbung kommt aus Astras Knopfstilen. Gemessen mit erzwungenem :hover — rgb(20,17,16) -> rgb(255,255,255). */ body .drawer__close:hover, body .drawer__close:focus, body .drawer__knopf:hover, body .drawer__knopf:focus{color:var(--ink)} /* Hoehere Spezifitaet fuer den Fuss: die Klasse ink-bg steht am selben Element und hebt uns ueber die allgemeine Zeile. */ body .footer.ink-bg a:hover{color:var(--clay)} /* --------------------------------------------------------- 14 · Astras Knopfformatierung zuruecknehmen --------------------------------------------------------- Astra gestaltet JEDES