/* ========================================================================== stil.css – Website von Antje Schmidt Eine einzige Stildatei für alle Seiten. Keine Webfonts, keine externen Aufrufe. Aufbau: 1 Farben und Grundlagen · 2 Kopfzeile und Menü · 3 Wellenkreise („Atem“) · 4 Seitenkopf und Startseiten-Hero · 5 Abschnitte, Bilder, Kacheln, Knöpfe · 6 Mäander-Trenner und Unternavigation · 7 Öle · 8 Nachruhe, Preis, Kontakt · 9 Band mit Zitat · 10 Rechtstexte, Tabelle, Platzhalter · 11 Fußzeile · 12 Bewegung und Ruhe Wichtig: Einblend-Effekte wirken nur, wenn bewegung.js die Klasse "js" auf gesetzt hat. Ohne JavaScript ist alles sofort sichtbar. Farben: Alle Farbpaare für Text erfüllen mindestens WCAG AA (Kontrast 4,5 : 1). ========================================================================== */ /* ---------- 1. Farben und Grundlagen ---------- */ :root { --creme: #faf5ec; /* Seitenhintergrund */ --sand: #f2e9da; /* helle Flächen im Wechsel */ --flaeche: #fffdf8; /* Karten, Kacheln */ --tinte: #1e2d2f; /* Fließtext */ --tinte-weich: #4a5a5c; /* Nebentext, Bildunterschriften */ --petrol: #1a7a7b; /* Hauptfarbe: Knöpfe (weiße Schrift), Linien */ --petrol-dunkel: #13615f; /* Überschriften und Links auf hellem Grund */ --petrol-tief: #114e51; /* dunkle Abschnitte, Fußzeile */ --tuerkis: #2c9c99; /* nur Schmuck (Wellenkreise, Linien), nicht für Text */ --tuerkis-hell: #dcefec; /* zart getönte Flächen (Nachruhe) */ --rostrot: #b0452a; /* Akzent: Vorüberschriften, Mäander, Randstreifen */ --rostrot-dunkel: #8f3620; /* Hover des Akzents */ --rost-hell: #f0a488; /* Akzent auf dunklem Grund */ --text-hell: #f3eee4; /* Text auf dunklem Grund */ --linie: #e4d9c8; /* feine Rahmen */ --gelb: #fbe9a0; /* Platzhalter */ --schrift-titel: Georgia, "Palatino Linotype", "Book Antiqua", Palatino, serif; --schrift: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; --breite: 72rem; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--creme); color: var(--tinte); font-family: var(--schrift); font-size: 1.125rem; line-height: 1.7; } img { max-width: 100%; height: auto; display: block; } figure { margin: 0; } a { color: var(--petrol-dunkel); text-underline-offset: .2em; } a:hover { color: var(--rostrot-dunkel); } p { margin: 0 0 1.1rem; } h1, h2, h3 { font-family: var(--schrift-titel); font-weight: 400; margin: 0 0 1rem; color: var(--petrol-dunkel); } h1 { font-size: clamp(2.5rem, 6.5vw, 4.4rem); line-height: 1.1; letter-spacing: -.01em; } h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.15; } h3 { font-size: 1.4rem; line-height: 1.3; color: var(--tinte); } /* Sprungziele (z. B. #nachruhe) nicht unter der festen Kopfzeile verstecken */ [id] { scroll-margin-top: 6.5rem; } :focus-visible { outline: 3px solid var(--petrol-dunkel); outline-offset: 3px; } .dunkel-abschnitt :focus-visible, .band :focus-visible, .fuss :focus-visible { outline-color: var(--rost-hell); } .inhalt { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; } .spalte { max-width: 66ch; } .sprunglink { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--flaeche); color: var(--tinte); padding: .6rem 1rem; border-radius: 8px; } .sprunglink:focus { top: 1rem; } .kicker { margin: 0 0 1rem; font-family: var(--schrift); font-size: .78rem; font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: .16em; color: var(--rostrot); } .dunkel-abschnitt .kicker, .band .kicker { color: var(--rost-hell); } .einleitung { font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.6; max-width: 58ch; } /* ---------- 2. Kopfzeile und Menü ---------- */ .kopf { position: fixed; inset: 0 0 auto 0; z-index: 50; padding: .9rem 0; background: rgba(250, 245, 236, .96); border-bottom: 1px solid var(--linie); transition: padding .3s ease, box-shadow .3s ease; } .kopf.kompakt { padding: .4rem 0; box-shadow: 0 6px 24px rgba(17, 78, 81, .12); } .kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .wortmarke { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .7rem; color: var(--petrol-dunkel); text-decoration: none; font-family: var(--schrift-titel); font-size: 1.45rem; line-height: 1.1; } .wortmarke:hover { color: var(--petrol-dunkel); } /* Das Merkursiegel neben dem Namen: rund, mit feinem türkisem Ring */ .siegel { width: 2.9rem; height: 2.9rem; border-radius: 50%; box-shadow: 0 0 0 2px var(--tuerkis-hell), 0 2px 8px rgba(17, 78, 81, .18); transition: width .3s ease, height .3s ease; } .kopf.kompakt .siegel { width: 2.4rem; height: 2.4rem; } .menue-schalter { position: absolute; opacity: 0; width: 1px; height: 1px; } .menue-knopf { position: relative; z-index: 2; cursor: pointer; color: var(--petrol-dunkel); font-size: 1rem; font-weight: 600; border: 1px solid var(--petrol); border-radius: 999px; padding: .4rem 1rem; } .menue-schalter:focus-visible + .menue-knopf { outline: 3px solid var(--petrol-dunkel); outline-offset: 3px; } .balken { display: inline-block; width: 18px; height: 2px; margin: 0 .7rem .25rem 0; vertical-align: middle; background: currentColor; box-shadow: 0 6px currentColor, 0 -6px currentColor; } /* Schmale Bildschirme: Menü als Vollbild-Fläche in Creme */ .hauptmenue { position: fixed; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; background: var(--creme); visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility .3s; } .menue-schalter:checked ~ .hauptmenue { visibility: visible; opacity: 1; } .hauptmenue ul { list-style: none; margin: 0; padding: 0; text-align: center; } .hauptmenue li { margin: .5rem 0; } .hauptmenue a { color: var(--petrol-dunkel); text-decoration: none; font-family: var(--schrift-titel); font-size: clamp(1.5rem, 6vw, 2.2rem); } .hauptmenue a[aria-current="page"] { color: var(--rostrot); } .hauptmenue a:hover { color: var(--rostrot-dunkel); } @media (max-width: 1079px) { body:has(.menue-schalter:checked) { overflow: hidden; } } /* Breite Bildschirme: Menü in einer Zeile */ @media (min-width: 1080px) { .menue-knopf, .menue-schalter { display: none; } .hauptmenue { position: static; visibility: visible; opacity: 1; background: none; display: block; } .hauptmenue ul { display: flex; gap: 1.5rem; } .hauptmenue li { margin: 0; } .hauptmenue a { font-family: var(--schrift); font-size: .98rem; font-weight: 500; color: var(--tinte); padding: .3rem 0; background: linear-gradient(var(--rostrot), var(--rostrot)) left bottom / 0 2px no-repeat; transition: background-size .3s ease; } .hauptmenue a:hover { color: var(--petrol-dunkel); background-size: 100% 2px; } .hauptmenue a[aria-current="page"] { color: var(--petrol-dunkel); background-size: 100% 2px; } } /* ---------- 3. Wellenkreise („Atem“): langsam sich weitende Ringe, reine Dekoration ---------- */ .wellenkreise { position: absolute; pointer-events: none; color: var(--tuerkis); overflow: visible; } .wellenkreise circle { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; transform-origin: 50% 50%; transform-box: fill-box; opacity: .55; animation: atem 9s ease-in-out infinite; } .wellenkreise circle:nth-child(2) { animation-delay: -3s; } .wellenkreise circle:nth-child(3) { animation-delay: -6s; } @keyframes atem { 0% { transform: scale(.55); opacity: 0; } 35% { opacity: .55; } 100% { transform: scale(1.15); opacity: 0; } } /* ---------- 4. Seitenkopf (Unterseiten) und Hero (Startseite) ---------- */ .seitenkopf { position: relative; overflow: hidden; padding: 9rem 0 4rem; background: radial-gradient(48rem 26rem at 90% 0%, var(--tuerkis-hell), transparent 70%), var(--creme); } .seitenkopf .inhalt { position: relative; } .seitenkopf .einleitung { margin-bottom: 0; } .seitenkopf .wellenkreise { top: -6rem; right: -6rem; width: 24rem; height: 24rem; } /* Großes Bild unter der Überschrift (z. B. die Hände auf der Einreibungs-Seite) */ .seitenkopf-bild { margin-top: 2.5rem; } .seitenkopf-bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 60%; } @media (min-width: 860px) { .seitenkopf-bild img { aspect-ratio: 21 / 9; } } .hero { position: relative; overflow: hidden; min-height: min(88vh, 54rem); display: flex; align-items: center; padding: 8.5rem 0 5rem; background: radial-gradient(52rem 30rem at 85% 30%, var(--tuerkis-hell), transparent 70%), radial-gradient(36rem 22rem at 0% 100%, rgba(176, 69, 42, .08), transparent 70%), var(--creme); } .hero-raster { position: relative; display: grid; gap: 2.5rem; align-items: center; } .dreiklang { margin: 0 0 1.5rem; font-family: var(--schrift-titel); font-size: 1.1rem; letter-spacing: .12em; color: var(--tinte-weich); } .hero-bild { position: relative; } .hero .rahmen { position: relative; border-radius: 24px; box-shadow: 0 30px 70px rgba(17, 78, 81, .22); } /* Wasserkreise-Bild etwas konturierter (Wunsch von Antje); das ist keine Bewegung */ .kontur img { filter: contrast(1.12) saturate(1.15); } /* Die Ringe sitzen dort, wo der Tropfen auf das Wasser trifft; flach wie die Wasserkreise im Bild */ .hero-bild .wellenkreise { left: 50%; top: 78%; width: 80%; height: auto; aspect-ratio: 3 / 1; transform: translate(-50%, -50%); color: #fff; } @media (min-width: 860px) { .hero-raster { grid-template-columns: 1fr 1.15fr; gap: 4rem; } } /* ---------- 5. Abschnitte, Bilder, Kacheln, Knöpfe ---------- */ .abschnitt { padding: clamp(3.5rem, 8vw, 6.5rem) 0; } .flaeche { background: var(--sand); } .dunkel-abschnitt { background: var(--petrol-tief); color: var(--text-hell); } .dunkel-abschnitt h2, .dunkel-abschnitt h3 { color: #fff; } .dunkel-abschnitt a:not(.knopf) { color: #fff; } .dunkel-abschnitt a:not(.knopf):hover { color: var(--rost-hell); } .bildpaar { display: grid; gap: 2.5rem; align-items: center; } @media (min-width: 860px) { .bildpaar { grid-template-columns: 1.2fr 1fr; gap: 4rem; } .bildpaar.umgekehrt { grid-template-columns: 1fr 1.2fr; } .bildpaar.umgekehrt figure { order: -1; } } .rahmen { overflow: hidden; border-radius: 18px; background: var(--linie); } .rahmen img { width: 100%; } /* Hochkant-Bild (z. B. Pastellbild): schmal und mittig, im Bildpaar höchstens 60 % der Bildschirmhöhe */ .bild-hochkant { width: 100%; max-width: 22rem; margin-inline: auto; } .bildpaar .bild-hochkant img { max-height: 60vh; object-fit: cover; } figcaption { margin-top: .7rem; font-size: .95rem; line-height: 1.5; color: var(--tinte-weich); } /* Merkursiegel groß (Startseite) */ .siegel-gross { max-width: 18rem; margin-inline: auto; } .siegel-gross img { border-radius: 50%; box-shadow: 0 0 0 6px var(--flaeche), 0 0 0 8px var(--tuerkis-hell), 0 24px 60px rgba(17, 78, 81, .18); } .knopfreihe { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.8rem 0 0; } .knopf { display: inline-block; padding: .9rem 1.7rem; border-radius: 999px; border: 2px solid var(--petrol); background: var(--petrol); color: #fff; font-weight: 600; text-decoration: none; transition: background-color .25s ease, border-color .25s ease, color .25s ease; } .knopf:hover { background: var(--petrol-dunkel); border-color: var(--petrol-dunkel); color: #fff; } .knopf-zweit { background: transparent; color: var(--petrol-dunkel); } .knopf-zweit:hover { background: var(--petrol-dunkel); color: #fff; } .dunkel-abschnitt .knopf, .band .knopf { background: var(--creme); border-color: var(--creme); color: var(--petrol-tief); } .dunkel-abschnitt .knopf:hover, .band .knopf:hover { background: #fff; border-color: #fff; color: var(--petrol-tief); } .dunkel-abschnitt .knopf-zweit, .band .knopf-zweit { background: transparent; color: #fff; } .dunkel-abschnitt .knopf-zweit:hover, .band .knopf-zweit:hover { background: var(--creme); color: var(--petrol-tief); } /* Kacheln: drei Wege (Startseite) oder Verweise auf andere Seiten */ .kacheln { display: grid; gap: 1.5rem; margin-top: 2.5rem; } @media (min-width: 860px) { .kacheln { grid-template-columns: repeat(3, 1fr); } } .kachel { position: relative; display: flex; flex-direction: column; background: var(--flaeche); border: 1px solid var(--linie); border-top: 4px solid var(--rostrot); border-radius: 18px; padding: 2rem 1.7rem 1.7rem; } .kachel h3 { color: var(--petrol-dunkel); } .kachel p { margin: 0 0 1.2rem; } .kachel .weiter { margin-top: auto; font-weight: 600; } .flaeche .kachel { background: var(--creme); } /* Zitat-Kachel: wie eine Kachel, aber mit großem Anführungszeichen; Text kursiv, Name klein darunter (