/* ========================================================================== Hotel Krone, Herxheim-Hayna | krone.css (Design v2, Relaunch 2026) -------------------------------------------------------------------------- Ersetzt krone-base.css + krone-upgrade.css in EINER Datei. Grundlage: Mini-Brand-Kit v2 (11.09.2026), Tonalitaet v5 (18.09.2026), BFSG-Vollaudit Rev. 4. Laedt nach generate-style, damit gleiche Spezifitaet gewinnt. KONTRASTTABELLE (WCAG 1.4.3, Text braucht 4,5:1, Grossschrift ab 24 px bzw. 18,66 px fett braucht 3:1, Grafik/Linien 3:1): Tannengruen #27352A auf Creme #F4F0E6 11,3:1 Standard fuer Text Creme #F4F0E6 auf Tannengruen #27352A 12,9:1 Text auf dunklen Flaechen Gold hell #B6A77E auf Tannengruen 5,4:1 Text ab 13 px erlaubt Krone Gold #98865C auf Creme 3,1:1 NUR Linien, Rahmen, Icons, Grossschrift ab 24 px. NIE Lesetext. Gold hell #B6A77E auf Creme 2,4:1 nie Merkregel aus dem Brand-Kit: Gold ist Schmuck, nicht Schrift. ========================================================================== */ /* -------------------------------------------------------------------------- 0 Schriften (Open Font License, lokal gehostet, latin-Subset) -------------------------------------------------------------------------- */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(../../uploads/krone-fonts-v2/CormorantGaramond-500.woff2) format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url(../../uploads/krone-fonts-v2/CormorantGaramond-500i.woff2) format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url(../../uploads/krone-fonts-v2/CormorantGaramond-600.woff2) format('woff2'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap; src: url(../../uploads/krone-fonts-v2/Lato-300.woff2) format('woff2'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url(../../uploads/krone-fonts-v2/Lato-400.woff2) format('woff2'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url(../../uploads/krone-fonts-v2/Lato-700.woff2) format('woff2'); } /* -------------------------------------------------------------------------- 1 Tokens -------------------------------------------------------------------------- */ :root { --krone-creme: #F4F0E6; --krone-creme-2: #EBE5D7; /* Wechselflaeche, ein Ton dunkler */ --krone-gruen: #27352A; --krone-gruen-2: #1D2921; /* Hover, Schatten */ --krone-gold: #98865C; --krone-gold-hell: #B6A77E; --krone-weiss: #FFFFFF; --krone-linie: rgba(39,53,42,.14); --krone-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --krone-sans: 'Lato', 'Helvetica Neue', Arial, sans-serif; /* Aliase fuer Klassen aus dem Bestand (27.08. bis 18.09.2026), damit die noch nicht umgebauten Seiten sofort in der neuen Palette stehen. */ --krone-text: var(--krone-gruen); --krone-brown: var(--krone-gruen); --krone-gold-text: var(--krone-gruen); --krone-btn-gold: var(--krone-gruen); --krone-btn-gold-hover: var(--krone-gruen-2); --krone-gold-ink: var(--krone-creme); --krone-anthracite: var(--krone-gruen); --krone-beige: var(--krone-creme-2); --krone-ground: var(--krone-creme); --krone-focus: var(--krone-gruen); /* GeneratePress-Variablen aus dem Customizer ueberschreiben */ --text: var(--krone-gruen); --link: var(--krone-gruen); --button: var(--krone-gruen); --button-text: var(--krone-creme); --gp-font--cormorant: var(--krone-serif); --gp-font--fustat: var(--krone-sans); } /* -------------------------------------------------------------------------- 2 Grundflaeche und Lesetext -------------------------------------------------------------------------- */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background-color: var(--krone-creme); color: var(--krone-gruen); font-family: var(--krone-sans); font-weight: 400; font-size: 18px; line-height: 1.65; } .site-content, .site, .content-area { background-color: transparent; } @media (max-width: 768px) { body { font-size: 18px; line-height: 1.6; } } .entry-content > *:not(.alignfull):not(.alignwide) { max-width: 760px; margin-left: auto; margin-right: auto; } .entry-content > .wp-block-group.alignfull { max-width: none; } p { margin: 0 0 1.3em; } .entry-content a, .krone-section p a, .krone-section li a { color: var(--krone-gruen); text-decoration: underline; text-decoration-color: var(--krone-gold); text-decoration-thickness: 1px; text-underline-offset: .18em; } .entry-content a:hover, .entry-content a:focus { text-decoration-thickness: 2px; } strong, b { font-weight: 700; } ::selection { background: var(--krone-gold-hell); color: var(--krone-gruen); } /* -------------------------------------------------------------------------- 3 Ueberschriften: Cormorant Garamond Medium, Versalien, gesperrt. Kleiner und leichter als der Bestand (64 px), Muster der gehobenen Haeuser. -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .wp-block-heading { color: var(--krone-gruen); overflow-wrap: normal; word-break: normal; hyphens: manual; margin-top: 0; } h1, h2, .krone-hero h1, .krone-hero h2 { font-family: var(--krone-serif); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; line-height: 1.18; } h1 { font-size: clamp(32px, 3.6vw, 52px); margin-bottom: .5em; } h2:not(.krone-subheadline):not(.krone-card-title):not(.krone-unterabschnitt) { font-size: clamp(26px, 2.6vw, 38px); margin-bottom: .55em; } h3, h4 { font-family: var(--krone-sans); color: var(--krone-gruen); text-transform: uppercase; letter-spacing: .14em; line-height: 1.4; } h3 { font-weight: 400; font-size: 15px; margin-bottom: .6em; } h4 { font-weight: 700; font-size: 15px; margin-bottom: .5em; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; text-decoration: none; } /* Gemischt gesetzte Kernsaetze und Zitate (Cormorant, keine Versalien) */ p.krone-satz, .krone-satz, .krone-zitat, blockquote p, .wp-block-quote p { font-family: var(--krone-serif); font-weight: 500; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.35; letter-spacing: 0; text-transform: none; color: var(--krone-gruen); } .wp-block-quote, blockquote { border: 0; padding: 0; margin: 0 0 1.5em; } .wp-block-quote cite, blockquote cite { display: block; margin-top: .8em; font-family: var(--krone-sans); font-style: normal; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; } h1.krone-satz, h2.krone-satz { text-transform: none; letter-spacing: 0; } /* Kicker: kleine Vorzeile mit Goldlinie. Auf Creme in Gruen (BFSG), auf Gruen in Gold hell (5,4:1). Gold auf Creme nur als Linie. */ .krone-kicker, p.krone-kicker { display: flex; align-items: center; gap: 12px; font-family: var(--krone-sans); font-weight: 400; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--krone-gruen); margin: 0 0 14px; } .krone-kicker::before { content: ""; flex: 0 0 auto; width: 26px; height: 2px; background: var(--krone-gold); } .has-text-align-center.krone-kicker, .krone-kicker.krone-mitte { justify-content: center; } .krone-dunkel .krone-kicker, .krone-hero .krone-kicker { color: var(--krone-gold-hell); } .krone-dunkel .krone-kicker::before, .krone-hero .krone-kicker::before { background: var(--krone-gold-hell); } .krone-hero .krone-kicker { color: var(--krone-creme); } /* Goldlinie als Zaesur */ hr.krone-linie, .krone-linie { width: 60px; height: 2px; border: 0; margin: 22px 0 26px; background: var(--krone-gold); opacity: 1; } .has-text-align-center + hr.krone-linie, .krone-mitte hr.krone-linie, hr.krone-linie.krone-mitte { margin-left: auto; margin-right: auto; } .krone-dunkel hr.krone-linie { background: var(--krone-gold-hell); } /* Bestandsklassen in neuer Typografie */ h2.krone-subheadline, h3.krone-subheadline, p.krone-subheadline, .krone-subheadline { font-family: var(--krone-sans); font-weight: 300; font-size: 19px; line-height: 1.45; letter-spacing: .02em; text-transform: none; color: var(--krone-gruen); margin: .3em 0 1em; } h2.krone-card-title, p.krone-card-title, .krone-card-title { font-family: var(--krone-sans); font-weight: 400; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--krone-gruen); margin: 18px 0 6px; } h3.krone-card-sub, .krone-card p { font-size: 17px; color: var(--krone-gruen); font-weight: 400; margin: 0; } p.krone-num, .krone-num, .krone-card p.krone-num { font-family: var(--krone-serif); font-size: 28px; font-weight: 500; letter-spacing: .06em; color: var(--krone-gold); margin: 0 0 10px; /* 28 px = Grossschrift, 3,1:1 zulaessig */ } h2.krone-unterabschnitt:not(.krone-subheadline):not(.krone-card-title) { font-family: var(--krone-sans); font-size: 15px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--krone-gruen); line-height: 1.4; margin-bottom: .6em; } @media (max-width: 600px) { h1, h2, h3, h4, .wp-block-heading, .entry-title { hyphens: auto; overflow-wrap: break-word; } } /* -------------------------------------------------------------------------- 4 Buttons: eckig, Lato, Versalien, gesperrt. Primaer Gruen, sekundaer Linie. body-Praefix, weil GeneratePress ueber :root :where() eigene Werte setzt. -------------------------------------------------------------------------- */ body .wp-block-button > .wp-block-button__link, body .wp-block-button__link, body a.gb-button, body .krone-leiste__submit, body .fluentform .ff-btn-submit, body button.ff-btn-submit { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 26px; border: 0; border-radius: 0; background-color: var(--krone-gruen); color: var(--krone-creme); font-family: var(--krone-sans); font-weight: 500; font-size: 14px; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: background-color .25s ease, color .25s ease, box-shadow .25s ease; } body .wp-block-button > .wp-block-button__link:hover, body .wp-block-button__link:hover, body a.gb-button:hover, body .wp-block-button > .wp-block-button__link:focus, body .wp-block-button__link:focus, body .krone-leiste__submit:hover, body .fluentform .ff-btn-submit:hover { background-color: var(--krone-gruen-2); color: var(--krone-creme); } /* Bestand: krone-btn-gold war der Hauptweg, bleibt Hauptweg (Gruen) */ body .wp-block-button.krone-btn-gold > .wp-block-button__link, body .krone-btn-gold .wp-block-button__link { background-color: var(--krone-gruen); color: var(--krone-creme); } /* Sekundaer: Linie */ body .wp-block-button.krone-btn-linie > .wp-block-button__link, body .krone-btn-linie .wp-block-button__link, body .wp-block-button.is-style-outline > .wp-block-button__link { background-color: transparent; color: var(--krone-gruen); box-shadow: inset 0 0 0 1px var(--krone-gruen); } body .wp-block-button.krone-btn-linie > .wp-block-button__link:hover, body .wp-block-button.krone-btn-linie > .wp-block-button__link:focus, body .krone-btn-linie .wp-block-button__link:hover, body .wp-block-button.is-style-outline > .wp-block-button__link:hover { background-color: var(--krone-gruen); color: var(--krone-creme); } /* Auf dunkler Flaeche: Creme-Knopf mit gruener Schrift, Linie in Creme */ body .krone-dunkel .wp-block-button > .wp-block-button__link, body .krone-hero .wp-block-button > .wp-block-button__link { background-color: var(--krone-creme); color: var(--krone-gruen); } body .krone-dunkel .wp-block-button > .wp-block-button__link:hover, body .krone-hero .wp-block-button > .wp-block-button__link:hover { background-color: var(--krone-weiss); color: var(--krone-gruen); } body .krone-dunkel .wp-block-button.krone-btn-linie > .wp-block-button__link, body .krone-hero .wp-block-button.krone-btn-linie > .wp-block-button__link { background-color: transparent; color: var(--krone-creme); box-shadow: inset 0 0 0 1px var(--krone-creme); } body .krone-dunkel .wp-block-button.krone-btn-linie > .wp-block-button__link:hover, body .krone-hero .wp-block-button.krone-btn-linie > .wp-block-button__link:hover { background-color: var(--krone-creme); color: var(--krone-gruen); } .wp-block-buttons { gap: 12px 16px; } /* Textlink mit Goldlinie (Details, Weiterlesen) */ .krone-details-link { margin: 0 0 12px; } .krone-details-link a, .entry-content .krone-details-link a, a.krone-textlink, .entry-content a.krone-textlink { display: inline-block; font-family: var(--krone-sans); font-size: 13px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--krone-gruen); text-decoration: none; border-bottom: 1px solid var(--krone-gold); padding-bottom: 4px; } .krone-details-link a:hover, a.krone-textlink:hover { border-bottom-width: 2px; } /* -------------------------------------------------------------------------- 5 Sektionen und Container -------------------------------------------------------------------------- */ .krone-section { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); } .krone-section-eng { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 56px); } .krone-section-beige { background-color: var(--krone-creme-2); } .krone-dunkel { background-color: var(--krone-gruen); color: var(--krone-creme); } .krone-dunkel h1, .krone-dunkel h2, .krone-dunkel h3, .krone-dunkel h4, .krone-dunkel p, .krone-dunkel li, .krone-dunkel .krone-satz, .krone-dunkel .krone-card-title, .krone-dunkel .krone-subheadline { color: var(--krone-creme); } .krone-dunkel a, .krone-dunkel p a, .krone-dunkel li a, .krone-section.krone-dunkel p a, .entry-content .krone-dunkel p a { color: var(--krone-creme); text-decoration-color: var(--krone-gold-hell); } .krone-dunkel .krone-num { color: var(--krone-gold-hell); } .krone-dunkel .krone-details-link a, .entry-content .krone-dunkel .krone-details-link a { color: var(--krone-creme); border-color: var(--krone-gold-hell); } @media (min-width: 769px) { .krone-section > .wp-block-group__inner-container { max-width: min(92%, 1440px); } .krone-section > .wp-block-group__inner-container > .wp-block-columns, .krone-section > .wp-block-group__inner-container > .wp-block-group { max-width: 100%; } } .wp-block-columns { gap: clamp(20px, 3vw, 44px); } /* -------------------------------------------------------------------------- 6 Bilder: feste Verhaeltnisse, Bogen fuer Orte, Kreis fuer Personen -------------------------------------------------------------------------- */ .krone-ratio-3-2, .krone-ratio-10-7, .krone-ratio-3-4, .krone-ratio-1-1, .krone-ratio-16-9, .krone-ratio-4-5 { overflow: hidden; } .krone-ratio-3-2 { aspect-ratio: 3 / 2; } .krone-ratio-10-7 { aspect-ratio: 10 / 7; } .krone-ratio-3-4 { aspect-ratio: 3 / 4; } .krone-ratio-4-5 { aspect-ratio: 4 / 5; } .krone-ratio-1-1 { aspect-ratio: 1 / 1; } .krone-ratio-16-9 { aspect-ratio: 16 / 9; } [class*="krone-ratio-"] img, [class*="krone-ratio-"] figure { width: 100%; height: 100%; margin: 0; } [class*="krone-ratio-"] img { object-fit: cover; display: block; } .wp-block-image img { height: auto; } [class*="krone-ratio-"].wp-block-image img { height: 100%; } /* KEYLINE statt Rundbogen (Korrektur 20.09.2026): Die juengsten Unterlagen (Praesentation 18.09., Start-Prompt v7) fuehren als Standardformat die Keyline: randloses Foto mit feinem, eingerueckten Goldrahmen. Der Rundbogen ist nur noch eine seltene Event-Tafel fuer Orte. Die Klasse krone-bogen bleibt im Markup und rendert jetzt die Keyline. */ .krone-bogen, .krone-keyline { position: relative; overflow: hidden; border-radius: 0; } .krone-bogen img, .krone-keyline img, .krone-bogen figure, .krone-keyline figure { border-radius: 0; } .krone-bogen::after, .krone-keyline::after { content: ""; position: absolute; inset: 14px; pointer-events: none; border: 1px solid var(--krone-gold-hell); opacity: .95; } @media (max-width: 600px) { .krone-bogen::after, .krone-keyline::after { inset: 10px; } } .krone-kreis, .krone-kreis img { border-radius: 50%; } .krone-kreis { overflow: hidden; aspect-ratio: 1 / 1; } .krone-rahmen-gold img { outline: 1px solid var(--krone-gold); outline-offset: -12px; } figcaption, .wp-block-image figcaption, .wp-element-caption { font-family: var(--krone-sans); font-size: 14px; color: var(--krone-gruen); text-align: left; margin-top: 10px; } .krone-card .wp-block-image, .krone-grid .wp-block-image, .krone-saeule .wp-block-image { margin: 0; } .krone-symbol { max-width: 115px; margin-bottom: 14px; } .krone-symbol img { width: 115px; height: auto; display: block; } .krone-agenturlogo { max-width: 320px; } .krone-agenturlogo img { width: 320px; height: auto; display: block; } /* -------------------------------------------------------------------------- 7 Hero v2: EIN Standbild (Startseite, Themenseiten), Verlauf in Tannengruen, Inhalt unten links. Crossfade bleibt fuer die Zimmerseiten (4 Slides). -------------------------------------------------------------------------- */ .krone-hero { position: relative; overflow: hidden; color: var(--krone-creme); } .krone-hero-still { min-height: min(86vh, 880px); display: flex; align-items: flex-end; } .krone-hero-still > .krone-hero-bild, .krone-fade > .krone-fade-slide, .krone-fade > .krone-fade-overlay, .krone-hero-still > .krone-hero-overlay { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } .krone-hero-bild, .krone-fade .krone-fade-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; } .krone-hero-overlay, .krone-fade-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(29,41,33,.38) 0%, rgba(29,41,33,.04) 26%, rgba(29,41,33,.42) 58%, rgba(29,41,33,.86) 100%); } .krone-hero .wp-block-cover__background { background: linear-gradient(180deg, rgba(29,41,33,.3) 0%, rgba(29,41,33,.75) 100%) !important; opacity: 1 !important; } .krone-hero-inhalt, .krone-fade-content, .krone-hero .wp-block-cover__inner-container { position: relative; z-index: 2; width: 100%; } .krone-hero-inhalt { max-width: min(92%, 1440px); margin: 0 auto; padding: 120px 0 clamp(48px, 6vw, 88px); } .krone-hero-still .krone-hero-inhalt > * { max-width: 760px; } .krone-hero h1, .krone-hero h2, .krone-hero .wp-block-heading, .krone-hero p, .krone-hero .krone-satz { color: var(--krone-creme); } .krone-hero h1, .krone-hero h2.krone-hero-titel { font-size: clamp(34px, 4.2vw, 60px) !important; line-height: 1.12; margin: 0 0 .35em; text-shadow: 0 1px 24px rgba(29,41,33,.35); } .krone-hero .krone-hero-unterzeile, .krone-hero p.krone-satz { font-family: var(--krone-serif); font-weight: 500; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.4; text-transform: none; letter-spacing: 0; margin: 0; } .krone-hero .krone-kicker { margin-bottom: 18px; } /* Bestand: Cover-Heros der Themenseiten (zentriert), bis sie umgebaut sind */ .krone-hero.wp-block-cover h1, .krone-hero.wp-block-cover h2 { text-align: center; } .krone-hero.krone-fade { display: flex; align-items: center; justify-content: center; min-height: 70vh; } .krone-hero.krone-fade h1, .krone-hero.krone-fade h2 { text-align: center; } @media (max-width: 768px) { .krone-hero-still { min-height: 72vh; } .krone-hero-inhalt { padding-top: 96px; } } /* Crossfade (Zimmerseiten): 4 Slides, 24 s, Pause-Knopf per krone.js */ .krone-fade { position: relative; overflow: hidden; } .krone-fade .krone-fade-slide { opacity: 0; } .krone-fade-4 .krone-fade-slide { animation: kroneFade4 24s linear infinite; } .krone-fade-4 .krone-fade-slide:nth-child(1) { animation-delay: 0s; } .krone-fade-4 .krone-fade-slide:nth-child(2) { animation-delay: 6s; } .krone-fade-4 .krone-fade-slide:nth-child(3) { animation-delay: 12s; } .krone-fade-4 .krone-fade-slide:nth-child(4) { animation-delay: 18s; } @keyframes kroneFade4 { 0% { opacity: 0; } 6% { opacity: 1; } 25% { opacity: 1; } 34% { opacity: 0; } 100% { opacity: 0; } } .krone-fade-5 .krone-fade-slide { animation: kroneFade5 30s linear infinite; } .krone-fade-5 .krone-fade-slide:nth-child(2) { animation-delay: 6s; } .krone-fade-5 .krone-fade-slide:nth-child(3) { animation-delay: 12s; } .krone-fade-5 .krone-fade-slide:nth-child(4) { animation-delay: 18s; } .krone-fade-5 .krone-fade-slide:nth-child(5) { animation-delay: 24s; } @keyframes kroneFade5 { 0% { opacity: 0; } 5% { opacity: 1; } 20% { opacity: 1; } 28% { opacity: 0; } 100% { opacity: 0; } } .krone-fade .krone-fade-slide:first-child { opacity: 1; } .krone-fade-4 .krone-fade-slide:first-child { animation-name: kroneFade4First; } .krone-fade-5 .krone-fade-slide:first-child { animation-name: kroneFade5First; } @keyframes kroneFade4First { 0% { opacity: 1; } 25% { opacity: 1; } 34% { opacity: 0; } 94% { opacity: 0; } 100% { opacity: 1; } } @keyframes kroneFade5First { 0% { opacity: 1; } 20% { opacity: 1; } 28% { opacity: 0; } 95% { opacity: 0; } 100% { opacity: 1; } } /* Ein einzelnes Slide (Themenseiten-Bestand) steht still */ .krone-fade-1 .krone-fade-slide { animation: none; opacity: 1; } .krone-fade[data-krone-paused="true"] .krone-fade-slide { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .krone-fade .krone-fade-slide { animation: none !important; } .krone-fade .krone-fade-slide:first-child { opacity: 1; } } .krone-fade__pause { position: absolute; right: 18px; bottom: 18px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(29,41,33,.6); color: var(--krone-creme); font: 400 15px/1 sans-serif; opacity: 0; transition: opacity .2s ease; } .krone-fade:hover .krone-fade__pause, .krone-fade__pause:focus-visible, .krone-fade[data-krone-paused="true"] .krone-fade__pause { opacity: 1; } /* -------------------------------------------------------------------------- 8 Header: fixiert, Burger links, Signet mittig, rechts Telefon | Anfragen | Buchen Ueber dem Hero transparent mit gruenem Schleier, sonst und gescrollt Creme. -------------------------------------------------------------------------- */ .site-header { background-color: var(--krone-creme); transition: background-color .25s ease, box-shadow .25s ease; } .main-navigation { background-color: transparent; } .main-navigation .main-nav ul li a { font-family: var(--krone-sans); font-weight: 400; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--krone-gruen); } .main-navigation .main-nav ul li a:hover, .main-navigation .main-nav ul li a:focus { color: var(--krone-gruen); text-decoration: underline; text-decoration-color: var(--krone-gold); text-underline-offset: .3em; } .main-navigation .menu-bar-item.slideout-toggle a { padding: 11px; font-size: 22px; color: var(--krone-gruen); } .main-navigation .menu-bar-item.slideout-toggle a:hover { background: transparent; color: var(--krone-gruen); } /* Ueber dem Hero */ body:has(.krone-hero) .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 60; background: transparent; } body:has(.krone-hero) #site-navigation { position: absolute; top: 96px; left: 0; right: 0; z-index: 60; background: transparent; } body:has(.krone-hero) .site-header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 200px; z-index: -1; pointer-events: none; background: linear-gradient(rgba(29,41,33,.6) 0%, rgba(29,41,33,.3) 50%, rgba(29,41,33,0) 100%); } body:has(.krone-hero) .site-header .site-logo img { filter: brightness(0) invert(1); } body:has(.krone-hero) .main-navigation .main-nav ul li a, body:has(.krone-hero) .main-navigation .menu-toggle, body:has(.krone-hero) .main-navigation .menu-bar-item.slideout-toggle a { color: var(--krone-creme); } body:has(.krone-hero) .main-navigation .main-nav ul li a:hover { text-decoration-color: var(--krone-gold-hell); } body:has(.krone-hero) .krone-hero { margin-top: 0; } @media (min-width: 769px) { .site-header, body:has(.krone-hero) .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 295; } .site-header .inside-header { max-width: none; padding: 0 clamp(16px, 2.6vw, 44px) 0 20px; min-height: 84px; display: flex; align-items: center; position: relative; } .site-header #site-navigation, body:has(.krone-hero) #site-navigation { top: 20px; bottom: auto; left: 20px; right: clamp(16px, 2.6vw, 44px); width: auto; } .site-header .inside-navigation { max-width: none; width: 100%; padding: 0; } body:not(:has(.krone-hero)) .site-content { padding-top: 84px; } /* Signet mittig (Vollversion erst ab 600 px Breite, also Signet im Kopf) */ .site-header .site-logo { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 2; width: 120px; text-align: center; } .site-header .site-logo img { height: 62px; max-height: none; width: auto; } .main-navigation { float: none; width: 100%; } .main-navigation .inside-navigation .main-nav { flex: 1 1 auto; width: 100%; } .main-navigation .main-nav > ul { display: flex; align-items: center; flex-wrap: nowrap; padding-left: 64px; } .main-navigation .menu-bar-items { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .main-navigation .main-nav > ul > li > a { line-height: 44px; padding-left: 0; padding-right: 0; margin-right: 26px; } /* Rechte Gruppe beginnt beim Telefon (Bestand: krone-inkl) */ .main-navigation .main-nav > ul > li.krone-tel, .main-navigation .main-nav > ul > li.krone-inkl { margin-left: auto; } .main-navigation .main-nav > ul > li.krone-inkl + li.krone-tel { margin-left: 0; } /* Telefon als Text, ohne Flaeche */ .main-navigation .main-nav ul li.krone-tel > a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; margin-right: 12px; text-transform: none; letter-spacing: .02em; font-size: 15px; white-space: nowrap; } .main-navigation .krone-tel > a::before { content: "Tel."; margin-right: .5em; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; } /* Anfragen = Linie, Buchen = Flaeche */ body .main-navigation .main-nav ul li.anfragen-button > a, body .main-navigation .main-nav ul li.buchen-button > a { position: relative; display: inline-flex; align-items: center; height: auto; min-height: 0; line-height: 1.2; padding: 11px 18px; margin-left: 12px; margin-right: 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; border-radius: 0; text-decoration: none; } body .main-navigation .main-nav ul li.anfragen-button > a::after, body .main-navigation .main-nav ul li.buchen-button > a::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 44px; } body .main-navigation .main-nav ul li.anfragen-button > a { background: transparent; color: var(--krone-gruen); box-shadow: inset 0 0 0 1px var(--krone-gruen); } body .main-navigation .main-nav ul li.anfragen-button > a:hover { background: var(--krone-gruen); color: var(--krone-creme); } body .main-navigation .main-nav ul li.buchen-button > a { background: var(--krone-gruen); color: var(--krone-creme); } body .main-navigation .main-nav ul li.buchen-button > a:hover { background: var(--krone-gruen-2); color: var(--krone-creme); } body:has(.krone-hero):not(.krone-scrolled) .main-navigation .main-nav ul li.anfragen-button > a { color: var(--krone-creme); box-shadow: inset 0 0 0 1px var(--krone-creme); } body:has(.krone-hero):not(.krone-scrolled) .main-navigation .main-nav ul li.anfragen-button > a:hover { background: var(--krone-creme); color: var(--krone-gruen); } body:has(.krone-hero):not(.krone-scrolled) .main-navigation .main-nav ul li.buchen-button > a { background: var(--krone-creme); color: var(--krone-gruen); } body:has(.krone-hero):not(.krone-scrolled) .main-navigation .main-nav ul li.buchen-button > a:hover { background: var(--krone-weiss); } /* Scroll-Zustand: Creme-Kopf, dunkle Schrift, kleines Sternen-Logo */ /* Knoepfe im Scroll-Zustand: die Regel darunter faerbt alle Menuelinks gruen und ist spezifischer (0,4,4) als die Buttonregeln (0,3,5). Deshalb hier mit :has doppelt gesichert. */ body.krone-scrolled:has(.krone-hero) .main-navigation .main-nav ul li.buchen-button > a { color: var(--krone-creme); background: var(--krone-gruen); } body.krone-scrolled:has(.krone-hero) .main-navigation .main-nav ul li.buchen-button > a:hover { background: var(--krone-gruen-2); } body.krone-scrolled:has(.krone-hero) .main-navigation .main-nav ul li.anfragen-button > a { color: var(--krone-gruen); box-shadow: inset 0 0 0 1px var(--krone-gruen); } body.krone-scrolled:has(.krone-hero) .main-navigation .main-nav ul li.anfragen-button > a:hover { background: var(--krone-gruen); color: var(--krone-creme); } body.krone-scrolled .site-header, body.krone-scrolled:has(.krone-hero) .site-header { background-color: var(--krone-creme); box-shadow: inset 0 -1px 0 var(--krone-linie); } body.krone-scrolled:has(.krone-hero) .site-header::before { display: none; content: none; } body.krone-scrolled:has(.krone-hero) .main-navigation .main-nav ul li a, body.krone-scrolled:has(.krone-hero) .menu-bar-item.slideout-toggle a { color: var(--krone-gruen); } body.krone-scrolled .site-header .site-logo { opacity: 0; pointer-events: none; } body.krone-scrolled .krone-logo-scroll { opacity: 1; pointer-events: auto; } .krone-logo-scroll { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 3; } .krone-logo-scroll img { height: 56px; width: auto; display: block; } body:has(.krone-hero) .site-header .krone-logo-scroll img { filter: none; } body.krone-scrolled .krone-lang { display: none; } .krone-lang { position: absolute; top: 6px; right: clamp(16px, 2.6vw, 44px); z-index: 3; min-width: 40px; font: 400 12px/20px var(--krone-sans); letter-spacing: .12em; color: var(--krone-creme); } body:not(:has(.krone-hero)) .krone-lang { color: var(--krone-gruen); } .krone-lang__liste { list-style: none; margin: 0; padding: 0; } .krone-lang a { color: inherit; text-decoration: none; } } /* Zwischen 769 und 1099 px: nur Burger, Signet, Anfragen, Buchen. Alles andere liegt im Offcanvas. Damit kann nichts mehr ins Logo laufen. */ @media (min-width: 769px) and (max-width: 1099px) { .main-navigation .main-nav > ul > li:not(.anfragen-button):not(.buchen-button) { display: none; } .main-navigation .main-nav > ul > li.buchen-button { margin-left: auto; } } @media (max-width: 1026px) { .krone-logo-scroll { display: none; } } /* Mobil: GP-Mobile-Header mit Logo mittig, ein Burger */ @media (max-width: 768px) { .site-header .site-logo { position: static; transform: none; text-align: center; } .site-header .inside-header { padding: 14px 20px; text-align: center; } .site-header .site-logo img, .mobile-header-navigation .site-logo img { max-height: 52px; width: auto; } .main-navigation { float: none; } .main-navigation .menu-bar-items { position: static; transform: none; } .mobile-header-navigation .menu-bar-item.slideout-toggle, .main-navigation .menu-bar-item.slideout-toggle.hide-on-mobile { display: block !important; } .site-header .menu-toggle, .mobile-header-navigation .menu-toggle { display: none !important; } .krone-lang { display: none; } .mobile-header-navigation { background-color: var(--krone-creme); } body:has(.krone-hero) .mobile-header-navigation { background-color: transparent; position: absolute; top: 0; left: 0; right: 0; z-index: 60; } body:has(.krone-hero) .mobile-header-navigation .site-logo img { filter: brightness(0) invert(1); } body:has(.krone-hero) .mobile-header-navigation .menu-bar-item.slideout-toggle a { color: var(--krone-creme); } .mobile-header-navigation .site-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; z-index: 1; } .mobile-header-navigation .menu-bar-items { position: relative; z-index: 2; } .mobile-header-navigation .menu-bar-item.slideout-toggle a { color: var(--krone-gruen); padding: 11px; } } /* Offcanvas: Tannengruen, Creme-Schrift */ #generate-slideout-menu.slideout-navigation, .slideout-navigation { background-color: var(--krone-gruen); color: var(--krone-creme); width: 430px; max-width: 88vw; padding-top: 84px; text-align: left; } .slideout-navigation.main-navigation .main-nav > ul { display: block; } .slideout-navigation.main-navigation .main-nav > ul > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; } .slideout-navigation.main-navigation .main-nav > ul > li > a { flex: 1 1 auto; color: var(--krone-creme); font-family: var(--krone-serif); font-size: 22px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; line-height: 1.4; padding: 9px 40px; text-align: left; } .slideout-navigation.main-navigation .dropdown-menu-toggle { flex: 0 0 auto; padding-right: 28px; line-height: 1; color: var(--krone-gold-hell); } .slideout-navigation.main-navigation .main-nav > ul > li > ul { flex: 1 1 100%; } .slideout-navigation.main-navigation .main-nav ul ul li a { color: var(--krone-creme); font-family: var(--krone-sans); font-size: 16px; font-weight: 400; text-transform: none; letter-spacing: .02em; padding: 6px 40px 6px 56px; text-align: left; } .slideout-navigation.main-navigation .main-nav ul li a:hover, .slideout-navigation.main-navigation .main-nav ul li a:focus { color: var(--krone-gold-hell); text-decoration: none; } .slideout-navigation .slideout-exit { color: var(--krone-creme); padding: 20px 40px; } body .slideout-overlay { background-color: transparent; } /* 11.10.2026: unsichtbare Klickflaeche neben dem Seitenmenue (krone-frontend.php), Klick schliesst */ /* -------------------------------------------------------------------------- 9 Bausteine der neuen Seiten -------------------------------------------------------------------------- */ /* Einstieg unter dem Hero: ein Knopf, der Rest ruhige Textlinks mit Goldlinie (luftig) */ .krone-einstieg { border-bottom: 1px solid var(--krone-linie); } .krone-einstieg.krone-section-eng { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); } .krone-einstieg .wp-block-buttons { justify-content: center; align-items: center; gap: 22px clamp(28px, 4vw, 56px); } body .krone-einstieg .wp-block-button.krone-btn-linie > .wp-block-button__link { background: transparent; box-shadow: none; padding: 12px 0 6px; min-height: 0; border-bottom: 1px solid var(--krone-gold); color: var(--krone-gruen); } body .krone-einstieg .wp-block-button.krone-btn-linie > .wp-block-button__link:hover, body .krone-einstieg .wp-block-button.krone-btn-linie > .wp-block-button__link:focus { background: transparent; color: var(--krone-gruen); border-bottom-width: 2px; padding-bottom: 5px; } body .krone-einstieg .wp-block-button:not(.krone-btn-linie) > .wp-block-button__link { padding: 14px 34px; margin-right: clamp(4px, 1vw, 16px); } @media (max-width: 768px) { .krone-einstieg .wp-block-buttons { flex-direction: column; gap: 18px; } body .krone-einstieg .wp-block-button:not(.krone-btn-linie) > .wp-block-button__link { margin-right: 0; margin-bottom: 6px; } } .krone-einstieg .krone-einstieg-text a { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--krone-gold); padding-bottom: 4px; } /* Die Aufloesung: drei Bogenbilder, je ein Satz */ .krone-aufloesung .wp-block-column { text-align: left; } .krone-aufloesung figure { margin: 0 0 18px; } .krone-aufloesung .krone-schritt { font-family: var(--krone-sans); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 6px; color: var(--krone-gruen); opacity: .8; } .krone-aufloesung p { line-height: 1.55; margin: 0; } @media (min-width: 769px) { .krone-aufloesung p, .krone-saeule p { font-size: 17px; } } .krone-aufloesung + .krone-satz, .krone-aufloesung-satz { margin-top: clamp(28px, 4vw, 48px); text-align: center; } /* Saeulen-Karten */ .krone-saeule { text-align: left; } .krone-saeule figure { margin: 0 0 20px; } .krone-saeule h2, .krone-saeule h3.krone-saeule-titel { margin: 0 0 10px; } .krone-saeule h2.krone-saeule-versal { font-size: clamp(20px, 1.6vw, 24px); } .krone-saeule h2.krone-satz { font-size: clamp(22px, 1.8vw, 28px); } .krone-saeule p { margin: 0 0 14px; } /* Vertrauensanker */ p.krone-google-zahl, .krone-google-zahl { font-family: var(--krone-serif); font-weight: 500; font-size: clamp(56px, 6vw, 84px); line-height: 1; letter-spacing: 0; margin: 0 0 8px; color: var(--krone-gruen); } .krone-google-text { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 8px; } .krone-google-stand { font-size: 13px; opacity: .8; margin: 0; } .krone-zitat-karte { padding: 28px 28px 24px; background: var(--krone-creme); border-top: 2px solid var(--krone-gold); height: 100%; } .krone-section-beige .krone-zitat-karte { background: var(--krone-creme); } .krone-zitat-karte p.krone-zitat { font-size: clamp(19px, 1.5vw, 22px); font-style: italic; line-height: 1.4; margin: 0 0 14px; } .krone-zitat-karte p.krone-zitat-quelle { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin: 0; } /* Zimmerkarten (Bestand + neu) */ .krone-room-meta { font-size: 15px; letter-spacing: .04em; margin: 2px 0 10px; color: var(--krone-gruen); } .krone-room-card h2.krone-card-title, .krone-room-card h3.krone-card-title { margin-top: 16px; } .krone-logos { margin: 20px 0; gap: 30px; align-items: center; } .krone-logos .wp-block-image { margin: 0; } ul.krone-cols-2 { columns: 2; column-gap: 60px; list-style-position: inside; padding-left: 0; } ul.krone-cols-2 li { break-inside: avoid; padding: 3px 0; } @media (max-width: 600px) { ul.krone-cols-2 { columns: 1; } } /* Cover-Kacheln (Bestand): Creme-Schrift */ .krone-cover h2, .krone-cover h3, .krone-cover p, .krone-cover a, .entry-content .krone-cover p a { color: var(--krone-creme); } .krone-cover .wp-block-cover__background { background: linear-gradient(180deg, rgba(29,41,33,.15) 0%, rgba(29,41,33,.7) 100%) !important; opacity: 1 !important; } .krone-cover a { text-decoration: none; font-family: var(--krone-sans); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; } .krone-cover h2, .krone-cover h2 a { font-family: var(--krone-serif); font-size: 26px !important; line-height: 1.25; text-align: center; } .krone-cover h3.krone-card-sub, .krone-cover .krone-card-sub { color: var(--krone-creme); text-align: center; } .krone-galerie-card { background: var(--krone-creme-2); min-height: 420px; display: flex; align-items: center; justify-content: center; } .krone-galerie-card p { font-family: var(--krone-serif); font-size: clamp(24px, 2.4vw, 34px); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; text-align: center; margin: 0; } .krone-galerie-card p a, .entry-content .krone-galerie-card p a { color: var(--krone-gruen); text-decoration: none; } /* Laufband (Bestand) steht still */ .krone-marquee { overflow: visible; padding: 34px 0; } .krone-marquee-track { animation: none; width: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 0; } .krone-marquee-track p ~ p { display: none; } .krone-marquee-track p { font-family: var(--krone-serif); font-size: clamp(24px, 2.6vw, 34px); font-weight: 500; white-space: normal; text-align: center; letter-spacing: 0; color: var(--krone-gruen); margin: 0; line-height: 1.3; } .krone-crown { margin: 30px auto 0; } .krone-crown img { width: 56px; height: auto; display: block; margin: 0 auto; } /* Teaser-Reihen mobil als Wischleiste (Bestand) */ @media (max-width: 768px) { .krone-grid { flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 20px; gap: 16px; padding-bottom: 10px; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--krone-gold) transparent; } .krone-grid > .wp-block-column { flex: 0 0 84% !important; scroll-snap-align: center; } .krone-grid::-webkit-scrollbar { height: 4px; } .krone-grid::-webkit-scrollbar-thumb { background: var(--krone-gold); border-radius: 2px; } .krone-grid:focus-visible { outline: 2px solid var(--krone-gruen); outline-offset: 4px; } } /* Anfrageleiste (Shortcode, derzeit nicht eingesetzt), in neuer Palette */ .krone-leiste { background: var(--krone-creme); border: 1px solid var(--krone-linie); padding: 18px 20px 14px; max-width: 760px; margin-inline: auto; text-align: left; } .krone-leiste__tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--krone-linie); } .krone-leiste__tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 0 16px; min-height: 44px; cursor: pointer; font: 400 14px/1.2 var(--krone-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--krone-gruen); } .krone-leiste__tab[aria-selected="true"] { border-bottom-color: var(--krone-gold); } .krone-leiste__panel { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; margin: 0; } .krone-leiste__panel[hidden] { display: none; } .krone-leiste__field { display: flex; flex-direction: column; gap: 4px; margin: 0; } .krone-leiste__field label { font: 400 13px/1.2 var(--krone-sans); letter-spacing: .08em; text-transform: uppercase; } .krone-leiste__field select, .krone-leiste__field input[type="date"] { min-height: 44px; padding: 0 12px; border: 1px solid var(--krone-gruen); border-radius: 0; background: var(--krone-weiss); font: 400 16px/1.2 var(--krone-sans); color: var(--krone-gruen); } .krone-leiste__action { margin: 0; } .krone-leiste__hint { flex: 1 1 100%; margin: 4px 0 0; font: 400 14px/1.5 var(--krone-sans); } /* Formulare (Fluent Forms) */ .fluentform .ff-el-form-control, .fluentform input[type="text"], .fluentform input[type="email"], .fluentform textarea, .fluentform select { border: 1px solid var(--krone-gruen); border-radius: 0; background: var(--krone-weiss); color: var(--krone-gruen); font-family: var(--krone-sans); font-size: 16px; min-height: 46px; } .fluentform .ff-el-input--label label { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 400; } /* -------------------------------------------------------------------------- 10 Footer (GP-Element 427): Tannengruen, Creme-Schrift, Gold hell als Akzent -------------------------------------------------------------------------- */ .krone-footer { background-color: var(--krone-gruen); color: var(--krone-creme); padding-left: 20px; padding-right: 20px; } .krone-footer h2, .krone-footer h3, .krone-footer h4, .krone-footer p, .krone-footer li, .krone-footer a, .krone-footer p a, .krone-footer li a, .krone-section.krone-footer p a, .krone-footer .entry-content p a { color: var(--krone-creme); text-decoration-color: var(--krone-gold-hell); } .krone-footer h2 { font-size: clamp(22px, 2vw, 30px); } .krone-footer h3 { color: var(--krone-gold-hell); font-size: 12px; letter-spacing: .18em; margin-bottom: 14px; } .krone-footer .wp-block-heading { margin-bottom: 14px; } .krone-footer .krone-footer-claim { color: var(--krone-gold-hell); margin: 0 0 16px; font-family: var(--krone-serif); font-size: 22px; } .krone-footer .krone-footer-gruss { margin: 0; line-height: 1.75; } .krone-footer hr.wp-block-separator.krone-footer-linie, .krone-footer hr.krone-linie { width: 60px; height: 2px; margin: 36px auto; border: 0; background: var(--krone-gold-hell); opacity: 1; } .krone-footer .krone-footer-adresse, .krone-footer .krone-footer-draht { margin: 0 0 8px; } .krone-footer .krone-footer-anreise { margin: 0; } .krone-footer .krone-social { margin: 26px 0 0; } .krone-footer .krone-footer-nav { margin: 42px 0 12px; } .krone-footer .krone-footer-nav a { display: inline-block; margin: 0 7px; } .krone-footer .krone-footer-recht { margin: 0; font-size: 14px; } .krone-footer .krone-social a, .krone-footer .krone-footer-nav a, .krone-footer .krone-footer-recht a, .krone-footer .krone-footer-anreise a { text-decoration: none; } .krone-footer a:hover, .krone-footer a:focus { color: var(--krone-gold-hell); text-decoration: underline; } .krone-footer .krone-footer-seit { font-family: var(--krone-sans); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--krone-gold-hell); margin: 30px 0 0; } .krone-footer .krone-footer-logo img { width: 200px; height: auto; margin: 0 auto 18px; display: block; filter: brightness(0) invert(1); opacity: .95; } .krone-footer ul { list-style: none; margin: 0; padding: 0; } .krone-footer ul li { padding: 3px 0; } .site-info.site-footer, footer.site-info, .site-footer { display: none; } /* -------------------------------------------------------------------------- 11 Fokus, Bewegung, Kleinigkeiten -------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--krone-gruen); outline-offset: 0; box-shadow: 0 0 0 6px var(--krone-creme); } .krone-dunkel a:focus-visible, .krone-footer a:focus-visible, .krone-hero a:focus-visible, .slideout-navigation a:focus-visible, body:has(.krone-hero):not(.krone-scrolled) .site-header a:focus-visible { outline-color: var(--krone-creme); box-shadow: 0 0 0 6px var(--krone-gruen); } @supports not selector(:focus-visible) { a:focus, button:focus, input:focus, select:focus, textarea:focus { outline: 3px solid var(--krone-gruen); box-shadow: 0 0 0 6px var(--krone-creme); } } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); } img { max-width: 100%; } /* -------------------------------------------------------------------------- 12 Luft (Rueckmeldung Johannes 20.09.2026: die ganze Seite airy) Groessere Sektionshoehen, weitere Spalten, mehr Abstand unter Titeln, schmalerer Inhalt mit breiteren Raendern. -------------------------------------------------------------------------- */ .krone-section { padding-top: clamp(64px, 7.5vw, 112px); padding-bottom: clamp(64px, 7.5vw, 112px); } .krone-section-eng { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); } @media (min-width: 769px) { .krone-section > .wp-block-group__inner-container { max-width: min(86%, 1320px); } } .wp-block-columns { gap: clamp(24px, 3.5vw, 56px); } body { line-height: 1.7; } p { margin-bottom: 1.5em; } .krone-kicker, p.krone-kicker { margin-bottom: 22px; } h1 { margin-bottom: .6em; } h2:not(.krone-subheadline):not(.krone-card-title):not(.krone-unterabschnitt) { margin-bottom: .8em; } .krone-subheadline, h2.krone-subheadline, p.krone-subheadline { margin-bottom: 1.6em; max-width: 720px; } .krone-aufloesung, .krone-saeulen, .krone-zimmer-teaser { margin-top: clamp(24px, 3vw, 44px); } .krone-aufloesung figure { margin-bottom: 26px; } .krone-saeule figure { margin-bottom: 30px; } .krone-saeule h2 { margin-bottom: 16px; } .krone-saeule p { margin-bottom: 20px; line-height: 1.7; } .krone-aufloesung .krone-schritt { margin-bottom: 10px; } .krone-aufloesung + .krone-satz, .krone-aufloesung-satz { margin-top: clamp(36px, 4.5vw, 64px); } p.krone-satz, .krone-satz { line-height: 1.42; } .krone-google .wp-block-column { padding: 8px 0; } .krone-google-zahl, p.krone-google-zahl { margin-bottom: 14px; } .krone-restaurant-teaser .wp-block-column:last-child { padding-left: clamp(0px, 2vw, 32px); } .krone-hero-inhalt { padding-bottom: clamp(56px, 7vw, 96px); } .krone-hero .krone-kicker { margin-bottom: 24px; } .krone-hero h1 { margin-bottom: .5em; } .wp-block-buttons { margin-top: 10px; } .krone-dunkel .krone-satz { margin-bottom: 1.2em; } .krone-footer.krone-section { padding-top: clamp(64px, 7vw, 96px); padding-bottom: clamp(48px, 5vw, 72px); } @media (max-width: 768px) { .krone-section { padding-top: 56px; padding-bottom: 56px; } .wp-block-columns { gap: 32px; } .krone-saeulen .wp-block-column + .wp-block-column { margin-top: 12px; } } /* Gleichfarbige Nachbarsektionen: Abstaende nicht addieren (Rueckmeldung 20.09.). 02.10.2026: Wert von clamp(12px,1.5vw,24px) auf clamp(28px,3.5vw,52px), weil das GeneratePress-Polster der Innencontainer (40/30 px) jetzt neutralisiert ist; Ergebnis je Uebergang ca. 100 px Desktop / 56 px mobil. */ .krone-section:not(.krone-section-beige):not(.krone-dunkel):not(.krone-einstieg) + .krone-section:not(.krone-section-beige):not(.krone-dunkel), .krone-section-beige + .krone-section-beige, .krone-dunkel + .krone-dunkel { padding-top: clamp(28px, 3.5vw, 52px); } .krone-section:not(.krone-section-beige):not(.krone-dunkel):not(.krone-einstieg):has(+ .krone-section:not(.krone-section-beige):not(.krone-dunkel)), .krone-section-beige:has(+ .krone-section-beige), .krone-dunkel:has(+ .krone-dunkel) { padding-bottom: clamp(28px, 3.5vw, 52px); } /* Unterzeilen in linksbuendigen Sektionen nicht zentrieren (constrained-Layout setzt auto-Raender) */ .krone-section .krone-subheadline:not(.has-text-align-center) { margin-left: 0 !important; } /* Letzte Elemente einer Sektion ohne Nachlauf */ .krone-section > :last-child, .krone-section .wp-block-columns:last-child, .krone-section .wp-block-column > p:last-child { margin-bottom: 0; } .krone-google { margin-bottom: 0; } .krone-google .wp-block-column { padding: 0; } /* Zimmerseiten (20.09.2026) */ .krone-card-title a, .entry-content h2.krone-card-title a, .entry-content h3.krone-card-title a { text-decoration: none; } ul.krone-cols-2 { list-style: none; padding-left: 0; margin: 0; } ul.krone-cols-2 li { position: relative; padding: 4px 0 4px 20px; break-inside: avoid; } ul.krone-cols-2 li::before { content: ""; position: absolute; left: 0; top: 16px; width: 10px; height: 1px; background: var(--krone-gold); } .krone-zimmer-text .wp-block-column:last-child { padding-top: 6px; } .krone-karte-satz { margin-bottom: 18px; } .krone-fakten h3 { margin-bottom: 8px; } .krone-fakten p { font-size: 16px; } /* Hero innerhalb von entry-content: GP-Innencontainer nicht auf 840 px deckeln */ .krone-hero > .wp-block-group__inner-container { max-width: none; width: 100%; } /* Preislisten und Faktenraster (Wellness, 20.09.2026) */ ul.krone-preise { list-style: none; margin: 0 0 24px; padding: 0; } ul.krone-preise li { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 16px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--krone-linie); font-size: 16px; } ul.krone-preise li::before { display: none; } .krone-preis-dauer { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; opacity: .8; white-space: nowrap; } .krone-preis-wert { font-family: var(--krone-serif); font-size: 20px; font-weight: 500; white-space: nowrap; min-width: 64px; text-align: right; } .krone-preise-raster + .krone-preise-raster { margin-top: 24px; } .krone-preise-raster h3 { margin-bottom: 10px; } p.krone-hinweis { font-size: 15px; opacity: .85; } .krone-fakten + .krone-fakten { margin-top: 8px; } @media (max-width: 600px) { ul.krone-preise li { grid-template-columns: 1fr auto; } .krone-preis-dauer { grid-column: 1 / -1; } } /* Teaserkarten: Luft zwischen Bild und Kicker */ .krone-grid .wp-block-column > figure + p.krone-kicker, .krone-saeule figure + p.krone-kicker, .wp-block-column > .wp-block-image + .krone-kicker { margin-top: 20px; } .krone-grid .wp-block-column > .wp-block-image { margin-bottom: 0; } /* Siegel-Raster (Restaurant) */ .krone-siegel h3 { margin-bottom: 4px; font-size: 13px; } .krone-siegel + .krone-siegel { margin-top: 18px; } p.krone-siegel-wert { font-family: var(--krone-serif); font-size: 24px; font-weight: 500; margin: 0; } /* Offcanvas: Buchen als normaler Menuepunkt, nicht als Header-Knopf */ .slideout-navigation.main-navigation .main-nav ul li.buchen-button > a, .slideout-navigation.main-navigation .main-nav ul li.anfragen-button > a { background: transparent; box-shadow: none; padding: 9px 40px; margin: 0; font-family: var(--krone-serif); font-size: 22px; font-weight: 500; letter-spacing: .08em; color: var(--krone-creme); text-indent: 0; } .slideout-navigation.main-navigation .main-nav > ul > li { border-bottom: 1px solid rgba(244,240,230,.08); } .slideout-navigation.main-navigation .main-nav ul ul { padding-bottom: 8px; } /* Offcanvas im Overlay-Modus: feste Breite, Buchen ohne Knopfoptik (schlaegt die Hero-Header-Regeln) */ #generate-slideout-menu.slideout-navigation, .slideout-navigation.main-navigation { width: 440px !important; max-width: 90vw; } body .slideout-navigation.main-navigation .main-nav ul li.buchen-button > a, body:has(.krone-hero):not(.krone-scrolled) .slideout-navigation.main-navigation .main-nav ul li.buchen-button > a, body.krone-scrolled:has(.krone-hero) .slideout-navigation.main-navigation .main-nav ul li.buchen-button > a { background: transparent !important; color: var(--krone-gold-hell) !important; box-shadow: none !important; padding: 9px 40px; margin: 0; font-size: 22px; } .slideout-navigation.main-navigation .main-nav > ul > li > a { font-size: 21px; letter-spacing: .06em; white-space: nowrap; } /* GP-Overlay-Modus setzt zentrierte, grosse Punkte; hier linksbuendig und kompakt */ .slideout-navigation.do-overlay, .slideout-navigation.do-overlay .main-nav, .slideout-navigation.do-overlay .main-nav ul li a { text-align: left; } .slideout-navigation.do-overlay .main-nav > ul > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .slideout-navigation.do-overlay .main-nav > ul > li > a { flex: 1 1 auto; font-size: 21px; padding: 10px 40px; } .slideout-navigation.do-overlay .main-nav > ul > li > .dropdown-menu-toggle { flex: 0 0 auto; padding: 10px 28px 10px 10px; } .slideout-navigation.do-overlay .main-nav ul ul { flex: 1 1 100%; } .slideout-navigation.do-overlay .main-nav ul ul li { display: block; } .slideout-navigation.do-overlay .main-nav ul ul li a { text-align: left; padding: 6px 40px 6px 56px; font-size: 16px; } /* Offcanvas endgueltig: Punkte als Block, Pfeil absolut rechts, Unterpunkte links (ID-Selektor gegen GP-Overlay-Regeln) */ #generate-slideout-menu .main-nav > ul > li { display: block; position: relative; } #generate-slideout-menu .main-nav > ul > li > a { display: block; padding: 11px 72px 11px 40px; text-align: left; white-space: normal; } #generate-slideout-menu .main-nav > ul > li > .dropdown-menu-toggle { position: absolute; right: 24px; top: 6px; padding: 8px 10px; } #generate-slideout-menu .main-nav ul ul { display: none; } #generate-slideout-menu .main-nav > ul > li.sfHover > ul, #generate-slideout-menu .main-nav > ul > li > ul.toggled-on { display: block; } #generate-slideout-menu .main-nav ul ul li { display: block; } #generate-slideout-menu .main-nav ul ul li a, #generate-slideout-menu.do-overlay .main-nav ul ul li a { text-align: left !important; padding: 6px 40px 6px 56px !important; font-size: 16px; } /* Offcanvas: volle Panelbreite nutzen (GP setzt 44px Innenabstand und schmale Liste) */ #generate-slideout-menu .inside-navigation { padding: 56px 0 0 !important; max-width: none; width: 100%; } #generate-slideout-menu .main-nav, #generate-slideout-menu .main-nav > ul, #generate-slideout-menu .main-nav > ul > li { width: 100% !important; margin: 0; padding: 0; } #generate-slideout-menu .main-nav > ul > li > a { padding: 11px 64px 11px 36px !important; } #generate-slideout-menu .main-nav > ul > li > .dropdown-menu-toggle { right: 18px; } #generate-slideout-menu .main-nav ul ul li a { padding: 6px 36px 6px 52px !important; } #generate-slideout-menu .slideout-exit { padding: 16px 36px; } #generate-slideout-menu .main-nav ul ul li { text-align: left !important; } #generate-slideout-menu .main-nav ul ul li a { display: block; width: 100%; } /* ---------- Block-Editor (nur dort: WordPress haengt .editor-styles-wrapper vor) ---------- Canvas in Creme wie die Seite; der Seitenkopf zeigt im Editor kein Bild (HTML-Block wird als Code angezeigt), deshalb Tannengruen als Grund, damit Kicker und Titel lesbar bleiben. */ .editor-styles-wrapper { background: #F4F0E6; } .editor-styles-wrapper .krone-hero { background: #27352A; min-height: 520px; } .editor-styles-wrapper .krone-hero .wp-block-html { display: none; } .editor-styles-wrapper .krone-hero.is-selected .wp-block-html, .editor-styles-wrapper .krone-hero.has-child-selected .wp-block-html { display: block; } /* Im Editor liegt der Listeninhalt in einem RichText-Element, das Raster muss eine Ebene tiefer greifen. */ .editor-styles-wrapper ul.krone-preise li { display: block; } .editor-styles-wrapper ul.krone-preise li > [contenteditable], .editor-styles-wrapper ul.krone-preise li > .rich-text { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 16px; align-items: baseline; } /* ===================================================================================== Stilschicht "naeher am Bestand" (body.krone-nah, Schalter: wp option update krone_stil nah|aus) Lehnt Kopf und Hero an die bisherige Zeppelin-Seite an: grosses zentriertes Logo mit Wortmarke, vollflaechiger Hero mit zentrierter Versal-Headline und ruhiger Sans-Unterzeile, neutral statt gruen abgedunkelte Bilder, transluzente Kopfknoepfe, zentrierte Sektionstitel in den breiten Sektionen. Farben, Schriften, Keyline und Goldlinie bleiben die der neuen Marke. ===================================================================================== */ body.krone-nah .krone-hero-overlay, body.krone-nah .krone-fade-overlay { background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.10) 28%, rgba(0,0,0,.18) 58%, rgba(0,0,0,.58) 100%); } body.krone-nah:has(.krone-hero) .site-header::before { background: linear-gradient(rgba(0,0,0,.45) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,0) 100%); } body.krone-nah .krone-hero-still { min-height: min(100vh, 960px); align-items: center; } body.krone-nah .krone-hero-inhalt { text-align: center; padding: 200px 0 clamp(72px, 9vw, 120px); } body.krone-nah .krone-hero-still .krone-hero-inhalt > * { max-width: 980px; margin-left: auto; margin-right: auto; } body.krone-nah .krone-hero .krone-kicker { justify-content: center; } body.krone-nah .krone-hero h1, body.krone-nah .krone-hero h2.krone-hero-titel { font-size: clamp(38px, 5.4vw, 78px) !important; letter-spacing: .05em; line-height: 1.08; margin-bottom: .3em; text-shadow: 0 2px 28px rgba(0,0,0,.35); } body.krone-nah .krone-hero .krone-hero-unterzeile, body.krone-nah .krone-hero p.krone-satz { font-family: var(--krone-sans); font-weight: 300; font-size: clamp(17px, 1.4vw, 21px); letter-spacing: .03em; line-height: 1.5; } /* Sektionstitel der breiten Sektionen mittig (Lesetext-Sektionen bleiben linksbuendig) */ body.krone-nah .krone-section:not(.krone-lesetext) > .krone-kicker { justify-content: center; text-align: center; } body.krone-nah .krone-section:not(.krone-lesetext) > h2 { text-align: center; margin-left: auto; margin-right: auto; } @media (min-width: 769px) { /* Grosses Logo im Kopf, solange nicht gescrollt */ body.krone-nah .site-header .site-logo { width: 220px; top: 18px; } body.krone-nah .site-header .site-logo img { height: clamp(96px, 9.5vw, 140px); transition: height .25s ease; } body.krone-nah:not(:has(.krone-hero)) .site-header .site-logo img { height: 62px; } body.krone-nah:not(:has(.krone-hero)) .site-header .site-logo { width: 120px; top: 12px; } /* Transluzente Kopfknoepfe auf dem Hero */ body.krone-nah:has(.krone-hero):not(.krone-scrolled) .main-navigation .main-nav ul li.anfragen-button > a, body.krone-nah:has(.krone-hero):not(.krone-scrolled) .main-navigation .main-nav ul li.buchen-button > a { background: rgba(244,240,230,.2); color: var(--krone-creme); box-shadow: none; backdrop-filter: blur(3px); } body.krone-nah:has(.krone-hero):not(.krone-scrolled) .main-navigation .main-nav ul li.anfragen-button > a:hover, body.krone-nah:has(.krone-hero):not(.krone-scrolled) .main-navigation .main-nav ul li.buchen-button > a:hover { background: rgba(244,240,230,.38); color: var(--krone-creme); } } @media (max-width: 768px) { body.krone-nah .krone-hero-still { min-height: 88vh; } body.krone-nah .krone-hero-inhalt { padding-top: 160px; } body.krone-nah:has(.krone-hero):not(.krone-scrolled) .mobile-header-logo img { height: 96px !important; } } @media (max-width: 768px) { /* Handy: grosses Logo ueber dem Hero wie auf der Bestandsseite, Kicker ohne Strich (Zeilenumbruch) */ body.krone-nah:has(.krone-hero):not(.krone-scrolled) .mobile-header-navigation .site-logo { top: 22px; transform: translateX(-50%); } body.krone-nah:has(.krone-hero):not(.krone-scrolled) .mobile-header-navigation .site-logo img { height: 100px !important; max-height: none !important; width: auto !important; } body.krone-nah .krone-hero .krone-kicker::before { display: none; } body.krone-nah .krone-hero .krone-kicker { display: block; text-align: center; } } /* Bildwechsel mit zwei oder drei Bildern (Nachruestung Startseiten-Hero, Vorlage Seitenkopf) */ .krone-fade-2 .krone-fade-slide { animation: kroneFade2 14s linear infinite; } .krone-fade-2 .krone-fade-slide:nth-child(2) { animation-delay: 7s; } @keyframes kroneFade2 { 0% { opacity: 0; } 10% { opacity: 1; } 50% { opacity: 1; } 60% { opacity: 0; } 100% { opacity: 0; } } .krone-fade-2 .krone-fade-slide:first-child { animation-name: kroneFade2First; } @keyframes kroneFade2First { 0% { opacity: 1; } 50% { opacity: 1; } 60% { opacity: 0; } 90% { opacity: 0; } 100% { opacity: 1; } } .krone-fade-3 .krone-fade-slide { animation: kroneFade3 18s linear infinite; } .krone-fade-3 .krone-fade-slide:nth-child(2) { animation-delay: 6s; } .krone-fade-3 .krone-fade-slide:nth-child(3) { animation-delay: 12s; } @keyframes kroneFade3 { 0% { opacity: 0; } 8% { opacity: 1; } 33% { opacity: 1; } 45% { opacity: 0; } 100% { opacity: 0; } } .krone-fade-3 .krone-fade-slide:first-child { animation-name: kroneFade3First; } @keyframes kroneFade3First { 0% { opacity: 1; } 33% { opacity: 1; } 45% { opacity: 0; } 92% { opacity: 0; } 100% { opacity: 1; } } /* Dritte helle Flaeche: gebrochenes Weiss fuer Textsektionen, damit nicht alles beige ist */ .krone-section-weiss { background-color: #FBF9F4; } body.krone-nah .krone-section.krone-lesetext:not(.krone-dunkel):not(.krone-section-beige) { background-color: #FBF9F4; } /* Saeulen der Startseite mit versetzter Hoehe (jede zweite Spalte tiefer) */ @media (min-width: 782px) { body.krone-nah .krone-saeulen > .wp-block-column:nth-child(even) { margin-top: 88px; } } body.krone-nah .krone-section:has(> .krone-google) { background-color: #FBF9F4; } /* ---------- Umbau 30.09.2026: Bausteine fuer Anfragen, Karriere, Anreise, Blog, Galerie, Gut zu wissen, Inklusivleistungen, Sitemap, Impressum, Datenschutz ---------- */ /* Schlichter Seitenkopf ohne Bild (Rechtsseiten, Sitemap) */ .krone-seitenkopf { padding-top: clamp(56px, 6vw, 96px) !important; } .krone-seitenkopf h1 { font-size: clamp(34px, 4vw, 54px); line-height: 1.1; margin: 0 0 .3em; } .krone-seitenkopf .krone-seitenkopf-text { font-size: 19px; margin: 0; } /* Listen mit Goldstrich statt Punkt */ ul.krone-liste { list-style: none; margin: 0 0 8px; padding: 0; } ul.krone-liste li { position: relative; padding: 0 0 0 22px; margin: 0 0 10px; font-size: 17px; line-height: 1.6; } ul.krone-liste li::before { content: ""; position: absolute; left: 0; top: .8em; width: 12px; height: 1px; background: var(--krone-gold); } /* Rechtstexte: ruhige Zwischentitel */ .krone-rechtstext h2 { font-size: clamp(22px, 2vw, 28px); margin-top: 1.6em; margin-bottom: .5em; } .krone-rechtstext h3 { margin-top: 1.4em; } .krone-rechtstext p, .krone-rechtstext li { font-size: 17px; } /* Stellenkarten */ .krone-stellen { margin-top: 28px; gap: 24px; } .krone-stellen + .krone-stellen { margin-top: 24px; } .krone-stelle-karte { height: 100%; padding: 28px 28px 22px; background: #FBF9F4; box-shadow: inset 0 2px 0 var(--krone-gold), inset 0 0 0 1px var(--krone-linie); } .krone-stelle-karte h3.krone-stelle-titel { font-family: var(--krone-serif); font-weight: 500; font-size: 24px; line-height: 1.25; text-transform: none; letter-spacing: 0; margin: 0 0 8px; } .krone-stelle-karte h3.krone-stelle-titel a { color: var(--krone-gruen); text-decoration: none; } .krone-stelle-karte h3.krone-stelle-titel a:hover { text-decoration: underline; text-decoration-color: var(--krone-gold); text-underline-offset: .2em; } .krone-stelle-meta { font-size: 15px; margin: 0 0 14px; } /* Pakete (Inklusivleistungen) */ .krone-pakete { gap: 40px; } .krone-pakete + .krone-pakete { margin-top: 48px; } .krone-pakete .wp-block-column > .wp-block-image { margin: 0 0 20px; } .krone-pakete h3 { margin: 0 0 14px; } /* Sitemap */ .krone-sitemap { gap: 40px; } .krone-sitemap + .krone-sitemap { margin-top: 36px; } .krone-sitemap h2.krone-sitemap-titel { font-size: 22px; letter-spacing: .08em; margin: 0 0 14px; } .krone-sitemap-liste li a { color: var(--krone-gruen); } /* Formular-Sektion */ .krone-formular .fluentform { margin-top: 0; } @media (max-width: 781px) { .krone-stellen, .krone-pakete, .krone-sitemap { gap: 20px; } .krone-stellen > .wp-block-column:empty, .krone-sitemap > .wp-block-column:empty, .krone-fakten > .wp-block-column:empty { display: none; } } /* Seiten ohne Hero (Rechtsseiten, Stellen, Sitemap): Navigation wie auf Hero-Seiten ueber die volle Breite legen, sonst rutscht sie neben das mittige Logo und ueberlappt es (Befund 30.09.). */ @media (min-width: 769px) { body:not(:has(.krone-hero)) .site-header #site-navigation { position: absolute; z-index: 60; background: transparent; } body:not(:has(.krone-hero)) .site-header .inside-header { min-height: 84px; } } /* 404 in Markenfassung */ body.error404 .site-main { max-width: 760px; margin: 0 auto; padding: clamp(72px, 9vw, 140px) 20px clamp(64px, 8vw, 120px); } body.error404 .inside-article { background: transparent; padding: 0; } body.error404 .entry-title { font-size: clamp(32px, 4vw, 52px); line-height: 1.12; margin: 0 0 .5em; } body.error404 .entry-content p { font-size: 19px; } body.error404 .krone-kicker { display: flex; margin-bottom: 18px; } /* ---------- Neuigkeiten (Beitraege), 30.09.2026 ---------- */ /* Beitragsseite: GP-Container ohne Innenabstand, Inhalt in den eigenen Sektionen */ body.krone-beitragsseite .site-content, body.krone-beitragsseite .inside-article { padding: 0 !important; } body.krone-beitragsseite .inside-article { background: transparent; } body.krone-beitragsseite .entry-content { margin: 0; } body.krone-beitragsseite .featured-image, body.krone-beitragsseite .entry-meta, body.krone-beitragsseite .post-navigation, body.krone-beitragsseite .comments-area { display: none !important; } .krone-beitrag-kopf.krone-hero-still { min-height: min(62vh, 640px); } .krone-beitrag-spalte { max-width: 760px; margin: 0 auto; } .krone-beitrag-text p.krone-beitrag-lead { font-family: var(--krone-serif); font-weight: 500; font-size: clamp(22px, 2vw, 27px); line-height: 1.45; } .krone-beitrag-text h2 { margin-top: 1.4em; } .krone-termin { margin: 36px 0 8px; padding: 28px 30px 24px; background: var(--krone-creme-2); box-shadow: inset 0 2px 0 var(--krone-gold); } .krone-termin h3 { margin: 0 0 14px; } /* Query Loop: Karten wie die Teaser */ .krone-news .wp-block-post-template { gap: clamp(24px, 3vw, 40px); margin: 0; padding: 0; list-style: none; } .krone-news .wp-block-post-featured-image { margin: 0 0 20px; } .krone-news .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; } .krone-news .krone-news-kat { margin: 0 0 10px; } .krone-news .krone-news-kat a { color: inherit; text-decoration: none; pointer-events: none; } .krone-news .krone-news-kat .wp-block-post-terms__separator { padding: 0 .3em; } .krone-news h3.krone-card-title { margin: 0 0 6px; } .krone-news h3.krone-card-title a { color: var(--krone-gruen); text-decoration: none; } .krone-news .krone-news-datum { font-size: 14px; letter-spacing: .06em; margin: 0 0 10px; opacity: .8; } .krone-news .krone-ohne-datum .krone-news-datum { display: none; } .krone-news .krone-news-auszug p { margin: 0 0 12px; } .krone-news .wp-block-post-excerpt__more-link { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--krone-gruen); text-decoration: underline; text-decoration-color: var(--krone-gold); text-underline-offset: .45em; } .krone-news .wp-block-query-pagination { margin-top: 40px; gap: 18px; } .krone-news-weitere + .krone-details-link { margin-top: 28px; } @media (max-width: 781px) { .krone-news .wp-block-post-template.is-layout-grid { grid-template-columns: 1fr !important; } } /* Mehrere Kategorien im Kicker: Punkt statt Komma */ .krone-news .krone-news-kat .wp-block-post-terms__separator { display: none; } .krone-news .krone-news-kat a + .wp-block-post-terms__separator + a::before { content: "ยท "; } .krone-news-start { margin-top: clamp(24px, 3vw, 44px); } .krone-news-start + .krone-details-link { margin-top: 28px; } /* ---------- Kulinarischer Kalender (30.09.2026) ---------- */ .krone-terminliste .krone-termin-zeile { gap: clamp(20px, 3vw, 48px); padding: 30px 0; margin: 0; border-top: 1px solid var(--krone-linie); } .krone-terminliste .krone-termin-zeile:last-child { border-bottom: 1px solid var(--krone-linie); } .krone-terminliste h2 + .krone-termin-zeile { margin-top: 28px; } .krone-termin-tag { font-family: var(--krone-serif); font-weight: 500; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; margin: 0 0 4px; color: var(--krone-gruen); } .krone-termin-jahr { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; margin: 0; } .krone-termin-zeile h3.krone-termin-titel { font-family: var(--krone-serif); font-weight: 500; font-size: clamp(22px, 2vw, 27px); text-transform: none; letter-spacing: 0; margin: 0 0 8px; } .krone-termin-zeile .krone-kicker { margin-bottom: 10px; } .krone-termin-zeile p { margin: 0 0 10px; } .krone-news-stube { margin-top: clamp(24px, 3vw, 44px); } .krone-news-stube + .krone-details-link { margin-top: 28px; } @media (max-width: 781px) { .krone-terminliste .krone-termin-zeile { gap: 6px; padding: 24px 0; } } /* 30.09.2026: kein Goldstrich mehr vor den Kicker-Zeilen (Johannes). Kicker bleiben als Versalzeile. */ .krone-kicker::before, p.krone-kicker::before, .krone-dunkel .krone-kicker::before, .krone-hero .krone-kicker::before { content: none !important; display: none !important; } .krone-kicker, p.krone-kicker { gap: 0; } /* Ohne Telefon im Kopf: Anfragen/Buchen rechtsbuendig halten */ @media (min-width: 1100px) { .main-navigation .main-nav > ul > li.anfragen-button { margin-left: auto; } } /* Off-Canvas-Menue: Schrift immer Creme auf Tannengruen, auch wenn die Kopfzeile im Scroll-Zustand ist (die Kopfzeilen-Regel body.krone-scrolled ... .main-navigation li a faerbte es gruen auf gruen, Befund 30.09.). */ #generate-slideout-menu.main-navigation .main-nav ul li a, body.krone-scrolled #generate-slideout-menu.main-navigation .main-nav ul li a { color: var(--krone-creme) !important; } #generate-slideout-menu.main-navigation .main-nav ul li a:hover, #generate-slideout-menu.main-navigation .main-nav ul li a:focus { color: var(--krone-gold-hell) !important; } #generate-slideout-menu.main-navigation .main-nav > ul > li.menu-item-418 > a { color: var(--krone-gold-hell) !important; } #generate-slideout-menu.main-navigation .dropdown-menu-toggle, body.krone-scrolled #generate-slideout-menu.main-navigation .dropdown-menu-toggle { color: var(--krone-gold-hell) !important; } #generate-slideout-menu .slideout-exit, body.krone-scrolled #generate-slideout-menu .slideout-exit { color: var(--krone-creme) !important; } /* ===================================================================================== Umsetzung Review 01.10.2026 (Umsetzungsplan 12, Paket P1): mobiler Kopf, Mobilleiste, Trefferflaechen. Sicherung der Datei: krone.css.vor-umsetzung-2026-10-01.bak ===================================================================================== */ @media (max-width: 768px) { /* P1.1 Ab dem Scrollen liegt der Kopf fixiert ueber hellen Flaechen: Creme hinterlegen, Logo und Menue-Symbol dunkel (wie der Desktop-Kopf). Vorher Creme auf Creme, 1,3:1. */ body.krone-scrolled .mobile-header-navigation, body.krone-scrolled:has(.krone-hero) .mobile-header-navigation { background-color: var(--krone-creme); box-shadow: inset 0 -1px 0 var(--krone-linie); } body.krone-scrolled:has(.krone-hero) .mobile-header-navigation .site-logo img { filter: none; } body.krone-scrolled:has(.krone-hero) .mobile-header-navigation .menu-bar-item.slideout-toggle a { color: var(--krone-gruen); } /* Ungescrollt ueber hellen Hero-Fotos: leichter Schleier oben, damit Menue-Symbol und Logo mindestens 3:1 haben */ body:has(.krone-hero):not(.krone-scrolled) .mobile-header-navigation { background-image: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,0)); } /* P1.4 Startseite: Hero kuerzer, damit der erste Knopf ganz im ersten Bildschirm liegt (390 x 844, abzueglich 56 px Mobilleiste). Vorher 88vh, Knopf bei y=823. */ body.home.krone-nah .krone-hero-still, body.home .krone-hero-still { min-height: 72vh; min-height: 72svh; } } /* P1.2 Mobilleiste Anrufen | Anfragen | Buchen (wird von krone.js erzeugt, Werte aus krone_fe_links) */ .krone-mobilbar { display: none; } @media (max-width: 768px) { .krone-mobilbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; background: var(--krone-gruen); box-shadow: 0 -1px 0 rgba(244,240,230,.14); padding-bottom: env(safe-area-inset-bottom, 0px); transition: transform .25s ease; } .krone-mobilbar a { flex: 1 1 33.33%; display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 6px; color: var(--krone-creme); text-decoration: none; font: 700 13px/1.2 var(--krone-sans); letter-spacing: .12em; text-transform: uppercase; } .krone-mobilbar a + a { box-shadow: inset 1px 0 0 rgba(244,240,230,.2); } /* Buchen in Gold hell mit gruener Schrift (5,4:1), hebt sich vom Creme-Seitengrund ab */ .krone-mobilbar a.krone-mobilbar__buchen { background: var(--krone-gold-hell); color: var(--krone-gruen); box-shadow: none; } .krone-mobilbar a:focus-visible { outline: 2px solid var(--krone-gold-hell); outline-offset: -5px; } .krone-mobilbar.is-hidden { transform: translateY(110%); } /* Offcanvas offen: Leiste weg, sonst liegt sie ueber dem Menue */ body.slide-opened .krone-mobilbar, html.slide-opened .krone-mobilbar, body.offside-js--is-open .krone-mobilbar { transform: translateY(110%); } } @media (prefers-reduced-motion: reduce) { .krone-mobilbar { transition: none; } } /* P1.5 Trefferflaechen mindestens 44 px. Polster plus gleich grosser Gegenrand: die Flaeche waechst, Schrift, Linie und Abstaende bleiben, wo sie waren. */ body .krone-einstieg .wp-block-button.krone-btn-linie > .wp-block-button__link { padding-top: 21px; margin-top: -9px; } .krone-details-link a, .entry-content .krone-details-link a, a.krone-textlink, .entry-content a.krone-textlink { padding-top: 17px; margin-top: -17px; } .krone-card-title a, .entry-content h2.krone-card-title a, .entry-content h3.krone-card-title a, .krone-news h3.krone-card-title a { padding-top: 13px; padding-bottom: 13px; margin-top: -13px; margin-bottom: -13px; } .krone-news .wp-block-post-excerpt__more-link { display: inline-block; padding-top: 11px; padding-bottom: 11px; margin-top: -11px; margin-bottom: -11px; } .krone-news .krone-news-kat a { padding-top: 11px; padding-bottom: 11px; } .krone-footer .krone-footer-draht a, .krone-footer .krone-footer-anreise a, .krone-footer .krone-social a { padding-top: 11px; padding-bottom: 11px; } .krone-footer .krone-footer-nav a { padding-top: 7px; padding-bottom: 7px; margin-top: -7px; margin-bottom: -7px; } .krone-footer .krone-footer-recht a { padding-top: 14px; padding-bottom: 14px; } /* P2 Anfrageformular (Fluent Form 3): Ja/Nein-Auswahl nebeneinander, Trefferflaeche 44 px */ .krone-formular .ff-el-form-check { display: inline-block; margin: 0 28px 0 0; } .krone-formular .ff-el-form-check-label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; } .krone-formular input[type="radio"], .krone-formular input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: var(--krone-gruen); } .krone-formular .krone-form-hinweis p { font-size: 16px; line-height: 1.6; margin: 0; } .krone-formular p.krone-hinweis { margin-top: 28px; } /* P5 Dokument-Knoepfe (krone-dokumente.php): eigene Knopfzeile unter den vorhandenen Knoepfen */ .wp-block-buttons.krone-dokument { margin-top: 12px; } .krone-dokument__info { text-transform: none; letter-spacing: .02em; margin-left: .35em; } /* Textlink direkt unter Knoepfen: Abstand, damit sich die 44-px-Flaechen nicht ueberlappen */ .wp-block-buttons + .krone-details-link { margin-top: 22px; } /* P18.1 Keine automatische Silbentrennung in Ueberschriften auf dem Handy ("GE-NUG", "DOPPELZIM-MER", "un-seren"). Lange Woerter brechen nur noch, wenn sie sonst ueberlaufen wuerden (overflow-wrap bleibt). */ @media (max-width: 600px) { h1, h2, h3, h4, .wp-block-heading, .entry-title { -webkit-hyphens: manual; hyphens: manual; } } @media (max-width: 600px) { /* Ohne Silbentrennung muessen Hero-Woerter auf eine Zeile passen: die verschachtelten Innenabstaende (30 px + 92 % + 30 px) liessen nur 244 von 390 px, jetzt 330 px wie bei den uebrigen Ueberschriften. */ body .krone-hero .krone-hero-inhalt { max-width: none; margin-left: 0; margin-right: 0; } body .krone-hero .krone-hero-inhalt > .wp-block-group__inner-container { padding-left: 0; padding-right: 0; } } /* ========================================================================== Vertikale Abstaende zwischen Sektionen (02.10.2026, Befund 09_abstaende, Variante B) 1. GeneratePress polstert jeden Gruppen-Innencontainer per Inline-CSS mit 40 px (mobil 30 px). In Krone-Sektionen kommt der Abstand schon aus .krone-section: oben/unten neutralisieren. 2. Erstes/letztes Element im Innencontainer ohne Rand-Abstand (die Regel ".krone-section > :last-child" trifft nur den Container selbst). 3. Zwei helle Sektionen hintereinander (Creme, Beige, Hellcreme sind kaum unterscheidbar): kuerzerer Uebergang. Dunkle Sektionen und Footer bleiben unberuehrt. ========================================================================== */ .site-main .krone-section > .wp-block-group__inner-container { padding-top: 0; padding-bottom: 0; } .krone-section > .wp-block-group__inner-container > :first-child { margin-top: 0; } .krone-section > .wp-block-group__inner-container > :last-child { margin-bottom: 0; } .krone-section:not(.krone-dunkel):not(.krone-footer) + .krone-section:not(.krone-dunkel):not(.krone-footer) { padding-top: clamp(40px, 5vw, 76px); } .krone-section:not(.krone-dunkel):not(.krone-footer):has(+ .krone-section:not(.krone-dunkel):not(.krone-footer)) { padding-bottom: clamp(40px, 5vw, 76px); } /* ---------- Kalender: aufklappbare Menues + Bildnachweis (03.10.2026) ---------- */ .krone-termin-zeile .krone-menue { margin: 4px 0 16px; } .krone-termin-zeile .krone-menue > summary { display: inline-block; cursor: pointer; list-style: none; font-family: var(--krone-sans); font-size: 13px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--krone-gruen); border-bottom: 1px solid var(--krone-gold); padding-bottom: 4px; } .krone-termin-zeile .krone-menue > summary::-webkit-details-marker { display: none; } .krone-termin-zeile .krone-menue > summary::after { content: "+"; display: inline-block; margin-left: .7em; font-size: 16px; line-height: 1; transition: transform .2s ease; } .krone-termin-zeile .krone-menue[open] > summary::after { transform: rotate(45deg); } .krone-termin-zeile .krone-menue > summary:hover { border-bottom-width: 2px; } .krone-menue .krone-menue-karte { margin: 20px 0 0; padding: 26px 28px 12px; background: var(--krone-creme); box-shadow: inset 0 2px 0 var(--krone-gold); gap: 8px 40px; } .krone-menue .krone-menue-karte .krone-kicker { margin-bottom: 14px; } .krone-termin-zeile .krone-menue p.krone-gang { margin: 0 0 16px; font-size: 15px; line-height: 1.55; } .krone-menue p.krone-gang strong { font-family: var(--krone-serif); font-weight: 600; font-size: 19px; line-height: 1.3; } @media (max-width: 781px) { .krone-menue .krone-menue-karte { padding: 22px 18px 8px; } } @media (prefers-reduced-motion: reduce) { .krone-termin-zeile .krone-menue > summary::after { transition: none; } } p.krone-bildnachweis { font-size: 13px; letter-spacing: .02em; opacity: .8; margin-top: -4px; } .krone-menue .krone-menue-karte > .wp-block-group__inner-container { padding: 0; } /* ---------- Kopf: ganzes Logo klickbar (03.10.2026) ---------- #site-navigation liegt als 44 px hohe Leiste (position absolute, z-index 60) ueber die ganze Breite und damit quer ueber dem zentrierten Logo (.site-logo, z-index 2): Klicks auf die Krone landeten in der leeren Leiste, nur die Sterne unterhalb waren Link. Die Leiste selbst ist jetzt klick-durchlaessig, ihre Inhalte nicht. */ #site-navigation { pointer-events: none; } #site-navigation li, #site-navigation a, #site-navigation button, #site-navigation input, #site-navigation .menu-bar-items, #site-navigation .menu-bar-item, #site-navigation .menu-toggle { pointer-events: auto; } /* ---------- Kopf: kleine Krone auch auf Tablet quer (03.10.2026) ---------- Beim Scrollen wird .site-logo ausgeblendet (ab 769 px) und .krone-logo-scroll eingeblendet. Die kleine Krone war aber bis 1026 px per display:none versteckt -> zwischen 769 und 1026 px nach dem Scrollen gar kein Logo. */ @media (min-width: 769px) and (max-width: 1026px) { .krone-logo-scroll { display: block; } } /* 09.10.2026 (Fahrplan E12): Beitragsdatum in Uebersichten ausblenden */ .krone-news .krone-news-datum { display: none; } /* ===================================================================================== Umsetzung Plan 2, 09.10.2026 (Transkripte 08.10. / Fahrplan) ===================================================================================== */ /* S2 Einstiege: auf breiten Monitoren feste Aufteilung 4 + 3 statt zufaelligem Umbruch */ @media (min-width: 769px) { .krone-einstieg .wp-block-buttons { display: grid; grid-template-columns: repeat(4, max-content); justify-content: center; column-gap: clamp(28px, 4vw, 56px); row-gap: 22px; } .krone-einstieg .wp-block-buttons > .wp-block-button { margin: 0; justify-self: center; } } /* Gut zu wissen: Fakten-Bloecke laufen als zwei Spalten durch, statt paarweise mit Luecken */ @media (min-width: 769px) { .krone-fakten-fluss > .wp-block-group__inner-container > .wp-block-columns.krone-fakten { display: contents; } .krone-fakten-fluss > .wp-block-group__inner-container { column-count: 2; column-gap: 48px; } .krone-fakten-fluss > .wp-block-group__inner-container > .krone-kicker, .krone-fakten-fluss > .wp-block-group__inner-container > h2 { column-span: all; } .krone-fakten-fluss .krone-fakten > .wp-block-column { break-inside: avoid; display: block; margin: 0 0 28px; } } /* G3 Goldrahmen endet am Bild, nicht an der Bildunterschrift */ .krone-keyline figcaption { position: relative; z-index: 2; background: inherit; margin-top: 0; padding-top: 10px; } .krone-section:not(.krone-dunkel) .krone-keyline figcaption { background: var(--krone-creme); } .krone-section-beige .krone-keyline figcaption { background: var(--krone-creme-2); } /* S3 Band "Aktuell": Goldlinie oben und Markierung */ .krone-aktuell { box-shadow: inset 0 4px 0 var(--krone-gold-hell); } .krone-aktuell .krone-kicker::after { content: "Aktuell"; display: inline-block; margin-left: 14px; padding: 2px 10px; border: 1px solid var(--krone-gold-hell); color: var(--krone-gold-hell); font-size: 11px; letter-spacing: .16em; vertical-align: middle; } @media (min-width: 769px) { .krone-einstieg .wp-block-buttons { align-items: center; } } /* ===== Q6 Footer in drei Spalten, 09.10.2026 (Freigabe Johannes), Markup in GP-Element 427 ===== */ .krone-footer.krone-section { border-top: 1px solid var(--krone-gold-hell); padding-top: clamp(56px, 6vw, 80px); } .krone-footer .krone-footer-logo img { filter: none; opacity: 1; } .krone-footer .krone-footer-spalte .wp-block-group__inner-container > :first-child { margin-top: 0; } .krone-footer .krone-footer-spaltentitel { font-family: var(--krone-sans); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--krone-gold-hell); margin: 0 0 14px; } .krone-footer .krone-footer-draht a, .krone-footer .krone-footer-draht span, .krone-footer .krone-footer-google span { display: block; } .krone-footer .krone-footer-google { font-size: 14px; line-height: 1.6; opacity: .85; margin-top: 18px; } .krone-footer .krone-footer-anreise { margin-top: 10px; } @media (max-width: 899px) { .krone-footer .krone-footer-spalte { margin-bottom: 36px; } .krone-footer .krone-footer-spaltentitel { text-align: center; } .krone-footer .krone-footer-draht a { padding: 4px 0; } .krone-footer .krone-footer-spalte-nav .krone-footer-nav { margin-top: 0; } } @media (min-width: 900px) { .krone-footer > .wp-block-group__inner-container { max-width: 1120px !important; } .krone-footer .krone-footer-spalten > .wp-block-group__inner-container { display: grid; grid-template-columns: 1.1fr 1fr .8fr; column-gap: 56px; align-items: start; } .krone-footer .krone-footer-spalte, .krone-footer .krone-footer-spalte .wp-block-group__inner-container > * { text-align: left; margin-left: 0; margin-right: 0; } .krone-footer .krone-footer-logo img { margin: 0 0 22px; width: 150px; } .krone-footer .krone-footer-claim { margin-bottom: 22px; } .krone-footer .krone-footer-nav { margin: 0; } .krone-footer .krone-footer-nav a { display: block; margin: 0; padding: 6px 0; } .krone-footer .krone-social { margin: 14px 0 0; } .krone-footer .krone-footer-draht a { display: block; padding: 4px 0; } .krone-footer hr.wp-block-separator.krone-footer-linie { width: 100%; height: 1px; margin: 48px 0 24px; opacity: .6; } .krone-footer .krone-footer-recht { text-align: center; } } /* Umbruch: keine einzelnen Woerter in der letzten Zeile (09.10.2026) */ h1, h2, h3, .krone-hero-unterzeile, .krone-satz { text-wrap: balance; } /* Suche im Seitenmenue (09.10.2026) */ .slideout-navigation .krone-suche { display: flex; gap: 8px; margin: 6px 20px 18px; } .slideout-navigation .krone-suche input[type="search"] { flex: 1 1 auto; min-width: 0; font: 400 15px/1.3 var(--krone-sans); padding: 10px 12px; border: 1px solid rgba(244,240,230,.35); border-radius: 0; background: rgba(244,240,230,.08); color: var(--krone-creme); } .slideout-navigation .krone-suche input[type="search"]::placeholder { color: rgba(244,240,230,.6); } .slideout-navigation .krone-suche button { font: 400 12px/1 var(--krone-sans); letter-spacing: .14em; text-transform: uppercase; padding: 10px 14px; border: 1px solid var(--krone-gold-hell); background: transparent; color: var(--krone-gold-hell); cursor: pointer; } .slideout-navigation .krone-suche button:hover, .slideout-navigation .krone-suche button:focus-visible { background: var(--krone-gold-hell); color: var(--krone-gruen); } /* Suchergebnisse: Trefferliste wie die Neuigkeiten-Karten */ body.search .page-header { padding: 40px 20px 10px; text-align: center; } body.search .page-header h1 { font-size: clamp(24px, 3vw, 36px); } body.search .site-main article { max-width: 760px; margin: 0 auto 28px; padding: 0 20px 24px; border-bottom: 1px solid var(--krone-linie); } body.search .site-main article h2 { font-size: 22px; text-transform: none; letter-spacing: 0; margin-bottom: 8px; } body.search .site-main article .entry-meta, body.search .site-main article .post-image { display: none; } /* 10.10.2026 Anwendungen: Kurzbeschreibung unter dem Namen */ .krone-preis-zusatz { display: block; font-size: 14px; line-height: 1.4; opacity: .8; margin-top: 2px; } .krone-preise-raster ul.krone-preise + h3 { margin-top: 28px; } /* axe 11.10.2026: Trefflaechen der Bewertungslinks im Footer (WCAG 2.5.8) und Kontrast der Weiterlesen-Links auf der Suchseite (1.4.3) */ .krone-footer a[href*="maps.google.com"] { display: inline-block; padding: 4px 0; } body.search .site-main article a.read-more { color: var(--krone-gruen); text-decoration: underline; text-underline-offset: 3px; } /* ===================================================================================== Barrierefreiheit 11.10.2026 (agenten/pruefung-barrierefreiheit.md) ===================================================================================== */ /* F1 (A1) Hero-Schleier 60 % am 11.10.2026 auf Wunsch des Hauses wieder entfernt: leichter krone-nah-Schleier gilt, Einschraenkung steht in der Erklaerung (616). Loesung nach dem Start: Text unter dem Foto oder Glasband (arbeit/hero_varianten3.py). */ /* F2 (A2) Kopf ueber dem Hero: dunklerer Schleier, Kopfknoepfe mit gruenem Glas statt Creme-Glas. Nachgerechnet: Menuelinks min. 5,38:1, Knoepfe min. 9,53:1. */ @media (min-width: 769px) { body.krone-nah:has(.krone-hero):not(.krone-scrolled) .main-navigation .main-nav ul li.anfragen-button > a, body.krone-nah:has(.krone-hero):not(.krone-scrolled) .main-navigation .main-nav ul li.buchen-button > a { background: rgba(29,41,33,.55); color: var(--krone-creme); } body.krone-nah:has(.krone-hero):not(.krone-scrolled) .main-navigation .main-nav ul li.anfragen-button > a:hover, body.krone-nah:has(.krone-hero):not(.krone-scrolled) .main-navigation .main-nav ul li.buchen-button > a:hover { background: rgba(29,41,33,.8); color: var(--krone-creme); } } /* F3 (A3) Fluent Forms: Fehlertext, Pflichtstern, Platzhalter */ .fluentform .text-danger, .fluentform .ff-el-is-error .text-danger { color: #A4282B; font-size: 14px; } /* 6,84:1 auf #FBF9F4 */ .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after { color: #A4282B; } .fluentform .ff-el-form-control::placeholder { color: #5F6660; opacity: 1; } /* 5,91:1 auf Weiss */ /* F4 (A4) Unsichtbare Logo-Links aus dem Tab-Ablauf nehmen */ @media (min-width: 769px) { .krone-logo-scroll { visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; } body.krone-scrolled .krone-logo-scroll { visibility: visible; transition-delay: 0s; } body.krone-scrolled .site-header .site-logo { visibility: hidden; } } /* F5 (A5, B12) Mobilleiste: Fokus auf "Buchen" sichtbar, versteckte Leiste nicht fokussierbar, bei sehr geringer Hoehe (Zoom 400 %, Querformat) ausblenden */ @media (max-width: 768px) { .krone-mobilbar { transition: transform .25s ease, visibility 0s linear 0s; } .krone-mobilbar.is-hidden, body.slide-opened .krone-mobilbar, html.slide-opened .krone-mobilbar, body.offside-js--is-open .krone-mobilbar { visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; } .krone-mobilbar a.krone-mobilbar__buchen:focus-visible { outline-color: var(--krone-gruen); } /* 5,41:1 */ } @media (max-width: 768px) and (max-height: 480px) { .krone-mobilbar { display: none; } } @media (prefers-reduced-motion: reduce) { .krone-mobilbar, .krone-mobilbar.is-hidden { transition: none; } } /* F6 (A6) Fluent Forms: Krone-Fokusring statt 1-px-Farbwechsel bzw. Deckkraft */ body .fluentform .ff-el-form-control:focus { outline: 3px solid var(--krone-gruen); outline-offset: 2px; border-color: var(--krone-gruen); color: var(--krone-gruen); box-shadow: none; } body .fluentform .ff-btn-submit:focus-visible { opacity: 1; outline: 3px solid var(--krone-gruen); outline-offset: 3px; } body .fluentform input[type="radio"]:focus-visible, body .fluentform input[type="checkbox"]:focus-visible { outline: 3px solid var(--krone-gruen); outline-offset: 3px; } /* F9 (A9) Datumskalender flatpickr in Krone-Farben. body-Praefix noetig, flatpickr.css laedt NACH krone.css */ body .flatpickr-calendar .flatpickr-day.today { border-color: var(--krone-gruen); } body .flatpickr-calendar .flatpickr-day:hover, body .flatpickr-calendar .flatpickr-day:focus, body .flatpickr-calendar .flatpickr-day.today:hover, body .flatpickr-calendar .flatpickr-day.today:focus { background: var(--krone-creme-2); border-color: var(--krone-gruen); color: var(--krone-gruen); /* 10,27:1 */ outline: 2px solid var(--krone-gruen); outline-offset: 1px; /* 12,89:1 gegen Weiss */ } body .flatpickr-calendar .flatpickr-day.selected, body .flatpickr-calendar .flatpickr-day.selected:hover, body .flatpickr-calendar .flatpickr-day.selected:focus { background: var(--krone-gruen); border-color: var(--krone-gruen); color: var(--krone-creme); /* 11,33:1 */ } body .flatpickr-calendar .flatpickr-day.prevMonthDay:not(.flatpickr-disabled), body .flatpickr-calendar .flatpickr-day.nextMonthDay:not(.flatpickr-disabled) { color: #6B6B6B; } /* 5,33:1 */ /* F13 (A13) Pause-Knopf immer sichtbar */ .krone-fade__pause { opacity: .9; } .krone-fade:hover .krone-fade__pause, .krone-fade__pause:focus-visible, .krone-fade[data-krone-paused="true"] .krone-fade__pause { opacity: 1; } /* F14 (A14) Suche im Seitenmenue */ .slideout-navigation .krone-suche input[type="search"] { border-color: rgba(244,240,230,.55); } /* 4,60:1 */ .slideout-navigation .krone-suche input[type="search"]::placeholder { color: rgba(244,240,230,.75); } /* 5,90:1 */ /* F18 (B8, B14) Rechtszeile im Footer unterstrichen, Textlinks in Beige mit gruener Linie */ .krone-footer .krone-footer-recht a { text-decoration: underline; text-decoration-color: var(--krone-gold-hell); text-underline-offset: .2em; } .krone-section-beige .krone-details-link a, .krone-section-beige a.krone-textlink { border-bottom-color: var(--krone-gruen); } /* F19 (B15) Fokusring mit Abstand zum Knopf, damit er sich vom gruenen Knopf abhebt */ body .wp-block-button__link:focus-visible, body .main-navigation .main-nav ul li.buchen-button > a:focus-visible, body .main-navigation .main-nav ul li.anfragen-button > a:focus-visible { outline-offset: 2px; box-shadow: 0 0 0 7px var(--krone-creme); } body .krone-dunkel .wp-block-button__link:focus-visible, body .krone-hero .wp-block-button__link:focus-visible, body:has(.krone-hero):not(.krone-scrolled) .main-navigation .main-nav ul li.buchen-button > a:focus-visible, body:has(.krone-hero):not(.krone-scrolled) .main-navigation .main-nav ul li.anfragen-button > a:focus-visible { box-shadow: 0 0 0 7px var(--krone-gruen); } /* 11.10.2026 Kartentitel als h3, Footer-Spaltentitel als h2 (Ueberschriftenlogik) */ /* Footer-Spaltentitel als h2: muss die globale h2-Regel (0,3,1) schlagen */ body .krone-footer .krone-footer-spalte h2.krone-footer-spaltentitel { font-family: var(--krone-sans); font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: .2em; text-transform: uppercase; color: var(--krone-gold-hell); margin: 0 0 14px; } /* ===================================================================================== 12.10.2026 Rueckmeldungen vom Handy am Go-Live-Tag ===================================================================================== */ /* 1 Mobilmenue: Schliessen-Knopf klein oben rechts statt grosses Feld ueber der Suche */ #generate-slideout-menu .slideout-exit, body.krone-scrolled #generate-slideout-menu .slideout-exit { position: absolute; top: 8px; right: 8px; width: 48px; height: 48px; padding: 0 !important; margin: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; z-index: 2; } #generate-slideout-menu .slideout-exit .gp-icon svg { width: 22px; height: 22px; } /* Bezugsbox fuer den Knopf ist das Panel selbst (GP-Innenbox liegt 84 px tiefer und war 'relative') */ #generate-slideout-menu .inside-navigation { position: static; } /* Nach Tippen oder Klicken keinen Fokusrahmen auf dem Schliessen-Knopf (iOS zeigt ihn bei Skript-Fokus) */ body.krone-zeiger #generate-slideout-menu .slideout-exit:focus, body.krone-zeiger #generate-slideout-menu .slideout-exit:focus-visible { outline: none; box-shadow: none; } /* 2 Wischleisten: naechste Karte deutlich angeschnitten, darunter Pfeile und Zaehler (krone.js initGridPfeile) */ @media (max-width: 768px) { .krone-grid > .wp-block-column { flex: 0 0 78% !important; } .krone-grid-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 6px 0 0; } /* Leiste gehoert sichtbar zu ihrer Reihe: Reihenabstand unter die Leiste verlegen (12.10.2026) */ body .krone-grid.krone-grid--nav { margin-bottom: 0 !important; } body .krone-grid--nav + .krone-grid-nav { margin: 6px 0 0 !important; } body .krone-grid--nav + .krone-grid-nav + * { margin-top: 44px !important; } .krone-grid-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--krone-gruen); background: transparent; color: var(--krone-gruen); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; } .krone-grid-nav button svg { width: 18px; height: 18px; } .krone-grid-nav button[disabled] { opacity: .35; cursor: default; } .krone-grid-nav span { font-family: var(--krone-sans); font-size: 13px; letter-spacing: .14em; color: var(--krone-gruen); min-width: 52px; text-align: center; } .krone-dunkel .krone-grid-nav button, .krone-dunkel .krone-grid-nav span { border-color: var(--krone-creme); color: var(--krone-creme); } } @media (min-width: 769px) { .krone-grid-nav { display: none; } } /* 3 Kopfbereich mobil: Titel und Unterzeile auf leicht dunkelgruenem Rechteck (Lesbarkeit auf hellen Fotos) */ @media (max-width: 768px) { body:not(.home) .krone-hero .krone-hero-inhalt > .wp-block-group__inner-container { background: rgba(39,53,42,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 20px 16px 22px; margin-left: -16px; margin-right: -16px; /* Textbreite bleibt 330 px (siehe 600px-Regel oben) */ } body:not(.home) .krone-hero h1, body:not(.home) .krone-hero h2.krone-hero-titel { text-shadow: none; } /* Startseite: keine Hinterlegung, der Text steht frei auf dem Poolfoto (Wunsch 12.10.2026) */ }