/* ===================================================================== 321Urlaub.de – Stylesheet Farbwelt kommt aus config.php (THEME) und wird im gesetzt. ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } :root { --brand: #ff5a3c; --brand2: #ffb703; --ocean: #0d9bd8; --jungle: #00b884; --berry: #8b3ffd; --ink: #12233b; --paper: #fffdf9; --card: #ffffff; --muted: #5b6b80; --line: #e8e3dc; --shadow: 0 6px 20px rgba(18, 35, 59, .09); --shadow-lg: 0 18px 46px rgba(18, 35, 59, .16); --radius: 18px; --wrap: 1180px; } html { scroll-behavior: smooth; } body { margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; } h1, h2, h3, .logo-txt { font-family: "Baloo 2", Inter, system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; } h1 { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.9rem); font-weight: 800; } h2 { font-size: clamp(1.35rem, 1rem + 1.4vw, 2rem); font-weight: 800; } h3 { font-size: 1.12rem; font-weight: 700; } a { color: inherit; } img { max-width: 100%; display: block; } .wrap { width: min(var(--wrap), 100% - 2rem); margin-inline: auto; } /* "Zum Inhalt springen": unsichtbar, aber ohne die Seite zu verbreitern */ .skip { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 100; border-radius: 0 0 10px 0; } .skip:focus { width: auto; height: auto; clip-path: none; } /* --- Schutz gegen waagerechtes Scrollen auf Handys ------------------ */ html, body { max-width: 100%; overflow-x: clip; } h1, h2, h3, p, li, td, th, a, summary { overflow-wrap: break-word; } /* ------------------------------ Kopf ------------------------------ */ .site-head { position: sticky; top: 0; z-index: 50; background: linear-gradient(100deg, var(--brand) 0%, #ff7a45 45%, var(--brand2) 100%); color: #fff; box-shadow: 0 2px 14px rgba(18, 35, 59, .18); } .head-inner { display: flex; align-items: center; gap: 1rem; padding: .6rem 0 0; flex-wrap: wrap; } .logo { order: 1; } .head-search { order: 2; margin-left: auto; } .burger { order: 3; } .main-nav { order: 4; } .logo { display: flex; align-items: center; gap: .5rem; text-decoration: none; font-weight: 800; min-width: 0; } .logo-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--brand); font-size: 1.35rem; flex: none; box-shadow: 0 3px 10px rgba(0, 0, 0, .18); } .logo-txt { font-size: 1.4rem; margin: 0; display: block; } /* Name und Untertitel stehen untereinander */ .logo-text { display: block; min-width: 0; } .logo-claim { display: block; font-family: Inter, system-ui, sans-serif; font-weight: 500; font-size: .76rem; line-height: 1.25; letter-spacing: .005em; opacity: .92; margin-top: .12rem; max-width: 60ch; } /* mit Bild-Logo: Untertitel darunter, deshalb Spalte statt Zeile */ .logo--bild { flex-direction: column; align-items: flex-start; gap: .2rem; } /* eigenes Logo aus dem Backend */ .logo-img { display: block; height: 46px; width: auto; max-width: min(60vw, 260px); object-fit: contain; } .logo--foot .logo-img { height: 40px; filter: brightness(0) invert(1); } .main-nav { display: flex; gap: .3rem; flex-wrap: wrap; flex-basis: 100%; margin-top: .55rem; padding: .45rem 0; border-top: 1px solid rgba(255, 255, 255, .22); } .main-nav a { text-decoration: none; padding: .42rem .8rem; border-radius: 999px; font-weight: 600; font-size: .94rem; white-space: nowrap; background: rgba(255, 255, 255, .14); transition: background .18s; } .main-nav a:hover, .main-nav a[aria-current="page"] { background: rgba(255, 255, 255, .32); } .head-search { display: flex; flex: 1 1 230px; max-width: 330px; } .head-search input { flex: 1; min-width: 0; border: 0; border-radius: 999px 0 0 999px; padding: .55rem .95rem; font: inherit; font-size: .93rem; } .head-search button { border: 0; border-radius: 0 999px 999px 0; padding: 0 .95rem; cursor: pointer; background: var(--ink); color: #fff; font-size: 1rem; } .head-search input:focus, .head-search button:focus-visible { outline: 3px solid rgba(255,255,255,.8); outline-offset: 1px; } .burger { display: none; background: none; border: 0; cursor: pointer; padding: .4rem; } .burger span { display: block; width: 24px; height: 3px; background: #fff; border-radius: 3px; margin: 4px 0; } /* --------------------------- Brotkrümel --------------------------- */ .crumbs { font-size: .85rem; color: var(--muted); padding: .9rem 0 0; display: flex; gap: .4rem; flex-wrap: wrap; } .crumbs a { text-decoration: none; } .crumbs a:hover { text-decoration: underline; } /* ------------------------------ Hero ------------------------------ */ /* kein overflow:hidden – sonst würde die Vorschlagsliste abgeschnitten; die Bilder werden stattdessen in .hero-slides beschnitten */ .hero { position: relative; color: #fff; isolation: isolate; z-index: 20; /* Vorschlagsliste über den folgenden Abschnitten */ background: radial-gradient(1100px 420px at 12% -10%, rgba(255,255,255,.30), transparent 60%), linear-gradient(125deg, var(--ocean) 0%, #1bb4e6 35%, var(--jungle) 100%); padding: clamp(2.2rem, 1rem + 6vw, 4.4rem) 0 clamp(2.6rem, 1rem + 7vw, 4.6rem); } /* ---------------- Bilderslider im Hintergrund ---------------------- */ .hero-slides { position: absolute; inset: 0; z-index: -2; overflow: hidden; } .hero-slide { position: absolute; inset: 0; opacity: 0; background-size: cover; background-position: center; transition: opacity 1.4s ease; will-change: opacity; } .hero-slide.on { opacity: 1; animation: kenburns 14s ease-out both; } @keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.12); } } /* Schleier nur so stark wie nötig: links dunkel für die Schrift, rechts bleibt das Foto gut sichtbar */ .hero--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(6, 26, 45, .84) 0%, rgba(6, 26, 45, .62) 38%, rgba(6, 26, 45, .28) 70%, rgba(6, 26, 45, .12) 100%), linear-gradient(0deg, rgba(6, 26, 45, .5) 0%, rgba(6, 26, 45, 0) 55%); } .hero-dots { position: absolute; right: 1.1rem; top: 1.1rem; display: flex; gap: .45rem; z-index: 2; } .hero-dot { width: 10px; height: 10px; padding: 0; border-radius: 50%; cursor: pointer; border: 2px solid rgba(255, 255, 255, .85); background: transparent; transition: background .2s, transform .2s; } .hero-dot.on { background: #fff; transform: scale(1.2); } .hero-dot:hover { background: rgba(255, 255, 255, .6); } .hero::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 60px; background: var(--paper); clip-path: polygon(0 60px, 100% 0, 100% 60px); } .hero h1 { max-width: 18ch; text-shadow: 0 2px 14px rgba(0, 0, 0, .18); } .hero p.lead { font-size: clamp(1rem, .95rem + .35vw, 1.2rem); max-width: 56ch; opacity: .96; } .searchbox { margin-top: 1.6rem; background: #fff; border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow-lg); display: grid; gap: .7rem; grid-template-columns: 2fr 1.2fr 1.2fr auto; align-items: end; } .searchbox label { display: block; font-size: .76rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .25rem; } .searchbox input, .searchbox select { width: 100%; padding: .62rem .75rem; border: 2px solid var(--line); border-radius: 12px; font: inherit; background: #fff; color: var(--ink); } .searchbox input:focus, .searchbox select:focus { outline: 0; border-color: var(--ocean); } /* --------------------------- Buttons ----------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .72rem 1.35rem; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-weight: 700; text-decoration: none; white-space: nowrap; transition: transform .15s, box-shadow .15s, filter .15s; } .btn:hover { transform: translateY(-2px); filter: brightness(1.04); } .btn--go { background: linear-gradient(95deg, var(--brand), var(--brand2)); color: #fff; box-shadow: 0 8px 20px rgba(255, 90, 60, .35); } .btn--ghost { background: #fff; color: var(--ink); border: 2px solid var(--line); } /* breite Schaltflächen dürfen umbrechen – sonst sprengt ein langer Veranstaltername auf dem Handy das Layout */ .btn--wide { width: 100%; white-space: normal; text-align: center; } /* -------------------------- Abschnitte --------------------------- */ .section { padding: clamp(2rem, 1rem + 4vw, 3.4rem) 0; } .section--tint { background: linear-gradient(180deg, #fff 0%, #fdf6ee 100%); } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.3rem; } .section-head p { color: var(--muted); margin: .1rem 0 0; } .section-head a { font-weight: 700; color: var(--brand); text-decoration: none; } .section-head a:hover { text-decoration: underline; } /* ------------------------- Kachel-Raster ------------------------- */ .tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); } .tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 140px; padding: 1rem; border-radius: var(--radius); color: #fff; text-decoration: none; overflow: hidden; box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s; } .tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .tile .emoji { font-size: 1.9rem; position: absolute; top: .8rem; right: .9rem; opacity: .95; } .tile strong { font-family: "Baloo 2", Inter, system-ui, sans-serif; font-size: 1.18rem; } .tile span.meta { font-size: .85rem; opacity: .92; } /* Kachel mit echtem Foto: Farbverlauf liegt halbtransparent darüber */ .tile--photo { background-image: var(--photo); background-size: cover; background-position: center; } .tile--photo::before { content: ""; position: absolute; inset: 0; opacity: .92; transition: opacity .25s; } .tile--photo:hover::before { opacity: .78; } .tile--photo > * { position: relative; z-index: 1; } /* oben durchsichtig (Foto sichtbar), unten farbig (Schrift lesbar) */ .tile--photo.t-ocean::before { background: linear-gradient(180deg, rgba(13,155,216,.12) 0%, rgba(6,60,95,.55) 45%, rgba(4,45,72,.92) 100%); } .tile--photo.t-jungle::before { background: linear-gradient(180deg, rgba(0,184,132,.12) 0%, rgba(4,80,58,.55) 45%, rgba(3,58,42,.92) 100%); } .tile--photo.t-berry::before { background: linear-gradient(180deg, rgba(139,63,253,.12) 0%, rgba(60,16,105,.55) 45%, rgba(42,8,78,.92) 100%); } .tile--photo.t-brand::before { background: linear-gradient(180deg, rgba(255,90,60,.12) 0%, rgba(130,38,14,.55) 45%, rgba(96,26,8,.92) 100%); } .tile--photo.t-ink::before { background: linear-gradient(180deg, rgba(18,35,59,.12) 0%, rgba(12,26,44,.6) 45%, rgba(6,14,26,.94) 100%); } .t-ocean { background: linear-gradient(135deg, #0d9bd8, #23c9f0); } .t-jungle { background: linear-gradient(135deg, #00b884, #6fdc6f); } .t-berry { background: linear-gradient(135deg, #8b3ffd, #d05bf0); } .t-brand { background: linear-gradient(135deg, #ff5a3c, #ffb703); } .t-ink { background: linear-gradient(135deg, #12233b, #33547e); } /* ----------------------- Reiseziele mit Foto ---------------------- */ .dest-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .dest-grid--small { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .8rem; } .dest { position: relative; display: block; border-radius: var(--radius); overflow: hidden; text-decoration: none; color: #fff; box-shadow: var(--shadow); aspect-ratio: 4 / 3; transition: transform .18s, box-shadow .18s; } .dest:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .dest img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .dest:hover img { transform: scale(1.07); } .dest-body { position: absolute; inset: auto 0 0 0; padding: .9rem .9rem .8rem; background: linear-gradient(0deg, rgba(8, 24, 40, .92) 10%, rgba(8, 24, 40, .55) 55%, transparent 100%); display: flex; flex-direction: column; gap: .1rem; } .dest-body strong { font-family: "Baloo 2", Inter, system-ui, sans-serif; font-size: 1.12rem; line-height: 1.2; } .dest-body span { font-size: .82rem; opacity: .92; } .dest-grid--small .dest { aspect-ratio: 3 / 2; } .dest-grid--small .dest-body strong { font-size: .98rem; } /* ---------------------------- Chips ------------------------------ */ .chips { display: flex; flex-wrap: wrap; gap: .5rem; } .chip { display: inline-flex; align-items: center; gap: .35rem; background: #fff; border: 2px solid var(--line); border-radius: 999px; padding: .4rem .9rem; text-decoration: none; font-weight: 600; font-size: .9rem; transition: border-color .15s, transform .15s; } .chip:hover { border-color: var(--brand); transform: translateY(-2px); } .chip b { color: var(--muted); font-weight: 500; font-size: .82rem; } .chip--on { background: var(--ink); color: #fff; border-color: var(--ink); } /* -------------------------- Angebote ----------------------------- */ .grid-offers { display: grid; gap: 1.35rem; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); } .card { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s; border: 1px solid var(--line); } .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .card-media { position: relative; aspect-ratio: 16 / 10; background: #eef2f6; overflow: hidden; } .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .card:hover .card-media img { transform: scale(1.05); } /* zweites Bild: liegt darüber und wird beim Überfahren eingeblendet */ .card-img2 { position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%; opacity: 0; transition: opacity .45s ease; } .card:hover .card-img2 { opacity: 1; } .card-count { position: absolute; right: .6rem; bottom: .6rem; z-index: 2; background: rgba(18, 35, 59, .78); color: #fff; font-size: .72rem; font-weight: 700; padding: .2rem .5rem; border-radius: 999px; } .badges { position: absolute; top: .6rem; left: .6rem; display: flex; gap: .35rem; flex-wrap: wrap; } .badge { background: rgba(18, 35, 59, .82); color: #fff; font-size: .72rem; font-weight: 700; padding: .22rem .55rem; border-radius: 999px; backdrop-filter: blur(3px); } .badge--deal { background: linear-gradient(95deg, var(--brand), var(--brand2)); } .badge--cat { background: rgba(13, 155, 216, .92); } .card-body { padding: .95rem 1rem 1.1rem; display: flex; flex-direction: column; flex: 1; gap: .5rem; } .card-place { font-size: .82rem; color: var(--muted); font-weight: 600; } .card h3 { margin: 0; font-size: 1.05rem; } .card h3 a { text-decoration: none; } .card h3 a:hover { color: var(--brand); } .card-teaser { font-size: .88rem; color: var(--muted); margin: 0; } .card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .6rem; } .price { display: flex; flex-direction: column; line-height: 1.1; } .price small { font-size: .7rem; color: var(--muted); } .price b { font-family: "Baloo 2", Inter, system-ui, sans-serif; font-size: 1.5rem; color: var(--brand); } .price s { font-size: .78rem; color: var(--muted); } /* ------------------------ Suchvorschläge -------------------------- */ .suggest-wrap { position: relative; } .suggest { position: absolute; top: calc(100% + .4rem); left: 0; right: 0; z-index: 60; background: #fff; color: var(--ink); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line); max-height: min(62vh, 430px); overflow-y: auto; } .suggest-item { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .6rem .8rem; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line); } .suggest-item:last-child { border-bottom: 0; } .suggest-item:hover, .suggest-item[aria-selected="true"] { background: #fff3ec; } .suggest-item .ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, var(--ocean), var(--jungle)); color: #fff; font-size: 1rem; overflow: hidden; } .suggest-item .ic img { width: 100%; height: 100%; object-fit: cover; } .suggest-item .tx { min-width: 0; flex: 1; } .suggest-item .tx b { display: block; font-size: .93rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .suggest-item .tx small { color: var(--muted); font-size: .78rem; } .suggest-item .kind { flex: none; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: #f1f4f8; padding: .15rem .45rem; border-radius: 999px; } .suggest-empty { padding: .8rem; color: var(--muted); font-size: .9rem; } .head-search .suggest { top: calc(100% + .45rem); } /* -------------------------- Filterleiste -------------------------- */ .toolbar { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; box-shadow: var(--shadow); margin-bottom: 1.4rem; } .toolbar select, .toolbar input { padding: .5rem .7rem; border: 2px solid var(--line); border-radius: 10px; font: inherit; font-size: .9rem; } .toolbar .spacer { margin-left: auto; color: var(--muted); font-size: .9rem; } /* --------------------------- Detailseite -------------------------- */ .detail { display: grid; grid-template-columns: 1.55fr 1fr; gap: 2rem; align-items: start; padding-top: 1.4rem; } .detail > * { min-width: 0; } /* verhindert, dass lange Wörter die Spalte aufblähen */ .gallery { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #eef2f6; } .gallery-main { aspect-ratio: 16 / 10; } .gallery-main img { width: 100%; height: 100%; object-fit: cover; } .gallery-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; padding: .35rem; background: #fff; } .gallery-thumbs button { padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer; background: none; } .gallery-thumbs button[aria-current="true"] { border-color: var(--brand); } .gallery-thumbs img { aspect-ratio: 4/3; object-fit: cover; width: 100%; } .booking { position: sticky; top: 90px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; box-shadow: var(--shadow-lg); } .booking .price b { font-size: 2.1rem; } .booking ul { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .45rem; font-size: .9rem; } .booking li { display: flex; gap: .5rem; } .booking li span { flex: none; } .hint { font-size: .78rem; color: var(--muted); margin-top: .8rem; } .preishinweis { font-size: .76rem; color: var(--muted); margin: .2rem 0 .9rem; line-height: 1.45; } /* ------------------------- Teilen-Leiste --------------------------- */ .share { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); } .share-label { display: block; font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .55rem; } .share-btns { display: flex; flex-wrap: wrap; gap: .4rem; } .share-btn { display: inline-flex; align-items: center; gap: .3rem; font: inherit; font-size: .82rem; font-weight: 600; line-height: 1; padding: .45rem .7rem; border-radius: 999px; cursor: pointer; text-decoration: none; color: #fff; border: 0; white-space: nowrap; transition: transform .12s ease, filter .12s ease; } .share-btn:hover { transform: translateY(-2px); filter: brightness(1.08); } .share-btn:focus-visible { outline: 3px solid var(--ocean); outline-offset: 2px; } .share-btn--native { background: var(--ink); } .share-btn--wa { background: #1faf54; } .share-btn--fb { background: #2d69d0; } .share-btn--tw { background: #16181c; } .share-btn--tg { background: #1f92d0; } .share-btn--pi { background: #c8232c; } .share-btn--ml { background: #5b6b80; } .share-btn--copy { background: #fff; color: var(--ink); border: 2px solid var(--line); padding: .35rem .65rem; } .share-btn--copy:hover { border-color: var(--ocean); } .share-ok { display: inline-block; margin-top: .55rem; font-size: .8rem; font-weight: 600; color: #046c46; background: #e3fbef; border-radius: 999px; padding: .2rem .6rem; } /* display:inline-block würde das hidden-Attribut aushebeln */ .share-ok[hidden], .share-btn[hidden] { display: none; } .prose { max-width: 70ch; } .prose p { margin: 0 0 1rem; } .facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .8rem; margin: 1.4rem 0; padding: 0; list-style: none; } .facts li { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .7rem .9rem; } .facts small { display: block; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; } .facts strong { font-size: 1rem; } /* -------------------------- Seitenzahlen -------------------------- */ .pager { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; margin: 2.2rem 0 0; } .pager a, .pager span { min-width: 42px; text-align: center; padding: .5rem .7rem; border-radius: 12px; text-decoration: none; border: 2px solid var(--line); background: #fff; font-weight: 600; } .pager .on { background: var(--brand); color: #fff; border-color: var(--brand); } /* nur für Screenreader sichtbar */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Sternchen an Werbelinks */ .ad-mark { font-size: .8em; opacity: .85; } /* eigener Einleitungstext auf der Detailseite */ .lead-text { font-size: 1.06rem; } /* übernommener Text des Veranstalters – klar als Zitat gekennzeichnet */ .feed-quote { margin: 0 0 1.4rem; padding: .9rem 1.1rem; background: #f7fafd; border-left: 4px solid var(--ocean); border-radius: 0 12px 12px 0; } .feed-quote p { margin: 0 0 .7rem; } .feed-quote footer { font-size: .82rem; color: var(--muted); } /* eigene Unterseiten (Impressum, Ratgeber …) */ .page-content { max-width: 72ch; } .page-content h2 { margin-top: 1.8rem; } .page-content ul, .page-content ol { padding-left: 1.3rem; } .page-content img { border-radius: 12px; margin: 1rem 0; } .page-content blockquote { border-left: 4px solid var(--ocean); margin: 1.2rem 0; padding: .3rem 0 .3rem 1rem; color: #33506e; } .page-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; } .page-content th, .page-content td { border: 1px solid var(--line); padding: .5rem .7rem; text-align: left; } .page-updated { font-size: .82rem; color: var(--muted); margin-top: 2rem; } /* ------------------------- SEO-Textblock -------------------------- */ .seo-text { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; margin-top: 2.4rem; } .seo-text h2 { margin-top: 0; } .seo-text h3 { margin-top: 1.4rem; } .faq details { border-top: 1px solid var(--line); padding: .8rem 0; } .faq summary { cursor: pointer; font-weight: 700; } .faq p { margin: .6rem 0 0; color: var(--muted); } /* ------------------------------ Fuß ------------------------------- */ .site-foot { margin-top: 3rem; background: var(--ink); color: #d8e2ef; padding: 2.6rem 0 1.4rem; } .foot-grid { display: grid; gap: 1.8rem; grid-template-columns: 1.6fr 1fr 1fr 1fr; } .logo--foot { color: #fff; } .logo--foot .logo-mark { background: linear-gradient(135deg, var(--brand), var(--brand2)); color: #fff; } .foot-claim { font-size: .9rem; color: #9fb2c8; } .foot-h { font-size: 1rem; color: #fff; margin-bottom: .6rem; } .foot-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; font-size: .9rem; } .foot-list a { text-decoration: none; color: #bfcede; } .foot-list a:hover { color: #fff; text-decoration: underline; } .foot-note { border-top: 1px solid rgba(255,255,255,.14); margin-top: 2rem; padding-top: 1rem; font-size: .78rem; color: #93a6bc; } /* ----------------------------- Admin ------------------------------ */ .admin-body { background: #f3f5f9; } .panel { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; margin-bottom: 1.4rem; } .drop { border: 3px dashed var(--ocean); border-radius: var(--radius); padding: 2.4rem 1rem; text-align: center; background: #f2fbff; transition: background .2s, border-color .2s; } .drop.drag { background: #e2f6ff; border-color: var(--brand); } table.data { width: 100%; border-collapse: collapse; font-size: .92rem; } table.data th, table.data td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--line); } table.data th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; } .kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; } .kpi div { background: linear-gradient(135deg, var(--ocean), var(--jungle)); color: #fff; border-radius: 14px; padding: 1rem; } .kpi b { display: block; font-family: "Baloo 2", Inter, system-ui, sans-serif; font-size: 1.8rem; } .msg { padding: .9rem 1.1rem; border-radius: 12px; margin-bottom: 1rem; font-weight: 600; } .msg--ok { background: #e3fbef; color: #046c46; border: 1px solid #9ee6c4; } .msg--err { background: #ffeaea; color: #9b1c1c; border: 1px solid #f5b5b5; } /* --------------------------- Responsive --------------------------- */ @media (max-width: 900px) { .detail { grid-template-columns: 1fr; } .booking { position: static; } .foot-grid { grid-template-columns: 1fr 1fr; } .searchbox { grid-template-columns: 1fr 1fr; } } @media (max-width: 700px) { .burger { display: block; margin-left: .2rem; } .main-nav { display: none; width: 100%; flex-direction: column; gap: .25rem; padding: .6rem 0 .5rem; margin-top: .4rem; } .main-nav.open { display: flex; } .head-search { max-width: none; flex-basis: 100%; order: 5; margin: 0 0 .55rem; } .searchbox { grid-template-columns: 1fr; } .foot-grid { grid-template-columns: 1fr; } .gallery-thumbs { grid-template-columns: repeat(4, 1fr); } /* auf dem Handy den Schleier von oben nach unten aufbauen, damit oben möglichst viel vom Foto sichtbar bleibt */ .hero--photo::before { background: linear-gradient(180deg, rgba(6, 26, 45, .38) 0%, rgba(6, 26, 45, .68) 45%, rgba(6, 26, 45, .9) 100%); } .hero-dots { top: .7rem; right: .8rem; } /* Auf dem Handy kleiner und einzeilig – sonst schiebt der Untertitel den Kopfbereich unnötig in die Höhe */ .logo-claim { font-size: .68rem; max-width: min(58vw, 34ch); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* auf sehr schmalen Geräten würde der Untertitel nur noch abgeschnitten dastehen – dann lieber ganz weglassen */ @media (max-width: 380px) { .logo-claim { display: none; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto; } } /* ------------------------- Preisspiegel ---------------------------- */ .preisspiegel { margin: 2.2rem 0 1rem; } .preisspiegel h2 { margin-bottom: .4rem; } .ps-intro { color: var(--muted); font-size: .92rem; max-width: 70ch; margin: 0 0 1.2rem; } .ps-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } .ps-block { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.2rem; overflow-x: auto; } .ps-block h3 { margin: 0 0 .7rem; font-size: 1rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; } .ps-tab { width: 100%; border-collapse: collapse; font-size: .92rem; } .ps-tab th, .ps-tab td { text-align: right; padding: .42rem .3rem; border-bottom: 1px solid var(--line); } .ps-tab thead th { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; border-bottom-width: 2px; } .ps-tab th[scope=row], .ps-tab thead th:first-child { text-align: left; font-weight: 600; } .ps-tab tbody tr:last-child th, .ps-tab tbody tr:last-child td { border-bottom: 0; } .ps-tab tbody tr:hover { background: #fafbfd; } .ps-tab strong { color: var(--brand); }