/* ========================================================================== Heissnhof Fischbachau – gestalterische Fassung EIN Farbsystem: Markenblau #12476c (Flächen, Überschriften, Knöpfe), #239ddb als Akzent (nur Linien/Punkte), #0C3450 für Kopf/Fuss/Fotoschleier, #EEF0F2 helles Grau, #C0392B rein funktional (Fehler/Pflichtfeld). Schriften wie im Original: Ovo (Überschriften), Quattrocento Sans (Text), Lovers Quarrel (Hero-Schriftzug), Overpass (Hero-Unterzeile). Bewegung durchgängig über EIN Easing (--schwung) und Motion (self-hosted), alles unter dem Guard `bewegt` (respektiert prefers-reduced-motion). ========================================================================== */ :root { /* --- Farbe: die des Originals (heissnhof.com) --- #12476c fuer Flaechen und Ueberschriften, #239ddb als Akzent, #1877c4 fuer Knoepfe, #eef0f2 als helles Grau. Rot steht nur dort, wo es eine Funktion hat. */ --tief: #12476C; --nacht: #0C3450; /* abgedunkeltes --tief, fuer Fuss und Fotoflaechen */ /* Dieselben zwei Blaus als RGB-Tripel, damit Schatten/Verläufe/Overlays sie mit Alpha nutzen können und nicht als leicht abweichende Handwerte driften. */ --tief-rgb: 18, 71, 108; /* = --tief */ --nacht-rgb: 12, 52, 80; /* = --nacht */ --hellblau:#239DDB; /* Akzent des Originals - NUR als Linie, Rahmen, Punkt, Fokusring. Auf Weiss nur 3,0:1, taugt deshalb nicht als Textfarbe. */ --knopf: #12476C; /* dasselbe Blau wie Kopf und Navigation */ /* Wärmere Flächen für eine gemütlichere Hof-Anmutung: statt kühlem Weiss/Grau ein warmes Elfenbein/Leinen. Das Markenblau bleibt Struktur & Akzent – die Wärme kommt allein über die hellen Flächen, Text und Schatten. */ --papier: #FBF8F2; /* warmes Elfenbein statt reinem Weiss */ --kalk: #F1EADD; /* warmes Leinen statt kaltem Grau */ --signal: #C0392B; /* nur funktional: Pflichtfeld, Fehler, Kartennadel */ --text: #29241F; /* warmes Dunkelbraun statt kühlem Anthrazit */ --stein: #6B6157; /* warmes Taupe statt kühlem Grau (5,4:1 auf Elfenbein) */ --warm-rgb: 74, 55, 36; /* warmer Braunton für Linien & Schatten */ --linie: rgba(var(--warm-rgb), .16); /* EIN Schleier, EINE Deckkraft fuer alle Fotoflaechen. Getrennte Schleier je Bildwelt hatten die Toene wieder auseinanderlaufen lassen. */ --schleier: 14, 50, 71; /* --- Schrift: dieselben wie auf heissnhof.com --- */ --display: 'Ovo', Georgia, 'Times New Roman', serif; --sans: 'Quattrocento Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --schrift: 'Lovers Quarrel', 'Ovo', cursive; /* Hero-Schriftzug */ --grotesk: 'Overpass', var(--sans); /* Hero-Unterzeile */ /* --- Maß --- */ --abstand: clamp(80px, 10vw, 130px); --breit: 1180px; --rand: 40px; --kopf-h: 92px; --kachel-gap: 6px; /* ein Abstand für Galerie UND Wohnungs-Collage */ --rund: 7px; /* sanfte Rundung – „gemütlich" statt scharfkantig-kühl */ --schwung: cubic-bezier(.22, .68, .28, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 110px; } body { margin: 0; font-family: var(--sans); font-size: 18px; line-height: 1.62; color: var(--text); background: var(--papier); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; line-height: 1.14; } h2 { font-size: clamp(30px, 3.4vw, 46px); letter-spacing: -.015em; } h3 { font-size: clamp(23px, 2.2vw, 30px); letter-spacing: -.012em; } p { margin: 0 0 1.1em; } a { color: inherit; } .skip { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--papier); color: var(--tief); padding: 12px 20px; } .skip:focus { left: 12px; top: 12px; } :focus-visible { outline: 2px solid var(--hellblau); outline-offset: 3px; } /* Startzustand für alles, was beim Scrollen eingeblendet wird. .bereit setzt app.js erst, wenn Motion läuft – ohne JS bleibt alles sichtbar. */ .bereit [data-zeig] { opacity: 0; } /* ============================ Knöpfe ============================ */ .knopf { display: inline-block; padding: 14px 30px; font-family: var(--sans); font-size: 15px; font-weight: 700; letter-spacing: .04em; text-decoration: none; cursor: pointer; border: 1px solid var(--tief); background: var(--tief); color: var(--papier); transition: background .22s var(--schwung), color .22s, border-color .22s, transform .22s var(--schwung); } .knopf:hover { background: var(--nacht); border-color: var(--nacht); } .knopf--hell { background: var(--papier); border-color: var(--papier); color: var(--tief); } .knopf--hell:hover { background: var(--kalk); border-color: var(--kalk); color: var(--tief); } .knopf--rand { background: none; color: var(--tief); } .knopf--rand:hover { background: var(--tief); color: var(--papier); } .knopf--voll { width: 100%; border: 0; padding: 16px 20px; font-size: 16px; background: var(--knopf); } .knopf--voll:hover { background: var(--nacht); } /* Schmaler Fortschrittsbalken oben. Er ersetzt das frühere "Höhenband" am linken Rand: dessen Marken hingen an festen Prozentwerten statt an den Abschnitten, die 10-px-Vertikalschrift war unlesbar, und es stand 144 px ausserhalb der Inhaltsspalte. Ein Element, das erklärt werden muss, trägt nicht. */ .fortschritt { position: fixed; inset: 0 0 auto; height: 2px; z-index: 90; } .fortschritt i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--hellblau), var(--tief)); } /* ============================== Kopf ============================== */ .kopf { position: fixed; inset: 0 0 auto; z-index: 80; isolation: isolate; height: var(--kopf-h); background: transparent; transition: background .35s var(--schwung), height .35s var(--schwung), box-shadow .35s, backdrop-filter .35s; } /* Ohne diese Abdunklung steht die weisse Navigation ueber hellem Gras bei 2,33:1. Sobald der feste Kopf greift, wird sie nicht mehr gebraucht. */ .kopf::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(var(--nacht-rgb), .74), rgba(var(--nacht-rgb), 0)); pointer-events: none; transition: opacity .35s var(--schwung); } .kopf.is-fest::before { opacity: 0; } .kopf.is-fest { height: 74px; background: rgba(var(--nacht-rgb), .93); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); } .kopf__innen { max-width: var(--breit); height: 100%; margin: 0 auto; padding: 0 var(--rand); display: flex; align-items: center; justify-content: space-between; gap: 30px; } .kopf__logo img { width: 150px; height: auto; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .45)); transition: width .35s var(--schwung); } .kopf.is-fest .kopf__logo img { width: 112px; } .nav { display: flex; align-items: center; gap: 34px; } .nav a { font-size: 15px; font-weight: 500; color: var(--papier); text-decoration: none; white-space: nowrap; position: relative; padding: 4px 0; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); } .nav a:not(.nav__cta)::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--papier); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--schwung); } .nav a:not(.nav__cta):hover::after, .nav a:not(.nav__cta).is-aktiv::after { transform: scaleX(1); } .nav a.nav__cta { border: 1px solid rgba(255, 255, 255, .6); padding: 9px 20px; transition: background .25s, color .25s, border-color .25s; } .nav__cta:hover { background: var(--papier); color: var(--tief); border-color: var(--papier); } .burger { display: none; } /* ============================== Hero ============================== */ /* Hero über die komplette Fensterhöhe – kein Deckel, damit auf grossen Monitoren nicht schon die nächste Sektion durchlugt. min-height fängt nur ganz flache Querformate ab. */ .hero { position: relative; height: 100svh; min-height: 520px; overflow: hidden; background: var(--nacht); } .hero__slides { position: absolute; inset: 0; } .hero__slide { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; opacity: 0; transition: opacity 1.4s var(--schwung); } .hero__slide.is-aktiv { opacity: 1; } /* Hintergrundbild je Slide in CSS, damit die Media-Query darunter auf dem Handy die kleinere Fassung laden kann (2000 px → 1200 px, rund halbe Grösse). background-position bleibt inline – so unterscheidet der Slidertest die Slides. */ .hero__slide--eins { background-image: url('assets/img/hero-1.webp'); } .hero__slide--zwei { background-image: url('assets/img/hero-2.webp'); } @media (max-width: 820px) { .hero__slide--eins { background-image: url('assets/img/hero-1-1200.webp'); } .hero__slide--zwei { background-image: url('assets/img/hero-2-1200.webp'); } } /* Ken-Burns: sehr langsames Heranfahren MIT sanftem Schwenk – nur auf dem sichtbaren Bild, auf beiden Slides gleich. Start leicht herangezoomt (1.04), damit der Schwenk immer im Bild bleibt und nie eine Kante freilegt. */ .hero__slide.is-aktiv { animation: kenburns 20s ease-out forwards; } @keyframes kenburns { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.10) translate3d(-1.4%, -1.1%, 0); } } /* Zwei Schleier: einer senkrecht für Kopf und Fuß, einer schräg von links unten – dort steht der Text, und Wiese im Gegenlicht ist sonst zu hell. */ /* Das Original hat gar keinen Schleier - das Foto steht pur, der Text lebt vom Schatten. Damit die Schrift ueber heller Wiese trotzdem sicher lesbar ist, liegt hier eine NEUTRALE Abdunklung darueber (Schwarz mit wenig Deckkraft), kein blauer Ton: Blau wuerde die Wiese graugruen und den Himmel kalt faerben. Oben und unten je ein schmaler Verlauf fuer Kopfzeile und Steuerung. */ .hero__schleier { position: absolute; inset: 0; background: radial-gradient(ellipse 58% 40% at 50% 47%, rgba(0, 0, 0, .46) 0%, rgba(0, 0, 0, .24) 58%, rgba(0, 0, 0, 0) 100%), linear-gradient(180deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, .04) 22%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .38) 100%); } /* transform/opacity setzt scrollEffekte() – hier bewusst keine Transition, sonst laeuft sie gegen die Scroll-Bindung an. */ .hero__text { position: absolute; inset: 0; z-index: 2; will-change: transform, opacity; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--rand); color: var(--papier); } /* Der Schriftzug wie im Original: Lovers Quarrel, sehr gross, mittig. Die Schrift laeuft schmal und hat lange Unterlaengen - daher die grosse Zeilenhoehe und der Ausgleich unten. */ .hero__titel { font-family: var(--schrift); font-weight: 400; font-size: clamp(48px, 12vw, 122px); line-height: 1.05; letter-spacing: -.5px; margin: 0 0 4px; text-shadow: 0 2px 10px rgba(0, 0, 0, .45), 0 6px 40px rgba(0, 0, 0, .35); } .hero__unter { font-family: var(--grotesk); font-size: clamp(15px, 1.6vw, 22px); font-weight: 400; letter-spacing: .06em; color: var(--papier); margin: 0; text-shadow: 0 1px 6px rgba(0, 0, 0, .6), 0 3px 22px rgba(0, 0, 0, .45); } .hero__knopf { margin-top: 32px; } /* Groesse wie alle Knoepfe */ /* Slider-Steuerung nach rechts unten – die Mitte gehört dem Scroll-Hinweis */ .hero__steuer { position: absolute; right: clamp(20px, 4vw, 54px); bottom: clamp(30px, 4.5vh, 50px); z-index: 3; display: flex; align-items: center; gap: 14px; } .hero__pfeil { width: 42px; height: 42px; padding: 9px; cursor: pointer; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .35); color: var(--papier); backdrop-filter: blur(4px); transition: background .25s, border-color .25s; } .hero__pfeil:hover { background: rgba(255, 255, 255, .26); border-color: var(--papier); } .hero__pfeil svg { width: 100%; height: 100%; } .hero__punkte { display: flex; gap: 6px; } .hero__punkt { position: relative; width: 8px; height: 8px; padding: 0; cursor: pointer; border-radius: 50%; background: rgba(255, 255, 255, .45); border: 0; transition: background .25s, transform .25s var(--schwung); } /* Trefferflaeche auf 44 px, ohne die Optik zu vergroessern */ .hero__punkt::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .hero__punkt.is-aktiv { background: var(--papier); transform: scale(1.4); } /* Scroll-Hinweis: mittig unten, dezente Maus mit wanderndem Punkt */ .hero__scroll { position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(28px, 4vh, 46px); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; color: var(--papier); opacity: .85; transition: opacity .25s; } .hero__scroll:hover { opacity: 1; } .hero__scroll-text { font-family: var(--grotesk); font-size: 12px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); } .hero__scroll-maus { width: 24px; height: 38px; border: 2px solid rgba(255, 255, 255, .8); border-radius: 13px; display: flex; justify-content: center; box-shadow: 0 2px 12px rgba(0, 0, 0, .35); } .hero__scroll-maus i { width: 4px; height: 8px; margin-top: 7px; border-radius: 2px; background: var(--papier); animation: mausrad 1.8s var(--schwung) infinite; } @keyframes mausrad { 0% { opacity: 0; transform: translateY(-4px); } 30% { opacity: 1; } 70% { opacity: 1; transform: translateY(8px); } 100% { opacity: 0; transform: translateY(12px); } } /* ============================ Kartenformen ============================ */ .holzkarte, .almkarte { position: relative; color: var(--papier); padding: clamp(38px, 4.4vw, 66px); background-size: cover; background-position: 50% 50%; } .holzkarte { background-image: url('assets/img/holz.webp'); } .holzkarte::before { /* .64 statt .40: der Fließtext stand über heller Maserung bei nur 2,52:1 */ content: ''; position: absolute; inset: 0; background: rgba(46, 28, 16, .64); } .almkarte { /* Das Motiv ist selbst blaugrün; eine warme Graubeige-Ebene per soft-light dreht Himmel und Bergdunst ins Warme, ohne die Weide zu entsättigen. #8C7B5E ist bewusst gedämpft – wärmere Blendfarben kippen ins Sepia. */ background-image: linear-gradient(0deg, #8C7B5E, #8C7B5E), url('assets/img/hero-2.webp'); background-blend-mode: soft-light; background-size: cover; background-position: 42% 78%; } .almkarte::before { content: ''; position: absolute; inset: 0; background: rgba(var(--schleier), .72); } .holzkarte > *, .almkarte > * { position: relative; z-index: 1; } .holzkarte h2, .almkarte h2 { color: var(--papier); margin: 0 0 26px; } .holzkarte p, .almkarte p { color: rgba(255, 255, 255, .9); } .holzkarte__gruss { font-family: var(--display); font-size: 20px; line-height: 1.5; margin-top: 30px; } .holzkarte__siegel { width: 81px; margin-top: 26px; box-shadow: 0 8px 22px rgba(0, 0, 0, .4); } .hellkarte { background: var(--kalk); padding: clamp(32px, 3.4vw, 52px); border-left: 3px solid var(--hellblau); } .hellkarte h3 { margin: 0 0 16px; text-wrap: balance; } .hellkarte p { color: var(--stein); margin: 0; } /* ============================== Der Hof ============================== */ .hof { padding: var(--abstand) 0; } .hof__raster { position: relative; max-width: var(--breit); margin: 0 auto; padding: 0 var(--rand); display: grid; grid-template-columns: 1fr 1.06fr; gap: 0 clamp(30px, 4vw, 64px); align-items: start; } .hof__bild { margin: 0; grid-column: 1; } .hof__bild img { width: 100%; box-shadow: 0 30px 70px rgba(var(--warm-rgb), .30); } .holzkarte { grid-column: 2; grid-row: 1 / span 2; margin-top: clamp(30px, 5vw, 74px); } .hof__wohl { grid-column: 1; margin: -70px 0 0 clamp(20px, 4vw, 70px); position: relative; z-index: 2; box-shadow: 0 24px 56px rgba(var(--warm-rgb), .20); } /* ========================== Ferienwohnungen ========================== */ .wohnungen { position: relative; padding: 85px 0 144px; /* Original: Titel bei +85, Abschnittsende +144 */ background: #2A1C12; /* Grundton des Holzes, falls das Bild fehlt */ } /* Neutraler Schleier statt eines blauen: das Holz soll Holz bleiben. Schwarz mit Deckkraft dunkelt ab, ohne den Farbton zu verschieben. */ .wohnungen::before { content: ''; position: absolute; inset: -40px 0; background: linear-gradient(rgba(0, 0, 0, .62), rgba(0, 0, 0, .62)), url('assets/img/holz.webp') center / cover; transform: translate3d(0, var(--parallax, 0px), 0); will-change: transform; } /* Breite wie im Original: die Tafel misst 1170 und sitzt bei 135 - deshalb hier eine eigene Breite statt der globalen --breit (1180-2x40). */ .wohnungen__innen { position: relative; z-index: 1; max-width: 1170px; margin: 0 auto; padding: 0 var(--rand); } @media (min-width: 1250px) { .wohnungen__innen { padding: 0; } } .abschnitt-kopf { margin-bottom: 50px; } .abschnitt-kopf h2 { color: var(--papier); } .wohnungen .abschnitt-kopf h2 { font-size: 42px; line-height: 1.2; letter-spacing: -.5px; text-align: center; } .abschnitt-kopf--mitte { text-align: center; } /* --- Reiter wie im Original: immer nur eine Wohnung --- */ /* Ausstattung als Marken. Raster statt Flexzeile: als Flexzeile stand "Balkon" allein in der zweiten Reihe, und fünf unterschiedlich breite Unterstriche wirkten wie abgeschnitten. */ /* --- Polaroids: die Detailfotos unter dem grossen Bild --- */ /* --- Reiter und Tafel: Aufbau und Masse wie auf heissnhof.com --------------- Am gerenderten Original gemessen (1440 px Fensterbreite): Reiter 56 px hoch, weisser Grund, mittig, 9 px Abstand Tafel 1170 x 777, Text links 583, Bild rechts 583 Collage drei Spalten a 131 px, 5 px Abstand, versetzte Hoehen Im Original ist Breitenstein der voreingestellte Reiter. */ .tabs { display: flex; justify-content: center; gap: 9px; } .tab { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 22px; font-family: var(--sans); font-size: 18px; font-weight: 400; color: var(--tief); background: var(--papier); border: 0; cursor: pointer; white-space: nowrap; transition: color .2s, box-shadow .25s var(--schwung); } /* Der nicht gewählte Reiter gibt beim Überfahren Rückmeldung – dieselbe 3px-Akzentsprache wie die Auswahl, aber in --linie, damit Hover ≠ Auswahl. */ .tab:not([aria-selected="true"]):hover { color: var(--knopf); box-shadow: inset 0 -3px 0 var(--linie); } /* Wie im Original: der offene Reiter hebt sich nur durch die Schriftfarbe ab. #239ddb erreicht auf Weiss nur 3,0:1 - deshalb zusaetzlich fett und mit Unterkante, damit die Auswahl nicht allein an der Farbe haengt. */ .tab[aria-selected="true"] { color: var(--knopf); font-weight: 700; box-shadow: inset 0 -3px 0 var(--hellblau); } .tab__icon { width: 19px; height: 19px; flex: none; } .panel { display: flex; align-items: stretch; background: var(--papier); min-height: 777px; overflow: hidden; /* die Wohnung faehrt von rechts herein */ } .panel[hidden] { display: none; } .panel__text { width: 50%; padding: 62px 66px 54px 92px; } /* Wohnungstitel auf dieselbe h3-Grösse wie die übrigen Karten (30 statt 32), Fliesstext auf dieselbe Zeilenhöhe wie überall (1.62) – ein Typo-System. */ .panel__text h3 { font-size: 30px; letter-spacing: -.012em; color: var(--tief); margin: 0 0 18px; } .panel__text p { font-size: 18px; line-height: 1.62; color: var(--text); margin: 0 0 .9em; } /* Schmuckflaeche ohne Funktion, deshalb ein schlichtes Hintergrundbild und kein Knopf. Breitenstein zeigt die Weide, Wendelstein die Berge - und die beiden Tafeln sind zueinander gespiegelt, genau wie in der Quelle: Breitenstein Text links | Bild rechts Wendelstein Bild links | Text rechts */ .panel__bild { width: 50%; background: url('assets/img/alm-weide.webp') 54% 43% / cover; } .panel__bild--berge { background-image: url('assets/img/hero-2.webp'); background-position: 50% 58%; } .panel--gespiegelt { flex-direction: row-reverse; } /* Der Text rueckt in der gespiegelten Tafel entsprechend nach innen */ .panel--gespiegelt .panel__text { padding: 62px 66px 54px 90px; } /* Drei unabhaengige Spalten, genau wie im Original: links das hohe Bild, daneben je zwei gestapelte. Ein Raster mit gemeinsamen Zeilenhoehen wuerde unter dem kurzen Bild eine Luecke lassen - deshalb Spalten, keine Zellen. 131 px Spaltenbreite und 5 px Abstand sind am Original gemessen. */ .collage { display: grid; grid-template-columns: repeat(3, 131px); gap: var(--kachel-gap); margin-top: 34px; align-items: start; } .collage__spalte { display: flex; flex-direction: column; gap: var(--kachel-gap); } .collage__bild { padding: 0; border: 0; background: none; cursor: zoom-in; display: block; overflow: hidden; width: 100%; position: relative; } .collage__bild img { width: 100%; height: auto; display: block; } /* ============================== Die Alm ============================== */ /* Weniger Luft nach unten, damit die Ausflug-Karte als Fussnote an die Alm heranrückt, statt frei im Weissraum zu schweben (Fluss-Feinschliff). */ .alm { padding: var(--abstand) 0 clamp(52px, 6vw, 80px); } .alm__raster { max-width: var(--breit); margin: 0 auto; padding: 0 var(--rand); display: grid; grid-template-columns: 1fr 1.12fr; gap: clamp(30px, 4vw, 60px); align-items: start; } .alm__bild { margin: 0; } .alm__bild img { width: 100%; box-shadow: 0 30px 70px rgba(var(--warm-rgb), .30); } .almkarte__hoehe { display: flex; align-items: baseline; gap: 9px; margin: 0 0 6px; color: var(--papier); } .almkarte__hoehe b { font-family: var(--display); font-size: clamp(46px, 6vw, 78px); font-weight: 400; line-height: 1; letter-spacing: -.03em; } .almkarte__hoehe span { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .92); } /* =========================== Ausflugsziele =========================== */ /* Kleiner Anschluss oben: bindet die Karte optisch an die Alm; die volle Luft nach unten bleibt bewusst als Trennung zum dunklen Impressionen-Band. */ .ausflug { padding: 6px var(--rand) var(--abstand); } .ausflug__karte { max-width: calc(var(--breit) - var(--rand) * 2); margin: 0 auto; } /* Zeilenlaenge begrenzen, sonst laeuft der Satz ueber die volle Kartenbreite */ .ausflug__karte p { max-width: 62ch; margin-bottom: 0; } .ausflug__karte strong { color: var(--tief); font-weight: 700; } /* Bildreihe unter der Wohnungsbeschreibung: vier gleich grosse Miniaturen, Klick oeffnet die Lightbox. */ /* ============================ Impressionen ============================ */ .impressionen { position: relative; padding: 63px 0 115px; /* Original: Titel +63, Ende +115 */ background: #0E3247; } /* Markenblau über einem stark entsättigten Hintergrund: ergibt eine ruhige blaue Duplex-Fläche, vor der die bunten Galeriebilder erst richtig leuchten. Das entsättigte Bild entsteht beim Bauen (_build/fotos.py, impressionen-bg) – ein CSS-filter würde auch das blaue Overlay entsättigen. */ .impressionen::before { content: ''; position: absolute; inset: -40px 0; background: linear-gradient(rgba(var(--schleier), .72), rgba(var(--schleier), .72)), url('assets/img/impressionen-bg.webp') center / cover; transform: translate3d(0, var(--parallax, 0px), 0); will-change: transform; } .impressionen > * { position: relative; z-index: 1; } /* Wie im Original: sehr gross, weit gesperrt, in der Textschrift - nicht in der Ueberschriftenschrift. Der helle Ton steht gedeckt auf dem Foto. */ .impressionen__titel { font-family: var(--sans); font-weight: 400; font-size: clamp(34px, 7vw, 99px); line-height: 1; letter-spacing: clamp(5px, 1.1vw, 15px); /* Im Original steht der Titel fast als Wasserzeichen im Bild (gemessen 1,77:1 gegen den Grund). So weit heruntergehen waere unlesbar - 0.55 trifft die Anmutung und haelt mit 3,66:1 die Grenze fuer Grosstext (3:1). */ color: var(--kalk); opacity: .55; text-align: center; /* strafferer Anschluss an die Galerie – der Titel schwebte sonst ~165 px allein im dunklen Feld über der ersten Kachel. */ margin: 0 0 clamp(30px, 4.5vw, 64px); padding-left: .15em; } /* Drei Spalten a 323 px mit 7 px Abstand, mittig - Masse aus dem Original. Unterhalb von 1040 px passen die festen Breiten nicht mehr ins Fenster, dann laufen die Spalten fliessend weiter. */ /* Galerie auf die gleiche Rahmenlinie wie die weissen Abschnitte (L170/R1270). Vorher fest 323 px = 983 breit und damit je ~58 px eingerueckt - das brach die Kantenflucht. Fluid auf 1100 px fluchtet sauber und macht die Fotos zugleich groesser (362 statt 323 px). */ .galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--kachel-gap); max-width: 1100px; margin: 0 auto; } @media (max-width: 1040px) { .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 var(--rand); } } .galerie__spalte { display: flex; flex-direction: column; gap: var(--kachel-gap); } .kachel { padding: 0; border: 0; background: none; cursor: zoom-in; display: block; overflow: hidden; position: relative; } .kachel img { width: 100%; } /* Gemeinsames Kachel-Verhalten für Galerie UND Wohnungs-Collage: beim Überfahren hebt sich die Kachel leicht an und überlappt die Nachbarn (z-index), mit weichem Schatten. Ein System, überall gleich. */ .kachel, .collage__bild { transition: transform .4s var(--schwung), box-shadow .4s var(--schwung); } .kachel:hover, .kachel:focus-visible, .collage__bild:hover, .collage__bild:focus-visible { transform: scale(1.05); z-index: 3; box-shadow: 0 16px 38px rgba(var(--warm-rgb), .34); } /* ========================= Kontakt & Buchung ========================= */ .buchung { padding: var(--abstand) 0; background: var(--papier); } .buchung__innen { max-width: var(--breit); margin: 0 auto; padding: 0 var(--rand); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 76px); align-items: start; } .buchung__links h2 { color: var(--tief); margin-bottom: 26px; } .karte { position: relative; overflow: hidden; background: var(--kalk); border: 1px solid var(--linie); } .karte img { width: 100%; } .karte__pin { position: absolute; left: 50%; top: 50%; width: 17px; height: 17px; margin: -21px 0 0 -8px; background: var(--signal); border: 3px solid var(--papier); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 3px 12px rgba(0, 0, 0, .4); } .karte__quelle { position: absolute; right: 0; bottom: 0; padding: 2px 7px; font-size: 11px; color: #4a4a4a; background: rgba(255, 255, 255, .8); } .anschrift { font-style: normal; margin: 28px 0 8px; line-height: 1.6; } .anschrift strong { display: block; font-family: var(--display); font-size: 21px; font-weight: 400; /* Ovo hat nur einen Schnitt - sonst rechnet der Browser fett */ color: var(--tief); } .kontaktzeilen { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 0 0 24px; } .kontaktzeilen a { color: var(--tief); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--linie); } .kontaktzeilen a:hover { border-bottom-color: var(--hellblau); color: var(--knopf); } /* ------------------------------ Formular ------------------------------ */ .formular { background: var(--kalk); padding: clamp(26px, 3vw, 42px); border-top: 3px solid var(--hellblau); } .formular__titel { color: var(--tief); margin: 0 0 22px; } .formular__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .feld { display: block; margin-bottom: 16px; } .feld__label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 700; color: var(--tief); } .feld__label b { color: var(--signal); font-weight: 700; } .feld input, .feld select, .feld textarea { width: 100%; padding: 13px 14px; font-family: var(--sans); font-size: 16px; color: var(--text); background: var(--papier); border: 1px solid var(--linie); border-radius: 0; transition: border-color .2s, box-shadow .2s; } .feld textarea { resize: vertical; min-height: 104px; } .feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: 2px solid var(--hellblau); outline-offset: 2px; border-color: var(--tief); box-shadow: none; } .feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--tief); } .feld input.is-fehler, .feld select.is-fehler, .feld textarea.is-fehler { border-color: var(--signal); border-width: 2px; box-shadow: 0 0 0 3px rgba(192, 57, 43, .28); } /* 5) Die Zustimmung liegt in label.dsgvo, nicht in .feld - sie bekam die Fehlerklasse, zeigte aber nichts an. Ausgerechnet dieses Feld. */ .dsgvo input.is-fehler { outline: 2px solid var(--signal); outline-offset: 2px; } .dsgvo input.is-fehler ~ span { color: var(--signal); font-weight: 700; } .dsgvo { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; line-height: 1.55; color: var(--stein); margin: 6px 0 22px; } .dsgvo input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--tief); } .alsLink { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--tief); text-decoration: underline; } .honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .formular__hinweis { margin: 16px 0 0; font-size: 15px; min-height: 1px; } .formular__hinweis.ok { color: #1d7a45; font-weight: 700; } .formular__hinweis.fehler { color: var(--signal); } /* ============================== Fuß ============================== Zwei Ebenen: oben drei Spalten (Marke / Kontakt / Sprungmarken), darunter eine schmale Leiste mit Recht und destec-Credit, getrennt durch eine Haarlinie. Farben und Akzente wie im Rest der Seite. */ .fuss { background: var(--nacht); color: rgba(255, 255, 255, .72); } .fuss__innen { max-width: var(--breit); margin: 0 auto; padding: 64px var(--rand) 52px; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(30px, 5vw, 70px); } .fuss__logo { width: 150px; opacity: .95; margin-bottom: 18px; } .fuss__auge { font-family: var(--grotesk); font-size: 11px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--hellblau); margin: 0 0 16px; } .fuss__gruss { font-family: var(--display); font-size: 19px; line-height: 1.5; color: rgba(255, 255, 255, .9); margin: 0; } /* Spalten-Überschrift im Augenbrauen-Stil */ .fuss__titel { font-family: var(--grotesk); font-size: 12px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--papier); margin: 4px 0 20px; } .fuss__adresse { font-style: normal; font-size: 15px; line-height: 1.75; margin: 0 0 16px; } .fuss__zeilen { display: flex; flex-direction: column; gap: 6px; margin: 0; } .fuss__zeilen a, .fuss__sprung a { color: rgba(255, 255, 255, .82); text-decoration: none; font-size: 15px; width: fit-content; position: relative; padding-bottom: 1px; transition: color .2s; } /* Unterstrich, der beim Überfahren einläuft – wie in der Kopf-Navigation */ .fuss__zeilen a::after, .fuss__sprung a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--hellblau); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--schwung); } .fuss__zeilen a:hover, .fuss__sprung a:hover { color: var(--papier); } .fuss__zeilen a:hover::after, .fuss__sprung a:hover::after { transform: scaleX(1); } .fuss__sprung { display: flex; flex-direction: column; gap: 11px; } /* --- schmale Fussleiste --- */ .fuss__leiste { border-top: 1px solid rgba(255, 255, 255, .12); } .fuss__leiste-innen { max-width: var(--breit); margin: 0 auto; padding: 22px var(--rand); display: flex; align-items: center; justify-content: space-between; gap: 20px; } .fuss__recht { display: flex; align-items: center; gap: 14px; } .fuss__trenner { color: rgba(255, 255, 255, .4); } .fuss__link { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: .04em; color: rgba(255, 255, 255, .78); transition: color .2s; } .fuss__link:hover { color: var(--papier); } /* --- destec-Credit: gleiche Konvention wie auf den übrigen Projektseiten --- */ .fuss__promo { position: relative; text-align: right; } .fuss__copy { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .55); } .fuss__macher { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; opacity: .9; transition: opacity .25s var(--schwung); } .fuss__macher:hover { opacity: 1; } .fuss__macher span { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .9); } /* Das Logo ist bereits weiß auf transparent – kein Filter nötig. Etwas grösser (34 px), damit der destec-Credit im Fuss mehr Präsenz hat. */ .fuss__macher img { height: 34px; width: auto; display: block; } .destec-pop { position: absolute; bottom: 100%; right: 0; padding-bottom: 14px; width: min(300px, 84vw); opacity: 0; visibility: hidden; pointer-events: none; z-index: 50; transform: translateY(12px) scale(.96); transform-origin: bottom right; transition: opacity .28s ease, transform .36s cubic-bezier(.34, 1.3, .64, 1), visibility .28s; } .fuss__promo:hover .destec-pop, .fuss__promo:focus-within .destec-pop { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); } .destec-pop-inner { position: relative; text-align: left; background: linear-gradient(150deg, #17527A 0%, var(--nacht) 100%); border: 1px solid rgba(255, 255, 255, .14); padding: 18px 20px 20px; box-shadow: 0 24px 54px rgba(0, 0, 0, .45); } .destec-pop-inner::after { content: ''; position: absolute; bottom: -8px; right: 26px; width: 14px; height: 14px; background: var(--nacht); border-right: 1px solid rgba(255, 255, 255, .14); border-bottom: 1px solid rgba(255, 255, 255, .14); transform: rotate(45deg); } .destec-pop-eyebrow { display: block; font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--hellblau); margin-bottom: 8px; } .destec-pop-title { font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.15; color: var(--papier); margin: 0 0 8px; } .destec-pop-text { font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .72); margin: 0 0 15px; } .destec-pop-cta { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--knopf); color: var(--papier); text-decoration: none; padding: 9px 16px; transition: background .2s var(--schwung), transform .2s var(--schwung); } .destec-pop-cta:hover { background: var(--nacht); transform: translateY(-2px); } /* ============================== Popup ============================== */ .popup { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 30px; } .popup[hidden] { display: none; } .popup__hintergrund { position: absolute; inset: 0; background: rgba(var(--nacht-rgb), .93); } .popup__fenster { position: relative; z-index: 1; width: min(720px, 100%); max-height: 86vh; overflow-y: auto; background: var(--papier); padding: 52px clamp(26px, 4vw, 58px) 48px; box-shadow: 0 30px 80px rgba(0, 0, 0, .4); scrollbar-width: thin; scrollbar-color: var(--linie) transparent; } .popup__fenster::-webkit-scrollbar { width: 10px; } .popup__fenster::-webkit-scrollbar-thumb { background: rgba(var(--tief-rgb), .22); border-radius: 6px; border: 3px solid var(--papier); } .popup__zu { position: absolute; right: 14px; top: 10px; width: 42px; height: 42px; line-height: 1; font-size: 30px; color: var(--stein); background: none; border: 0; cursor: pointer; transition: color .2s, transform .2s var(--schwung); } .popup__zu:hover { color: var(--tief); transform: rotate(90deg); } /* Popup-Titel: die grosse Ovo-Überschrift des Fensters, mit Akzentlinie */ .popup__fenster > h3 { font-family: var(--display); font-size: 32px; color: var(--tief); margin: 0 0 8px; padding-bottom: 18px; position: relative; } .popup__fenster > h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 54px; height: 3px; background: var(--hellblau); } /* Fliesstext: begrenzte Zeilenlänge für angenehmes Lesen (~66 Zeichen) */ .popup__inhalt { font-size: 15.5px; line-height: 1.75; color: var(--text); max-width: 66ch; margin-top: 26px; } /* Hauptabschnitt „1. …" – klar abgesetzt, mit Haarlinie darüber */ .popup__inhalt h3 { font-family: var(--display); font-size: 21px; color: var(--tief); margin: 34px 0 14px; padding-top: 26px; border-top: 1px solid var(--linie); line-height: 1.25; } .popup__inhalt h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; } /* Zwischentitel – kleiner, in Markenblau, ohne Linie */ .popup__inhalt h4 { font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--tief); margin: 22px 0 6px; line-height: 1.4; } .popup__inhalt p { margin: 0 0 1em; color: var(--stein); } .popup__inhalt ul { margin: 0 0 1em 1.2em; padding: 0; color: var(--stein); } .popup__inhalt a { color: var(--knopf); } /* ============================ Lightbox ============================ */ .lightbox { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; background: rgba(6, 20, 30, .96); padding: 44px; } .lightbox[hidden] { display: none; } .lightbox__rahmen { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; } .lightbox__bild { max-width: 90vw; max-height: 80vh; width: auto; } .lightbox__text { font-size: 14px; color: rgba(255, 255, 255, .7); letter-spacing: .04em; } .lightbox__zu, .lightbox__pfeil { position: absolute; background: none; border: 0; cursor: pointer; color: rgba(255, 255, 255, .8); line-height: 1; } .lightbox__zu { top: 20px; right: 28px; font-size: 42px; } .lightbox__pfeil { top: 50%; transform: translateY(-50%); font-size: 62px; padding: 0 22px; } .lightbox__pfeil--zurueck { left: 6px; } .lightbox__pfeil--vor { right: 6px; } .lightbox__zu:hover, .lightbox__pfeil:hover { color: var(--papier); } /* ======================================================================== Reaktionsfähig ======================================================================== */ @media (max-width: 980px) { :root { --rand: 26px; } .hof__raster { grid-template-columns: 1fr; gap: 0; } .hof__bild { max-width: 520px; } .holzkarte { grid-column: 1; grid-row: auto; margin-top: -50px; margin-left: clamp(20px, 8vw, 90px); } .hof__wohl { margin: 26px 0 0; } /* Unter 980 px passen Text und Weidefoto nicht mehr nebeneinander: das Foto wandert unter den Text und bekommt eine feste Hoehe. */ .panel { flex-direction: column; min-height: 0; } .panel__text { width: 100%; padding: 46px 38px; } .collage { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 420px; } .panel__bild { width: 100%; height: 320px; } .alm__raster { grid-template-columns: 1fr; } .alm__bild { max-width: 520px; } .almkarte { margin-top: -50px; margin-left: clamp(20px, 8vw, 90px); } .buchung__innen { grid-template-columns: 1fr; } .karte { max-width: 560px; } /* Fuss einspaltig, mittig; die Sprungmarken-Links zentriert */ .fuss__innen { grid-template-columns: 1fr; text-align: center; gap: 34px; padding: 48px var(--rand) 36px; } .fuss__logo { margin-left: auto; margin-right: auto; } .fuss__zeilen { align-items: center; } .fuss__zeilen a, .fuss__sprung a { margin-left: auto; margin-right: auto; } .fuss__sprung { align-items: center; } .fuss__leiste-innen { flex-direction: column; gap: 16px; text-align: center; } .fuss__promo { text-align: center; } .destec-pop { right: auto; left: 50%; transform: translate(-50%, 12px) scale(.96); } .fuss__promo:hover .destec-pop, .fuss__promo:focus-within .destec-pop { transform: translate(-50%, 0) scale(1); } .destec-pop-inner::after { right: auto; left: 50%; margin-left: -7px; } } /* Touch-Ziele: alles Bedienbare auf mindestens 44 px Hoehe */ @media (max-width: 780px) { .burger { height: 44px; } .hero__pfeil { width: 44px; height: 44px; } .fuss__link { padding: 14px 8px; } .kontaktzeilen a { display: inline-block; padding: 7px 0; } /* Das Kästchen sitzt in einem