/** * Seite-CSS -- Komponenten, Sektionen, Footer. Wird per am Ende von * geladen (nicht kritisch). Siehe 00_PLANUNG/12_DESIGNKONZEPT.md Kapitel 5. */ /* Buttons -------------------------------------------------------------- */ .knopf{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; height:52px; padding-inline:var(--sp-6); font-size:var(--fs-body); font-weight:600; letter-spacing:var(--ls-knopf); border-radius:var(--r-2); border:0; cursor:pointer; text-decoration:none; white-space:nowrap; transition:background var(--t-normal) var(--e-standard), transform var(--t-schnell) var(--e-standard), box-shadow var(--t-normal); } .knopf--s{ height:44px; font-size:var(--fs-klein); padding-inline:var(--sp-5); } .knopf--l{ height:60px; font-size:var(--fs-lead); padding-inline:var(--sp-7); } .knopf--primaer{ background:var(--rot-700); color:#fff; box-shadow:var(--schatten-knopf); } @media (hover:hover){ .knopf--primaer:hover{ background:#7A1C2C; transform:translateY(-1px); box-shadow:var(--schatten-4); } } .knopf--primaer:active{ background:var(--rot-800); transform:translateY(0); box-shadow:var(--schatten-2); } .knopf--primaer:disabled{ background:#D9CCC0; color:#7D6E68; box-shadow:none; cursor:not-allowed; } .knopf--sekundaer{ background:transparent; border:1.5px solid var(--gold-500); color:var(--rot-700); } @media (hover:hover){ .knopf--sekundaer:hover{ background:var(--gold-100); border-color:var(--gold-600); } } .knopf--sekundaer:active{ background:var(--gold-200); } .knopf--text{ background:none; border:0; color:var(--rot-700); text-decoration:underline; text-underline-offset:.25em; text-decoration-thickness:1px; padding-block:.5rem; height:auto; } @media (hover:hover){ .knopf--text:hover{ text-decoration-thickness:2px; color:var(--rot-800); } } .knopf--auf-bild.knopf--sekundaer{ border-color:rgba(255,255,255,.72); color:#fff; background:rgba(36,20,18,.28); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } /* Sektionskopf ----------------------------------------------------------- */ .sektionskopf{ max-width:var(--mass-schmal); margin-bottom:var(--sp-8); } .sektionskopf .eyebrow{ margin-bottom:var(--sp-3); } .sektionskopf h2{ margin-bottom:var(--sp-4); } /* Merkliste (Haken statt Icon-Font) --------------------------------------- */ .merkliste{ display:grid; gap:var(--sp-3); } .merkliste li{ display:flex; align-items:flex-start; gap:.75rem; font-size:var(--fs-body); color:var(--tinte-2); } .merkliste li::before{ content:""; flex:0 0 10px; width:10px; height:5px; margin-top:.55em; border-left:2px solid var(--gold-500); border-bottom:2px solid var(--gold-500); transform:rotate(-45deg); } /* Karten ------------------------------------------------------------------ */ .karte{ background:var(--weiss); border:1px solid var(--linie); border-radius:var(--r-3); padding:clamp(1.25rem,.9rem+1.4vw,1.75rem); box-shadow:var(--schatten-2); } @media (hover:hover){ .karte:hover{ transform:translateY(-3px); border-color:#D6C29F; box-shadow:var(--schatten-3); } } .karte:focus-within{ box-shadow:var(--fokus), var(--schatten-3); } .raster{ display:grid; gap:var(--sp-6); grid-template-columns:1fr; } @media (min-width:37.5rem){ .raster--2{ grid-template-columns:repeat(2,1fr); } } @media (min-width:56.25rem){ .raster--3{ grid-template-columns:repeat(3,1fr); } .raster--4{ grid-template-columns:repeat(4,1fr); } } /* Preiskarten (Pakete) ----------------------------------------------------- */ .paket{ position:relative; background:var(--weiss); border:1px solid var(--linie); border-radius:var(--r-4); padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-4); box-shadow:var(--schatten-2); } .paket--empfehlung{ border:2px solid var(--gold-500); box-shadow:var(--schatten-4); } .paket__abzeichen{ position:absolute; top:-14px; left:var(--sp-6); background:var(--gold-500); color:#fff; font-size:var(--fs-mini); font-weight:600; padding:.3rem .8rem; border-radius:var(--r-voll); letter-spacing:.02em; } .paket__name{ font-size:var(--fs-h3); } .paket__preis{ font-family:var(--f-serif); font-size:var(--fs-hero); line-height:1; color:var(--rot-700); } .paket__preis small{ font-family:var(--f-sans); font-size:var(--fs-klein); font-weight:400; color:var(--tinte-3); } .paket__preis-spitze{ font-size:var(--fs-mini); color:var(--tinte-3); } .paket__details{ font-size:var(--fs-mini); color:var(--tinte-3); } /* Ampel -- Legende und Chips (statische Erklärung, solange kein Live-Kalender existiert) */ .ampel-legende{ display:grid; gap:var(--sp-4); grid-template-columns:1fr; margin-block:var(--sp-6); } @media (min-width:37.5rem){ .ampel-legende{ grid-template-columns:repeat(3,1fr); } } .ampel-item{ display:flex; gap:.75rem; align-items:flex-start; padding:var(--sp-4); border-radius:var(--r-3); border:1px solid var(--linie); background:var(--weiss); } .ampel-item__glyph{ flex:0 0 18px; width:18px; height:18px; margin-top:.15rem; } .ampel-item--spar .ampel-item__glyph{ border-radius:50%; background:var(--ampel-spar); } .ampel-item--standard .ampel-item__glyph{ border-radius:50%; border:3px solid var(--ampel-standard); background:transparent; } .ampel-item--exklusiv .ampel-item__glyph{ background:var(--ampel-exklusiv); transform:rotate(45deg); } .ampel-item__titel{ font-weight:600; font-size:var(--fs-klein); display:block; margin-bottom:.2rem; } .ampel-item--spar .ampel-item__titel{ color:var(--ampel-spar-text); } .ampel-item--standard .ampel-item__titel{ color:var(--ampel-standard-text); } .ampel-item--exklusiv .ampel-item__titel{ color:var(--ampel-exklusiv-text); } .ampel-item p{ font-size:var(--fs-mini); color:var(--tinte-3); margin:0; } /* Nummerierter Ablauf ------------------------------------------------------ */ .ablauf{ display:grid; gap:var(--sp-5); } @media (min-width:37.5rem){ .ablauf{ grid-template-columns:repeat(2,1fr); } } @media (min-width:56.25rem){ .ablauf{ grid-template-columns:repeat(4,1fr); } } .ablauf__schritt{ display:flex; flex-direction:column; gap:.5rem; } .ablauf__zahl{ width:2.5rem; height:2.5rem; border-radius:50%; border:1.5px solid var(--gold-500); color:var(--gold-700); font-family:var(--f-serif); font-weight:600; display:flex; align-items:center; justify-content:center; font-size:var(--fs-klein); } .ablauf__titel{ font-size:var(--fs-h4); } .ablauf__text{ font-size:var(--fs-klein); color:var(--tinte-3); } /* Info-/Vertrauenskasten (statt blauer Info-Box) ---------------------------- */ .hinweisbox{ border-left:3px solid var(--gold-500); background:var(--sand); border-radius:var(--r-3); padding:var(--sp-5); } .hinweisbox h3,.hinweisbox h4{ margin-bottom:var(--sp-2); } .hinweisbox p{ color:var(--tinte-2); } /* FAQ ----------------------------------------------------------------------- */ .faq{ border-top:1px solid var(--linie); } .faq__eintrag{ border-bottom:1px solid var(--linie); } .faq__frage{ list-style:none; cursor:pointer; min-height:4rem; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); padding-block:var(--sp-4); font-size:var(--fs-h4); font-weight:600; color:var(--tinte); } .faq__frage::-webkit-details-marker{ display:none; } .faq__frage:hover{ color:var(--rot-700); } .faq__ikon{ position:relative; flex:0 0 14px; width:14px; height:14px; } .faq__ikon::before,.faq__ikon::after{ content:""; position:absolute; background:var(--gold-500); } .faq__ikon::before{ inset:6px 0; height:2px; } .faq__ikon::after{ inset:0 6px; width:2px; transition:opacity var(--t-normal); } details[open] .faq__ikon{ transform:rotate(45deg); } .faq__antwort{ padding-bottom:var(--sp-5); max-width:68ch; color:var(--tinte-2); } /* Fußbereich ------------------------------------------------------------- */ .vorfooter{ background:var(--sand); padding-block:var(--sp-sektion-eng); text-align:center; } .vorfooter h2{ margin-inline:auto; margin-bottom:var(--sp-3); } .vorfooter p{ color:var(--tinte-2); margin-bottom:var(--sp-6); } .fuss{ background:var(--rot-900); color:#EDE2D6; border-top:4px solid var(--gold-500); } .fuss a{ color:var(--gold-300); text-decoration:none; } .fuss a:hover{ text-decoration:underline; } .fuss__innen{ display:grid; gap:var(--sp-7); padding-block:var(--sp-9); } @media (min-width:56.25rem){ .fuss__innen{ grid-template-columns:repeat(4,1fr); } } .fuss__marke{ font-family:var(--f-serif); font-size:var(--fs-h3); color:#fff; margin-bottom:var(--sp-3); } .fuss__claim{ font-size:var(--fs-klein); margin-bottom:var(--sp-4); } .fuss h4{ color:#fff; font-size:var(--fs-klein); text-transform:uppercase; letter-spacing:.08em; font-family:var(--f-sans); margin-bottom:var(--sp-3); } .fuss ul{ display:grid; gap:.6rem; } .fuss__leiste{ border-top:1px solid rgba(255,255,255,.12); padding-block:var(--sp-5); } .fuss__leiste .rahmen{ display:flex; flex-wrap:wrap; gap:var(--sp-4); justify-content:space-between; align-items:center; font-size:var(--fs-mini); } .fuss__leiste ul{ display:flex; flex-wrap:wrap; gap:var(--sp-5); } /* Pakete/Optionen -- Auswahlzustand über :has(), siehe 12_DESIGNKONZEPT 5.6 */ .paket{ cursor:pointer; } .paket:has(input:checked){ box-shadow:inset 0 0 0 2px var(--gold-500); background:var(--gold-100); } .paket:has(input:focus-visible){ box-shadow:var(--fokus); } .option{ display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4); background:var(--weiss); border:1px solid var(--linie); border-radius:var(--r-3); padding:var(--sp-4); cursor:pointer; } .option:has(input:checked){ box-shadow:inset 0 0 0 2px var(--gold-500); background:var(--gold-100); } .option:has(input:focus-visible){ box-shadow:var(--fokus); } .option__beschreibung{ font-size:var(--fs-mini); color:var(--tinte-3); } .option__preis{ font-family:var(--f-serif); font-size:var(--fs-h4); white-space:nowrap; } /* Zeitfenster-Auswahl -- die Kernkomponente, siehe 12_DESIGNKONZEPT 5.5 */ .slots__raster{ display:grid; grid-template-columns:repeat(auto-fill,minmax(9.25rem,1fr)); gap:var(--sp-3); } .slot{ position:relative; min-height:5.25rem; display:grid; gap:.2rem; align-content:center; background:var(--weiss); border:1px solid var(--linie-stark); border-radius:var(--r-2); padding:var(--sp-3); cursor:pointer; transition:transform var(--t-schnell) var(--e-standard); } .slot:hover{ transform:translateY(-2px); } .slot:has(input:focus-visible){ box-shadow:var(--fokus); } .slot__zeit{ font-family:var(--f-serif); font-size:var(--fs-h4); } .slot__fenster{ font-size:var(--fs-mini); color:var(--tinte-3); } .slot__stufe{ font-size:var(--fs-mini); font-weight:600; } .slot__preis{ font-family:var(--f-serif); font-size:var(--fs-preis); font-variant-numeric:tabular-nums; margin-top:.2rem; } .slot--spar{ border-left:3px solid var(--ampel-spar); } .slot--spar .slot__stufe{ color:var(--ampel-spar-text); } .slot--spar:has(input:checked){ background:var(--ampel-spar-flaeche); box-shadow:inset 0 0 0 2px var(--ampel-spar); } .slot--standard{ border-left:3px solid var(--ampel-standard); } .slot--standard .slot__stufe{ color:var(--ampel-standard-text); } .slot--standard:has(input:checked){ background:var(--ampel-standard-flaeche); box-shadow:inset 0 0 0 2px var(--ampel-standard); } .slot--exklusiv{ border-left:3px solid var(--ampel-exklusiv); } .slot--exklusiv .slot__stufe{ color:var(--ampel-exklusiv-text); } .slot--exklusiv:has(input:checked){ background:var(--ampel-exklusiv-flaeche); box-shadow:inset 0 0 0 2px var(--ampel-exklusiv); } /* "Kind hinzufügen"-Fieldsets in der Buchungsstrecke */ .kind{ border:1px solid var(--linie); border-radius:var(--r-3); background:var(--weiss); padding:var(--sp-5); display:grid; gap:var(--sp-4); margin-bottom:var(--sp-4); } /* Zitatflächen -- Bildplatzhalter bis zum Fotoshooting, siehe 12_DESIGNKONZEPT 7.4d */ .bildflaeche{ aspect-ratio:3/2; border-radius:var(--r-4); background:linear-gradient(148deg, #F4EDE1 0%, var(--sand-tief) 100%); box-shadow:inset 0 0 0 1px rgba(168,132,47,.25); display:grid; place-items:center; gap:var(--sp-4); padding:8%; text-align:center; } .bildflaeche__ornament{ width:44px; height:44px; color:var(--gold-400); } .bildflaeche__satz{ font-family:var(--f-serif); font-size:var(--fs-h4); line-height:1.45; color:var(--gold-700); max-width:26ch; } .bildflaeche--16-9{ aspect-ratio:16/9; } .bildflaeche--quadrat{ aspect-ratio:1/1; } .bildflaeche img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; } /* Formularfelder -- siehe 12_DESIGNKONZEPT.md Kapitel 5.6 */ .feld{ display:block; } .feld__label{ font-size:var(--fs-mini); font-weight:600; color:var(--tinte-3); margin-bottom:.375rem; display:block; } .feld__eingabe{ width:100%; height:3.25rem; padding:0 .875rem; font-size:1.0625rem; font-family:inherit; color:var(--tinte); background:var(--weiss); border:1.5px solid var(--linie-stark); border-radius:var(--r-2); transition:border-color 140ms, box-shadow 140ms; } .feld__eingabe::placeholder{ color:#9A8B83; } .feld__eingabe:hover{ border-color:#6E6156; } .feld__eingabe:focus{ outline:none; border-color:var(--rot-700); box-shadow:0 0 0 3px rgba(138,34,51,.16); } .feld__eingabe:focus-visible{ box-shadow:var(--fokus); } .feld__eingabe:disabled{ background:#F4EFE7; color:var(--tinte-4); border-color:#DCCFBD; } textarea.feld__eingabe{ height:auto; min-height:7rem; padding-block:.75rem; resize:vertical; } select.feld__eingabe{ appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--tinte-3) 50%), linear-gradient(135deg, var(--tinte-3) 50%, transparent 50%); background-position:calc(100% - 1.2rem) center, calc(100% - 0.9rem) center; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; } .feld__hinweis{ font-size:var(--fs-mini); color:var(--tinte-3); margin-top:.375rem; } .feld__fehler{ display:flex; gap:.5rem; align-items:flex-start; margin-top:.375rem; font-size:var(--fs-mini); color:#8E1E17; } .feld__fehler::before{ content:"!"; flex:0 0 1rem; width:1rem; height:1rem; border-radius:50%; background:var(--fehler); color:#fff; font-size:.6875rem; font-weight:600; line-height:1rem; text-align:center; } /* Hilfe-Knopf + Modal -- auf jeder Seite oben rechts, siehe includes/kopf.php */ .hilfe-knopf{ position:fixed; top:var(--sp-4); right:var(--sp-4); z-index:var(--z-toast); width:40px; height:40px; border-radius:50%; border:1.5px solid var(--gold-500); background:rgba(251,247,240,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--rot-700); font-family:var(--f-serif); font-size:1.05rem; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:var(--schatten-2); } .hilfe-knopf:hover{ background:var(--gold-100); } @media (min-width:56.25rem){ .hilfe-knopf{ top:var(--sp-5); right:var(--sp-5); } } .hilfe-modal[hidden]{ display:none; } .hilfe-modal{ position:fixed; inset:0; z-index:var(--z-dialog); display:flex; align-items:center; justify-content:center; padding:var(--sp-5); } .hilfe-modal__hintergrund{ position:absolute; inset:0; background:rgba(36,28,26,.5); } .hilfe-modal__karte{ position:relative; background:var(--weiss); border-radius:var(--r-4); padding:var(--sp-7); max-width:30rem; width:100%; max-height:80vh; overflow-y:auto; box-shadow:var(--schatten-4); } .hilfe-modal__schliessen{ position:absolute; top:var(--sp-4); right:var(--sp-4); width:36px; height:36px; border-radius:50%; border:0; background:var(--sand); font-size:1.25rem; line-height:1; cursor:pointer; } .hilfe-modal__karte h2{ margin-bottom:var(--sp-4); padding-right:var(--sp-7); } .hilfe-modal__text p{ margin-bottom:var(--sp-3); color:var(--tinte-2); } .hilfe-modal__text p:last-child{ margin-bottom:0; } /* Mobiles Menü ------------------------------------------------------------ */ .menue{ position:fixed; inset:0; z-index:var(--z-overlay); visibility:hidden; } .menue.ist-offen{ visibility:visible; } .menue__hintergrund{ position:absolute; inset:0; background:rgba(36,28,26,.45); opacity:0; transition:opacity var(--t-normal); } .menue.ist-offen .menue__hintergrund{ opacity:1; } .menue__panel{ position:absolute; top:0; right:0; bottom:0; width:min(20rem,84vw); background:rgba(251,247,240,.96); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); transform:translateX(100%); transition:transform 280ms var(--e-aus); display:flex; flex-direction:column; padding:var(--sp-6); } .menue.ist-offen .menue__panel{ transform:translateX(0); } .menue__link{ display:flex; align-items:center; height:56px; font-size:var(--fs-h4); color:var(--tinte); text-decoration:none; border-bottom:1px solid var(--linie); } .menue__fuss{ margin-top:auto; display:grid; gap:var(--sp-3); }