/* ========================================================================== Wooden Village Resort - Skadar Lake · Design System Aus dem Logo abgeleitet: Sandpapier, Espressobraun, Kiefernwald, Seetürkis. Formensprache: Holz statt Aquarell - gekerbte Kanten, Schindeln, Baumkanten. Mobile-first: Basis <600px, Tablet ≥600px, Desktop ≥900px, Wide ≥1200px ========================================================================== */ /* ---------- Fonts (lokal gehostet, DSGVO-konform) ---------- Version 2, Stil "Chalet". Playfair Display traegt die grossen Zeilen: eine kontrastreiche Serife, die nur fuer Display-Groessen gedacht ist. Nunito Sans macht alles andere - Navigation, Fliesstext, Knoepfe, Versalien. Nunito ist eine variable Schrift, deshalb reicht eine Datei je Zeichensatz fuer alle Staerken. latin-ext liefert c c z s d fuer Crnogorski. */ @font-face { font-family: 'Playfair'; src: url('/assets/fonts/playfair-latin.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair'; src: url('/assets/fonts/playfair-latinext.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Nunito'; src: url('/assets/fonts/nunito-latin.woff2') format('woff2'); font-weight: 200 1000; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Nunito'; src: url('/assets/fonts/nunito-latinext.woff2') format('woff2'); font-weight: 200 1000; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- Tokens ---------- Farbweg "Schilf": helles Wiesengruen im Kopfband, tiefes Oliv als Schrift, Honiggold nur als Zierde. Kein Blau. Jede Farbe steht genau hier einmal. Die alten Namen (paper, ink, wood, lake, forest, amber) bleiben erhalten, damit die 1300 Zeilen darunter weiterlaufen - sie zeigen nur auf neue Werte. */ :root { /* Flaechen, von hell nach dunkel */ --paper: #FFFFFF; /* Grundflaeche der Seite */ --paper-deep: #F4F2E7; /* cremefarbenes Zwischenband */ --sand: #E7ECDB; /* helles Wiesengruen, das Kopfband */ --card: #FFFFFF; --card-soft: #FBFAF4; /* Schrift */ --ink: #2E3524; /* tiefes Oliv, traegt Text und Raender */ /* Abgedunkelt am 12.09.2026 von #6E7659 auf #646C51 (Fund NF-009): auf dem hellsten Untergrund, in dem dieser Ton als Fliesstext steht (--lake-wash, rgb(237,241,226)), lag der Kontrast vorher bei 4,16:1, jetzt bei 4,80:1. */ --ink-soft: #646C51; /* gedaempft, Nebentexte */ /* Die alten Holztoene zeigen jetzt auf Oliv- und Cremewerte */ --wood: #7C8467; --wood-deep: #2E3524; --wood-light: #9AA286; --wood-wash: #F4F2E7; /* "See" wird zu Wiese - kein Blau mehr im Projekt */ --lake: #6E8B4E; --lake-deep: #4F6636; --lake-wash: #EDF1E2; /* Wald bleibt Wald, nur waermer */ --forest: #3A4430; --forest-soft: #6E7659; --forest-wash: #EDF1E2; --forest-mid: #414C36; --forest-deep: #2E3524; /* Zierde: Honiggold. Nie als Flaeche, nie als Knopffuellung. */ --amber: #E8B44A; --amber-deep: #C08A2A; --amber-darker: #8E6516; --moon: #F7E9C8; --font-display: 'Playfair', 'Iowan Old Style', Georgia, serif; --font-body: 'Nunito', 'Helvetica Neue', Arial, sans-serif; --font-script: 'Nunito', 'Helvetica Neue', Arial, sans-serif; --size-h1: clamp(2.2rem, 5.2vw, 4rem); --size-h2: clamp(1.7rem, 3.6vw, 2.6rem); --size-h3: clamp(1.25rem, 2.4vw, 1.55rem); --size-body: clamp(1rem, 1.05vw + .85rem, 1.125rem); --space-sec: clamp(4rem, 8vw, 5rem); /* 64 bis 80 px wie in der Vorlage */ /* Der Chalet-Stil kennt keine gekerbten Ecken. Knoepfe sind volle Pillen. */ --notch: 0px; --radius-card: 0px; --radius-pill: 80px; --sperr: .167em; /* Sperrsatz fuer Versalien */ /* Bewusst schattenlos: Tiefe kommt aus Farbkontrast und Haarlinien. */ --shadow-soft: none; --shadow-lift: none; --rule: 1px solid rgba(46, 53, 36, .18); --ease-out: cubic-bezier(.22, .8, .35, 1); /* Keine Holzmaserung mehr. Der Wert bleibt, damit nichts bricht. */ --grain: none; } /* ---------- Reset & Basis ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: var(--size-body); line-height: 1.68; color: var(--ink); background: var(--paper); overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--ink); text-underline-offset: 4px; text-decoration-thickness: 1px; } a:hover { color: var(--lake-deep); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; /* Playfair liegt nur in 700 vor */ line-height: 1.10; /* die Vorlage setzt 1.10 bei grossen Zeilen */ letter-spacing: -.005em; /* eine Serife braucht kaum negative Laufweite */ color: var(--ink); margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: var(--size-h1); } h2 { font-size: var(--size-h2); } h3 { font-size: var(--size-h3); } p { margin: 0 0 1em; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .6rem 1rem; z-index: 100; } .skip-link:focus { left: 0; } .container { width: min(100% - 2.5rem, 1180px); margin-inline: auto; } .container--narrow { width: min(100% - 2.5rem, 760px); margin-inline: auto; } /* Augenbraue: Versalien mit weitem Sperrsatz, immer ueber einer Serifenzeile. Ersetzt die frueheren Handschrift-Akzente. Der Klassenname bleibt, damit render.php unveraendert bleibt. */ .accent-script { display: block; font-family: var(--font-body); font-weight: 600; font-size: .78rem; line-height: 1.5; letter-spacing: var(--sperr); text-transform: uppercase; color: var(--ink-soft); margin-bottom: .9rem; } .accent-script + h1, .accent-script + h2, .accent-script + h3, .accent-script + h4 { margin-top: 0; } /* ---------- Buttons - umrandete Pillen ---------- Der Chalet-Stil kennt keine gefuellten Farbknoepfe. Alle Knoepfe sind umrandete Pillen; beim Zeigen laeuft die Fuellung von links herein. */ .btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: .5rem; --btn-fill: var(--ink); /* Grundwert, die Varianten ueberschreiben ihn */ font-family: var(--font-body); font-weight: 600; font-size: .82rem; letter-spacing: var(--sperr); text-transform: uppercase; text-decoration: none; padding: .95rem 1.9rem; border-radius: var(--radius-pill); /* Rahmen und Fuellung haengen an --btn-fill, NICHT an currentColor. Sonst faerbt sich die Fuellung beim Zeigen mit der Schrift mit und der Knopf wird ein einfarbiger Block ohne lesbaren Text. */ border: 1.5px solid var(--btn-fill); background: transparent; transition: color .35s var(--ease-out); cursor: pointer; } /* Die Fuellung ist eine eigene Ebene, damit die Schriftfarbe sauber wechselt */ .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-fill); transform: scaleX(0); transform-origin: left center; transition: transform .42s var(--ease-out); } .btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); } .btn--primary { color: var(--ink); --btn-fill: var(--ink); } .btn--primary:hover, .btn--primary:focus-visible { color: var(--paper); } .btn--ghost { color: var(--ink-soft); --btn-fill: var(--ink-soft); } .btn--ghost:hover, .btn--ghost:focus-visible { color: var(--paper); } .btn--sm { padding: .6rem 1.3rem; font-size: .74rem; } .badge { display: inline-block; font-family: var(--font-body); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); border-radius: var(--radius-pill); padding: .3rem .85rem; margin-bottom: .6rem; letter-spacing: .125em; } /* Das Honiggold darf hier auftauchen: es ist Zierde, kein Bedienelement. */ .badge--winter { color: var(--amber-darker); background: var(--moon); box-shadow: none; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(231, 236, 219, .93); /* --sand, das Kopfband in Schilfgruen */ backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1); border-bottom: var(--rule); } .site-header::after { /* feine Haarlinie unter der Leiste, kein Holz mehr */ content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: linear-gradient(90deg, transparent, rgba(46, 53, 36, .13) 15%, rgba(46, 53, 36, .13) 85%, transparent); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding-block: .5rem; width: min(100% - 2rem, 1400px); } /* Querfassung des Logos: Wappen links, sein eigener Schriftzug rechts - beides aus derselben Datei geschnitten. So bleibt die Leiste flach und der Schriftzug trotzdem groß genug zum Lesen. */ .site-header__brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; } .site-header__brand img { height: clamp(40px, 9vw, 68px); width: auto; object-fit: contain; transition: transform .3s var(--ease-out); } .site-header__brand:hover img { transform: scale(1.02); } @media (prefers-reduced-motion: reduce) { .site-header__brand img { transition: none; } } .site-header__right { display: flex; align-items: center; gap: .4rem; } /* Sprachumschalter (Flaggen) */ .lang-switch { display: flex; gap: .1rem; align-items: center; } .lang-switch__item { display: grid; place-items: center; width: 34px; height: 34px; font-size: 1.2rem; line-height: 1; border-radius: var(--radius-pill); text-decoration: none; filter: grayscale(.6) opacity(.7); transition: filter .25s, transform .25s var(--ease-out), background .25s; } .lang-switch__item:hover { filter: none; transform: translateY(-1px); background: var(--wood-wash); } .lang-switch__item.is-active { filter: none; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--amber); } .site-nav__toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; padding: 10px; background: none; border: none; font-family: var(--font-body); cursor: pointer; } .site-nav__toggle span:not(.visually-hidden) { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .3s var(--ease-out), opacity .2s; } .site-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .site-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .site-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .site-nav__list { list-style: none; margin: 0; padding: 1rem 1.5rem 1.5rem; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: var(--rule); box-shadow: var(--shadow-soft); display: none; flex-direction: column; gap: .15rem; } .site-nav__list.is-open { display: flex; max-height: calc(100svh - 4.5rem); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 2rem; } .site-nav__list a:not(.btn), .site-nav__opener { display: block; padding: .58rem .5rem; font-weight: 700; text-decoration: none; color: var(--ink); border-radius: var(--radius-pill); } /* Der Oeffner ist ein Knopf, kein Link: er fuehrt nirgendwohin, er klappt nur das Untermenue auf. Als Knopf bleibt er mit der Tastatur erreichbar, ein waere das nicht. Diese Zeilen nehmen ihm nur das Knopf-Aussehen. */ .site-nav__opener { width: 100%; text-align: left; font-family: inherit; font-size: inherit; background: none; border: 0; cursor: pointer; } .site-nav__list a:not(.btn):hover, .site-nav__opener:hover { background: var(--lake-wash); color: var(--forest); } .site-nav__list a[aria-current="page"], .site-nav__opener[aria-current="true"] { color: var(--amber-deep); } .site-nav__list a[aria-current="page"]::after { content: ""; display: block; height: 2px; width: 1.8em; margin-top: 3px; background: var(--amber); } .site-nav__cta { margin-top: .8rem; } /* Untermenü */ .sub-caret { font-size: .68em; margin-left: .3em; opacity: .55; } .subnav { list-style: none; margin: 0; padding: 0; } .subnav a { font-size: .92rem; font-weight: 600; opacity: .88; } @media (max-width: 1079px) { .subnav { padding-left: 1rem; border-left: 2px solid var(--wood-wash); margin-left: .5rem; } .sub-caret { display: none; } } @media (min-width: 1080px) { .site-nav__toggle { display: none; } .site-nav__list { display: flex; flex-direction: row; align-items: center; gap: .1rem; position: static; padding: 0; background: none; border: none; box-shadow: none; } .site-nav__list a:not(.btn), .site-nav__opener { padding: .45rem .62rem; font-size: .93rem; white-space: nowrap; width: auto; } .site-nav__cta { margin: 0 0 0 .5rem; } .site-nav__cta .btn { white-space: nowrap; } .site-nav__list li.has-sub { position: relative; } .site-nav__list .subnav { position: absolute; top: 100%; left: 0; z-index: 20; min-width: 250px; padding: .45rem; background: var(--paper); border-radius: var(--radius-card); box-shadow: var(--shadow-lift); border: var(--rule); border-top: 3px solid var(--amber); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility .2s; } .site-nav__list li.has-sub:hover .subnav, .site-nav__list li.has-sub:focus-within .subnav { opacity: 1; visibility: visible; transform: none; } /* Auf einem Tablet gibt es kein Schweben. Deshalb oeffnet ein Tipp auf den Oeffner das Untermenue ueber diese Klasse, siehe site.js. */ .site-nav__list li.has-sub.is-open .subnav { opacity: 1; visibility: visible; transform: none; } .site-nav__list .subnav a { display: block; padding: .5rem .7rem; white-space: normal; } .site-nav__list .subnav--wide { min-width: 330px; display: grid; grid-template-columns: 1fr 1fr; } } @media (min-width: 1080px) and (max-width: 1439px) { .site-nav__list a:not(.btn), .site-nav__opener { padding: .35rem .42rem; font-size: .85rem; } .lang-switch__item { width: 28px; height: 28px; font-size: 1rem; } .site-nav__cta .btn { padding: .48rem .85rem; font-size: .84rem; } } /* ---------- Hero ---------- */ .hero { position: relative; min-height: calc(100svh - var(--header-h, 5rem)); display: flex; align-items: flex-end; isolation: isolate; } .hero--compact { min-height: min(58svh, 520px); } .hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--forest); } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-focus, center); } /* Zwei Verlaeufe, nicht einer. Der von unten allein reichte nicht: bei 30 Prozent Hoehe lag er fast bei null, und genau dort steht auf vielen Seiten die Zeile ueber der Ueberschrift. Auf einem hellen Foto war sie kaum zu lesen. Dazu kommt jetzt ein Verlauf von links, denn der Text steht immer links. Rechts bleibt das Foto frei, dort steht nie etwas. Kein Farbstich, nur Abdunklung. */ .hero__wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24, 28, 19, .70) 0%, rgba(24, 28, 19, .52) 30%, rgba(24, 28, 19, .18) 58%, rgba(24, 28, 19, 0) 78%), linear-gradient(180deg, rgba(24, 28, 19, .34) 0%, rgba(24, 28, 19, .16) 30%, rgba(24, 28, 19, .52) 72%, rgba(24, 28, 19, .88) 100%); } .hero__inner { position: relative; padding-block: 3.5rem 5.5rem; color: var(--card); } .hero__panel > :last-child { margin-bottom: 0; } /* Kopf ohne Bild (seit 22.10.2026): auf der Buchungsseite soll die Buchung im Bild stehen, nicht ein Foto. Kein Medienbereich, kein Verlauf, nur die Ueberschrift auf dem Papiergrund. Die Hoehe richtet sich nach dem Text. */ .hero--plain { min-height: 0; background: var(--paper, #fff); } .hero--plain .hero__inner { color: var(--ink, #2E3524); padding-block: 2.6rem 1.4rem; } /* Titel und Unterzeile setzen ihre Farbe selbst (weiss, fuers Foto). Auf hellem Grund muessen beide ausdruecklich zurueckgeholt werden, sonst steht weisse Schrift auf weissem Papier. */ .hero--plain .hero__title, .hero--plain .hero__title-a, .hero--plain .hero__title-b { color: var(--ink, #2E3524); text-shadow: none; } .hero--plain .hero__inner .accent-script { color: var(--ink-soft, #646C51); } .hero--plain .hero__sub { color: var(--ink-soft, #646C51); text-shadow: none; } @media (max-width: 760px) { .hero--plain .hero__inner { padding-block: 1.8rem 1rem; } } /* Die Zeile ueber der Ueberschrift ist klein, gesperrt und duenn, also das Erste, was auf einem unruhigen Foto verschwindet. Sie bekommt einen kraeftigeren Schatten als der Rest. */ .hero__inner .accent-script { color: var(--moon); text-shadow: 0 1px 3px rgba(21, 26, 21, .95), 0 2px 14px rgba(21, 26, 21, .8); } .hero__title { color: var(--paper); max-width: 15ch; letter-spacing: -.01em; line-height: 1.06; text-shadow: 0 2px 18px rgba(21, 26, 21, .5); } .hero--compact .hero__title { max-width: none; } .hero__sub { font-size: clamp(1rem, 1.8vw, 1.22rem); max-width: 46ch; color: rgba(247, 245, 236, .96); text-shadow: 0 1px 3px rgba(21, 26, 21, .8), 0 2px 16px rgba(21, 26, 21, .6); } .hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; } .hero__actions .btn { color: var(--paper); --btn-fill: var(--paper); } .hero__actions .btn:hover, .hero__actions .btn:focus-visible { color: var(--ink); } /* Version 2 hat keine Kiefernsilhouette mehr. Das Bild endet als Kante. */ .hero__edge { display: none; } @media (max-width: 767px) { .hero, .hero--compact { min-height: calc(100svh - var(--header-h, 4.5rem)); } .hero--compact { min-height: min(52svh, 420px); } .hero__inner { padding-block: 2rem 3.4rem; } .hero__panel--split .hero__title, .hero__panel--split .hero__title-a, .hero__panel--split .hero__title-b { display: block; } /* Auf dem Handy steht der Text ueber die ganze Breite. Der Verlauf von links traegt dort nicht, also uebernimmt der von unten die Arbeit. */ .hero__wash { background: linear-gradient(180deg, rgba(24, 28, 19, .38) 0%, rgba(24, 28, 19, .30) 26%, rgba(24, 28, 19, .62) 66%, rgba(24, 28, 19, .90) 100%); } .hero__title { text-shadow: 0 2px 8px rgba(21, 26, 21, .75), 0 4px 28px rgba(21, 26, 21, .55); } .hero__sub { font-size: .98rem; line-height: 1.5; text-shadow: 0 1px 5px rgba(21, 26, 21, .9); } .hero__actions { gap: .55rem; margin-top: 1.2rem; align-items: center; } .hero__actions .btn { padding: .78rem 1.35rem; font-size: .72rem; } } /* Ab Tablet: der Text sitzt in einem dunklen Holzrahmen unten links */ @media (min-width: 768px) { .hero__inner { display: flex; justify-content: flex-start; width: min(100% - 3rem, 1400px); padding: 0 0 clamp(3rem, 6vw, 5rem); } /* Kein Kasten mehr: der Text steht frei im Bild, der Verlauf traegt ihn. Das laesst das Foto ganz und wirkt ruhiger als ein Rahmen darauf. */ .hero__panel { max-width: min(640px, 100%); padding: 0; } .hero__title { text-shadow: 0 2px 24px rgba(21, 26, 21, .55); } } /* ---------- Sektionen ---------- */ .sec { padding-block: var(--space-sec); position: relative; } /* Der letzte Absatz eines Abschnitts bringt seinen eigenen Abstand mit. Der legt sich unten auf die Polsterung drauf, und der Abschnitt ist unten groesser als oben. Beim Textabschnitt waren das 98 statt 80. */ .sec > .container > :last-child, .sec > .container > :last-child > :last-child, .sec > .container > :last-child > :last-child > :last-child { margin-bottom: 0; } .sec--wash { background: var(--paper-deep); background-image: var(--grain); } .sec--forest { background: var(--forest); color: rgba(244, 242, 231, .92); background-image: var(--grain), linear-gradient(180deg, var(--forest-mid), var(--forest-deep)); } .sec--forest h2, .sec--forest h3, .sec--forest h4 { color: var(--card); } .sec--forest .accent-script { color: var(--moon); } .sec--forest .sec-intro { color: rgba(244, 242, 231, .72); } /* Karten behalten im dunklen Abschnitt ihren hellen Grund - also auch ihre dunkle Schrift, sonst steht Creme auf Creme. */ .sec--forest .card { color: var(--ink); } .sec--forest .card h3, .sec--forest .card h2 { color: var(--ink); } .sec--forest .card p { color: var(--ink-soft); } /* Ausstattungskacheln sind im dunklen Abschnitt selbst dunkel-transparent, dort bleibt die Schrift hell. */ .sec--forest .amenity, .sec--forest .amenity strong { color: var(--card); } .sec-head { margin-bottom: 1.3rem; } .sec-head h2 { position: relative; } /* Buchungsseite, Formular ganz oben (seit 22.10.2026): die Ueberschrift ist zwar die H1 der Seite, soll aber nicht wie ein Titelbild wirken. Hier geht es ums Buchen, nicht um Schlagzeilen. Groesse wie eine Zwischenueberschrift, und oben weniger Luft, damit der Kalender frueher im Bild steht. */ .sec--bk-first { padding-top: clamp(1.6rem, 3vw, 2.4rem); } .sec--bk-first .sec-head { margin-bottom: .6rem; } .sec--bk-first .sec-head h1 { font-size: var(--size-h3); } .sec--bk-first .sec-intro { margin-bottom: 1rem; } .sec-text--center .sec-head { text-align: center; } .sec-text--center .accent-script { transform: rotate(-1.5deg); } /* Der Einleitungssatz laeuft ueber die volle Breite, genau wie die Karten darunter. Er hatte eine Grenze von 62 Zeichen, und daneben stand Luft bis zum Rand des dritten Bildes. Der Behaelter deckelt die Zeile ohnehin bei 1180 px, laenger wird sie also nie. */ .sec-intro { font-size: 1.1em; color: var(--ink-soft); margin-bottom: 2.2rem; } /* Blocksatz für alle Fließtexte (Thomas' Typografie-Vorgabe). Auf Handybreite passen rund 30 Zeichen in eine Zeile - dort müsste der Browser die Wortabstände dehnen, deshalb dort linksbündig, ab Tablet im Blocksatz. */ .prose, .sec-intro, .xp__text, .hero__sub, .faq__a, .post__excerpt, .profile__text, .card__body p, .room__text, .amenity p { text-align: left; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 3 3; text-wrap: pretty; } /* Blocksatz nur fuer echten Fliesstext. Er braucht lange Zeilen. Bei grosser Schrift und wenigen Woertern je Zeile reisst er Loecher zwischen die Woerter, und der Satz sieht aus wie auseinandergezogen. Die Unterzeile im Kopfbild ist genau so ein Fall: grosse Schrift, zwei Zeilen. Sie bleibt linksbuendig. */ @media (min-width: 700px) { .prose, .xp__text, .faq__a, .post__excerpt { text-align: justify; text-justify: inter-word; } } /* Karten: Blocksatz erst, wenn die Karte selbst breit genug ist */ .profile, .card, .room { container-type: inline-size; } @container (min-width: 420px) { .profile__text, .card__body p, .room__text { text-align: justify; text-justify: inter-word; } } /* Der Einleitungssatz einer Sektion ist oft nur eine bis zwei Zeilen. Blocksatz lohnt erst, wenn wirklich Text dasteht: darum ueber den Behaelter geregelt. */ .sec-intro { container-type: inline-size; } @container (min-width: 640px) { .sec-intro { text-align: justify; text-justify: inter-word; } } .sec-text--center .sec-intro { margin-inline: auto; } .prose { max-width: 66ch; } /* Im Textabschnitt laeuft der Text ueber die ganze Breite, genau wie die Sektionen darueber und darunter. Die 66 Zeichen gelten weiter im Blog und ueberall dort, wo der Text allein in einem schmalen Feld steht. */ .sec-text .prose { max-width: none; } .prose a { font-weight: 700; } .prose ul { padding-left: 1.2em; } .prose li { margin-bottom: .4em; } .prose h3 { margin-top: 1.7em; } /* Abschnitte im Fliesstext sind h2, damit die Ueberschriftsfolge nach der h1 der Seite nicht springt. Optisch bleiben sie so gross wie vorher: die Ebene ist Bedeutung, die Groesse ist Gestaltung. */ .prose h2 { font-size: var(--size-h3); margin-top: 1.7em; } .card h2 { font-size: var(--size-h3); } .sec-text--center .prose { margin-inline: auto; } /* Frueher bekamen zwei helle Abschnitte hintereinander oben weniger Luft. Das machte die Abstaende ueber die Seite hinweg ungleich: mal 80, mal 44. Jetzt hat jeder Abschnitt oben und unten dasselbe Mass. */ /* ---------- Text + Bild ---------- */ .ti { display: grid; gap: 2.2rem; align-items: center; } .ti__media { order: -1; } /* Rahmen wie ein Fensterausschnitt in der Blockhauswand */ .blob-frame { position: relative; } .blob-frame img { border-radius: var(--radius-card); width: 100%; object-fit: cover; aspect-ratio: 4 / 3.1; box-shadow: var(--shadow-soft); } .blob-frame::before { content: ""; position: absolute; inset: -14px -14px 20px -14px; z-index: -1; background: var(--wood-wash); background-image: var(--grain); border-radius: var(--radius-card); } .blob-frame::after { /* dünne Kerblinie, die dem angeschrägten Bildeck folgt */ content: ""; position: absolute; right: -14px; bottom: 20px; width: 62px; height: 62px; border-right: 2px solid var(--amber); border-bottom: 2px solid var(--amber); opacity: .5; } @media (min-width: 900px) { .ti { grid-template-columns: 1fr 1fr; gap: 4.2rem; } .ti__media { order: 0; } .ti--flip .ti__media { order: -1; } } /* ---------- Cards - Holzschindeln ---------- */ .cards { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); } @media (min-width: 600px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 980px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .card { display: flex; flex-direction: column; background: var(--card-soft); border: var(--rule); border-top: 3px solid var(--wood); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); overflow: hidden; text-decoration: none; color: var(--ink); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s; } a.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); color: var(--ink); border-top-color: var(--amber); } .card__media { overflow: hidden; } .card__media img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; transition: transform .55s var(--ease-out); } a.card:hover .card__media img { transform: scale(1.05); } .card__body { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; gap: .15rem; flex: 1; } .card__body h3 { margin-bottom: .35em; } .card__body p { color: var(--ink-soft); margin-bottom: .9em; font-size: .97rem; } .card__more { font-weight: 700; font-size: .93rem; color: var(--lake-deep); margin-top: auto; letter-spacing: .01em; } a.card:hover .card__more { color: var(--amber-deep); } .card__date { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .35rem; } /* ---------- Kennzahlen-Band ---------- */ .stats { display: grid; gap: 1px; grid-template-columns: repeat(2, minmax(0, 1fr)); background: rgba(46, 53, 36, .16); border: var(--rule); border-radius: var(--radius-card); overflow: hidden; } @media (min-width: 900px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .stat { background: var(--paper); padding: clamp(1rem, 4vw, 1.6rem) .9rem; text-align: center; } .sec--forest .stats { background: rgba(244, 242, 231, .16); border-color: rgba(244, 242, 231, .18); } .sec--forest .stat { background: var(--forest-mid); } .stat__num { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4.5vw, 2.9rem); line-height: 1; letter-spacing: -.03em; color: var(--amber-deep); } .stat__label { display: block; margin-top: .45rem; font-size: .86rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); } .sec--forest .stat__num { color: var(--amber); } .sec--forest .stat__label { color: rgba(244, 242, 231, .7); } .stat__note { display: block; margin-top: .3rem; font-size: .88rem; color: var(--ink-soft); } .sec--forest .stat__note { color: rgba(244, 242, 231, .62); } /* ---------- Ausstattung ---------- */ /* Auf dem Handy eine Spalte: bei zwei Spalten bleiben je Karte rund 160 px, und darin zerfallen Wörter wie "Gemeinschaftsbäder" in Trennstriche. Ab Tablet steuert die Klasse amenities--cN die Spaltenzahl. N kommt aus PHP und ist so gewählt, dass die letzte Reihe voll wird: sechs Einträge ergeben 3+3 statt 4+2. (repeat() akzeptiert keine Rechenfunktion, deshalb Klassen.) */ .amenities { display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); } @media (min-width: 560px) { .amenities { gap: 1.1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 780px) { .amenities--c3, .amenities--c4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1040px) { .amenities--c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .amenity { display: flex; gap: .9rem; align-items: flex-start; padding: 1.15rem 1.2rem; background: var(--card-soft); border: var(--rule); border-radius: var(--radius-card); transition: transform .25s var(--ease-out), border-color .25s; } .amenity:hover { transform: translateY(-3px); border-color: var(--amber); } .sec--forest .amenity { background: rgba(244, 242, 231, .06); border-color: rgba(244, 242, 231, .16); } .amenity__ico { font-size: 1.7rem; line-height: 1.1; flex-shrink: 0; } .amenity strong { display: block; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.25; } .amenity p { margin: .2rem 0 0; font-size: .88rem; color: var(--ink-soft); } .sec--forest .amenity p { color: rgba(244, 242, 231, .68); } /* ---------- Hütten ---------- */ .rooms { display: grid; gap: 1.6rem; grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1050px) { .rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .room { display: flex; flex-direction: column; background: var(--card-soft); border: var(--rule); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); overflow: hidden; position: relative; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); } .room:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); } .room__media { position: relative; overflow: hidden; background: var(--wood-wash); } .room__media img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform .55s var(--ease-out); } .room:hover .room__media img { transform: scale(1.05); } /* Nummerierte Hüttenplakette - wie eine eingebrannte Kennzeichnung */ .room__no { position: absolute; top: 0; left: 0; display: grid; place-items: center; min-width: 46px; height: 40px; padding-inline: .9rem; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--moon); background: rgba(46, 53, 36, .85); backdrop-filter: blur(3px); border-radius: var(--radius-pill); } .room__placeholder { aspect-ratio: 4 / 3; display: grid; place-items: center; gap: .3rem; background: var(--wood-wash); background-image: var(--grain); color: var(--ink-soft); text-align: center; } .room__placeholder span { font-size: 2.4rem; opacity: .55; } .room__placeholder small { font-family: var(--font-script); font-size: 1.05rem; } .room__body { padding: 1.2rem 1.35rem 1.4rem; display: flex; flex-direction: column; flex: 1; } .room__body h3 { margin-bottom: .3em; } .room__facts { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .85rem; } .room__facts span { font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--wood-deep); background: var(--wood-wash); border-radius: 2px; padding: .2rem .55rem; } .room__text { font-size: .95rem; color: var(--ink-soft); margin-bottom: 1rem; } .room__foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem; padding-top: .9rem; border-top: var(--rule); } .room__price { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); } .room__price small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .78rem; color: var(--ink-soft); letter-spacing: .02em; } /* ---------- Saison-Umschalter (Sommer / Winter) ---------- */ .seasons__tabs { display: flex; gap: .4rem; margin-bottom: 2rem; border-bottom: var(--rule); } .seasons__tab { font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 2.2vw, 1.2rem); padding: .7rem 1.2rem; background: none; border: none; cursor: pointer; color: var(--ink-soft); border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color .25s, border-color .25s; } .seasons__tab:hover { color: var(--ink); } .seasons__tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--amber); } .sec--forest .seasons__tab { color: rgba(244, 242, 231, .6); } .sec--forest .seasons__tab[aria-selected="true"] { color: var(--card); } .sec--forest .seasons__tabs { border-bottom-color: rgba(244, 242, 231, .2); } .seasons__panel[hidden] { display: none; } @media (prefers-reduced-motion: no-preference) { .seasons__panel:not([hidden]) { animation: season-in .4s var(--ease-out); } @keyframes season-in { from { opacity: 0; transform: translateY(10px); } } } /* ---------- Breadcrumb ---------- */ .breadcrumb { background: var(--paper); padding-block: 1rem .2rem; font-size: .88rem; } .breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; color: var(--ink-soft); } .breadcrumb li + li::before { content: "›"; margin-right: .4rem; opacity: .55; } .breadcrumb a { color: var(--ink-soft); text-decoration: none; font-weight: 600; } .breadcrumb a:hover { color: var(--amber-deep); text-decoration: underline; } .breadcrumb [aria-current] { color: var(--ink); font-weight: 700; } /* ---------- Erlebnisse ---------- */ .xp__titlelink { color: inherit; text-decoration: none; } .xp__titlelink:hover { color: var(--amber-deep); text-decoration: underline; text-decoration-thickness: 2px; } .xp { display: grid; gap: 2rem; align-items: center; padding-block: 2.6rem; scroll-margin-top: 90px; } .xp + .xp { border-top: var(--rule); } .xp__meta { color: var(--wood-deep); font-weight: 700; font-size: .95rem; letter-spacing: .01em; } .xp__includes { list-style: none; padding: 0; margin: 1rem 0; } .xp__includes li { padding-left: 1.5em; position: relative; margin-bottom: .45em; } .xp__includes li::before { content: ""; position: absolute; left: 0; top: .58em; width: .7em; height: .7em; background: var(--lake); transform: rotate(45deg); } .xp__book { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; } @media (min-width: 900px) { .xp { grid-template-columns: 1fr 1.05fr; gap: 4rem; } .xp--flip .xp__media { order: 2; } } /* ---------- Profile (Team, Tiere) ---------- */ .profiles { display: grid; gap: 1.6rem; grid-template-columns: minmax(0, 1fr); } @media (min-width: 600px) { .profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .profiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1200px) { .profiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .profile { scroll-margin-top: 100px; background: var(--card-soft); border: var(--rule); border-radius: var(--radius-card); padding: .75rem .75rem 1.15rem; box-shadow: var(--shadow-soft); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); text-align: center; } .profile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); z-index: 2; } .profile__photo img { aspect-ratio: 1; object-fit: cover; width: 100%; border-radius: 2px; } .profile__placeholder { aspect-ratio: 1; border-radius: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; background: var(--wood-wash); background-image: var(--grain); } .profile__placeholder span { font-size: 2.8rem; opacity: .6; } .profile__placeholder small { font-family: var(--font-script); font-size: 1.05rem; color: var(--ink-soft); } .profile__name { margin: .8rem 0 0; font-size: 1.25rem; } .profile__tagline { font-size: 1.1rem; color: var(--amber-deep); margin: 0; } .profile__traits { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; margin-top: .55rem; } .profile__traits span { font-size: .76rem; font-weight: 700; background: var(--lake-wash); color: var(--lake-deep); border-radius: 2px; padding: .18rem .55rem; } .profile__text { font-size: .94rem; color: var(--ink-soft); margin: .7rem 0 0; } /* ---------- Bildband (Panorama über volle Breite) ---------- */ /* Kein eigener Aussenabstand. Die Abschnitte darueber und darunter bringen ihre 80 Pixel schon mit; zusammen mit den 64 des Banners waren es 144, und ueber dem Banner sah die Seite anders aus als ueberall sonst. */ .banner { position: relative; } .banner__fig { margin: 0; position: relative; } .banner__img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block; } @media (max-width: 700px) { .banner__img { aspect-ratio: 4 / 3; } } .banner__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 3.2rem 0 1.5rem; color: var(--card); background: linear-gradient(180deg, rgba(21, 26, 21, 0), rgba(21, 26, 21, .8)); } .banner__caption .accent-script { color: var(--moon); margin-bottom: .15rem; text-shadow: 0 1px 6px rgba(21, 26, 21, .7); } .banner__caption p { margin: 0; font-size: clamp(1rem, 1.6vw, 1.18rem); max-width: 56ch; text-shadow: 0 1px 6px rgba(21, 26, 21, .85); } /* ---------- Galerie ---------- */ /* Spaltenzahl kommt je Stufe aus dem Block (wvr_gallery_fit in render.php), damit die letzte Reihe voll wird. Die Zahlen hier sind nur der Notnagel, falls der Block ohne Angabe gerendert wird. */ .gallery { display: grid; gap: .8rem; grid-template-columns: repeat(var(--gal-s, 2), minmax(0, 1fr)); } @media (min-width: 700px) { .gallery { grid-template-columns: repeat(var(--gal-m, 3), minmax(0, 1fr)); gap: 1.1rem; } } @media (min-width: 1100px) { .gallery { grid-template-columns: repeat(var(--gal-l, 4), minmax(0, 1fr)); } } .gallery__item { margin: 0; border-radius: var(--radius-card); box-shadow: var(--shadow-soft); overflow: hidden; } /* Erstes Bild groß - bricht das Raster auf und wirkt wie eine Pinnwand. Gilt nur auf den Stufen, auf denen die Rechnung aufgeht; die Zurücksetzung davor ist nötig, weil eine schmalere Stufe das Großbild gesetzt haben kann. */ .gallery--big-s .gallery__item:first-child { grid-column: span 2; grid-row: span 2; } @media (min-width: 700px) { .gallery .gallery__item:first-child { grid-column: auto; grid-row: auto; } .gallery--big-m .gallery__item:first-child { grid-column: span 2; grid-row: span 2; } } @media (min-width: 1100px) { .gallery .gallery__item:first-child { grid-column: auto; grid-row: auto; } .gallery--big-l .gallery__item:first-child { grid-column: span 2; grid-row: span 2; } } .gallery__btn { display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in; line-height: 0; } .gallery__btn img { aspect-ratio: 1; object-fit: cover; width: 100%; transition: transform .55s var(--ease-out); } .gallery__btn:hover img { transform: scale(1.06); } .gallery__btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; } /* ---------- Vollbild-Galerie ---------- */ .lightbox { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: rgba(24, 28, 19, .95); backdrop-filter: blur(6px); padding: clamp(.5rem, 3vw, 2.5rem); animation: lb-in .25s var(--ease-out); } .lightbox[hidden] { display: none; } @keyframes lb-in { from { opacity: 0; } } .lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .8rem; max-height: 100%; } .lightbox__img { max-width: 100%; max-height: 78svh; width: auto; height: auto; border-radius: var(--radius-card); background: rgba(255, 255, 255, .05); } .lightbox__caption { color: rgba(244, 242, 231, .92); text-align: center; max-width: 60ch; display: flex; flex-direction: column; gap: .25rem; font-size: .94rem; } .lightbox__count { font-size: .8rem; color: rgba(244, 242, 231, .5); letter-spacing: .08em; } .lightbox__close, .lightbox__nav { position: absolute; z-index: 2; display: grid; place-items: center; border: 1px solid rgba(244, 242, 231, .28); background: rgba(24, 28, 19, .55); color: var(--paper); border-radius: var(--radius-pill); font-family: var(--font-body); cursor: pointer; transition: background .2s, transform .2s var(--ease-out); } .lightbox__close:hover, .lightbox__nav:hover { background: rgba(244, 242, 231, .2); transform: scale(1.06); } .lightbox__close:focus-visible, .lightbox__nav:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; } .lightbox__close { top: clamp(.6rem, 2vw, 1.5rem); right: clamp(.6rem, 2vw, 1.5rem); width: 46px; height: 46px; font-size: 1.9rem; line-height: 1; } .lightbox__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 2.2rem; line-height: 1; } .lightbox__nav:hover { transform: translateY(-50%) scale(1.06); } .lightbox__nav--prev { left: clamp(.4rem, 2vw, 1.5rem); } .lightbox__nav--next { right: clamp(.4rem, 2vw, 1.5rem); } @media (max-width: 600px) { .lightbox__nav { width: 44px; height: 44px; font-size: 1.9rem; top: auto; bottom: 1rem; transform: none; } .lightbox__nav:hover { transform: scale(1.06); } .lightbox__img { max-height: 70svh; } } @media (prefers-reduced-motion: reduce) { .lightbox { animation: none; } } /* ---------- FAQ ---------- */ .faq { display: grid; gap: .7rem; } .faq__item { background: var(--card-soft); border: var(--rule); border-left: 3px solid var(--wood); border-radius: var(--radius-card); padding: 0; overflow: hidden; transition: border-left-color .25s; } .faq__item[open] { border-left-color: var(--amber); } .faq__item summary { cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; padding: 1.05rem 3rem 1.05rem 1.3rem; list-style: none; position: relative; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: ""; position: absolute; right: 1.35rem; top: 50%; width: 9px; height: 9px; margin-top: -6px; border-right: 2px solid var(--amber-deep); border-bottom: 2px solid var(--amber-deep); transform: rotate(45deg); transition: transform .3s var(--ease-out); } .faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; } .faq__item summary:hover { color: var(--amber-deep); } .faq__a { padding: 0 1.3rem 1.25rem; color: var(--ink-soft); } /* ---------- Presse / Medien ---------- */ .press { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; } .press__item { display: flex; gap: 1rem; align-items: flex-start; background: var(--card-soft); border: var(--rule); border-radius: var(--radius-card); padding: 1.05rem 1.25rem; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); } .press__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); } .press__icon { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 2px; background: var(--wood-wash); font-size: 1.1rem; } .press__body { flex: 1; min-width: 0; } .press__meta { font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .2rem; } .press__title { font-size: 1.05rem; margin: 0 0 .3rem; } .press__title a { color: var(--ink); text-decoration: none; } .press__title a:hover { color: var(--amber-deep); text-decoration: underline; text-underline-offset: 4px; } .press__ext { font-size: .8em; color: var(--amber-deep); } .press__text { font-size: .94rem; color: var(--ink-soft); margin: 0; text-align: left; } .press-empty { background: var(--lake-wash); border-radius: var(--radius-card); padding: 1.2rem 1.4rem; color: var(--lake-deep); } /* ---------- Zitat ---------- */ .bigquote { margin: 0; text-align: center; } .bigquote p { font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 1.85rem); line-height: 1.45; color: var(--forest); } .bigquote p::before { content: "“"; font-size: 2.2em; line-height: 0; vertical-align: -.35em; color: var(--amber); margin-right: .08em; } .bigquote cite { font-style: normal; font-family: var(--font-script); font-size: 1.3rem; color: var(--ink-soft); } /* ---------- CTA-Panel - Holzschild am Wegrand ---------- */ /* Auch der Schlussaufruf hat dasselbe Mass wie jeder andere Abschnitt. */ .sec-cta { padding-block: var(--space-sec); } .cta-panel { text-align: center; background: var(--forest); background-image: var(--grain), linear-gradient(150deg, #3E4C3B, var(--forest-deep) 70%); color: rgba(244, 242, 231, .9); border-radius: var(--radius-card); padding: clamp(2.2rem, 6vw, 4rem); box-shadow: var(--shadow-lift); position: relative; overflow: hidden; } .cta-panel::before { content: ""; position: absolute; inset: 12px; z-index: 0; border: 1px solid rgba(244, 242, 231, .22); pointer-events: none; } .cta-panel > * { position: relative; } .cta-panel h2 { color: var(--card); } .cta-panel .accent-script { color: var(--moon); font-size: clamp(1.4rem, 3vw, 1.95rem); } .cta-panel__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.5rem; } /* Auf dunklem Grund laeuft die helle Fuellung herein, die Schrift wird dunkel. */ .cta-panel .btn { color: var(--card); --btn-fill: var(--card); } .cta-panel .btn:hover, .cta-panel .btn:focus-visible { color: var(--forest-deep); } /* ---------- Kontakt ---------- */ .contact-card { display: grid; gap: 1.4rem; background: var(--card-soft); border: var(--rule); border-top: 3px solid var(--lake); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); padding: clamp(1.5rem, 4vw, 2.4rem); } @media (min-width: 700px) { .contact-card { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .contact-card__row { display: flex; gap: .8rem; align-items: flex-start; } .contact-card__ico { font-size: 1.5rem; line-height: 1.2; } .contact-card a { font-weight: 700; word-break: break-word; } .contact-card strong { font-family: var(--font-display); } /* ---------- Trennlinien ---------- */ .divider { line-height: 0; padding-block: 1.2rem; } .divider svg { width: 100%; height: 40px; } /* Wasserlinien - die Wellen aus dem Logosee */ .divider--ripple { display: grid; gap: 5px; padding-block: 2.4rem; } .divider--ripple span { display: block; height: 2px; margin-inline: auto; background: var(--lake); opacity: .35; border-radius: 2px; } .divider--ripple span:nth-child(1) { width: 180px; } .divider--ripple span:nth-child(2) { width: 110px; opacity: .25; } .divider--ripple span:nth-child(3) { width: 60px; opacity: .18; } /* Haarlinie. In V2 ersetzt sie die Baumkante aus V1 (Stil "treeline" im CMS). Ohne diese Regel bliebe an der Stelle nur eine leere Lücke. */ .divider--rule { padding-block: 2.4rem; } .divider--rule::before { content: ""; display: block; height: 1px; width: min(100%, 460px); margin-inline: auto; background: linear-gradient(90deg, transparent, rgba(46, 53, 36, .3) 22%, rgba(46, 53, 36, .3) 78%, transparent); } /* ---------- Blog-Post ---------- */ .post__meta { color: var(--ink-soft); } .post__meta a { font-weight: 700; } .post__title { max-width: 22ch; } .post__cover { margin-block: 2rem; } .post__cover img { aspect-ratio: 16 / 9; } .prose--post { font-size: 1.06em; } .prose--post h3 { color: var(--forest); } /* ---------- Footer ---------- */ .site-footer { background: var(--ink); background-image: var(--grain); color: rgba(244, 242, 231, .82); margin-top: var(--space-sec); position: relative; padding-top: 3rem; } .site-footer__inner { display: grid; gap: 2rem; padding-block: 2rem 2.5rem; } @media (min-width: 700px) { .site-footer__inner { grid-template-columns: 1.2fr 1fr 1fr 1fr; } } /* Ebene 3, nicht 4: sonst springt die Ueberschriftsfolge von h2 auf h4 und Vorlesehilfen verlieren die Gliederung. */ .site-footer h3 { color: var(--moon); font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .7rem; } .site-footer a { color: rgba(244, 242, 231, .82); } .site-footer a:hover { color: var(--amber); } /* Das vollständige Logo ist dunkelbraun und würde im dunklen Fuß untergehen. Deshalb steht es dort auf einem hellen Schild - wie ein Holzschild am Weg. */ .site-footer__brand img { width: 100%; max-width: 200px; height: auto; display: block; } .site-footer__plate { display: inline-block; background: var(--paper); background-image: var(--grain); border-radius: var(--radius-card); padding: .9rem 1.1rem; } .site-footer__tagline { color: var(--lake); font-size: 1.45rem; } .site-footer__sub { margin-top: 1.1rem; } .site-footer__social { display: flex; flex-wrap: wrap; gap: .35rem 1.2rem; } .site-footer__social a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; text-decoration: none; } .site-footer__social a:hover span { text-decoration: underline; text-underline-offset: 3px; } .site-footer__social svg { flex-shrink: 0; } /* Instagram-Hinweis über der Galerie */ .gallery__follow { margin: -.4rem 0 1.5rem; } .gallery__follow a { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .96rem; color: var(--lake-deep); text-decoration: none; padding: .5rem .95rem; background: var(--card-soft); border: var(--rule); border-radius: var(--radius-card); transition: border-color .25s, color .25s, transform .25s var(--ease-out); } .gallery__follow a:hover { color: var(--amber-deep); border-color: var(--amber); transform: translateY(-2px); } .contact-card__ico .ico-ig { color: var(--lake-deep); } .site-footer__note { padding-block: 1.2rem; font-size: .84rem; color: rgba(244, 242, 231, .5); border-top: 1px solid rgba(244, 242, 231, .14); margin-top: 1rem; } /* ---------- Mobile Buchungsleiste ---------- */ .book-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: none; align-items: center; justify-content: space-between; gap: .8rem; padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom)); background: rgba(46, 53, 36, .95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid rgba(244, 242, 231, .16); transform: translateY(110%); transition: transform .35s var(--ease-out); } /* Grundfarbe hell setzen: sonst erbt jedes neue Kind die dunkle Schrift. */ .book-bar { color: rgba(244, 242, 231, .85); } .book-bar.is-visible { transform: none; } .book-bar__text { color: rgba(244, 242, 231, .85); font-size: .82rem; line-height: 1.3; } .book-bar__text strong { display: block; font-family: var(--font-display); font-size: .95rem; color: var(--card); } /* dunkle Leiste: heller Knopf, beim Zeigen dunkle Schrift auf heller Fuellung */ .book-bar .btn { flex-shrink: 0; color: var(--paper); --btn-fill: var(--paper); } .book-bar .btn:hover, .book-bar .btn:focus-visible { color: var(--ink); } @media (max-width: 860px) { .book-bar { display: flex; } } @media print { .book-bar { display: none; } } /* ---------- Nach oben ---------- */ .to-top { position: fixed; right: clamp(1rem, 2.5vw, 1.8rem); bottom: clamp(1rem, 2.5vw, 1.8rem); z-index: 40; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(46, 53, 36, .22); border-radius: var(--radius-pill); background: rgba(255, 255, 255, .88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--ink-soft); font-family: var(--font-body); cursor: pointer; opacity: 0; transform: translateY(10px); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), background .25s, color .25s, border-color .25s; } .to-top[hidden] { display: none; } .to-top.is-visible { opacity: .75; transform: none; } .to-top:hover, .to-top:focus-visible { opacity: 1; background: var(--paper); color: var(--amber-deep); border-color: var(--amber); transform: translateY(-3px); } .to-top:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; } /* über der Buchungsleiste bleiben */ @media (max-width: 860px) { .to-top { bottom: calc(4.6rem + env(safe-area-inset-bottom)); } } /* Auf der Buchungsseite gibt es keine Buchungsleiste, also auch keinen Abstand dafuer. Am Handy faellt der Knopf dort ganz weg: er schwebt sonst mitten ueber dem Kalender, und ein Tipp trifft den Pfeil statt den Tag. Das Formular springt bei jedem Schritt von selbst nach oben. */ .is-bookpage .to-top { bottom: clamp(1rem, 2.5vw, 1.8rem); } @media (max-width: 860px) { .is-bookpage .to-top { display: none; } } @media (prefers-reduced-motion: reduce) { .to-top { transition: opacity .2s; transform: none; } .to-top.is-visible, .to-top:hover { transform: none; } } @media print { .to-top { display: none; } } /* ---------- Popup ---------- */ .popup { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: rgba(46, 53, 36, .55); backdrop-filter: blur(4px); padding: 1.2rem; } .popup[hidden] { display: none; } .popup__card { background: var(--paper); border-radius: var(--radius-card); border-top: 4px solid var(--amber); box-shadow: var(--shadow-lift); max-width: 420px; width: 100%; padding: 2rem 1.8rem 1.8rem; position: relative; text-align: center; animation: popup-in .45s var(--ease-out); } @keyframes popup-in { from { opacity: 0; transform: translateY(24px) scale(.96); } } .popup__close { position: absolute; top: .5rem; right: .8rem; background: none; border: none; font-family: var(--font-body); font-size: 2rem; line-height: 1; color: var(--ink-soft); cursor: pointer; } .popup__close:hover { color: var(--amber-deep); } .popup__media { margin: -2rem -1.8rem 1.2rem; overflow: hidden; } .popup__media img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; } .popup .btn { margin-top: .8rem; } /* ---------- Bewegung ---------- Alles hier steckt in prefers-reduced-motion. Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt die fertige Seite ohne einen einzigen Uebergang. Die Seite funktioniert auch ganz ohne JavaScript: die Startwerte greifen erst, wenn die Klasse .js am html-Element haengt. */ @media (prefers-reduced-motion: no-preference) { /* --- Abschnitte beim Scrollen --- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); } .reveal.is-visible { opacity: 1; transform: none; } /* Karten laufen versetzt ein. --i setzt das Skript je Kachel. */ .stagger { opacity: 0; transform: translateY(30px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); } .stagger.is-visible { opacity: 1; transform: none; } /* --- Kopfbild: langsamer Zoom, damit das Foto lebt --- */ .js .hero__img { animation: heroZoom 18s var(--ease-out) both; } @keyframes heroZoom { from { transform: scale(1.07); } to { transform: scale(1); } } /* --- Kopftext: laeuft nach dem Laden gestaffelt ein --- */ .js .hero__panel > * { opacity: 0; transform: translateY(18px); animation: heroRein .85s var(--ease-out) forwards; animation-delay: calc(.15s + var(--d, 0) * .12s); } @keyframes heroRein { to { opacity: 1; transform: none; } } /* Die Ueberschrift kommt hinter einer Maske hervor, Teil fuer Teil. Das ist die Teilanimation: erst "Sieben Huetten.", dann der zweite Teil. */ .js .hero__title-a, .js .hero__title-b { display: inline-block; clip-path: inset(0 0 108% 0); transform: translateY(.34em); animation: zeileRein .95s var(--ease-out) forwards; } .js .hero__title-a { animation-delay: .28s; } .js .hero__title-b { animation-delay: .44s; } @keyframes zeileRein { to { clip-path: inset(-14% 0 -14% 0); transform: none; } } /* --- Abschnittsueberschriften: Maske plus Strich, der sich zieht --- */ .js .sec-head h2 { clip-path: inset(0 0 108% 0); transform: translateY(.3em); transition: clip-path .9s var(--ease-out), transform .9s var(--ease-out); } .js .is-visible .sec-head h2, .js .sec-head.is-visible h2 { clip-path: inset(-14% 0 -14% 0); transform: none; } .sec-head h2::after { content: ""; position: absolute; left: 0; bottom: -.32em; height: 2px; width: 3.2rem; background: var(--amber); transform: scaleX(0); transform-origin: left center; transition: transform .8s var(--ease-out) .25s; } .is-visible .sec-head h2::after { transform: scaleX(1); } /* --- Kleine Reaktionen beim Zeigen --- */ .card, .amenity, .room { transition: transform .35s var(--ease-out), border-color .35s; } .card:hover, .room:hover { transform: translateY(-4px); } .card__media img, .room__media img { transition: transform .7s var(--ease-out); } .card:hover .card__media img, .room:hover .room__media img { transform: scale(1.05); } } /* Ohne JavaScript und bei reduzierter Bewegung ist alles sofort sichtbar. */ .no-js .reveal, .no-js .stagger { opacity: 1; transform: none; } /* ---------- Druck ---------- */ @media print { .site-header, .site-footer, .popup, .hero__actions, .xp__book { display: none; } } /* ========================================================================== Buchung ========================================================================== */ /* Online-Buchung noch zu (seit 09.11.2026): Kontaktwege statt Formular, und fuer Angemeldete ein Hinweis ueber dem Formular. */ .bk-soon__wege { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0 0 2rem; } .bk-vorschau { margin: 0 0 1rem; padding: .8rem 1rem; background: var(--moon); border: 1px solid var(--amber-deep); color: var(--ink); font-weight: 600; } /* Preisstaffel - steht auch ohne JavaScript da */ .rate-strip { display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr); background: rgba(46, 53, 36, .16); border: var(--rule); border-radius: var(--radius-card); overflow: hidden; margin-bottom: 2rem; } @media (min-width: 620px) { .rate-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .rate-strip__item { background: var(--card-soft); padding: 1.1rem 1.2rem; text-align: center; } .rate-strip__item--note { display: grid; place-items: center; background: var(--lake-wash); } .rate-strip__price { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1; /* --amber-deep auf --card-soft ist nur 2,91:1 (Fund NF-009, 12.09.2026). --amber-darker ist derselbe Honigton, nur dunkler, und steht schon an .badge--winter fuer denselben Zweck. Nur diese Zeile geaendert, nicht die Variable selbst: --amber-deep traegt anderswo Randlinien und Hover-Zustaende, die nicht mitgemeint sind. */ color: var(--amber-darker); } .rate-strip__label { display: block; margin-top: .35rem; font-size: .84rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); } .rate-strip__extra { margin: .7rem 0 1.6rem; font-size: .92rem; color: var(--ink-soft); } .bk__fallback { background: var(--wood-wash); border: var(--rule); border-left: 3px solid var(--amber); border-radius: var(--radius-card); padding: 1.2rem 1.4rem; } .bk__fallback-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: .9rem 0 0; } .bk__boot { color: var(--ink-soft); padding: 1.5rem 0; } /* Schrittleiste */ .bk__steps { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1.8rem; padding: 0; } .bk__step button { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-body); font-weight: 700; font-size: .9rem; padding: .5rem .95rem; border: var(--rule); border-radius: var(--radius-pill); background: var(--card-soft); color: var(--ink-soft); cursor: pointer; transition: color .2s, border-color .2s, background .2s; } .bk__step button:disabled { opacity: .5; cursor: default; } .bk__step.is-current button { color: var(--ink); border-color: var(--amber); background: var(--paper); } .bk__step.is-done button { color: var(--forest); } .bk__step-no { display: grid; place-items: center; width: 20px; height: 20px; font-size: .74rem; border-radius: 50%; background: var(--lake-wash); color: var(--forest); } .bk__step.is-current .bk__step-no { background: var(--amber-deep); color: var(--card); } .bk__step.is-done .bk__step-no { background: var(--forest); color: var(--card); } @media (max-width: 560px) { .bk__steps { gap: .25rem; } .bk__step button { font-size: .8rem; padding: .4rem .6rem; gap: .35rem; } .bk__step-no { width: 18px; height: 18px; font-size: .68rem; } } .bk__body { display: grid; gap: 1.8rem; align-items: start; } @media (min-width: 900px) { .bk__body { grid-template-columns: 1fr 320px; gap: 2.4rem; } } /* Die rechte Spalte: gruener Kasten, darunter die Knopfzeile. Beide bleiben beim Scrollen zusammen stehen, deshalb klebt die Spalte und nicht mehr der Kasten allein. */ .bk__side { display: grid; gap: 1rem; align-content: start; } @media (min-width: 900px) { .bk__side { position: sticky; top: 5.5rem; } } /* Mittig unter dem Kasten. Zwei Knoepfe linksbuendig unter einem breiten Kasten sehen aus, als waeren sie verrutscht. Im Feld links bleiben sie linksbuendig, dort stehen sie unter Fliesstext. */ .bk__side > .bk__actions { margin-top: 0; justify-content: center; } .bk__side > .bk__fehler { margin: 0; } .bk__panel { background: var(--card-soft); border: var(--rule); border-top: 3px solid var(--wood); border-radius: var(--radius-card); padding: clamp(1.1rem, 3vw, 1.8rem); } .bk__sub { margin-top: 1.6rem; } .bk__note { color: var(--ink-soft); font-size: .93rem; margin-bottom: 1rem; } .bk__note--warn { color: var(--forest); background: var(--lake-wash); border-left: 3px solid var(--amber); padding: .6rem .8rem; border-radius: 0; } .bk__sync { font-size: .82rem; color: var(--ink-soft); margin: .8rem 0 0; } .bk__linkbtn { background: none; border: none; padding: 0 0 0 .6rem; cursor: pointer; font: inherit; font-size: .9rem; color: var(--lake-deep); text-decoration: underline; text-underline-offset: 3px; } .bk__linkbtn:hover { color: var(--amber-deep); } /* Kalender */ .cal__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; } .cal__hint { font-family: var(--font-display); font-weight: 700; font-size: 1rem; text-align: center; flex: 1; } .cal__arrow { width: 38px; height: 38px; flex-shrink: 0; border: var(--rule); border-radius: var(--radius-pill); background: var(--paper); font-family: var(--font-body); font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--ink); } .cal__arrow:disabled { opacity: .35; cursor: default; } .cal__arrow:hover:not(:disabled) { border-color: var(--amber); color: var(--amber-deep); } .cal__months { display: grid; gap: 1.6rem; } @media (min-width: 700px) { .cal__months { grid-template-columns: 1fr 1fr; } } @media (max-width: 699px) { .cal__month:last-child { display: none; } } .cal__title { font-size: 1.02rem; text-align: center; margin-bottom: .5rem; } .cal__names, .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; } .cal__names span { text-align: center; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); padding-bottom: .3rem; } .cal__day { aspect-ratio: 1; min-height: 44px; display: grid; place-items: center; border: 1px solid transparent; border-radius: var(--radius-pill); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; background: var(--forest-wash); color: var(--ink); transition: background .15s, color .15s, transform .15s var(--ease-out); } .cal__day--some { background: var(--moon); } .cal__day--full, .cal__day--out { background: transparent; color: rgba(110, 118, 89, .55); cursor: default; text-decoration: line-through; } /* Schweben nur dort, wo es eine Maus gibt. Am Handy bleibt der Schwebezustand nach einem Tipp haengen. Der gewaehlte Tag sah dadurch aus wie nicht gewaehlt, und es wirkte, als tue der Tipp nichts. Ein gewaehlter Tag wird ausserdem nie mehr vom Schweben eingefaerbt: ohne :not() gewinnt die Schweberegel, weil sie genauer ist. */ @media (hover: hover) { .cal__day:not(:disabled):not(.is-from):not(.is-to):not(.is-between):hover { background: var(--lake-wash); transform: scale(1.06); } } .cal__day.is-between { background: var(--lake-wash); border-radius: 0; } .cal__day.is-from, .cal__day.is-to { background: var(--amber-darker); color: var(--paper); transform: none; } .cal__day:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; } .cal__legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; font-size: .82rem; color: var(--ink-soft); } .cal__key { display: inline-flex; align-items: center; gap: .4rem; } .cal__key::before { content: ""; width: 14px; height: 14px; border-radius: var(--radius-pill); } .cal__key--free::before { background: var(--forest-wash); } .cal__key--some::before { background: var(--moon); } /* Kalender am Handy. min-height: 44px passt bei 375 px Breite nicht in sieben Spalten, die Zeile lief drei Pixel ueber den Rand hinaus. Unter 520 px bestimmt deshalb die Spaltenbreite die Groesse, das Quadrat bleibt ueber aspect-ratio erhalten. Dafuer bekommt das Feld drumherum weniger Rand, damit die Felder trotzdem so gross wie moeglich sind. */ @media (max-width: 519px) { .bk__panel { padding-left: .9rem; padding-right: .9rem; } .cal__names, .cal__grid { gap: 4px; } .cal__day { min-height: 0; font-size: .95rem; } .cal__day--full, .cal__day--out { text-decoration: none; opacity: .5; } .cal__title { font-size: 1.1rem; } .cal__hint { font-size: 1.05rem; } .cal__legend { gap: .7rem; font-size: .78rem; } } .cal__key--full::before { background: transparent; border: 1px solid rgba(46, 53, 36, .32); } .bk__picked { margin-top: 1.2rem; font-size: .96rem; } /* Hüttenauswahl */ /* ---------- Lageplan im Buchungsformular (seit 20.10.2026) ---------- Das Luftbild mit einem Knopf je Huette. Die Knoepfe sitzen in Prozent der Bildkante, nicht in Pixeln: der Rahmen ist position:relative, das Bild fuellt ihn ganz aus, und jeder Punkt haengt mit left/top daran. So sitzt er am Handy an derselben Stelle wie am grossen Schirm. */ /* Ab Schritt 2 ist der Preisstreifen weg: der echte Preis steht dann rechts, und der Lageplan braucht die Hoehe. booking.js setzt die Klasse. */ .sec--bk-kompakt .rate-strip, .sec--bk-kompakt .rate-strip__extra { display: none; } /* ---------- Kurzreservierung (seit 22.10.2026) ---------- Der Kasten steht ueber der Preisuebersicht, weil der Gast genau dorthin sieht, wenn er wissen will, woran er ist. Ruhig, solange Zeit ist; in den letzten zwei Minuten warm eingefaerbt, aber ohne Blinken - das waere Panikmache und stoerte jeden, der langsam tippt. */ .bk__hold { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin: 0 0 .7rem; padding: .6rem .85rem; border-radius: 8px; background: var(--lake-wash, #EDF1E2); border: 1px solid var(--line, #D9DCCB); color: var(--ink, #2E3524); font-size: .9rem; } .bk__hold-titel { color: var(--ink-soft, #646C51); } .bk__hold-uhr { font-variant-numeric: tabular-nums; white-space: nowrap; } .bk__hold.is-knapp { background: #FBE8DE; border-color: #E6B79C; } .bk__hold.is-knapp .bk__hold-uhr { color: #9A3412; } /* Nur kurz gehalten, nicht vergeben: heller als "ausgebucht" und ohne Durchstreichen - durchgestrichen hiesse endgueltig, und das ist es nicht. */ .bk__pin.is-held { background: #C9A227; text-decoration: none; opacity: 1; } .bk__map { margin: 0 0 1.1rem; } .bk__map-scroll { border-radius: 10px; border: 1px solid var(--line, #D9DCCB); background: var(--card-soft, #FBFAF4); overflow: hidden; /* Der Rahmen schmiegt sich ans Bild (inline-block), damit die Punkte auch dann sitzen, wenn das Bild wegen der Hoehengrenze schmaler wird. Ein Block-Rahmen bliebe breit, und die Prozentwerte zoegen die Punkte vom Bild weg. text-align stellt den schmaleren Rahmen in die Mitte. */ text-align: center; } .bk__map-scroll:focus-visible { outline: 3px solid var(--ink, #2E3524); outline-offset: 2px; } .bk__map-frame { position: relative; line-height: 0; display: inline-block; max-width: 100%; } /* Plan UND Legende sollen zusammen auf den Schirm passen, ohne zu scrollen. Ueber dem Bild stehen Kopfband, Schrittleiste und der Hinweissatz, darunter die Legende - zusammen rund 340 Pixel. Der Rest gehoert dem Bild. Nie kleiner als 300 Pixel, sonst ist auf einem flachen Fenster nichts mehr zu erkennen. */ .bk__map-img { display: block; width: auto; height: auto; max-width: 100%; max-height: max(300px, calc(100svh - 340px)); } .bk__pin { position: absolute; transform: translate(-50%, -50%); /* 44 Pixel ist die kleinste Flaeche, die ein Daumen sicher trifft. */ min-width: 2.75rem; min-height: 2.75rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 3px solid #fff; cursor: pointer; background: var(--lake-deep, #4F6636); color: #fff; font: 700 1.05rem/1 inherit; font-variant-numeric: tabular-nums; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); transition: transform .12s ease, background-color .12s ease; } .bk__pin:hover:not(:disabled) { transform: translate(-50%, -50%) scale(1.12); } .bk__pin:focus-visible { outline: 3px solid var(--ink, #2E3524); outline-offset: 2px; } .bk__pin.is-on { background: #C2410C; } /* Vergeben: grau UND durchgestrichen. Farbe allein reicht nicht, wer sie nicht unterscheiden kann, saehe sonst keinen Unterschied. */ .bk__pin.is-taken { background: #9B9B91; cursor: not-allowed; opacity: .85; text-decoration: line-through; text-decoration-thickness: 2px; } /* Die drei Beispielpunkte unter dem Bild stehen im Textfluss, nicht im Bild. */ .bk__pin--demo { position: static; transform: none; min-width: 1.5rem; min-height: 1.5rem; border-width: 2px; box-shadow: none; vertical-align: middle; } .bk__map-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .5rem 0 0; font-size: .86rem; color: var(--ink-soft, #646C51); } .bk__map-key { display: inline-flex; align-items: center; gap: .35rem; } @media (max-width: 720px) { /* Unter 720 Pixeln liegen die vier Huetten in der Reihe naeher beieinander als ein Punkt breit ist. Statt die Punkte zu schrumpfen, bis niemand sie mehr trifft, bekommt das Bild eine Mindestbreite und wird geschoben. */ .bk__map-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; text-align: left; } /* 760 statt 660: seit die Nummern der Huettenreihe folgen, liegen sie enger. Bei 660 Pixeln betrug ihr Abstand nur 36 Pixel, die Punkte ueberdeckten sich wieder. Bei 760 sind es 41 Pixel. */ .bk__map-frame { min-width: 760px; } /* Am Handy wird seitlich geschoben. Eine Hoehengrenze wuerde das Bild zusaetzlich schrumpfen und die Punkte wieder zusammenruecken. */ .bk__map-img { width: 100%; max-height: none; } .bk__pin { min-width: 2.25rem; min-height: 2.25rem; font-size: .92rem; border-width: 2px; } .bk__map-hint { display: block; } } .bk__map-hint { display: none; margin: .4rem 0 0; font-size: .86rem; color: var(--ink-soft, #646C51); } @media (prefers-reduced-motion: reduce) { .bk__pin { transition: none; } } .bk__cabins { display: grid; gap: .6rem; } @media (min-width: 640px) { .bk__cabins { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Am Rechner drei nebeneinander. Sieben Hütten stehen dann in drei Reihen statt in vier, und man sieht mehr davon ohne zu scrollen. */ @media (min-width: 1080px) { .bk__cabins { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .bk__cabin { border: var(--rule); border-radius: var(--radius-card); overflow: hidden; transition: border-color .2s, background .2s; } .bk__cabin:hover { border-color: var(--amber); } .bk__cabin.is-on { border-color: var(--amber); background: var(--lake-wash); } .bk__cabin.is-taken { opacity: .5; } /* Die Zeile mit Haekchen und Namen. Sie ist das