/* ========================================================= Alice im Blumenland – Frontend Styles Ergänzt theme.json um Layout-Details, Hover-Effekte, Karten. Variablen entsprechen den theme.json-Tokens. ========================================================= */ :root { --alice-shadow-soft: 0 4px 20px rgba(69, 102, 14, 0.14); --alice-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08); --alice-radius: 12px; --alice-radius-lg: 20px; /* Höhe der grünen Topbar. Sie ist fest, weil die klebende Kopfleiste sie über ein negatives `top` aus dem Bild schiebt — dafür muss der Wert bekannt sein. Auf schmalen Bildschirmen ist die Leiste niedriger, siehe den Responsive-Block am Dateiende. */ --alice-topbar-h: 40px; } /* Sanftes Scrollen hängt an einer Klasse, die assets/js/nav.js erst nach dem Laden setzt — sonst verschluckt Chrome den Sprung zum Anker aus der URL. Begründung steht dort. */ html.alice-smooth-scroll { scroll-behavior: smooth; } body { overflow-x: clip; } /* Sektionen direkt aneinander – kein Block-Gap im
*/ .alice-main > * + * { margin-block-start: 0 !important; } /* Standard-Seiten (page.html / page-ohne-titel.html): Inhaltsspalte auf Seitenkopf-Breite (1200px, via contentSize im Template) + seitliches Padding wie die Header-Zeile, plus mehr Luft zwischen Seitenkopf und Inhalt. Scope über die Template-eigene Klasse .alice-page-main, damit die Startseite (eigener .alice-main-Wrapper mit vollbreiten Sektionen) und page-wide unberührt bleiben. */ .alice-page-main { padding-left: 24px; padding-right: 24px; } /* Sektionen haben seitlich Luft, damit der Inhalt auf schmalen Viewports nicht am Viewport-Rand klebt. Auf Desktop fällt das nicht auf, weil contentSize (1200px) ohnehin Rand lässt — gestapelt auf dem Handy aber sehr wohl. Patterns mit eigenem Inline-Padding (angebot, farbabschnitt) überschreiben diesen Wert; die Templates setzen denselben. */ .alice-section { padding-left: 1.5rem; padding-right: 1.5rem; } /* ===== TOPBAR ===== */ .alice-topbar { font-size: 0.82rem; padding: 0 16px; height: var(--alice-topbar-h); overflow: hidden; } .alice-topbar a { color: #b8edaa; text-decoration: none; } .alice-topbar a:hover { color: #fff; } .alice-topbar__inner { display: flex; gap: 16px; align-items: center; flex-wrap: nowrap; height: 100%; } .alice-topbar__contact { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; } .alice-topbar__contact p { margin: 0; } .alice-topbar__contact a { display: inline-flex; align-items: center; gap: 8px; } .alice-topbar__icon { flex: 0 0 auto; } .alice-topbar__social { gap: 12px !important; } .alice-topbar__social .wp-social-link { background: rgba(255, 255, 255, 0.15) !important; border-radius: 50%; transition: background 0.2s; } .alice-topbar__social .wp-social-link:hover { background: var(--wp--preset--color--yellow-warm) !important; color: var(--wp--preset--color--green-dark) !important; } /* ===== HEADER ===== Sticky sitzt auf dem Wrapper, den WordPress um den Template-Teil legt, nicht auf `.alice-header` und schon gar nicht auf der weißen Leiste darin: ein Sticky-Element kann nie über sein Elternelement hinausragen. Beide sind aber nur so hoch wie der Header selbst — erst der Wrapper hat mit `.wp-site-blocks` ein Elternelement, das über die ganze Seite reicht. Genau daran scheiterte die Regel vorher (sie stand auf `.alice-header__main`). Gescrollt wird die Leiste schmaler: die grüne Topbar fährt ein, Logo und Innenabstand schrumpfen. Den Zustand meldet die Klasse `alice-scrolled`, die assets/js/nav.js ab 24px Scrollhöhe an setzt. */ .wp-site-blocks > header.wp-block-template-part { position: sticky; /* Negativ um die Höhe der Topbar: die schiebt sich beim Scrollen aus dem Bild, die weiße Leiste bleibt bündig am oberen Rand kleben. Wichtig ist dabei, dass sich nichts in der Höhe ändert — siehe die Notiz unten. */ top: calc(-1 * var(--alice-topbar-h)); /* Über Leaflet: dessen Bedienelemente liegen bei z-index 1000. */ z-index: 1200; } .alice-header { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07); } .alice-header__main { padding: 10px 24px; transition: padding 0.22s ease; } .alice-header__inner { padding: 0; } .alice-logo img { max-height: 77px; width: auto; display: block; transition: max-height 0.22s ease; } /* Der eingefahrene Zustand: nur Logo und Innenabstand schrumpfen, die Leiste geht damit von 97px auf 54px. Die Topbar wird bewusst NICHT eingeklappt, obwohl das naheliegt. Jede Höhenänderung oberhalb des Sichtfensters lässt Chrome die Scrollposition nachziehen (Scroll-Anchoring). Beim Hochscrollen ergab das eine Schleife: unter der Schwelle ausklappen → Dokument wird 83px höher → Anchoring korrigiert die Scrollposition über die Schwelle → einklappen → ... Die Leiste flackerte. Die Topbar schiebt sich deshalb über das negative `top` des Sticky-Elements aus dem Bild, ganz ohne Layoutänderung. Für die verbleibenden 43px sorgt eine Hysterese in assets/js/nav.js: einfahren erst ab 140px, ausfahren erst unter 40px. Der Abstand zwischen beiden Schwellen ist größer als die Höhenänderung, damit eine Korrektur durch Anchoring die andere Schwelle nicht erreichen kann. */ .alice-scrolled .alice-header__main { padding-top: 4px; padding-bottom: 4px; } .alice-scrolled .alice-logo img { max-height: 46px; } .alice-scrolled .alice-header { box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12); } /* Wer eingeloggt ist, hat die WordPress-Adminleiste über der Seite. Sie ist nur oberhalb von 600px fixiert — darunter scrollt sie mit und der Header gehört wieder an den oberen Rand. */ .admin-bar .wp-site-blocks > header.wp-block-template-part { top: calc(32px - var(--alice-topbar-h)); } @media (max-width: 782px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: calc(46px - var(--alice-topbar-h)); } } @media (max-width: 600px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: calc(-1 * var(--alice-topbar-h)); } } /* Wer die Bewegung nicht möchte, bekommt sie nicht. */ @media (prefers-reduced-motion: reduce) { .alice-header__main, .alice-logo img { transition: none; } } .alice-nav .wp-block-navigation-item__content { padding: 8px 14px; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--text-mid); border-radius: 8px; text-decoration: none; transition: all 0.2s; } /* Bewusst `:focus-visible` statt `:focus`: der Navigations-Block von WordPress setzt den Fokus beim Öffnen des Burger-Menüs auf den ersten Eintrag. Mit `:focus` sah „Über Uns" dort deshalb dauerhaft aus wie der aktive Punkt. */ .alice-nav .wp-block-navigation-item__content:hover, .alice-nav .wp-block-navigation-item__content:focus-visible { background: var(--wp--preset--color--green-pale); color: var(--wp--preset--color--green-dark); text-decoration: none; } .alice-nav .wp-block-navigation-item__content:focus-visible { outline: 2px solid var(--wp--preset--color--green-dark); outline-offset: 2px; } /* Aktiver Menüpunkt. Die Klasse setzt inc/nav-active.php, weil die Navigation aus custom-URLs besteht und WordPress `current-menu-item` dort nicht selbst vergibt. Nicht nur Farbe: der Unterstrich trägt die Information auch dann, wenn Farben nicht unterschieden werden können. */ .alice-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--green-dark); background: var(--wp--preset--color--green-pale); box-shadow: inset 0 -3px 0 0 var(--wp--preset--color--green-light); text-decoration: none; } /* Der Shop-Button ist gelb und liegt extern – er wird nie aktiv, aber falls doch einmal, soll er nicht plötzlich grün werden. */ .alice-nav .alice-nav-shop.current-menu-item > .wp-block-navigation-item__content { background: var(--wp--preset--color--yellow-warm); color: var(--wp--preset--color--brown-warm); box-shadow: inset 0 -3px 0 0 var(--wp--preset--color--yellow-deep); } .alice-nav .alice-nav-shop .wp-block-navigation-item__content { background: var(--wp--preset--color--yellow-warm); color: var(--wp--preset--color--brown-warm); } .alice-nav .alice-nav-shop .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--yellow-deep); color: var(--wp--preset--color--brown-warm); } /* Mobile-Navigation: Burger-Menü schon ab ≤1080px statt erst <600px (Core-Default). Die neun Menüpunkte brauchen zusammen mit dem Logo rund 1064px — darunter würde die Leiste umbrechen. (Der Wert galt mit acht Punkten bei 900px; mit „Kontakt" seit Theme 0.1.35 sind es 1080px.) Der Core-Navigation-Block liefert Overlay + Öffnen/Schließen-Interaktivität; hier nur der höhere Breakpoint, ein größeres 3-Strich-Icon und der Overlay-Feinschliff. */ @media (max-width: 1080px) { /* Burger einblenden, horizontale Leiste ausblenden */ .alice-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; width: 44px; height: 44px; align-items: center; justify-content: center; } .alice-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; } /* Größeres Icon mit drei Strichen (das Core-SVG hat nur zwei) */ .alice-nav .wp-block-navigation__responsive-container-open svg { display: none; } .alice-nav .wp-block-navigation__responsive-container-open::before { content: ""; width: 30px; height: 24px; background: no-repeat center / 30px auto url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24'%3E%3Cg stroke='%2345660e' stroke-width='2.6' stroke-linecap='round'%3E%3Cline x1='2' y1='4' x2='28' y2='4'/%3E%3Cline x1='2' y1='12' x2='28' y2='12'/%3E%3Cline x1='2' y1='20' x2='28' y2='20'/%3E%3C/g%3E%3C/svg%3E"); } /* Overlay: zentriert, großzügige Abstände, Trennstriche zwischen den Punkten */ .alice-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: stretch; width: 100%; max-width: 360px; margin: 2rem auto; gap: 0; } .alice-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { align-items: stretch; border-bottom: 1px solid var(--wp--preset--color--green-dark); } .alice-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child { border-bottom: none; } .alice-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { box-sizing: border-box; display: block; width: 100%; text-align: center; padding: 20px 24px; font-size: 1.05rem; border-radius: 0; } /* Aktiver Punkt im Burger-Overlay: gefüllte Zeile plus ein Balken links. Der Balken sitzt innen als box-shadow, damit die Zeile nicht springt. */ .alice-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content { background: var(--wp--preset--color--green-pale); color: var(--wp--preset--color--green-dark); box-shadow: inset 4px 0 0 0 var(--wp--preset--color--green-light); } } /* ===== HERO ===== */ .alice-hero { color: #fff; position: relative; overflow: hidden; background: linear-gradient(135deg, #45660e 0%, #689125 40%, #83ba29 70%, #a5d44a 100%) !important; } .alice-hero > .wp-block-cover__background { display: none; } .alice-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 80%, rgba(245,200,66,0.15) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255,255,255,0.08) 0%, transparent 40%); pointer-events: none; z-index: 0; } .alice-hero > .wp-block-columns { position: relative; z-index: 1; } .alice-hero__title { font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem) !important; line-height: 1.15 !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); margin-bottom: 1.25rem; } .alice-hero__lead { line-height: 1.7; opacity: 0.92; max-width: 480px; margin-bottom: 2rem; } .alice-hero__badge { display: inline-block; font-size: 0.78rem !important; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 14px !important; border-radius: 20px; margin-bottom: 1.25rem !important; } .alice-hero__actions { gap: 14px; } .alice-hero__actions .wp-block-button__link { box-shadow: 0 4px 14px rgba(255, 214, 0, 0.45); } .alice-hero__actions .is-style-outline .wp-block-button__link { background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.7); box-shadow: none; } .alice-hero__actions .is-style-outline .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.18); border-color: #fff; } .alice-hero__image { background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(4px); min-height: 320px; display: flex; align-items: stretch; justify-content: stretch; overflow: hidden; position: relative; } .alice-hero__image:has(img) { padding: 0 !important; background: transparent; backdrop-filter: none; } .alice-hero__image > * { flex: 1 1 auto; width: 100%; } .alice-hero__image .wp-block-image, .alice-hero__image figure { margin: 0 !important; width: 100% !important; height: 100%; min-height: inherit; display: block; } .alice-hero__image img { width: 100% !important; height: 100% !important; min-height: inherit; object-fit: cover; display: block; border-radius: inherit; } @media (max-width: 781px) { .alice-hero__cols { gap: 0; } .alice-hero__cols > .wp-block-column + .wp-block-column { margin-top: 2rem; } } /* ===== USP ===== */ .alice-usp__inner { gap: 1.25rem; justify-content: space-around; } .alice-usp__item { margin: 0 !important; font-weight: 700; font-size: 0.88rem; } /* ===== SECTIONS ===== */ .alice-section__label { font-weight: 700 !important; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.6rem !important; } .alice-section__title { color: var(--wp--preset--color--green-dark); margin-bottom: 1rem !important; line-height: 1.25 !important; } .alice-section__sub { margin-bottom: 3rem; } .alice-section__sub > p { line-height: 1.7 !important; margin: 0; } /* ===== ANGEBOT-GRID ===== */ .alice-angebot-grid { gap: 20px !important; flex-wrap: wrap !important; justify-content: center !important; } .alice-angebot-grid .wp-block-column { padding: 0 !important; flex: 0 1 calc(33% - 15px) !important; max-width: calc(33% - 15px) !important; } .alice-angebot-card { background: var(--wp--preset--color--white); border-radius: var(--alice-radius); overflow: hidden; box-shadow: var(--alice-shadow-card); transition: all 0.3s; border: 2px solid transparent; height: 100%; } .alice-angebot-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(45, 106, 45, 0.16); border-color: var(--wp--preset--color--green-light); } .alice-angebot-img { background: var(--wp--preset--color--green-pale); height: 160px; display: flex; align-items: center; justify-content: center; font-size: 3rem; position: relative; overflow: hidden; } .alice-angebot-img::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: linear-gradient(transparent, rgba(255, 255, 255, 0.6)); } .alice-angebot-body { padding: 16px; } .alice-angebot-body h4 { font-family: var(--wp--preset--font-family--playfair); font-size: 1rem !important; color: var(--wp--preset--color--green-dark); margin: 0 0 6px 0 !important; } .alice-angebot-body p { font-size: 0.82rem !important; color: var(--wp--preset--color--text-mid); line-height: 1.5 !important; margin: 0 !important; } /* ===== ABOUT-TEASER ===== */ .alice-about-grid { gap: 24px !important; align-items: stretch !important; } .alice-about-grid .wp-block-column { padding: 0 !important; } .alice-about-card { background: var(--wp--preset--color--white); border-radius: var(--alice-radius); box-shadow: var(--alice-shadow-card); border-top: 4px solid var(--wp--preset--color--green-light); transition: transform 0.3s, box-shadow 0.3s, border-top-color 0.3s; height: 100%; overflow: hidden; display: flex !important; flex-direction: column; } .alice-about-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(45, 106, 45, 0.16); border-top-color: var(--wp--preset--color--green-mid); } .alice-about-card__body { padding: 36px 28px !important; flex: 1 1 auto; display: flex !important; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; gap: 22px; min-height: 220px; } .alice-about-card__body h3 { font-family: var(--wp--preset--font-family--playfair); font-size: 1.4rem !important; color: var(--wp--preset--color--green-dark); margin: 0 !important; line-height: 1.25 !important; position: relative; padding-bottom: 14px; } .alice-about-card__body h3::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 42px; height: 3px; background: var(--wp--preset--color--green-light); border-radius: 2px; } .alice-about-list { list-style: none !important; margin: 0 !important; padding: 0 !important; width: 100%; max-width: 280px; } .alice-about-list li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--wp--preset--color--green-pale); font-size: 0.95rem; color: var(--wp--preset--color--text-mid); line-height: 1.4; text-align: left; } .alice-about-list li:last-child { border-bottom: none; } .alice-about-list li::before { content: '✓'; width: 20px; height: 20px; flex-shrink: 0; background: var(--wp--preset--color--green-pale); color: var(--wp--preset--color--green-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; margin-top: 2px; } /* Logo-Block (Kooperationen) */ .alice-about-card__body > .alice-about-card__logos { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 20px; width: 100%; flex: 1 1 auto !important; align-self: stretch; margin: 0 !important; } .alice-about-card__logos .wp-block-image, .alice-about-card__logos figure.wp-block-image { margin: 0 auto !important; display: block; text-align: center; } .alice-about-card__logos img { display: block; width: auto; height: auto; max-height: 56px; max-width: 75%; object-fit: contain; } /* ===== FILIALEN-GRID & CARDS ===== */ .alice-filialen-grid .wp-block-post-template { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; padding: 0; } .alice-filialen-grid .wp-block-post-template > li { margin: 0; list-style: none; } .alice-filiale-card { box-shadow: var(--alice-shadow-card); border-left: 4px solid var(--wp--preset--color--green-light); transition: all 0.25s; position: relative; overflow: hidden; height: 100%; cursor: pointer; } .alice-filiale-card::before { content: ''; position: absolute; top: 0; right: 0; width: 60px; height: 60px; background: var(--wp--preset--color--green-pale); border-radius: 0 0 0 60px; transition: all 0.3s; pointer-events: none; } .alice-filiale-card::after { content: '📍'; position: absolute; top: 14px; right: 14px; font-size: 1.2rem; z-index: 1; } .alice-filiale-card:hover { transform: translateY(-3px); box-shadow: var(--alice-shadow-soft); } .alice-filiale-card:hover::before { width: 80px; height: 80px; background: var(--wp--preset--color--yellow-light); } .alice-filiale-card__title { font-family: var(--wp--preset--font-family--playfair); font-size: 1.05rem !important; margin: 0.5rem 0 0.5rem !important; position: relative; z-index: 1; } .alice-filiale-card__title a { color: var(--wp--preset--color--green-dark) !important; text-decoration: none !important; } .alice-filiale-card__title a:hover { color: var(--wp--preset--color--green-mid) !important; } /* Stretched-Link: Titel- wird per ::after über die ganze Card gespannt. Negative Offsets reichen über den Title hinaus; Card hat overflow:hidden, das schneidet die klickbare Fläche exakt auf den sichtbaren Card-Rand. */ .alice-filiale-card__title a::after { content: ''; position: absolute; top: -1000px; right: -1000px; bottom: -1000px; left: -1000px; z-index: 1; } /* Telefon-Link bleibt einzeln klickbar (eigenes tel:-Ziel) */ .alice-filiale-card__tel { position: relative; z-index: 2; } .alice-filiale-card__addr { font-style: normal; font-size: 0.85rem; color: var(--wp--preset--color--text-mid); line-height: 1.6; margin: 0.5rem 0 0.75rem; } .alice-filiale-card__tel { display: inline-block; font-size: 0.82rem; color: var(--wp--preset--color--green-mid); font-weight: 600; text-decoration: none; margin-bottom: 0.75rem; } .alice-filiale-card__link { display: inline-block; margin-top: 0.5rem; font-size: 0.83rem; font-weight: 700; color: var(--wp--preset--color--green-dark); text-decoration: none; border-bottom: 2px solid var(--wp--preset--color--yellow-warm); padding-bottom: 1px; } .alice-filiale-card__link:hover { color: var(--wp--preset--color--green-light); } .alice-filiale-tag { display: inline-block; background: var(--wp--preset--color--yellow-light); color: var(--wp--preset--color--brown-warm); font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; letter-spacing: 0.05em; text-transform: uppercase; position: relative; z-index: 1; } /* ===== IMPORT-SECTION ===== */ .alice-import .wp-block-columns { gap: 60px; align-items: center; } .alice-feature-list { list-style: none !important; margin: 1rem 0 1.5rem !important; padding: 0; } .alice-feature-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--wp--preset--color--green-pale); font-size: 0.95rem; color: var(--wp--preset--color--text-mid); } .alice-feature-list li::before { content: '✓'; width: 22px; height: 22px; background: var(--wp--preset--color--green-pale); color: var(--wp--preset--color--green-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; } .alice-stats-row { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; margin-top: 2rem !important; } .alice-stat-box { background: var(--wp--preset--color--green-pale); border-radius: var(--alice-radius); padding: 20px; text-align: center; } .alice-stat-box__number { font-family: var(--wp--preset--font-family--playfair); font-size: 2rem !important; color: var(--wp--preset--color--green-dark); font-weight: 700; line-height: 1 !important; margin: 0 0 4px 0 !important; } .alice-stat-box__label { font-size: 0.78rem !important; font-weight: 700 !important; color: var(--wp--preset--color--text-mid); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 !important; } .alice-import__image { background: linear-gradient(135deg, #45660e 0%, #83ba29 100%); border-radius: var(--alice-radius-lg); aspect-ratio: 500 / 360; overflow: hidden; box-shadow: var(--alice-shadow-soft); margin: 0; padding: 0; position: relative; } .alice-import__img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } /* ===== BLOG / SERVICE ===== */ .alice-blog-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; } .alice-blog-grid .wp-block-column { padding: 0 !important; } .alice-blog-card { border-radius: var(--alice-radius); overflow: hidden; box-shadow: var(--alice-shadow-card); background: var(--wp--preset--color--cream); transition: all 0.3s; height: 100%; } .alice-blog-card:hover { transform: translateY(-4px); box-shadow: var(--alice-shadow-soft); } .alice-blog-card__img { min-height: 180px; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; } .alice-blog-card__img--c1 { background: linear-gradient(135deg, #e8f5d0, #c5e8a0); } .alice-blog-card__img--c2 { background: linear-gradient(135deg, #fff8cc, #ffe566); } .alice-blog-card__img--c3 { background: linear-gradient(135deg, #fce7f3, #fbcfe8); } .alice-blog-card__body { padding: 20px; } .alice-blog-card__tag { font-size: 0.72rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--green-mid) !important; margin: 0 0 8px 0 !important; } .alice-blog-card__title { font-family: var(--wp--preset--font-family--playfair); font-size: 1.05rem !important; color: var(--wp--preset--color--green-dark); margin: 0 0 8px 0 !important; line-height: 1.3; } .alice-blog-card__text { font-size: 0.83rem !important; color: var(--wp--preset--color--text-mid) !important; line-height: 1.6; margin: 0 0 14px 0 !important; } .alice-read-more { font-size: 0.83rem; font-weight: 700; color: var(--wp--preset--color--green-dark) !important; text-decoration: none !important; border-bottom: 2px solid var(--wp--preset--color--yellow-warm); } /* Sprungziele. Die Kopfleiste klebt und ist im eingefahrenen Zustand rund 54px hoch (Logo 46px + 2×4px) — plus etwas Luft, sonst verschwindet die Überschrift der angesprungenen Sektion darunter. Gilt für jede Sektion mit Anker: `#kontakt` auf der Startseite und die fünf Service-Sektionen, die von den Karten der Startseite aus angesprungen werden. */ .alice-section[id] { scroll-margin-top: 5rem; } /* ===== CONTACT-SECTION (Startseite) ===== Zwei Karten nebeneinander: Kontaktdaten links, Formular rechts. Beide mit demselben Rahmen, damit die Überschriften auf einer Linie liegen — vorher stand die linke Spalte ohne Karte frei im Verlauf und wirkte gegenüber der weißen Formularbox verrutscht. Die Feldstile stehen weiter unten unter „CF7-FORMULARE", weil sie sich das Bewerbungsformular teilt. */ .alice-contact { background: linear-gradient(135deg, var(--wp--preset--color--yellow-light) 0%, var(--wp--preset--color--cream) 100%); } .alice-contact__cols { gap: 32px; align-items: flex-start; margin-top: 2.5rem; } /* Auf /kontakt/ trägt der grüne Seitenkopf die Überschrift, die Sektion beginnt direkt mit den Karten — dann darf sie oben etwas enger stehen. */ .alice-contact--ohne-kopf { padding-top: 3.5rem !important; } .alice-contact--ohne-kopf .alice-contact__cols { margin-top: 0; } .alice-contact__info, .alice-contact__form { background: var(--wp--preset--color--white); border-radius: var(--alice-radius-lg); padding: 32px !important; box-shadow: var(--alice-shadow-soft); } .alice-contact__info h3, .alice-contact__form h3 { font-family: var(--wp--preset--font-family--playfair); font-size: 1.3rem !important; line-height: 1.3; color: var(--wp--preset--color--green-dark); margin: 0 0 1.5rem 0 !important; } .alice-contact__row { display: flex !important; align-items: flex-start; gap: 14px; margin-bottom: 20px !important; } .alice-contact__row:last-child { margin-bottom: 0 !important; } .alice-contact__icon { width: 38px; height: 38px; background: var(--wp--preset--color--green-pale); color: var(--wp--preset--color--green-dark); border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Die Icons sind Feather-SVGs mit stroke="currentColor" — Größe und Farbe kommen also von hier, nicht aus der Datei. */ .alice-contact__svg { display: block; } .alice-contact__text { font-size: 0.92rem; line-height: 1.55; color: var(--wp--preset--color--text-mid); padding-top: 2px; } .alice-contact__text strong { display: block; color: var(--wp--preset--color--green-dark); margin-bottom: 2px; } .alice-contact__text a { color: var(--wp--preset--color--green-mid); text-decoration: underline; } .alice-contact__text a:hover { color: var(--wp--preset--color--green-dark); } /* ===== KARTEN (Leaflet) ===== */ .alice-map { width: 100%; min-height: 320px; border-radius: var(--alice-radius); overflow: hidden; /* Eigener Stapelkontext: Leaflet vergibt für Bedienelemente z-index bis 1000. Ohne diese Zeile konkurrieren die direkt mit der klebenden Kopfleiste und schoben sich beim Scrollen darüber. */ isolation: isolate; background: var(--wp--preset--color--green-pale); box-shadow: var(--alice-shadow-card); } .leaflet-popup-content-wrapper { border-radius: 10px; } .leaflet-popup-content { font-family: 'Nunito', sans-serif; font-size: 0.88rem; line-height: 1.5; } .leaflet-popup-content strong { font-family: 'Playfair Display', serif; color: var(--wp--preset--color--green-dark); font-weight: 700; font-size: 1rem; } /* ===== PAGE-HEADER (archive-filiale + single-filiale) ===== */ .alice-page-header { padding-left: 1.5rem; padding-right: 1.5rem; } /* blockGap steht global auf 0 — der Untertitel unter der H1 braucht seinen Abstand deshalb selbst. Gilt für alle Seitenköpfe, auch die Patterns. */ .alice-page-header h1 + p { margin-top: 0.9rem; } /* Full-Bleed auf normalen Seiten: bricht aus dem 1200px-constrained
von page.html / page-ohne-titel.html bis an die Viewport-Ränder aus. Der Innen-Inhalt bleibt via contentSize zentriert. Gilt für JEDEN Block, der im Editor auf "Vollbreite" gestellt ist — damit funktionieren farbige Sektionen wie auf der Startseite auch hier. Die Startseite selbst braucht das nicht: front-page.html rendert post-content ohne Container, dort sind die Sektionen von Haus aus voll breit. .alice-page-header steht zusätzlich einzeln, weil der Seitenkopf auch in archive-filiale/single-filiale vorkommt, wo .alice-page-main fehlt. */ .alice-page-header.alignfull, .alice-page-main .alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* Und dasselbe seitliche Polster wie bei .alice-section — sonst klebt der Inhalt eines vollbreiten Farbabschnitts auf dem Handy am Viewport-Rand (auf Desktop fällt es nicht auf, weil contentSize ohnehin Rand lässt). Bewusst nur Gruppen: ein vollbreites Bild oder Cover soll weiterhin bis an die Kante laufen. box-sizing, damit die 100vw-Breite das Polster einschließt und nichts seitlich überläuft. Inline-Padding aus dem Editor gewinnt. */ .alice-page-header.alignfull, .alice-page-main .alignfull.wp-block-group { box-sizing: border-box; padding-left: 1.5rem; padding-right: 1.5rem; } /* ===== FILIALE DETAIL ===== */ .alice-filiale-info { padding: 0 0 1.5rem; } .alice-filiale-info .alice-filiale-tag { margin-bottom: 1rem; } .alice-filiale-info__addr { font-style: normal; font-size: 1rem; margin-bottom: 1.25rem; line-height: 1.6; } .alice-filiale-info__contact { margin: 0 0 1.25rem; } .alice-filiale-info__contact dt, .alice-filiale-info__hours h3, .alice-filiale-info__route-label { font-family: var(--wp--preset--font-family--nunito); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wp--preset--color--green-light); margin: 0.6rem 0 0.4rem; } .alice-filiale-info__contact dd { margin: 0 0 0.4rem; } .alice-filiale-info__hours { margin-top: 1.25rem; } .alice-filiale-info__hours p { margin: 0 0 0.4rem; } .alice-filiale-info__route { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0; } .alice-filiale-info__route a { display: inline-block; padding: 0.7rem 1.1rem; background: var(--wp--preset--color--green-dark); color: var(--wp--preset--color--white) !important; font-weight: 700; font-size: 0.88rem; border-radius: 8px; text-decoration: none; transition: background 0.2s; } .alice-filiale-info__route a:hover { background: var(--wp--preset--color--green-mid); } /* ===== SERVICE-SEITE ===== */ /* Gärtnertipps: acht Pflanzen-Karten im Raster. Grid statt Core-Spalten, weil die Karten sonst über vier Reihen hinweg unterschiedlich hoch würden. */ .alice-tipp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 2.5rem; } .alice-tipp-card { background: var(--wp--preset--color--white); border-radius: var(--alice-radius); box-shadow: var(--alice-shadow-card); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.25s, transform 0.25s; } .alice-tipp-card:hover { transform: translateY(-4px); box-shadow: var(--alice-shadow-soft); } .alice-tipp-card__media { margin: 0; aspect-ratio: 4 / 3; background: var(--wp--preset--color--green-pale); } .alice-tipp-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .alice-tipp-card__body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1 1 auto; } /* Standort-Badge: sagt auf einen Blick, wie viel Sonne die Pflanze will — auf der alten Seite waren das drei Zwischenüberschriften über Gruppen. */ .alice-tipp-card__standort { align-self: flex-start; margin: 0 !important; padding: 3px 10px; border-radius: 999px; background: var(--wp--preset--color--green-pale); color: var(--wp--preset--color--green-dark); font-size: 0.72rem !important; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .alice-tipp-card__name { margin: 0 !important; font-size: 1.25rem !important; line-height: 1.2; color: var(--wp--preset--color--green-dark); } .alice-tipp-card__text { margin: 0 !important; font-size: 0.92rem; color: var(--wp--preset--color--text-mid); } /* Der Pflegetipp sitzt unten bündig, damit die Karten trotz unterschiedlich langer Porträts eine gemeinsame Kante bekommen. */ .alice-tipp-card__tipp { margin: 0.35rem 0 0 !important; margin-top: auto !important; padding: 0.7rem 0.8rem; border-left: 3px solid var(--wp--preset--color--green-light); border-radius: 0 8px 8px 0; background: var(--wp--preset--color--cream); color: var(--wp--preset--color--text-dark); line-height: 1.5; } .alice-tipp-card__tipp strong { color: var(--wp--preset--color--green-dark); } /* Bildnachweise — CC BY/BY-SA verlangen sie, also klein, aber lesbar. */ .alice-credits { margin-top: 2rem !important; color: var(--wp--preset--color--text-mid); font-size: 0.75rem !important; line-height: 1.7; } .alice-credits a { color: var(--wp--preset--color--green-mid); } /* Dekorationsservice */ .alice-deko__cols { align-items: center; } /* blockGap steht global auf 0 — die Textspalte braucht ihren Abstand selbst. */ .alice-deko__cols > .wp-block-column > p + p { margin-top: 0.9rem; } .alice-deko__cols .wp-block-buttons { margin-top: 1.6rem; } .alice-deko__anlaesse { background: var(--wp--preset--color--white); border-radius: var(--alice-radius); padding: 1.5rem 1.75rem 1.25rem; box-shadow: var(--alice-shadow-card); } .alice-deko__anlaesse h3 { margin: 0 0 0.75rem !important; font-size: 1.15rem !important; color: var(--wp--preset--color--green-dark); } .alice-deko__anlaesse .alice-feature-list { margin: 0 !important; } .alice-deko__anlaesse .alice-feature-list li:last-child { border-bottom: 0; } /* Innenraumbegrünung + Schleifen teilen sich dasselbe Dreier-Raster. */ .alice-vorteile, .alice-schleifen__arten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 2.5rem; } .alice-vorteil, .alice-schleifen__art { background: var(--wp--preset--color--white); border-radius: var(--alice-radius); padding: 1.5rem 1.6rem; box-shadow: var(--alice-shadow-card); border-top: 3px solid var(--wp--preset--color--green-light); } .alice-vorteil h3, .alice-schleifen__art h3 { margin: 0 0 0.5rem !important; font-size: 1.15rem !important; color: var(--wp--preset--color--green-dark); } .alice-vorteil p, .alice-schleifen__art p { margin: 0 !important; font-size: 0.92rem; color: var(--wp--preset--color--text-mid); } .alice-innenraum__cta { margin-top: 2rem !important; font-weight: 700; } /* Hochzeitsjubiläen: 18 Einträge chronologisch. Als Raster kompakter Karten statt als lange Liste, damit die Sektion überschaubar bleibt. */ .alice-jubilaeen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 2.5rem; } .alice-jubilaeum { background: var(--wp--preset--color--green-pale); border-radius: var(--alice-radius); padding: 1.35rem 1.5rem; display: flex; flex-direction: column; gap: 0.4rem; } .alice-jubilaeum__jahr { margin: 0 !important; font-family: var(--wp--preset--font-family--playfair); font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--wp--preset--color--green-mid); } .alice-jubilaeum__jahr span { font-family: var(--wp--preset--font-family--nunito); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 0.35em; } .alice-jubilaeum__name { margin: 0 !important; font-size: 1.1rem !important; line-height: 1.25; color: var(--wp--preset--color--green-dark); } .alice-jubilaeum__text { margin: 0 !important; color: var(--wp--preset--color--text-mid); line-height: 1.55; } /* ===== LIEFERSERVICE ===== */ /* Ablauf in drei Schritten. Die Nummer sitzt als Kreis über der Überschrift — sie trägt die Reihenfolge, die im Fließtext sonst untergeht. */ .alice-schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 2.5rem; } .alice-schritt { background: var(--wp--preset--color--white); border-radius: var(--alice-radius); padding: 1.75rem 1.6rem 1.6rem; box-shadow: var(--alice-shadow-card); } .alice-schritt__nr { margin: 0 0 0.9rem !important; width: 44px; height: 44px; border-radius: 50%; background: var(--wp--preset--color--green-pale); color: var(--wp--preset--color--green-dark); font-family: var(--wp--preset--font-family--playfair); font-size: 1.4rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .alice-schritt__titel { margin: 0 0 0.5rem !important; font-size: 1.2rem !important; color: var(--wp--preset--color--green-dark); } .alice-schritt__text { margin: 0 !important; color: var(--wp--preset--color--text-mid); line-height: 1.6; } /* Fleurop und EuroFlorist. Beide Logos sitzen in derselben Höhe, obwohl das eine breit und das andere fast quadratisch ist — feste Box, object-fit. */ .alice-partner-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 2.5rem; } .alice-partner { background: var(--wp--preset--color--white); border-radius: var(--alice-radius); padding: 1.9rem 1.9rem 1.6rem; box-shadow: var(--alice-shadow-card); display: flex; flex-direction: column; } /* Beide Logos bekommen dieselbe Fläche und sitzen darin mittig — sonst erschlägt das Fleurop-Zeichen (gefüllter dunkler Block) die freigestellte EuroFlorist-Marke. object-fit skaliert jedes auf dieselbe Höhe, ohne die unterschiedlichen Seitenverhältnisse zu verzerren. */ .alice-partner__logo { margin: 0 0 1.5rem !important; display: flex; align-items: center; justify-content: center; } .alice-partner__logo img { width: 100%; height: 88px; object-fit: contain; object-position: center; display: block; } .alice-partner__name { margin: 0 !important; font-size: 1.45rem !important; color: var(--wp--preset--color--green-dark); } .alice-partner__claim { margin: 0.2rem 0 0.9rem !important; color: var(--wp--preset--color--green-light); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.75rem !important; } .alice-partner__text { margin: 0 !important; color: var(--wp--preset--color--text-mid); font-size: 0.95rem; } .alice-partner .alice-feature-list { margin: 1.1rem 0 0 !important; margin-top: auto !important; padding-top: 1.1rem; } .alice-partner .alice-feature-list li:last-child { border-bottom: 0; } /* Filialliste (Shortcode alice_filialen_kompakt), nach Ort gruppiert. Bewusst ohne Kacheln: Ortsname als Zwischenzeile, darunter die Filialen als Zeilen mit eigener Rufnummer. Mehrspaltig über column-count statt Grid, weil die Gruppen unterschiedlich hoch sind und so ohne Lücken durchlaufen — break-inside hält jede Stadt zusammen. */ .alice-filialliste { margin-top: 2.5rem; column-count: 3; column-gap: 48px; } .alice-filialliste__ort { break-inside: avoid; margin-bottom: 1.9rem; } .alice-filialliste__stadt { margin: 0 0 0.5rem !important; padding-bottom: 0.35rem; border-bottom: 2px solid var(--wp--preset--color--green-light); font-family: var(--wp--preset--font-family--nunito) !important; font-size: 0.76rem !important; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--green-mid); } .alice-filialliste__items { list-style: none; margin: 0; padding: 0; } .alice-filialliste__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.75rem; padding: 0.5rem 0.4rem; margin-inline: -0.4rem; border-radius: 6px; border-bottom: 1px solid rgba(69, 102, 14, 0.1); transition: background 0.15s; } .alice-filialliste__item:last-child { border-bottom: 0; } /* Die ganze Zeile hellt beim Überfahren auf — sie ist zwei Ziele breit (Filialseite und Rufnummer), das signalisiert „hier ist etwas anklickbar", bevor man auf einem der beiden Links steht. */ .alice-filialliste__item:hover { background: var(--wp--preset--color--green-pale); } /* Beide Links tragen von Haus aus eine Unterstreichung. Ohne sie sind sie in dieser Liste nicht von normalem Text zu unterscheiden — Farbe allein reicht als Hinweis nicht, und für Farbfehlsichtige gar nicht. */ .alice-filialliste__name { flex: 1 1 auto; font-weight: 700; font-size: 0.95rem; line-height: 1.35; color: var(--wp--preset--color--green-dark) !important; text-decoration: underline; text-decoration-color: rgba(131, 186, 41, 0.55); text-decoration-thickness: 1px; text-underline-offset: 3px; } .alice-filialliste__name:hover, .alice-filialliste__name:focus-visible { color: var(--wp--preset--color--green-mid) !important; text-decoration-color: currentColor; text-decoration-thickness: 2px; } /* Die Rufnummer gehört zur Filiale, nicht zur Zentrale — der Auftrag wird ja dort aufgenommen. Deshalb steht sie in der Zeile und nicht als Button unter der Liste. Das Telefon-Icon ist dasselbe wie in Topbar und Footer und macht sie als zweites, eigenes Ziel kenntlich. */ .alice-filialliste__tel { flex: 0 0 auto; margin-left: auto; /* bei langen Namen rutscht die Nummer in die nächste Zeile — dort soll sie trotzdem rechts stehen */ display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-variant-numeric: tabular-nums; color: var(--wp--preset--color--green-mid) !important; text-decoration: underline; text-decoration-color: rgba(104, 145, 37, 0.45); text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; } .alice-filialliste__tel:hover, .alice-filialliste__tel:focus-visible { color: var(--wp--preset--color--green-dark) !important; text-decoration-color: currentColor; text-decoration-thickness: 2px; } /* Das Icon soll nicht mitunterstrichen werden. */ .alice-filialliste__telicon { flex: 0 0 auto; text-decoration: none; } .alice-lieferfilialen__actions { margin-top: 2.25rem; } /* ===== FLORISTIK ===== */ /* Bildergalerie der Filialarbeiten. Die Vorlagen sind **400 px breit** — mehr gibt der Bestand von 2012 nicht her. Vier Spalten halten die Kacheln bei 1200px Inhaltsbreite unter ~285px, damit nichts hochskaliert und unscharf wird. Wer größere Fotos nachliefert, kann die Spaltenzahl gefahrlos senken. */ .alice-galerie { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 2.5rem; } .alice-galerie__bild { margin: 0 !important; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--wp--preset--color--green-pale); box-shadow: var(--alice-shadow-card); } .alice-galerie__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; } .alice-galerie__bild:hover img { transform: scale(1.05); } /* Pflegetipps für Schnittblumen — fünf nummerierte Schritte. Dieselbe Sprache wie die drei Schritte auf der Lieferservice-Seite, nur schmaler, weil es hier fünf sind. */ .alice-pflegetipps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 2.5rem; } .alice-pflegetipp { background: var(--wp--preset--color--white); border-radius: var(--alice-radius); padding: 1.4rem 1.25rem 1.3rem; box-shadow: var(--alice-shadow-card); } .alice-pflegetipp__nr { margin: 0 0 0.75rem !important; width: 36px; height: 36px; border-radius: 50%; background: var(--wp--preset--color--green-pale); color: var(--wp--preset--color--green-dark); font-family: var(--wp--preset--font-family--playfair); font-size: 1.2rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .alice-pflegetipp__titel { margin: 0 0 0.4rem !important; font-size: 1.05rem !important; color: var(--wp--preset--color--green-dark); } .alice-pflegetipp__text { margin: 0 !important; color: var(--wp--preset--color--text-mid); line-height: 1.55; } .alice-floristik__hinweis { margin-top: 2rem !important; color: var(--wp--preset--color--text-mid); font-style: italic; } /* blockGap steht global auf 0 — mehrere Absätze im Einleitungstext brauchen ihren Abstand selbst. */ .alice-floristik .alice-section__sub > p + p { margin-top: 0.9rem; } /* ===== JOBS-SEITE ===== */ /* Die drei Punkte über dem Formular. Gleiche Sprache wie die Schritte auf der Lieferservice-Seite, nur ohne Nummern. */ .alice-jobs-punkte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 2.5rem; } .alice-jobs-punkt { background: var(--wp--preset--color--white); border-radius: var(--alice-radius); padding: 1.6rem 1.4rem 1.5rem; box-shadow: var(--alice-shadow-card); } .alice-jobs-punkt__icon { margin: 0 0 0.75rem !important; width: 44px; height: 44px; border-radius: 12px; background: var(--wp--preset--color--green-pale); font-size: 1.25rem; display: flex; align-items: center; justify-content: center; } .alice-jobs-punkt__titel { margin: 0 0 0.4rem !important; font-size: 1.1rem !important; color: var(--wp--preset--color--green-dark); } .alice-jobs-punkt__text { margin: 0 !important; color: var(--wp--preset--color--text-mid); line-height: 1.55; } /* Formular-Sektion: heller Verlauf wie die Kontakt-Sektion der Startseite, so dass die weiße Formularbox sich davon abhebt. */ .alice-jobs-bewerbung { background: linear-gradient(135deg, var(--wp--preset--color--yellow-light) 0%, var(--wp--preset--color--cream) 100%); } .alice-jobs-cols { gap: 48px; align-items: flex-start; margin-top: 2.5rem; } .alice-jobs-kontakt h3 { font-family: var(--wp--preset--font-family--playfair); font-size: 1.4rem !important; color: var(--wp--preset--color--green-dark); margin: 0 0 0.9rem 0 !important; } .alice-jobs-kontakt p { margin: 0 0 1rem !important; } .alice-jobs-kontakt__zeile { color: var(--wp--preset--color--text-mid); line-height: 1.6; } .alice-jobs-kontakt__zeile strong { color: var(--wp--preset--color--green-dark); } .alice-jobs-kontakt__zeile a { color: var(--wp--preset--color--green-mid); text-decoration: underline; } .alice-jobs-kontakt__zeile a:hover { color: var(--wp--preset--color--green-dark); } /* ===== CF7-FORMULARE ===== Gilt für beide Formulare des Themes: die Bewerbung auf /jobs/ und den Kontakt auf der Startseite. Erkennungsmerkmal ist die Klasse `alice-cf7-form` am
selbst, die PHP über den Filter `wpcf7_form_class_attr` setzt — nicht eine Klasse im Seiteninhalt, denn der liegt in der Datenbank und müsste sonst pro Instanz angefasst werden. Die Templates (inc/jobs-form.php, inc/kontakt-form.php) bringen die Klassen .alice-form-row / .alice-form-group mit, die Felder selbst rendert CF7. Es wickelt jedes Feld in ein , das erst blockweise werden muss, damit die Feldstile greifen. */ /* Fehlerfarbe für Pflichtfeld-Markierungen. Rot ist im Rest des Themes nicht vorgesehen — hier braucht es aber eine Farbe, die sich vom Grün deutlich abhebt und auf Weiß lesbar bleibt (Kontrast ~5,7:1). */ :root { --alice-error: #b3261e; --alice-error-bg: #fdf0ef; } /* Die weiße Karte um das Formular. Auf der Jobs-Seite steht sie allein, auf der Startseite neben der Kontaktkarte — dort kommt der Rahmen von .alice-contact__form, damit beide Karten identisch aussehen. */ .alice-jobs-form { background: var(--wp--preset--color--white); border-radius: var(--alice-radius-lg); padding: 36px !important; box-shadow: var(--alice-shadow-soft); } .alice-cf7-form .wpcf7-form-control-wrap { display: block; } .alice-cf7-form .alice-form-group { margin-bottom: 16px; } /* Zwei Felder nebeneinander. Der Abstand hängt an den Feldern selbst, nicht an der Zeile — sonst summieren sich beide, wenn die Zeile auf schmalen Bildschirmen einspaltig wird. */ .alice-cf7-form .alice-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 0; } .alice-cf7-form .alice-form-row .alice-form-group { margin-bottom: 16px; } /* Labels in normaler Schreibweise, nicht wie sonst im Theme in Versalien: `text-transform: uppercase` macht aus „Straße" ein „STRASSE" — die Großschreibung von ß ist nun mal SS. Fürs Formular ist die richtige Schreibweise wichtiger als die Versalien. */ .alice-cf7-form .alice-form-group label { display: block; font-size: 0.88rem; font-weight: 700; color: var(--wp--preset--color--text-mid); margin-bottom: 6px; letter-spacing: 0; text-transform: none; } .alice-cf7-form input[type="text"], .alice-cf7-form input[type="email"], .alice-cf7-form input[type="tel"], .alice-cf7-form select, .alice-cf7-form textarea { width: 100%; padding: 11px 14px; border: 2px solid var(--wp--preset--color--green-pale); border-radius: 8px; font-family: var(--wp--preset--font-family--nunito); font-size: 0.92rem; color: var(--wp--preset--color--text-dark); background: var(--wp--preset--color--cream); transition: border-color 0.2s, background-color 0.2s; outline: none; box-sizing: border-box; } .alice-cf7-form input:focus, .alice-cf7-form select:focus, .alice-cf7-form textarea:focus { border-color: var(--wp--preset--color--green-light); background: #fff; } /* Das Filial-Dropdown (eigener Formular-Tag [alice_filiale], nach Orten gruppiert). Eigener Pfeil statt des Systemwidgets, damit es neben den Textfeldern nicht wie ein Fremdkörper wirkt; das SVG ist inline, weil eine einzelne Datei dafür den Aufwand nicht lohnt. */ .alice-cf7-form select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2345660e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px 18px; cursor: pointer; } .alice-cf7-form select optgroup { font-family: var(--wp--preset--font-family--nunito); font-style: normal; font-weight: 700; color: var(--wp--preset--color--green-dark); } .alice-cf7-form select option { font-weight: 400; color: var(--wp--preset--color--text-dark); } .alice-cf7-form textarea { height: 150px; resize: vertical; display: block; } /* PLZ ist kurz, der Ort lang — die Originalseite hatte beide nebeneinander mit genau dieser Gewichtung. */ .alice-cf7-form .alice-form-row--plz-ort { grid-template-columns: 120px 1fr !important; } /* Datenschutz-Zeile: Checkbox links, Text daneben — kein Uppercase-Label. */ .alice-form-group--acceptance { margin-top: 0.5rem; } .alice-form-group--acceptance .wpcf7-list-item { margin: 0; display: block; } .alice-form-group--acceptance label { display: flex !important; align-items: flex-start; gap: 10px; font-size: 0.82rem !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.55; color: var(--wp--preset--color--text-mid) !important; margin-bottom: 0 !important; cursor: pointer; } .alice-form-group--acceptance input[type="checkbox"] { margin: 3px 0 0 0; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--wp--preset--color--green-mid); } .alice-form-group--acceptance a { color: var(--wp--preset--color--green-mid); text-decoration: underline; } /* Pflichtfeld-Sternchen. Auf der alten Seite gelb (#FFC600) — das ist auf Weiß kaum lesbar, deshalb hier in der Fehlerfarbe. */ .alice-req { color: var(--alice-error); font-weight: 700; } .alice-form-pflicht { margin: 1rem 0 0 !important; font-size: 0.78rem; color: var(--wp--preset--color--text-mid); } .alice-cf7-form__actions { margin-top: 1.5rem; } .alice-cf7-form .alice-form-submit, .alice-cf7-form input[type="submit"] { width: 100%; padding: 14px; background: var(--wp--preset--color--green-dark); color: #fff; font-family: var(--wp--preset--font-family--nunito); font-size: 1rem; font-weight: 700; border: none; border-radius: 10px; cursor: pointer; transition: background-color 0.2s, transform 0.2s; } .alice-cf7-form input[type="submit"]:hover:enabled { background: var(--wp--preset--color--green-mid); transform: translateY(-1px); } .alice-cf7-form input[type="submit"]:disabled { opacity: 0.5; cursor: not-allowed; } /* ----- Markierung fehlender Pflichtfelder ----- Zwei Wege führen hierher: die serverseitige Prüfung von CF7 und das Skript assets/js/cf7-form.js, das leere Felder schon vor dem Absenden markiert. Beide setzen dieselben Klassen, damit es gleich aussieht. */ .alice-cf7-form .wpcf7-not-valid { border-color: var(--alice-error) !important; background-color: var(--alice-error-bg) !important; } .alice-cf7-form input[type="checkbox"].wpcf7-not-valid, .alice-cf7-form .wpcf7-acceptance.wpcf7-not-valid input[type="checkbox"] { outline: 2px solid var(--alice-error); outline-offset: 2px; } .alice-cf7-form .wpcf7-not-valid-tip { display: block; margin-top: 5px; font-size: 0.78rem; font-weight: 600; color: var(--alice-error); } /* Das Label über einem markierten Feld färbt mit — CSS hat keinen Eltern-Selektor, :has() ist in allen aktuellen Browsern da; wo nicht, bleibt das Label einfach grau und Rahmen plus Hinweistext tragen die Information. */ .alice-cf7-form .alice-form-group:has(.wpcf7-not-valid) > label { color: var(--alice-error); } /* Die Sammelmeldung von CF7 unter dem Button. */ .alice-cf7-form .wpcf7-response-output { margin: 1.25rem 0 0 !important; padding: 0.9rem 1.1rem !important; border: 2px solid var(--wp--preset--color--green-pale) !important; border-radius: 10px; font-size: 0.88rem; line-height: 1.5; } /* CF7 blendet den Meldungskasten aus, bis das Formular abgeschickt wurde. Die Prüfung im Browser passiert davor — dafür setzt das Skript diese Klasse. */ .alice-cf7-form.alice-clientside-invalid .wpcf7-response-output { display: block !important; } .alice-cf7-form.invalid .wpcf7-response-output, .alice-cf7-form.unaccepted .wpcf7-response-output, .alice-cf7-form.payment-required .wpcf7-response-output, .alice-cf7-form.alice-clientside-invalid .wpcf7-response-output { border-color: var(--alice-error) !important; background: var(--alice-error-bg); color: var(--alice-error); } .alice-cf7-form.sent .wpcf7-response-output { border-color: var(--wp--preset--color--green-light) !important; background: var(--wp--preset--color--green-pale); color: var(--wp--preset--color--green-dark); } .alice-cf7-form.failed .wpcf7-response-output, .alice-cf7-form.aborted .wpcf7-response-output, .alice-cf7-form.spam .wpcf7-response-output { border-color: var(--alice-error) !important; background: var(--alice-error-bg); color: var(--alice-error); } /* Der Ladebalken von CF7 in Theme-Grün. */ .alice-cf7-form .wpcf7-spinner { background-color: var(--wp--preset--color--green-pale); } /* Falls das Formular fehlt (Plugin aus, Formular noch nicht angelegt). */ .alice-cf7-form__fallback { margin: 0 !important; color: var(--wp--preset--color--text-mid); } /* ===== FOOTER ===== */ .alice-footer { padding: 3.5rem 1.5rem 1.75rem !important; } .alice-footer a { color: rgba(255, 255, 255, 0.65); text-decoration: none; } .alice-footer a:hover { color: var(--wp--preset--color--yellow-warm); text-decoration: none; } .alice-footer__list { list-style: none; padding: 0; } .alice-footer__list li { margin-bottom: 0.4rem; } .alice-footer__list a { display: inline-flex; align-items: center; gap: 8px; } .alice-footer__list svg { flex: 0 0 auto; } .alice-footer__cols > .wp-block-column:first-child { padding-right: 2.5rem; } .alice-footer h4 { color: #fff !important; font-size: 0.88rem !important; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1rem !important; } .alice-footer__copy { opacity: 0.85; } .alice-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 1.5rem !important; margin-top: 2.5rem; font-size: 0.82rem; } .alice-partner-badge { display: inline-block; background: rgba(255, 255, 255, 0.08); border-radius: 6px; padding: 6px 12px; font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); font-weight: 600; margin-right: 8px; } /* ===== PAGE HEADER ===== */ .alice-page-hero { background: linear-gradient(135deg, var(--wp--preset--color--green-dark), var(--wp--preset--color--green-mid)); color: #fff; padding: 60px 0 48px !important; text-align: center; } .alice-page-hero h1 { font-family: var(--wp--preset--font-family--playfair); font-size: clamp(2rem, 1.5rem + 1.5vw, 2.5rem) !important; margin-bottom: 0.5rem !important; color: #fff !important; } .alice-page-hero .alice-breadcrumb { font-size: 0.85rem !important; opacity: 0.75; margin: 0 !important; } .alice-page-hero .alice-breadcrumb a { color: var(--wp--preset--color--yellow-warm); text-decoration: none; } .alice-page-title { font-size: clamp(2rem, 1.5rem + 1.5vw, 2.6rem); color: var(--wp--preset--color--green-dark); /* Top-Abstand kommt jetzt von .alice-main (padding-top), nicht doppeln */ padding-top: 0; padding-bottom: 1rem; } /* ===== cgs ===== */ .mein-zentriertes-bild { align-self: center; } /* ===== ICON-LISTE (Block alice/icon-list) ===== */ .alice-icon-list { list-style: none; margin: 0; padding: 0; } .alice-icon-list__item { display: flex; align-items: center; gap: 8px; margin-bottom: 0.4rem; } /* Mit Link liegt das Flex-Layout im , ohne Link direkt im
  • . */ .alice-icon-list__item > a { display: inline-flex; align-items: center; gap: 8px; } .alice-icon-list__icon { display: inline-flex; flex: 0 0 auto; /* stroke="currentColor" im SVG erbt damit die Textfarbe der Zeile. */ color: inherit; } .alice-icon-list__icon svg { display: block; } /* ===== WHATSAPP-BUTTON (Shortcode [alice_whatsapp_button]) ===== Bewusst nicht flächig in WhatsApp-Grün: auf der Jobs-Seite steht der Button dem grünen „Bewerbung senden" gegenüber und würde als zweite volle Farbfläche mit ihm um die Aufmerksamkeit streiten — das Formular soll der Hauptweg bleiben. Also weiße Fläche mit Rahmen im Logo-Grün; das Markengrün trägt allein das Logo. Für Schrift käme #25D366 ohnehin nicht in Frage, auf Weiß sind das 1,9:1 Kontrast. Der Abstand nach unten steht hier am Button selbst: der `wp:shortcode`-Block gibt die Ausgabe unverpackt aus, es gibt also kein

    , dessen Abstand greifen könnte. */ .alice-whatsapp-btn { display: flex; align-items: center; gap: 12px; margin: 0 0 1rem; padding: 12px 16px; background: var(--wp--preset--color--white); border: 2px solid var(--wp--preset--color--green-light); border-radius: 10px; color: var(--wp--preset--color--green-dark); text-decoration: none; box-shadow: var(--alice-shadow-card); transition: background-color 0.2s, border-color 0.2s, transform 0.2s; } .alice-whatsapp-btn:hover, .alice-whatsapp-btn:focus-visible { background: var(--wp--preset--color--green-pale); border-color: var(--wp--preset--color--green-mid); color: var(--wp--preset--color--green-dark); text-decoration: none; transform: translateY(-1px); } .alice-whatsapp-btn__icon { flex: 0 0 auto; color: #25d366; } .alice-whatsapp-btn__text { display: flex; flex-direction: column; line-height: 1.3; } .alice-whatsapp-btn__label { font-weight: 700; } .alice-whatsapp-btn__hinweis { font-size: 0.85rem; color: var(--wp--preset--color--text-mid); } /* ===== ROSEN-BOX (Pattern alice-blumenland/rose-card) ===== */ .alice-rose-card { max-width: 360px; background: var(--wp--preset--color--white); border-radius: 10px; box-shadow: var(--alice-shadow-card); overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: box-shadow 0.25s, transform 0.25s; } .alice-rose-card:hover { transform: translateY(-4px); } /* Bildfläche: quadratisch, damit die Boxen im Raster gleich hoch starten. Die Rosenfotos der alten Seite sind 300x300 und liegen frei — die Fläche trägt deshalb den hellgrünen Ton, solange kein Bild gewählt ist. */ .alice-rose-card__media { margin: 0; background: var(--wp--preset--color--green-pale); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; } .alice-rose-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .alice-rose-card__body { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; gap: 0.9rem; flex: 1 1 auto; } .alice-rose-card__name { margin: 0 !important; font-size: 1.35rem !important; color: var(--wp--preset--color--green-dark); line-height: 1.2; } .alice-rose-card__specs { display: flex; flex-direction: column; gap: 0; margin-top: auto; } .alice-rose-card__spec { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.42rem 0; border-bottom: 1px solid rgba(69, 102, 14, 0.12); } .alice-rose-card__spec:last-child { border-bottom: 0; } .alice-rose-card__label { margin: 0 !important; color: var(--wp--preset--color--text-mid); letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.75rem !important; font-weight: 600; } .alice-rose-card__value { margin: 0 !important; color: var(--wp--preset--color--text-dark); font-weight: 700; text-align: right; } /* Rosen-Reihe: eine oder mehrere Rosen-Boxen nebeneinander. Zwei Dinge kann Core hier nicht von sich aus: 1. Die Spalten teilen sich immer die volle Breite — zwei Boxen würden also auf je die halbe Breite auseinandergezogen, eine einzelne auf die ganze. Deshalb bekommen die Spalten eine feste Drittelbreite; die Karten bleiben dadurch bei jeder Anzahl gleich groß und ab der vierten fällt automatisch eine zweite, spaltenbündige Reihe an. 2. Für "Inhalt der Spalte horizontal ausrichten" gibt es kein UI. Ist die Karte schmaler als ihre Spalte (nur bei sehr breiter Reihe, sonst füllt sie die Spalte), klebt sie links — die margin-Regeln unten setzen die äußeren Karten bündig an die Ränder und alle übrigen mittig. flex-basis steht bewusst ohne !important: Cores Stack-Regel für Mobil (max-width 781px) hat !important und gewinnt weiterhin. */ .wp-block-columns.alice-rose-row { /* Core erzwingt ab 782px flex-wrap:nowrap!important — nur mit !important brechen mehr als drei Boxen in eine zweite Reihe um. */ flex-wrap: wrap !important; } .wp-block-columns.alice-rose-row > .wp-block-column { flex: 0 0 calc((100% - 2 * 2rem) / 3); } .alice-rose-row .wp-block-column > .alice-rose-card { max-width: 420px; margin-inline: auto; } .alice-rose-row .wp-block-column:first-child > .alice-rose-card { margin-inline: 0 auto; } .alice-rose-row .wp-block-column:last-child > .alice-rose-card { margin-inline: auto 0; } /* Muss nach :last-child stehen: eine einzelne Box ist beides zugleich und soll links sitzen, nicht rechts. */ .alice-rose-row .wp-block-column:only-child > .alice-rose-card { margin-inline: 0 auto; } /* Gestapelt (Core bricht Spalten bei 781px um) sitzt jede Karte mittig. */ @media (max-width: 781px) { .alice-rose-row .wp-block-column:first-child > .alice-rose-card, .alice-rose-row .wp-block-column:last-child > .alice-rose-card, .alice-rose-row .wp-block-column:only-child > .alice-rose-card { margin-inline: auto; } } /* Lange Komposita im Seitenkopf-Titel (und in den anderen großen Titeln): Deutsch produziert Wörter wie "Blumengroßhandelslieferservice", die in einer 3.2rem-Playfair-Zeile auf schmalen Viewports nicht umbrechen und den grünen Streifen seitlich sprengen. hyphens trennt sie sauber mit Trennstrich (greift dank ), overflow-wrap ist die Notbremse für Wörter ohne passenden Trennpunkt (URLs, Eigennamen). */ .alice-page-header__title, .alice-page-title, .alice-page-hero h1 { hyphens: auto; overflow-wrap: break-word; } /* ===== RESPONSIVE ===== */ @media (max-width: 900px) { .alice-filialen-grid .wp-block-post-template { grid-template-columns: repeat(2, 1fr); } .alice-angebot-grid { flex-wrap: wrap !important; } .alice-angebot-grid .wp-block-column { flex-basis: calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; } .alice-blog-grid { grid-template-columns: repeat(2, 1fr) !important; } .alice-import .wp-block-columns, .alice-contact__cols { flex-wrap: wrap; } .alice-import .wp-block-columns > *, .alice-contact__cols > * { flex-basis: 100% !important; } .alice-import__image { max-height: 380px; } .alice-tipp-grid { grid-template-columns: repeat(2, 1fr); } .alice-jubilaeen-grid { grid-template-columns: repeat(2, 1fr); } .alice-vorteile, .alice-schleifen__arten { grid-template-columns: 1fr; } .alice-deko__cols { flex-wrap: wrap; } .alice-deko__cols > .wp-block-column { flex-basis: 100% !important; } .alice-schritte { grid-template-columns: 1fr; } .alice-partner-grid { grid-template-columns: 1fr; } .alice-filialliste { column-count: 2; column-gap: 36px; } .alice-galerie { grid-template-columns: repeat(3, 1fr); } .alice-pflegetipps { grid-template-columns: repeat(2, 1fr); } /* Jobs: Kontaktspalte und Formular untereinander, Punkte einreihig zu dritt ist hier noch zu eng. */ .alice-jobs-punkte { grid-template-columns: 1fr 1fr; } .alice-jobs-cols { flex-wrap: wrap; gap: 32px; } .alice-jobs-cols > .wp-block-column { flex-basis: 100% !important; } /* Gestapelt darf die Kontaktkarte nicht mehr die volle Höhe beanspruchen — und zwischen den beiden Karten braucht es Luft. */ .alice-contact__cols { gap: 24px; } } @media (max-width: 600px) { /* Topbar auf dem Handy: eine schmale Zeile. Die E-Mail-Adresse ist dafür zu lang und stünde sonst umgebrochen über zwei Zeilen — sie steht im Footer und auf /kontakt/. Die Telefonnummer bleibt, weil ein Tipp darauf direkt anruft. */ :root { --alice-topbar-h: 32px; } .alice-topbar { font-size: 0.76rem; padding: 0 12px; } .alice-topbar__mail { display: none; } .alice-topbar__inner { gap: 10px; } .alice-filialen-grid .wp-block-post-template { grid-template-columns: 1fr; } .alice-angebot-grid .wp-block-column { flex-basis: 100% !important; max-width: 100% !important; } .alice-blog-grid { grid-template-columns: 1fr !important; } .alice-stats-row { grid-template-columns: 1fr !important; gap: 12px !important; } .alice-hero__title { font-size: 2rem !important; } .alice-topbar__contact { gap: 10px; } .alice-usp__inner { justify-content: flex-start !important; } .alice-hero__actions { flex-wrap: nowrap; } .alice-hero__actions .wp-block-button { flex: 1 1 0; min-width: 0; } .alice-hero__actions .wp-block-button__link { width: 100%; text-align: center; } .alice-tipp-grid { grid-template-columns: 1fr; } .alice-jubilaeen-grid { grid-template-columns: 1fr; } .alice-filialliste { column-count: 1; } .alice-galerie { grid-template-columns: repeat(2, 1fr); gap: 12px; } .alice-pflegetipps { grid-template-columns: 1fr; } .alice-jobs-punkte { grid-template-columns: 1fr; } /* Formulare einspaltig; die Karten verlieren ihr großzügiges Innenpadding, sonst bleibt für die Felder kaum Breite. */ .alice-cf7-form .alice-form-row, .alice-cf7-form .alice-form-row--plz-ort { grid-template-columns: 1fr !important; } .alice-jobs-form, .alice-contact__info, .alice-contact__form { padding: 22px !important; border-radius: var(--alice-radius); } /* Auf dem Handy ist die Datenschutz-Zeile der längste Text im Formular — etwas kleiner, damit sie nicht den halben Bildschirm füllt. */ .alice-form-group--acceptance label { font-size: 0.78rem !important; } }