@charset "UTF-8"; /* ===================================================== Bestattungen Meier-Häller — Design-System Beige · Weinrot · Braun — warm, ruhig, einfühlsam ===================================================== */ /* Cormorant wird im parallel geladen (fonts/cormorant.css) — kein @import (Render-Kette) */ :root { /* Farben */ --beige-50: #FAF6EF; /* hellster Hintergrund */ --beige-100: #F4EDE1; /* Standard-Hintergrund */ --beige-200: #EAE0CE; /* Sektionen abgesetzt */ --beige-300: #DCCEB6; /* Linien, Ränder */ --wein-700: #6E2B33; /* Weinrot — Überschriften, CTAs */ --wein-800: #5A2229; /* Weinrot dunkel — Hover */ --wein-100: #F1E4E4; /* Weinrot ganz hell — Badges */ --braun-700: #5C4A3B; /* Fliesstext */ --braun-500: #75604C; /* Sekundärtext — abgedunkelt für WCAG-Kontrast (4.5:1 auf allen Beige-Tönen) */ --braun-300: #B8A48F; /* dezente Icons */ --weiss: #FFFFFF; --gold: #C2A15C; /* feine Akzente (Sterne) */ /* Typografie */ --font-serif: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif; --font-sans: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --maxw: 1160px; --radius: 14px; --shadow: 0 10px 40px rgba(92, 74, 59, .10); --shadow-soft: 0 4px 18px rgba(92, 74, 59, .08); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: 17px; line-height: 1.7; color: var(--braun-700); background: var(--beige-100); -webkit-font-smoothing: antialiased; } /* height:auto ist Pflicht, seit die Bilder width/height-Attribute tragen (gegen Layout-Springen): sonst gilt das height-Attribut als feste Höhe und das Bild wird verzerrt. Regeln mit eigener Höhe (Logos, .media-img, Galerie) sind spezifischer und gewinnen weiterhin. */ img { max-width: 100%; height: auto; display: block; } a { color: var(--wein-700); } h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; color: var(--wein-700); line-height: 1.2; margin: 0 0 .5em; } h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); } h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); } h3 { font-size: 1.35rem; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; } section { padding: 72px 0; } .section-alt { background: var(--beige-200); } .section-white { background: var(--beige-50); } /* Kleines umrandetes Stichwort über der Überschrift. Es ersetzt die früheren Badges auf den Karten: dort stand die Kategorie doppelt (Badge + Titel), hier trägt jeder Abschnitt genau ein Etikett — das gibt der ganzen Seite denselben roten Faden, ohne sich zu wiederholen. */ .eyebrow { display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--wein-700); border: 1px solid var(--braun-300); border-radius: 999px; padding: 5px 14px; margin-bottom: 14px; text-wrap: balance; /* gleichmässige Zeilen statt einzelner Reste */ } /* Lange, beschreibende Zeilen (Hero) bleiben ohne Rahmen — als Zweizeiler sähe eine Pille gedrungen aus. */ .eyebrow.plain { border: 0; padding: 0; font-size: .82rem; font-weight: 400; letter-spacing: .18em; color: var(--braun-500); } .hero.banner .eyebrow.plain { color: var(--braun-700); } @media (max-width: 620px) { /* Die weite Sperrung liess kurze Zeilen unschön umbrechen (z. B. «Kanton» allein auf einer Zeile). Auf dem Phone enger und etwas kleiner. */ .eyebrow { font-size: .7rem; letter-spacing: .1em; line-height: 1.5; padding: 4px 12px; } .eyebrow.plain { font-size: .74rem; padding: 0; } } /* Ortsangaben bleiben zusammen, statt mitten im Namen zu brechen */ .nowrap { white-space: nowrap; } .lead { font-size: 1.15rem; color: var(--braun-500); max-width: 46em; } /* ---------- Header / Navigation ---------- */ .topbar { background: var(--wein-700); color: #F6EAE0; font-size: .88rem; padding: 7px 0; } .topbar .wrap { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .topbar a { color: #fff; text-decoration: none; font-weight: 600; } .topbar .tel::before { content: "\260E\00A0"; } @media (max-width: 880px) { /* Auf dem Phone nur den Hinweis zeigen, nicht zusätzlich die Nummer: der Anruf-Button unten und die Nummer im Hero genügen. So rückt das Teamfoto weiter nach oben. */ .topbar .wrap { justify-content: center; } .topbar .tel { display: none; } } header.site { position: sticky; top: 0; z-index: 60; background: rgba(250, 246, 239, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--beige-300); } .navrow { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; gap: 10px; } .brand img { height: 46px; width: auto; } nav.main { display: flex; gap: 2px; align-items: center; flex-wrap: nowrap; } nav.main a { text-decoration: none; color: var(--braun-700); font-weight: 500; font-size: .9rem; padding: 8px 8px; border-radius: 8px; white-space: nowrap; transition: background .2s, color .2s; } nav.main a:hover { background: var(--beige-200); color: var(--wein-700); } nav.main a.active { color: var(--wein-700); font-weight: 700; } nav.main a.nav-cta { background: var(--wein-700); color: #fff; font-weight: 600; } nav.main a.nav-cta:hover { background: var(--wein-800); color: #fff; } nav.main a.nav-kontakt { margin-left: 14px; border: 2px solid var(--wein-700); color: var(--wein-700); border-radius: 999px; padding: 7px 18px; font-weight: 700; } nav.main a.nav-kontakt:hover { background: var(--wein-700); color: #fff; } .burger { display: none; background: none; border: 0; cursor: pointer; font-size: 1.7rem; color: var(--wein-700); padding: 4px 10px; } @media (max-width: 1230px) { .burger { display: block; } nav.main { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--beige-50); border-bottom: 1px solid var(--beige-300); flex-direction: column; align-items: stretch; padding: 10px 18px 18px; box-shadow: var(--shadow); } nav.main.open { display: flex; } nav.main a { padding: 12px 10px; font-size: 1.05rem; } } /* ---------- Buttons ---------- */ .btn { display: inline-block; background: var(--wein-700); color: #fff; text-decoration: none; font-weight: 600; padding: 14px 28px; border-radius: 999px; border: 0; cursor: pointer; font-size: 1rem; transition: background .22s cubic-bezier(.22,.61,.36,1), transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s cubic-bezier(.22,.61,.36,1); box-shadow: var(--shadow-soft); } .btn:hover { background: var(--wein-800); transform: translateY(-2px); box-shadow: var(--shadow); } .btn:active { transform: translateY(0); box-shadow: var(--shadow-soft); } .btn.ghost { background: transparent; color: var(--wein-700); border: 2px solid var(--wein-700); box-shadow: none; } .btn.ghost:hover { background: var(--wein-100); } .btn.big { padding: 17px 34px; font-size: 1.08rem; } /* Einheitliche Button-Reihe (roter Faden): überall zentriert, immer mit Abstand. Vorher standen Buttons mit   nebeneinander — beim Umbruch auf dem Handy klebten sie ohne vertikalen Abstand aneinander. */ .btn-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; } @media (max-width: 620px) { /* Auf schmalen Handys volle Breite: ruhiger und leichter zu treffen */ .btn-row { flex-direction: column; align-items: stretch; gap: 12px; } .btn-row .btn { width: 100%; text-align: center; } } /* ---------- Hero ---------- */ .hero { padding: 44px 0 40px; overflow: hidden; position: relative; } /* Engel als dezentes Hintergrund-Motiv (Markenzeichen, ohne aufdringlich zu wirken) */ .hero::before { content: ""; position: absolute; top: 40px; left: -90px; width: min(560px, 42vw); height: 620px; background: url("/img/engel.jpg") no-repeat left center / contain; mix-blend-mode: multiply; opacity: .17; filter: grayscale(.2); /* Bildkanten weich auslaufen lassen — kein sichtbarer Foto-Rand */ -webkit-mask-image: radial-gradient(ellipse 62% 55% at 42% 48%, #000 38%, transparent 78%); mask-image: radial-gradient(ellipse 62% 55% at 42% 48%, #000 38%, transparent 78%); pointer-events: none; z-index: 0; } .hero .wrap { position: relative; z-index: 1; } /* Telefonnummern in Karten nie umbrechen */ .card a[href^="tel:"] { white-space: nowrap; } @media (max-width: 880px) { .hero::before { top: 90px; left: -30%; width: 120vw; height: 120vw; opacity: .11; } } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; grid-template-areas: "copy photo" "ctas photo"; gap: 12px 52px; align-items: center; } .hero-copy { grid-area: copy; } .hero-ctas-row { grid-area: ctas; align-self: start; } .hero-photo { grid-area: photo; } .hero-logo { height: 96px; width: auto; margin: 0 0 22px; } .hero .slogan { font-family: var(--font-serif); font-size: clamp(2.3rem, 5vw, 3.7rem); color: var(--wein-700); line-height: 1.12; margin: 0 0 18px; font-weight: 600; } .hero .slogan em { font-style: italic; color: var(--braun-500); } .hero p.sub { font-size: 1.16rem; color: var(--braun-500); max-width: 34em; margin-bottom: 10px; } .hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; align-items: stretch; margin-top: 14px; } /* Bewertung im Hero — bewusst NUR auf dem Phone (siehe index.html). Ruhige Zeile statt Kachel: Pietät vor Marketing. */ .hero-rating { display: none; } @media (max-width: 880px) { .hero-rating { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; text-decoration: none; font-size: .86rem; color: var(--braun-500); } .hero-rating .stars { color: var(--gold); letter-spacing: 1px; } .hero-rating .hero-rating-text { font-weight: 600; color: var(--braun-700); } } /* Telefonnummer als klar erkennbarer zweiter Button */ .hero-tel { display: inline-flex; flex-direction: column; justify-content: center; text-decoration: none; background: var(--beige-50); border: 2px solid var(--wein-700); color: var(--wein-700); border-radius: 999px; padding: 9px 26px; font-weight: 600; font-size: 1.2rem; line-height: 1.1; transition: background .2s, color .2s, transform .15s; box-shadow: var(--shadow-soft); } .hero-tel small { display: block; font-weight: 500; font-size: .74rem; letter-spacing: .04em; color: var(--braun-500); margin-top: 2px; } .hero-tel:hover { background: var(--wein-700); color: #fff; transform: translateY(-1px); } .hero-tel:hover small { color: rgba(255,255,255,.85); } /* Teambild im Hero (mit Fallback-Collage, bis das Gruppenfoto als Datei da ist) */ .hero-photo { margin: 0; } .hero-photo > img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); object-fit: cover; } .hero-photo .photo-caption { font-size: .86rem; color: var(--braun-500); text-align: center; margin-top: 10px; } /* Der Team-Link steht auf einer eigenen Zeile, statt am Satz zu kleben */ .hero-photo .photo-caption a { display: block; margin-top: 4px; } .hero-photo.fallback > img { display: none; } .avatar-cluster { display: none; } .hero-photo.fallback .avatar-cluster { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; background: var(--beige-50); border: 1px solid var(--beige-300); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px 22px; } .avatar-cluster img { width: 128px; height: 128px; object-fit: cover; border-radius: 50%; border: 4px solid var(--beige-100); box-shadow: var(--shadow-soft); } @media (max-width: 880px) { .hero { padding-top: 22px; } .hero-grid { grid-template-columns: 1fr; /* Auf dem Phone soll man das Team sofort sehen: Slogan, dann Teamfoto, darunter «Todesfall was tun» und die Nummer. */ grid-template-areas: "copy" "photo" "ctas"; /* Kompakt gehalten, damit Teamfoto UND beide Knöpfe zusammen sichtbar sind, sobald die obere Leiste weggescrollt ist. */ gap: 12px; } .hero { padding-top: 14px; } .hero-logo { display: none; } /* Nav-Logo genügt auf dem Phone */ .hero .slogan { font-size: clamp(1.9rem, 8vw, 2.5rem); margin-bottom: 8px; } .hero p.sub { font-size: .97rem; line-height: 1.5; margin-bottom: 0; } .hero-photo > img { max-height: 40vh; object-fit: cover; } .hero-photo .photo-caption { font-size: .8rem; margin-top: 7px; } .hero-ctas { gap: 10px; margin-top: 2px; } .hero-ctas .btn, .hero-ctas .btn.big { width: 100%; text-align: center; } .hero-tel { width: 100%; align-items: center; } .avatar-cluster img { width: 88px; height: 88px; } } /* ---------- Team-Collage (Hero & Team-Seite) ---------- */ .team-strip { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; padding: 8px 0 0; } .team-strip figure { margin: 0; text-align: center; width: 132px; } .team-strip img { width: 116px; height: 116px; object-fit: cover; border-radius: 50%; border: 4px solid var(--beige-50); box-shadow: var(--shadow-soft); margin-inline: auto; } .team-strip figcaption { font-size: .82rem; margin-top: 7px; color: var(--braun-500); font-weight: 600; } /* Solange ein Porträt fehlt, steht das Logo als Platzhalter: vollständig einpassen statt zuschneiden — sonst wird die Schrift im Kreis angeschnitten. */ img.is-fallback { object-fit: contain !important; background: var(--beige-100); } .team-strip img.is-fallback { padding: 22px; } .person img.is-fallback { padding: 14%; } /* ---------- Review-Ticker ---------- */ .reviews-band { background: var(--beige-200); padding: 46px 0 54px; } .reviews-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .google-badge { font-weight: 700; color: var(--braun-700); font-size: 1.02rem; } .google-badge .stars { color: var(--gold); letter-spacing: 2px; } .ticker { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .ticker-track { display: flex; gap: 20px; width: max-content; align-items: stretch; /* Ruhiges Tempo: der Ticker soll begleiten, nicht hetzen. */ animation: ticker 120s linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } .review-card { width: 340px; height: 250px; flex: 0 0 auto; /* ALLE Karten exakt gleich gross */ background: var(--beige-50); border: 1px solid var(--beige-300); border-radius: var(--radius); padding: 18px 20px; text-decoration: none; color: var(--braun-700); transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; gap: 8px; overflow: hidden; } .review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .review-card .stars { color: var(--gold); font-size: 1rem; letter-spacing: 2px; flex: 0 0 auto; } /* Der volle Wortlaut bleibt im HTML; im Kasten wird er sauber abgeschnitten. */ .review-card .rv-text { margin: 0; font-size: .9rem; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; flex: 1 1 auto; } .review-card .rv-foot { margin-top: auto; padding-top: 8px; flex: 0 0 auto; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-top: 1px solid var(--beige-200); } .review-card .who { font-size: .78rem; color: var(--braun-500); } .review-card .rv-more { font-size: .78rem; color: var(--wein-700); font-weight: 600; white-space: nowrap; } .reviews-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 26px; } @media (max-width: 620px) { /* Kompaktere Karte, die nächste ragt sichtbar herein — so erkennt man die Bewegung. */ .review-card { width: 76vw; max-width: 290px; height: 215px; padding: 16px 18px; } .review-card .rv-text { -webkit-line-clamp: 5; font-size: .87rem; } .ticker-track { animation-duration: 70s; } } @media (prefers-reduced-motion: reduce) { /* Wer «Bewegung reduzieren» aktiviert hat, soll nicht vor einem scheinbar defekten Ticker stehen. Statt ihn ganz anzuhalten, gleitet er sehr langsam und gleichmässig weiter — eine ruhige lineare Verschiebung ist unkritisch, anders als Zoom, Parallax oder ruckhafte Effekte. Zusätzlich lässt er sich jederzeit von Hand wischen. */ .ticker-track { animation-duration: 300s; } .ticker { overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .ticker .review-card { scroll-snap-align: start; } /* Beim Wischen pausiert das Gleiten, damit sich beides nicht überlagert. */ .ticker:active .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; } } /* ---------- Karten / Grids ---------- */ .grid { display: grid; gap: 26px; } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 880px) { .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; } } .card { background: var(--beige-50); border: 1px solid var(--beige-300); border-radius: var(--radius); padding: 30px 28px; box-shadow: var(--shadow-soft); } .card h3 { margin-top: 0; } .card .more { font-weight: 600; text-decoration: none; } .card .more::after { content: "\00A0\2192"; } /* ---------- Schritt-für-Schritt ---------- */ .steps { counter-reset: step; display: grid; gap: 18px; max-width: 800px; } .step { counter-increment: step; background: var(--beige-50); border: 1px solid var(--beige-300); border-radius: var(--radius); padding: 22px 24px 22px 76px; position: relative; } .step::before { content: counter(step); position: absolute; left: 22px; top: 22px; width: 38px; height: 38px; border-radius: 50%; background: var(--wein-700); color: #fff; font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .step h3 { margin-bottom: .3em; font-size: 1.18rem; } .step p { margin: 0; font-size: .97rem; } /* ---------- Zitat-Band ---------- */ .quote-band { background: var(--wein-700); color: #F6EAE0; text-align: center; padding: 78px 0; } .quote-band blockquote { font-family: var(--font-serif); font-size: clamp(1.5rem, 3.4vw, 2.3rem); font-style: italic; max-width: 22em; margin: 0 auto 14px; line-height: 1.4; } .quote-band cite { font-style: normal; font-size: .95rem; opacity: .8; letter-spacing: .08em; } /* ---------- Team-Seite ---------- */ .person { display: grid; grid-template-columns: 210px 1fr; gap: 28px; align-items: start; background: var(--beige-50); border: 1px solid var(--beige-300); border-radius: var(--radius); padding: 28px; } .person img { width: 210px; height: 210px; object-fit: cover; border-radius: var(--radius); } .person .role { display: inline-block; background: var(--wein-100); color: var(--wein-700); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 13px; border-radius: 999px; margin-bottom: 10px; } .person h3 { margin: 0 0 2px; } .person p { margin: 8px 0 0; font-size: .97rem; } .person.placeholder img { filter: grayscale(1) opacity(.35); } @media (max-width: 680px) { .person { grid-template-columns: 1fr; } .person img { width: 100%; height: auto; aspect-ratio: 1; } } /* ---------- Galerie (Masonry: Bilder ungeschnitten, Caption als Hover-Overlay) ---------- */ .gallery { columns: 3; column-gap: 16px; } .gallery figure { margin: 0 0 16px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); position: relative; break-inside: avoid; } .gallery img { width: 100%; height: auto; transition: transform .4s; display: block; } .gallery figure:hover img { transform: scale(1.04); } .gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 16px 12px; font-family: var(--font-serif); font-size: 1.05rem; color: #fff; background: linear-gradient(to top, rgba(60,30,34,.72), rgba(60,30,34,0)); opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; } .gallery figure:hover figcaption { opacity: 1; transform: translateY(0); } @media (hover: none) { .gallery figcaption { opacity: 1; transform: none; padding-top: 26px; font-size: .95rem; } } /* Phone: sauberes, einheitlich zugeschnittenes 2er-Raster statt Masonry */ @media (max-width: 780px) { .gallery { columns: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .gallery figure { margin: 0; } .gallery img { aspect-ratio: 3/4; object-fit: cover; height: auto; } } /* ---------- Blog ---------- */ .post { background: var(--beige-50); border: 1px solid var(--beige-300); border-radius: var(--radius); padding: 34px 34px 30px; max-width: 760px; } .post .date { font-size: .84rem; color: var(--braun-500); letter-spacing: .06em; } .post h3 { margin-top: 4px; } /* Blog-Übersicht: Karten wie bucher-id (Bild · Titel · Datum · Teaser · mehr lesen) */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .blog-card { position: relative; /* für den «ganze Karte klickbar»-Trick */ background: var(--beige-50); border: 1px solid var(--beige-300); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; } .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .blog-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; } .blog-card .blog-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; } .blog-card h3 { font-size: 1.35rem; margin: 0 0 4px; } .blog-card .date { font-size: .82rem; color: var(--braun-500); letter-spacing: .06em; margin-bottom: 10px; } .blog-card p { font-size: .95rem; margin: 0 0 16px; } .blog-card .more { margin-top: auto; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wein-700); text-decoration: none; } .blog-card .more::after { content: "\00A0\2192"; } .blog-card .more:hover { color: var(--wein-800); } /* Die ganze Karte ist anklickbar (nicht nur «mehr lesen») */ .blog-card .more::before { content: ""; position: absolute; inset: 0; z-index: 1; } @media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .blog-grid { grid-template-columns: 1fr; } } /* Beitrags-Einzelseite: Bild als schmales Banner, damit der Text sofort beginnt */ .blog-article { max-width: 760px; } .blog-article .hero-img { width: 100%; aspect-ratio: 16/7; max-height: 300px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-soft); margin: 0 0 26px; display: block; } @media (max-width: 620px) { .blog-article .hero-img { aspect-ratio: 16/9; } } /* ---------- Bild neben Inhalt (Trauerrede, Vorsorge) ---------- */ .media-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items: stretch; } /* min-width:0 ist Pflicht: sonst kann ein breiter Inhalt (z. B. eine Karte mit aspect-ratio) die fr-Spalten sprengen und die Textspalte zusammenquetschen. */ .media-split > * { min-width: 0; } .media-split .steps { max-width: none; } .media-split .media-col { display: flex; flex-direction: column; justify-content: center; } /* Karten in den Standort-Spalten wie die Fotos daneben: gerundet mit weichem Schatten */ .media-split .map-embed { width: 100%; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); } .media-split .media-img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-soft); } @media (max-width: 820px) { .media-split { grid-template-columns: 1fr; gap: 22px; } .media-split .media-img { min-height: 0; aspect-ratio: 4/3; } } /* Qualifikation / Zertifikat */ .credential { display: grid; grid-template-columns: 200px 1fr; gap: 30px; align-items: center; margin-top: 40px; padding: 26px 30px; background: var(--beige-100); border: 1px solid var(--beige-300); border-radius: var(--radius); } .credential a { display: block; } .credential img { width: 100%; height: auto; border-radius: 6px; box-shadow: var(--shadow-soft); border: 1px solid var(--beige-300); transition: transform .25s ease; } .credential a:hover img { transform: scale(1.02); } .credential .cred-text h3 { margin: 0 0 8px; } .credential .cred-text p { margin: 0; } .credential .cred-text .small { display: block; margin-top: 10px; color: var(--braun-500); } @media (max-width: 640px) { .credential { grid-template-columns: 1fr; gap: 18px; text-align: center; padding: 22px; } .credential a { max-width: 220px; margin: 0 auto; } } /* ---------- Seiten-Banner (Bild im oberen Balken der Unterseiten) ---------- */ .hero.banner { padding: 66px 0 58px; } .hero.banner::before { top: 0; left: 0; width: 100%; height: 100%; background: var(--hero-img) no-repeat center center / cover; mix-blend-mode: normal; opacity: 1; filter: none; -webkit-mask-image: none; mask-image: none; } .hero.banner::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(100deg, rgba(247,241,232,.96) 0%, rgba(247,241,232,.9) 42%, rgba(247,241,232,.6) 100%); } /* Fliesstext auf den Bild-Bannern dunkler als sonst: Auf dem Foto reichte das mittlere Braun nicht, der Text war schlecht lesbar. Titel bleibt weinrot. */ .hero.banner .lead, .hero.banner p { color: var(--braun-700); } .hero.banner .eyebrow { color: var(--braun-700); } @media (max-width: 880px) { .hero.banner { padding: 40px 0 34px; } /* Balance: Bild darf durchscheinen, Text bleibt lesbar — möglich, weil der Fliesstext auf Bannern das dunklere Braun nutzt. */ .hero.banner::after { background: linear-gradient(180deg, rgba(247,241,232,.90), rgba(247,241,232,.86)); } } /* ---------- Hintergrund-Band (atmosphärisches Vollbreiten-Bild zwischen Sektionen) ---------- */ .bg-band { position: relative; min-height: 300px; background-size: cover; background-position: center; } .bg-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(244,237,225,.20), rgba(92,74,59,.18)); } @media (min-width: 900px) { .bg-band { min-height: 360px; background-attachment: fixed; } } @media (max-width: 680px) { /* Auf dem Phone wirkte der randlose Bildstreifen wie hineingeworfen. Eingerückt und gerundet fügt er sich in die Bildsprache der Seite ein. */ .bg-band { min-height: 190px; margin: 26px 18px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); } .bg-band::after { border-radius: inherit; } } /* Todesfall: 7 Schritte kompakt in 2 Spalten auf Desktop */ @media (min-width: 900px) { .steps.cols-2 { grid-template-columns: 1fr 1fr; max-width: none; column-gap: 26px; } } /* ---------- Standort-Block (Foto · Infos · Karte) ---------- Klare Reihenfolge auf dem Phone: erst das Bild als Anker, dann die Eckdaten, zum Schluss die Karte. Vorher lag die Karte mitten im Text und das Foto ganz unten — man fand sich schlecht zurecht. */ .loc { display: grid; grid-template-columns: 1.02fr .98fr; gap: 26px 34px; align-items: start; } /* Links Text und Karte untereinander, rechts das Foto über die ganze Höhe. Vorher hing die Karte unter dem Bild — die rechte Spalte wurde dadurch sehr hoch und der Abschnitt lief auseinander. */ .loc > .loc-info { grid-area: 1 / 1 / 2 / 2; } .loc > .loc-map { grid-area: 2 / 1 / 3 / 2; } .loc > .loc-media { grid-area: 1 / 2 / 3 / 3; } /* Ebikon: noch kein Foto — Text links, Karte rechts daneben */ .loc.no-media > .loc-info { grid-area: 1 / 1 / 3 / 2; } .loc.no-media > .loc-map { grid-area: 1 / 2 / 3 / 3; } .loc > * { min-width: 0; } /* Eckdaten abgesetzt, damit Adresse und Nummer sofort auffindbar sind */ .loc-facts { background: var(--beige-100); border-left: 3px solid var(--gold); border-radius: 10px; padding: 14px 16px; margin: 14px 0 16px; display: flex; flex-direction: column; gap: 8px; } .loc-facts p { margin: 0; } .loc-facts .loc-adr { font-size: 1.02rem; line-height: 1.45; } .loc-facts .loc-contact a { color: var(--wein-700); } /* Im Standort-Block ist alles linksbündig — ein zentrierter Knopf mitten in der Spalte brach die Linie. */ .loc-info .btn-row { justify-content: flex-start; } .loc-media .media-img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-soft); } .loc-map .map-embed { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); } @media (max-width: 880px) { .loc { display: flex; flex-direction: column; gap: 16px; } .loc > .loc-media { order: 1; } /* Bild zuerst: man sieht sofort, wo man hinkommt */ .loc > .loc-info { order: 2; } .loc > .loc-map { order: 3; } /* Karte zum Schluss */ } /* ---------- Standorte / Kontakt ---------- */ .location-card { padding: 0; overflow: hidden; } .location-card .loc-body { padding: 26px 28px; } .location-card .badge-new { display: inline-block; background: var(--gold); color: #fff; font-size: .76rem; font-weight: 700; letter-spacing: .08em; padding: 4px 12px; border-radius: 999px; text-transform: uppercase; margin-left: 8px; vertical-align: middle; } .map-embed { position: relative; aspect-ratio: 16/9; background: var(--beige-200); } .map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .map-embed .map-load { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; background: var(--beige-200); color: var(--braun-500); font-size: .92rem; cursor: pointer; border: 0; width: 100%; } form.contact { display: grid; gap: 16px; max-width: 640px; } form.contact label { font-weight: 600; font-size: .92rem; } form.contact input, form.contact textarea { width: 100%; padding: 13px 15px; border: 1px solid var(--beige-300); border-radius: 10px; background: var(--beige-50); font: inherit; color: inherit; } form.contact input:focus, form.contact textarea:focus { outline: 2px solid var(--wein-700); outline-offset: 1px; } .hp { position: absolute; left: -9999px; } .form-status { padding: 15px 18px; border-radius: 10px; margin-bottom: 18px; font-weight: 600; } .form-status.ok { background: #E3EFE0; color: #2F5D2B; border: 1px solid #B9D6B2; } .form-status.err { background: var(--wein-100); color: var(--wein-700); border: 1px solid #D9B8B8; } /* ---------- Footer ---------- */ footer.site { background: var(--braun-700); color: #EDE4D8; padding: 56px 0 30px; font-size: .93rem; } footer.site .foot-h { color: #fff; font-family: var(--font-sans); font-size: 1rem; font-weight: 700; margin: 0 0 12px; } footer.site a { color: #EDE4D8; text-decoration: none; } footer.site a:hover { text-decoration: underline; } /* Adressen öffnen den Standort in Google Maps — dezent als klickbar erkennbar. Selektor bewusst mit footer.site, sonst gewinnt die allgemeine Regel oben. */ footer.site a.foot-adr { display: inline-block; text-decoration: underline dotted rgba(237, 228, 216, .45); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; } footer.site a.foot-adr:hover { color: #fff; text-decoration: underline solid rgba(255,255,255,.8); } .foot-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.3fr; gap: 34px; } @media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } } footer .legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.18); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .84rem; opacity: .85; } .gemeinden { font-size: .86rem; line-height: 1.9; opacity: .9; } /* ---------- Notfall-Leiste mobil ---------- */ .call-fab { display: none; position: fixed; right: 14px; bottom: 14px; z-index: 80; background: var(--wein-700); color: #fff; border-radius: 999px; padding: 10px 16px; font-weight: 600; font-size: .86rem; text-decoration: none; box-shadow: 0 6px 22px rgba(90,34,41,.38); } @media (max-width: 780px) { /* Der Notruf-Knopf erscheint erst beim Scrollen: ganz oben überdeckte er sonst die Telefonnummer im Hero (dieselbe Nummer, doppelt und im Weg). */ .call-fab { display: block; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease, visibility .3s; } body.scrolled .call-fab { opacity: 1; visibility: visible; transform: none; } } @media (prefers-reduced-motion: reduce) { .call-fab { transition: none; } } /* ---------- Utilities ---------- */ .center { text-align: center; } .mt-0 { margin-top: 0; } .mb-40 { margin-bottom: 40px; } .small { font-size: .88rem; color: var(--braun-500); } .divider { width: 74px; height: 3px; background: var(--gold); border: 0; margin: 18px auto 26px; border-radius: 2px; } .divider.left { margin-left: 0; } /* Sanftes Einblenden beim Scrollen. Ruhige, leicht abbremsende Kurve (kein Federn/Springen — Pietät). --d wird per JS gesetzt: Karten einer Gruppe erscheinen nacheinander statt alle auf einmal. */ .fade-in { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); transition-delay: var(--d, 0ms); will-change: opacity, transform; } .fade-in.visible { opacity: 1; transform: none; will-change: auto; } /* Bilder kommen einen Hauch später und ruhiger als der Text daneben */ .fade-in img { transition: transform 1.1s cubic-bezier(.22,.61,.36,1); } /* Sticky-Header reagiert aufs Scrollen — feines Zeichen, dass die Seite „lebt" */ header.site { transition: box-shadow .3s ease, background-color .3s ease; } header.site.scrolled { box-shadow: 0 6px 24px rgba(92, 74, 59, .10); background: rgba(250, 246, 239, .98); } @media (prefers-reduced-motion: reduce) { .fade-in { opacity: 1; transform: none; transition: none; } header.site { transition: none; } /* Weiches Scrollen und Bild-Zoom gehören ebenfalls zur Bewegung */ html { scroll-behavior: auto; } .card:hover, .blog-card:hover, .review-card:hover { transform: none; } .blog-card:hover img, .gallery figure:hover img { transform: none; } }