/* CMS-Erweiterungen und barriereärmere Hero-Darstellung */ :root{ --cms-gold:#c4a15a; --cms-gold-dark:#9c7838; --cms-dark:#312b25; --cms-cream:#bfa88f; --cms-white:#fffdf8; --cms-text:#2f2b26; --cms-muted:#726a60; --bottom-action-h:68px; } .container,.cms-container{width:80%;max-width:1280px;padding-left:0;padding-right:0} @media (max-width:900px){.container,.cms-container{width:88%}} @media (max-width:560px){.container,.cms-container{width:92%}} .cms-hero{ min-height:calc(100svh - var(--bottom-action-h)); padding:calc(var(--nav-h) + 20px) 0 calc(var(--bottom-action-h) + 24px); display:flex;align-items:center;justify-content:center;text-align:center; } .cms-hero__bg::after{display:none!important} .cms-hero__picture,.cms-hero__picture img{width:100%;height:100%;display:block} .cms-hero__picture img{object-fit:cover;object-position:center center} .cms-hero__content{max-width:1120px;margin-left:auto;margin-right:auto;text-align:center;font-family:Arial,Helvetica,sans-serif} .cms-hero .hero__eyebrow{ color:#f4d18a;border-bottom-color:rgba(244,209,138,.7); font-family:Arial,Helvetica,sans-serif;font-weight:800;letter-spacing:.35em; text-shadow:0 2px 3px rgba(0,0,0,.95),0 6px 16px rgba(0,0,0,.75); } .cms-hero h1{ font-family:Arial,Helvetica,sans-serif;font-weight:900;color:#fff; font-size:clamp(2.2rem,5.2vw,5.2rem);line-height:1.02; letter-spacing:-.045em;max-width:1100px;margin-left:auto;margin-right:auto; text-shadow:0 3px 3px rgba(0,0,0,.95),0 10px 24px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,1); } .cms-hero .hero__tagline{ font-family:Arial,Helvetica,sans-serif;font-style:normal;font-weight:800; color:#fff;font-size:clamp(1.1rem,2vw,1.7rem);letter-spacing:.02em; text-shadow:0 2px 3px rgba(0,0,0,.95),0 8px 20px rgba(0,0,0,.85); } .cms-hero .hero__sub{ margin-left:auto;margin-right:auto;max-width:860px;color:#fff;font-weight:700; font-family:Arial,Helvetica,sans-serif;font-size:clamp(.98rem,1.45vw,1.2rem);line-height:1.55; text-shadow:0 2px 3px rgba(0,0,0,1),0 8px 18px rgba(0,0,0,.88); } .cms-hero__features{margin:1.2rem auto 1rem;max-width:900px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .cms-hero .hero__feature{ background:rgba(35,29,24,.38);border:1px solid rgba(255,255,255,.36);box-shadow:0 8px 24px rgba(0,0,0,.25); backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);font-family:Arial,Helvetica,sans-serif; } .cms-hero .hero__feature strong{font-family:Arial,Helvetica,sans-serif;font-weight:900;color:#fff;text-shadow:0 2px 3px #000,0 6px 12px rgba(0,0,0,.85)} .cms-hero .hero__feature small{color:#ffe0a2;font-weight:800;text-shadow:0 2px 3px #000,0 4px 10px rgba(0,0,0,.85)} .cms-hero__buttons{justify-content:center;margin:.8rem auto 0!important} .cms-hero__buttons .btn{font-family:Arial,Helvetica,sans-serif;font-weight:900;text-shadow:0 1px 1px rgba(0,0,0,.5)} .cms-hero__buttons .btn--gold{background:var(--cms-gold);border-color:var(--cms-gold);color:#211b16;text-shadow:none} .cms-hero__buttons .btn--ghost-light{background:rgba(30,25,20,.42);border-color:rgba(255,255,255,.55);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.25)} @media (max-height:760px) and (min-width:760px){ .cms-hero{padding-top:calc(var(--nav-h) + 10px)} .cms-hero h1{font-size:clamp(2rem,4.5vw,4.2rem);margin-bottom:.35em} .cms-hero .hero__sub{margin-bottom:.6rem;line-height:1.45} .cms-hero__features{margin:.7rem auto .5rem}.cms-hero .hero__feature{padding:12px 14px}.cms-hero__buttons .btn{padding:13px 24px} } @media (max-width:760px){ .cms-hero{min-height:calc(100svh - 64px);padding:calc(var(--nav-h) + 18px) 0 90px} .cms-hero__features{grid-template-columns:1fr;max-width:390px}.cms-hero .hero__feature{text-align:center;display:block} .cms-hero__buttons .btn{flex:1 1 100%;justify-content:center} } .cms-section{position:relative;background-size:cover;background-position:center}.cms-section--white{background:#fff} .cms-section--image>.container{position:relative;z-index:1}.cms-section--image::before{content:"";position:absolute;inset:0;z-index:0;display:none}.cms-section--overlay-dark::before{display:block;background:rgba(0,0,0,.45)}.cms-section--overlay-light::before{display:block;background:rgba(255,255,255,.62)}.cms-section--overlay-gold::before{display:block;background:rgba(196,161,90,.35)} .cms-title--left{text-align:left}.cms-title--center{text-align:center}.cms-title--right{text-align:right}.cms-title h1,.cms-title h2,.cms-title h3,.cms-title h4{margin-bottom:.35em}.cms-text.lead{font-size:1.08rem}.cms-text{margin-bottom:2rem}.cms-button{text-align:center;margin:2rem 0 0}.cms-button--left{text-align:left}.cms-button--right{text-align:right} .cms-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:34px 0}.cms-card-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}.cms-card-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}.cms-card-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}.cms-card{display:block;background:var(--white);border:1px solid var(--beige);border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow-sm);transition:transform var(--t),box-shadow var(--t),border-color var(--t)}.bg-dark .cms-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}.cms-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--gold)}.cms-card h3{margin-bottom:.5rem}.cms-card p{color:var(--text-muted);margin-bottom:1rem}.cms-card__text{color:var(--text-muted);margin-bottom:1rem}.cms-card__text p{margin:.2rem 0 .75rem}.cms-card__text ul,.cms-card__text ol{margin:.4rem 0 .8rem 1.2rem}.bg-dark .cms-card p,.bg-dark .cms-card__text{color:rgba(191,168,143,.78)}.cms-card__meta{display:inline-block;color:var(--gold-dark);font-size:.76rem;text-transform:uppercase;letter-spacing:.2em}.bg-dark .cms-card__meta{color:var(--gold-light)} .cms-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px;margin:34px 0}.cms-column{background:rgba(255,255,255,.45);border:1px solid var(--beige);border-radius:var(--r-lg);padding:28px}.cms-whitebox{background:var(--white);border:1px solid var(--beige);border-radius:var(--r-lg);padding:36px;box-shadow:var(--shadow-sm);margin:30px 0}.cms-image{margin:36px auto;max-width:980px}.cms-image img{border-radius:var(--r-lg);box-shadow:var(--shadow-md)}.cms-image figcaption{text-align:center;color:var(--text-muted);font-size:.9rem;margin-top:.8rem} .cms-table-wrap{overflow-x:auto;margin:30px 0}.cms-table{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--beige)}.cms-table th,.cms-table td{padding:16px 18px;border-bottom:1px solid var(--beige);text-align:left}.cms-table th{background:var(--cream);color:var(--charcoal);font-weight:600}.cms-accordion{max-width:900px;margin:30px auto}.cms-accordion details{background:var(--white);border:1px solid var(--beige);border-radius:var(--r);margin-bottom:12px;padding:18px 22px}.cms-accordion summary{cursor:pointer;font-weight:600;color:var(--charcoal)}.cms-accordion details div{margin-top:12px;color:var(--text-muted)} .cms-photoalbum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:32px 0}.cms-photoalbum__item{display:block;overflow:hidden;border-radius:var(--r);background:var(--beige);aspect-ratio:4/3}.cms-photoalbum__item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.cms-photoalbum__item:hover img{transform:scale(1.04)}.cms-photoalbum--masonry{grid-template-columns:repeat(4,minmax(0,1fr))}.cms-photoalbum--feature .cms-photoalbum__item:first-child{grid-column:span 2;grid-row:span 2}.cms-media video,.cms-media audio{width:100%;max-width:980px;display:block;margin:30px auto}.cms-download{text-align:center}.cms-map iframe,.cms-embed iframe{width:100%;max-width:100%;border:0}.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:999;display:none;align-items:center;justify-content:center}.lightbox.is-open{display:flex}.lightbox__img{max-width:88vw;max-height:82vh}.lightbox__close,.lightbox__prev,.lightbox__next{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3);width:46px;height:46px;border-radius:50%;font-size:30px}.lightbox__close{top:24px;right:24px}.lightbox__prev{left:24px}.lightbox__next{right:24px}.lightbox__caption,.lightbox__counter{position:absolute;bottom:22px;color:#fff;text-align:center}.lightbox__counter{right:24px}.lightbox__caption{left:24px;right:100px} @media(max-width:900px){.cms-card-grid,.cms-card-grid--2,.cms-card-grid--3,.cms-card-grid--4{grid-template-columns:1fr 1fr}.cms-photoalbum,.cms-photoalbum--masonry{grid-template-columns:1fr 1fr}.cms-columns{grid-template-columns:1fr}} @media(max-width:560px){.cms-card-grid,.cms-card-grid--2,.cms-card-grid--3,.cms-card-grid--4,.cms-photoalbum,.cms-photoalbum--masonry{grid-template-columns:1fr}.cms-photoalbum--feature .cms-photoalbum__item:first-child{grid-column:auto;grid-row:auto}} /* ========================================================================== Spalten-Baustein: Spaltenzahl folgt den Daten (10.09.2026) Weiter oben in dieser Datei steht .cms-columns{grid-template-columns:repeat(2,…)}. Weil cms.css nach style.css laedt, gewann diese Zwei gegen die auto-fit-Regel in style.css - eine dritte Spalte rutschte in die zweite Zeile (gemessen: Raster "559px 559px" bei drei Spalten). Die Klasse kommt jetzt aus cms_render_spalten() und traegt die tatsaechliche Anzahl. ========================================================================== */ .cms-columns--1{grid-template-columns:1fr} .cms-columns--2{grid-template-columns:repeat(2,minmax(0,1fr))} .cms-columns--3{grid-template-columns:repeat(3,minmax(0,1fr))} .cms-columns--4{grid-template-columns:repeat(4,minmax(0,1fr))} /* Auf schmalen Fenstern wird aus drei und vier Spalten ein 2er-Raster, unter 640 px steht alles untereinander - drei Textspalten nebeneinander sind auf dem Handy nicht lesbar. */ @media (max-width:1000px){ .cms-columns--3,.cms-columns--4{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:640px){ .cms-columns--2,.cms-columns--3,.cms-columns--4{grid-template-columns:1fr} } /* ========================================================================== Angebotsboxen: drei Boxen nebeneinander + freie Flaechenfarbe (10.09.2026) ========================================================================== */ .pricing-pair--three{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:var(--max,1240px)} .pricing-pair--three .pricing-box{padding:38px 26px} @media (max-width:1000px){ .pricing-pair--three{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:700px){ .pricing-pair--three{grid-template-columns:1fr} } /* Zwei zusaetzliche Voreinstellungen. "dark" bleibt unangetastet - es sieht seit jeher golden aus, und bestehende Seiten sollen sich nicht veraendern. */ /* Auf der Creme-Flaeche traegt das Gold der Preiszeile nicht mehr: gemessen 1,4:1 gegen #bfa88f. Preis, Kategorie und Liste bekommen deshalb das Anthrazit der Marke. */ .pricing-box--cream{background:var(--cream);border-color:var(--cream)} .pricing-box--cream .pricing-box__label{color:rgba(46,42,36,.75)} .pricing-box--cream .pricing-box__price{color:var(--charcoal)} .pricing-box--cream .pricing-box__list{border-top-color:rgba(46,42,36,.25)} .pricing-box--cream .pricing-box__list li{border-bottom-color:rgba(46,42,36,.25);color:rgba(46,42,36,.92)} .pricing-box--night{background:var(--charcoal);border-color:var(--charcoal)} .pricing-box--night .pricing-box__label{color:rgba(251,247,240,.72)} .pricing-box--night .pricing-box__title, .pricing-box--night .pricing-box__price{color:#fbf7f0} .pricing-box--night .pricing-box__list{border-top-color:rgba(251,247,240,.22)} .pricing-box--night .pricing-box__list li{border-bottom-color:rgba(251,247,240,.22);color:rgba(251,247,240,.9)} /* Freie Farbe. Die Schriftfarbe kommt aus cms_box_farbe() in page-render.php: dort gewinnt die Variante mit dem hoeheren WCAG-Kontrast, deshalb steht hier nur noch die Zuordnung. */ .pricing-box--eigen{background:var(--box-flaeche);border-color:var(--box-flaeche)} .pricing-box--eigen-hell .pricing-box__label{color:rgba(46,42,36,.7)} .pricing-box--eigen-hell .pricing-box__title, .pricing-box--eigen-hell .pricing-box__price{color:var(--charcoal)} .pricing-box--eigen-hell .pricing-box__list{border-top-color:rgba(46,42,36,.2)} .pricing-box--eigen-hell .pricing-box__list li{border-bottom-color:rgba(46,42,36,.2);color:rgba(46,42,36,.9)} .pricing-box--eigen-dunkel .pricing-box__label{color:rgba(251,247,240,.72)} .pricing-box--eigen-dunkel .pricing-box__title, .pricing-box--eigen-dunkel .pricing-box__price{color:#fbf7f0} .pricing-box--eigen-dunkel .pricing-box__list{border-top-color:rgba(251,247,240,.22)} .pricing-box--eigen-dunkel .pricing-box__list li{border-bottom-color:rgba(251,247,240,.22);color:rgba(251,247,240,.9)} /* Der Gold-Button verschwand auf der goldenen Angebotsbox - gemessen 1,0:1 gegen die Flaeche, die Schaltflaeche war nur noch am Text erkennbar. Auf goldenem und auf frei gefaerbtem Grund bekommt er deshalb einen eigenen Ton. Auf der anthrazitfarbenen Box bleibt Gold, dort traegt es. */ .pricing-box--dark .btn--gold, .pricing-box--eigen-hell .btn--gold{background:var(--charcoal);border-color:var(--charcoal);color:#fbf7f0} .pricing-box--dark .btn--gold:hover, .pricing-box--eigen-hell .btn--gold:hover{background:#1d1a16;border-color:#1d1a16;color:#fff} .pricing-box--eigen-dunkel .btn--gold{background:#fbf7f0;border-color:#fbf7f0;color:var(--charcoal)} .pricing-box--eigen-dunkel .btn--gold:hover{background:#fff;border-color:#fff;color:#1d1a16} /* ========================================================================== Abschnitt mit eigener Flaechenfarbe (11.09.2026) Die Farbe selbst kommt als style-Attribut aus page-render.php. Offen war die Schrift: auf einem dunklen Wunschton blieb sie dunkel und der Abschnitt war unlesbar. Welche der beiden Schriftfarben traegt, rechnet cms_box_farbe() nach WCAG aus; hier steht nur noch die Zuordnung. ========================================================================== */ .cms-section--eigen-dunkel{color:#fbf7f0} .cms-section--eigen-dunkel h1, .cms-section--eigen-dunkel h2, .cms-section--eigen-dunkel h3, .cms-section--eigen-dunkel h4, .cms-section--eigen-dunkel strong, .cms-section--eigen-dunkel p, .cms-section--eigen-dunkel li, .cms-section--eigen-dunkel .lead, .cms-section--eigen-dunkel .section-header h2{color:#fbf7f0} .cms-section--eigen-dunkel .eyebrow{color:rgba(251,247,240,.82)} .cms-section--eigen-dunkel .eyebrow::before{background:rgba(251,247,240,.82)} /* Die Linkfarbe kommt sonst aus Regeln wie ".cms-text p a" (Gold auf dunkel: gemessen 2,4:1). Deshalb hier dieselbe Tiefe im Selektor, sonst gewinnt Gold. */ .cms-section--eigen-dunkel a, .cms-section--eigen-dunkel p a, .cms-section--eigen-dunkel li a, .cms-section--eigen-dunkel .cms-text p a, .cms-section--eigen-dunkel .cms-text li a, .cms-section--eigen-dunkel .highlight-box p a, .cms-section--eigen-dunkel .content-body a{color:#fbf7f0;text-decoration:underline} .cms-section--eigen-dunkel a:hover, .cms-section--eigen-dunkel .cms-text p a:hover{color:#fff} .cms-section--eigen-hell{color:var(--charcoal)} .cms-section--eigen-hell h1, .cms-section--eigen-hell h2, .cms-section--eigen-hell h3, .cms-section--eigen-hell h4, .cms-section--eigen-hell strong, .cms-section--eigen-hell p, .cms-section--eigen-hell li, .cms-section--eigen-hell .lead, .cms-section--eigen-hell .section-header h2{color:var(--charcoal)} .cms-section--eigen-hell .eyebrow{color:rgba(46,42,36,.75)} .cms-section--eigen-hell .eyebrow::before{background:rgba(46,42,36,.75)} .cms-section--eigen-hell a, .cms-section--eigen-hell p a, .cms-section--eigen-hell li a, .cms-section--eigen-hell .cms-text p a, .cms-section--eigen-hell .cms-text li a, .cms-section--eigen-hell .highlight-box p a, .cms-section--eigen-hell .content-body a{color:var(--charcoal);text-decoration:underline} .cms-section--eigen-hell a:hover, .cms-section--eigen-hell .cms-text p a:hover{color:#1a1610} /* Spalten ohne Rahmen (11.09.2026). Weiter oben gibt .cms-column jeder Spalte Flaeche, Linie und Innenabstand. Das ist als Karte gemeint und stoert, wenn einfach zwei Textspalten nebeneinander stehen sollen. Schaltbar ueber "rahmen" im Baustein; ohne das Feld bleibt es beim Rahmen, damit bestehende Seiten gleich aussehen. */ .cms-columns--ohne-rahmen .cms-column{background:none;border:0;border-radius:0;padding:0} /* Spalte mit eigener Flaechenfarbe (11.09.2026). Eine gefaerbte Spalte braucht Innenabstand und Rundung, sonst klebt der Text am Rand - deshalb gelten die auch dann, wenn der Baustein auf "ohne Rahmen" steht. Die Schriftfarbe kommt aus cms_box_farbe() in page-render.php; hier steht nur die Zuordnung. */ /* Die Regel ".cms-columns--ohne-rahmen .cms-column" weiter oben ist zwei Klassen tief und wuerde eine einklassige Regel hier schlagen - gemessen: die gefaerbte Spalte blieb durchsichtig. Deshalb beide Faelle ausgeschrieben. */ .cms-column--eigen, .cms-columns--ohne-rahmen .cms-column--eigen{ background:var(--spalten-flaeche); border:0;border-radius:var(--r-lg);padding:28px; } .cms-column--eigen-dunkel, .cms-column--eigen-dunkel h2, .cms-column--eigen-dunkel h3, .cms-column--eigen-dunkel h4, .cms-column--eigen-dunkel p, .cms-column--eigen-dunkel li, .cms-column--eigen-dunkel strong{color:#fbf7f0} .cms-column--eigen-dunkel a, .cms-column--eigen-dunkel p a, .cms-column--eigen-dunkel li a{color:#fbf7f0;text-decoration:underline} .cms-column--eigen-hell, .cms-column--eigen-hell h2, .cms-column--eigen-hell h3, .cms-column--eigen-hell h4, .cms-column--eigen-hell p, .cms-column--eigen-hell li, .cms-column--eigen-hell strong{color:var(--charcoal)} .cms-column--eigen-hell a, .cms-column--eigen-hell p a, .cms-column--eigen-hell li a{color:var(--charcoal);text-decoration:underline} /* ========================================================================== Cookie-Banner (17.09.2026) Sitzt unten und ueber allem, damit die Seite dahinter lesbar bleibt - eine Vollflaeche waere auf dem Handy erdrueckend. Die Aktionsleiste am unteren Rand wird solange ausgeblendet, sonst ueberlagern sich zwei Balken. ========================================================================== */ .consent{ position:fixed;left:0;right:0;bottom:0;z-index:2147483600; padding:14px;display:flex;justify-content:center; background:linear-gradient(to top, rgba(20,17,13,.42), rgba(20,17,13,0)); } .consent[hidden]{display:none!important} .consent__karte{ width:100%;max-width:760px;background:#fbf7f0;color:#2e2a24; border:1px solid rgba(46,42,36,.18);border-radius:14px; padding:22px 24px;box-shadow:0 18px 60px rgba(0,0,0,.34); max-height:calc(100vh - 28px);overflow-y:auto; } .consent__titel{ margin:0 0 8px;font-family:var(--f-display,serif);font-size:1.35rem; font-weight:500;color:#2e2a24;line-height:1.25; } .consent__text{margin:0;font-size:.94rem;line-height:1.6;color:#41392f} .consent__text a{color:#2e2a24;text-decoration:underline} .consent__optionen{display:flex;flex-direction:column;gap:12px;margin:18px 0 4px} .consent__optionen[hidden]{display:none} .consent__option{ display:flex;gap:11px;align-items:flex-start; padding:12px 14px;border:1px solid rgba(46,42,36,.16);border-radius:10px; background:rgba(255,255,255,.6);cursor:pointer; } .consent__option--fest{opacity:.75;cursor:default} .consent__option input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:#8c6f3f} .consent__option strong{display:block;font-size:.95rem;margin-bottom:2px} .consent__option small{display:block;font-size:.84rem;line-height:1.5;color:#5b5348} .consent__knoepfe{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px} .consent__knoepfe .btn{margin:0} .consent__mehr{ background:none;border:0;padding:6px 2px;cursor:pointer; font-size:.9rem;font-weight:700;color:#5b5348;text-decoration:underline; } .consent__mehr:hover{color:#2e2a24} .consent__speichern[hidden]{display:none} /* Die untere Aktionsleiste wuerde sonst unter dem Banner hervorschauen. */ body.consent-offen .action-bar{display:none} body.consent-offen .scroll-hint{display:none} /* Widerruf der Einwilligung, in der Linkzeile des Fussbereichs. Technisch ein