/* ========================================================================== Nordseeherz - Nordsee-Immobilienportal Design-System / Basis-Stylesheet (c) pagewerbung.de GmbH & Co. KG ========================================================================== */ /* --- Schriften ---------------------------------------------------------- */ @font-face{font-family:'Inter';src:url('../fonts/Inter-400.ttf') format('truetype');font-weight:400;font-display:swap} @font-face{font-family:'Inter';src:url('../fonts/Inter-500.ttf') format('truetype');font-weight:500;font-display:swap} @font-face{font-family:'Inter';src:url('../fonts/Inter-600.ttf') format('truetype');font-weight:600;font-display:swap} @font-face{font-family:'Inter';src:url('../fonts/Inter-700.ttf') format('truetype');font-weight:700;font-display:swap} /* Die Schreibschrift der Marke. Drei Schnitte liegen bereit, umgestellt wird allein ueber die beiden src-Zeilen und den passenden size-adjust-Wert: AlexBrush aktiv eingebaut size-adjust 119% Damion kraeftiger Pinselschnitt size-adjust 108% Allura feiner, gleichmaessiger size-adjust 129% Norican aufrechter, ruhiger size-adjust 100% KaushanScript breiter, runder size-adjust 96% */ @font-face{font-family:'Nordseeschrift'; src:url('../fonts/AlexBrush.woff2') format('woff2'), url('../fonts/AlexBrush.ttf') format('truetype'); font-weight:400;font-style:normal;font-display:swap;size-adjust:119%} @font-face{font-family:'Fraunces';src:url('../fonts/Fraunces-500.ttf') format('truetype');font-weight:500;font-display:swap} @font-face{font-family:'Fraunces';src:url('../fonts/Fraunces-650.ttf') format('truetype');font-weight:650;font-display:swap} /* --- Tokens ------------------------------------------------------------- */ :root{ --ink:#0c2c58; /* Kein Petrol mehr. Die Signalfarbe ist jetzt ein Blau aus der Wortmarke, Flaechen bekommen den Verlauf --blau-verlauf. */ --signal:#17457e; --signal-tief:#0c2c58; --signal-hell:#2a63a8; --blau-verlauf:linear-gradient(112deg,#0c2c58 0%,#17457e 52%,#0c2c58 100%); --blau-verlauf-hell:linear-gradient(112deg,#17457e 0%,#2a63a8 55%,#17457e 100%); --sky:#9fcddd; --soft-blue:#d8edf3; --creige:#d8cbbb; --sand:#efe7dc; --shell:#fbf7ef; --foam:#ffffff; --sage:#5b7597; /* Objektfarben - Vermietung */ --typ-fewo:#5e8f63; /* Ferienwohnung - gruen */ --typ-fehaus:#2f5d3f; /* Ferienhaus - dunkelgruen */ --typ-hotel:#2f7fa8; /* Hotelzimmer - blau */ --typ-zimmer:#7fb4cc; /* Ferienzimmer - hellblau */ /* Objektfarben - Verkauf */ --typ-kaufhaus:#a8422c; /* Haus zum Kauf - backsteinrot */ --typ-kaufwohnung:#c8734b; /* ETW zum Kauf - hell backstein */ --typ-grund:#8a7b52; /* Grundstueck - duenengelb */ --text-weich:rgba(12,44,88,.82); --text-leise:rgba(12,44,88,.62); --stern-voll:#d9a441; --stern-leer:rgba(12,44,88,.16); --line:rgba(12,44,88,.16); --line-soft:rgba(12,44,88,.09); --shadow-s:0 2px 10px rgba(12,44,88,.08); --shadow-m:0 12px 34px rgba(12,44,88,.11); --shadow-l:0 24px 70px rgba(12,44,88,.17); --r-card:8px; --r-input:8px; --r-pill:999px; --wrap:1280px; --gap:clamp(18px,3vw,34px); --sec:clamp(56px,7vw,104px); } /* --- Reset -------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--shell);color:var(--ink); font-family:'Inter',-apple-system,Segoe UI,Arial,sans-serif; font-size:16px;line-height:1.62;font-weight:400; -webkit-font-smoothing:antialiased; } img,svg{max-width:100%;display:block} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} ul{margin:0;padding:0;list-style:none} h1,h2,h3{font-family:'Nordseeschrift','Segoe Script','Bradley Hand',cursive;font-weight:400;line-height:1.16;margin:0;letter-spacing:.005em; color:var(--ink)} h4{font-family:'Nordseeschrift','Segoe Script','Bradley Hand',cursive;font-weight:400; font-size:1.46rem;line-height:1.18;margin:0;letter-spacing:.01em;color:var(--ink)} /* Die Schreibschrift traegt weniger weit als eine Grotesk, deshalb etwas mehr Groesse und Zeilenabstand als bei der Serifenschrift zuvor. */ h1{font-size:clamp(2.1rem,4.4vw,3.5rem)} h2{font-size:clamp(1.6rem,2.9vw,2.35rem)} h1{font-size:clamp(2.3rem,5.4vw,4.15rem)} h2{font-size:clamp(1.75rem,3.2vw,2.65rem)} h3{font-size:clamp(1.2rem,1.8vw,1.5rem)} h4{font-size:1.05rem;font-weight:500} p{margin:0 0 1em} p:last-child{margin-bottom:0} :focus-visible{outline:2.5px solid var(--signal);outline-offset:3px;border-radius:4px} /* --- Layout-Helfer ------------------------------------------------------ */ .wrap{width:min(100% - 2*clamp(16px,4vw,44px),var(--wrap));margin-inline:auto} .wrap-wide{width:min(100% - 2*clamp(14px,2.4vw,28px),1600px);margin-inline:auto} .section{padding-block:var(--sec);position:relative} .section--sand{background:rgba(238,230,219,.62)} .section--foam{background:rgba(255,255,255,.78)} .section--deep{background:var(--blau-verlauf);color:#fff} .section--deep h2,.section--deep h3{color:#fff} .lead{font-size:clamp(1.02rem,1.35vw,1.2rem);color:var(--text-weich);max-width:62ch} .section--deep .lead{color:rgba(255,255,255,.82)} .stack-s>*+*{margin-top:10px} .stack>*+*{margin-top:20px} .center{text-align:center;margin-inline:auto} .hide{display:none !important} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Abschnittskopf: Titel links, Beschreibung rechts */ .sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(20px,4vw,60px);align-items:end;margin-bottom:clamp(28px,4vw,52px)} .sec-head p{margin:0} @media(max-width:820px){.sec-head{grid-template-columns:1fr;align-items:start;gap:14px}} /* Kartografische Trennlinie (Tiefenlinie) */ .rule{height:1px;background:repeating-linear-gradient(90deg,var(--line) 0 14px,transparent 14px 24px);border:0;margin:0} /* --- Buttons ------------------------------------------------------------ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:13px 26px;border-radius:var(--r-pill);border:1px solid transparent; font-weight:600;font-size:.95rem;cursor:pointer; transition:background .18s ease,color .18s ease,border-color .18s ease; text-align:center; } .btn--primary{background:var(--blau-verlauf-hell);background-size:180% 100%; background-position:0 0;color:#fff;transition:background-position .5s ease,transform .2s ease} .btn--primary:hover{background-position:100% 0} .btn--primary:hover{background:#0a4450} .btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn--gold{background:linear-gradient(104deg,#f2ddb0,#e5c383 52%,#f4e3c1);color:#3d2c11; border-color:transparent;font-weight:700;box-shadow:0 8px 22px -10px rgba(61,44,17,.6)} .btn--gold:hover{filter:brightness(1.05)} .btn--ghost:hover{border-color:var(--signal);background:rgba(23,69,126,.07)} .btn--light{background:#fff;color:var(--signal);border-color:rgba(255,255,255,.5)} .btn--light:hover{background:var(--soft-blue)} .btn--sale{background:var(--typ-kaufhaus);color:#fff} .btn--sale:hover{background:#8d3624} .btn--block{width:100%} .btn--s{padding:9px 18px;font-size:.86rem} .btn[disabled]{opacity:.45;cursor:not-allowed} .linkline{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);border-bottom:1.5px solid rgba(12,44,88,.34);padding-bottom:2px} .linkline:hover{border-bottom-color:var(--ink)} /* --- Kopfzeile ---------------------------------------------------------- */ .topbar{position:sticky;top:0;z-index:60;background:rgba(251,247,239,.93);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)} .topbar--onhero{position:absolute;left:0;right:0;background:transparent;border-bottom-color:rgba(255,255,255,.22);backdrop-filter:none} .topbar__in{display:flex;align-items:center;gap:clamp(14px,2.4vw,38px);min-height:78px} .brand{display:inline-flex;align-items:center;gap:11px;flex:0 0 auto} .brand__mark{width:44px;height:auto;flex:0 0 auto} .brand__name{display:block;line-height:1} .brand__wort{display:block;width:auto;height:29px} .brand__sub{display:block;margin-top:4px;font-family:'Inter',sans-serif;font-size:.665rem;font-weight:500; letter-spacing:.09em;text-transform:uppercase;color:var(--sage)} .nav{display:flex;gap:clamp(8px,1.6vw,24px);margin-left:auto;align-items:center} /* Instagram im aufgeklappten Handymenue, am Desktop steht das Zeichen oben rechts */ .nav__insta{display:none} @media(max-width:1040px){ .nav .nav__insta{display:flex;align-items:center;gap:10px;border-bottom:0;color:var(--signal);font-weight:600} .nav__insta svg{width:20px;height:20px;flex:0 0 auto} } .nav a{font-size:.94rem;font-weight:500;padding:8px 2px;border-bottom:2px solid transparent} .nav a:hover{border-bottom-color:var(--sky)} .nav a[aria-current="page"]{border-bottom-color:var(--signal);font-weight:600} .topbar__tools{display:flex;align-items:center;gap:10px;margin-left:clamp(6px,1.4vw,18px)} .merk-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:.88rem;font-weight:600;background:rgba(255,255,255,.55)} .merk-btn:hover{border-color:var(--signal)} /* Instagram: kleines rundes Zeichen im Kleid der Merkliste, auf dem Telefon nur im Fuss, sonst wird die Kopfleiste zu eng */ .insta-btn{display:inline-grid;place-items:center;width:38px;height:38px;flex:0 0 auto; border:1px solid var(--line);border-radius:var(--r-pill);background:rgba(255,255,255,.55);color:var(--ink)} .insta-btn svg{width:18px;height:18px} .insta-btn:hover{border-color:var(--signal);color:var(--signal)} .insta-btn:focus-visible{outline:3px solid var(--signal-hell);outline-offset:2px} @media(max-width:560px){.insta-btn{display:none}} .merk-btn__count{min-width:20px;height:20px;padding:0 5px;border-radius:var(--r-pill);background:var(--blau-verlauf-hell);color:#fff;font-size:.72rem;display:grid;place-items:center} .merk-btn__count[data-empty="1"]{background:var(--creige);color:var(--ink)} .burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-input);background:rgba(255,255,255,.6);cursor:pointer;place-items:center} .burger span{display:block;width:19px;height:1.6px;background:var(--ink);box-shadow:0 -6px 0 var(--ink),0 6px 0 var(--ink)} .topbar--onhero .nav a,.topbar--onhero .brand{color:var(--ink)} @media(max-width:1040px){ /* Das Menue hat mit den Untermenues neunzehn Eintraege. Es ist damit hoeher als ein Telefonbildschirm und muss scrollen koennen, sonst sind die letzten Punkte schlicht nicht erreichbar. dvh statt vh, weil die Adressleiste des Browsers sonst nicht mitgerechnet wird. */ /* Ohne eigenen z-index liegen Seiteninhalt und Cookiehinweis darueber, und die Menuepunkte lassen sich nicht antippen. */ .nav{position:fixed;z-index:90;left:0;right:0;top:var(--kopfhoehe,78px);bottom:auto; flex-direction:column;align-items:stretch;gap:0;background:var(--shell); border-bottom:1px solid var(--line);padding:4px 6vw 26px; max-height:calc(100vh - var(--kopfhoehe,78px)); max-height:calc(100dvh - var(--kopfhoehe,78px)); overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain; transform:translateY(-125%);transition:transform .28s ease;box-shadow:var(--shadow-m)} .nav[data-open="1"]{transform:none} .nav a{padding:12px 0;border-bottom:1px solid var(--line-soft)} /* Kompakter, damit mehr auf einen Bildschirm passt */ .navpunkt > a{font-weight:700} .navpunkt > a .navpfeil{display:none} .untermenue{margin:0 0 4px} .untermenue a{padding:10px 0 10px 16px;font-size:.94rem} .nav > *:last-child a{border-bottom:0} .burger{display:grid} .merk-btn span:not(.merk-btn__count){display:none} /* Solange das Menue offen ist, soll die Seite darunter nicht mitscrollen. */ html[data-menue="1"],html[data-menue="1"] body{overflow:hidden} /* Die schwebenden Knoepfe liegen sonst mitten im Menue. */ html[data-menue="1"] .hilfeknopf, html[data-menue="1"] .fensterknopf, html[data-menue="1"] .gratisknopf, html[data-menue="1"] .fenster, html[data-menue="1"] .hilfe, html[data-menue="1"] .cookie{display:none} } /* --- Hintergrund: Wellen, Seestern, Fische ------------------------------- */ .meergrund{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;color:var(--signal)} main,.fuss{position:relative;z-index:1} /* Zwei gleiche Felder nebeneinander, das Band wandert um genau eine Feldbreite und setzt danach nahtlos wieder an. */ .meergrund__wellenband,.meergrund__feinband{position:absolute;left:0;width:200%;display:flex} .meergrund__wellenband{bottom:0;height:44vh;opacity:.09;animation:wellenzug 96s linear infinite} .meergrund__feinband{top:0;height:100vh;opacity:.16;animation:wellenzug 210s linear infinite reverse} .meergrund__wellen,.meergrund__fein{width:50%;height:100%;flex:0 0 50%} /* Die Baender werden in der Breite gestreckt. Ohne diesen Zusatz wuerden die Linien mitwachsen und plump wirken. */ .meergrund__wellen path{vector-effect:non-scaling-stroke;stroke-width:1.5px} .meergrund__fein path{vector-effect:non-scaling-stroke;stroke-width:1px} @keyframes wellenzug{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* Der Seestern liegt fest im Bild, der Inhalt scrollt darunter hindurch. Volle Deckkraft, deshalb weit genug oben und rechts aus dem Textbereich. */ .meergrund__stern{position:absolute;right:-3vw;top:9vh;width:clamp(150px,16vw,240px); opacity:1;animation:sterndrift 74s ease-in-out infinite} .meergrund__stern img{display:block;width:100%;height:auto} @keyframes sterndrift{ 0%,100%{transform:rotate(-7deg) translateY(0)} 50%{transform:rotate(3deg) translateY(-20px)} } /* Ein einziger Hering, sehr langsam und sehr blass. Mehr wuerde unruhig wirken. */ .fisch{position:absolute;top:58vh;width:clamp(120px,13vw,190px);opacity:.16; will-change:transform;animation:zugLinks 190s linear infinite} .fisch__bild{display:block;width:100%;animation:fischtakt 11s ease-in-out infinite} .fisch__bild img{display:block;width:100%;height:auto} @keyframes zugLinks{ from{transform:translateX(calc(100vw + 280px))} to{transform:translateX(-300px)} } @keyframes zugRechts{ from{transform:translateX(-300px)} to{transform:translateX(calc(100vw + 280px))} } @keyframes fischtakt{ 0%,100%{translate:0 0;rotate:0deg} 25%{translate:0 -8px;rotate:-1.2deg} 50%{translate:0 0;rotate:0deg} 75%{translate:0 8px;rotate:1.2deg} } @media(max-width:760px){ .fisch{display:none} .meergrund__stern{top:auto;bottom:7vh;right:-16vw;width:150px;opacity:.55} .meergrund__wellenband{height:32vh} } /* --- Untermenue in der Hauptnavigation ------------------------------------ */ .navpunkt{position:relative} .navpunkt > a{display:inline-flex;align-items:center;gap:5px} .navpunkt__pfeil{font-size:.62rem;line-height:1;opacity:.55;transition:transform .22s ease} .navpunkt:hover .navpunkt__pfeil, .navpunkt:focus-within .navpunkt__pfeil{transform:translateY(2px);opacity:1} .untermenue{position:absolute;left:50%;top:100%;transform:translateX(-50%) translateY(6px); min-width:236px;margin:0;padding:8px;list-style:none;border-radius:12px; background:#fff;border:1px solid var(--line-soft);box-shadow:var(--shadow-l); opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility .2s; z-index:70} /* Unsichtbare Bruecke, damit das Menue beim Hinuntergehen nicht zuklappt */ .untermenue::before{content:'';position:absolute;left:0;right:0;top:-10px;height:10px} .navpunkt:hover .untermenue, .navpunkt:focus-within .untermenue{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .untermenue a{display:block;padding:9px 13px;border-radius:8px;font-size:.9rem; font-weight:500;color:var(--ink);white-space:nowrap} .untermenue a:hover,.untermenue a:focus-visible{background:rgba(23,69,126,.08)} @media(max-width:900px){ .navpunkt__pfeil{display:none} .untermenue{position:static;transform:none;opacity:1;visibility:visible;min-width:0; background:none;border:0;box-shadow:none;padding:0 0 6px 14px;margin-top:2px} .untermenue a{padding:7px 0;font-size:.94rem;color:var(--text-weich)} .navpunkt{display:block} } html[data-dunkel="1"] .untermenue{background:#152f38;border-color:#2f5561} html[data-dunkel="1"] .untermenue a{color:#e9f1f3} /* --- Hero --------------------------------------------------------------- */ .hero{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end; padding:150px 0 clamp(30px,5vw,64px);background:var(--ink)} .hero__bg{overflow:hidden;border-radius:inherit} .hero__bg{position:absolute;inset:0;display:block} /* --- Ruhiger Zug durch das Bild ------------------------------------------- Statt eines Films, der beim Einblenden ruckte, wandert das Standbild sehr langsam. Das ist deutlich zu sehen, verzerrt niemanden und braucht keine zweite Datei. Sechzig Sekunden hin, sechzig zurueck: wer hinsieht, merkt es, wer liest, wird nicht gestoert. */ .hero__bg img{width:100%;height:100%;object-fit:cover;object-position:62% 46%; display:block;transform-origin:62% 46%;will-change:transform; animation:heroZug 60s ease-in-out infinite alternate} @keyframes heroZug{ from{transform:scale(1.02) translate3d(0,0,0)} to {transform:scale(1.11) translate3d(-1.6%,-1.1%,0)} } @media(prefers-reduced-motion:reduce){.hero__bg img{animation:none}} html[data-ruhe="1"] .hero__bg img{animation:none} .hero__film.laeuft{opacity:1} .hero__film[hidden]{display:none} html[data-ruhe="1"] .hero__film{display:none} @media(prefers-reduced-motion:reduce){.hero__film{display:none}} @media print{.hero__film{display:none}} .hero--klar .hero__bg::after{display:none} /* Bis das Foto da ist, heller Grund: die dunkle Schrift ist fuer das helle Foto gemacht und stand auf Marineblau kaum lesbar da */ .hero--klar{background:var(--sand)} /* Ohne Schleier traegt allein der Schatten unter dem Text. Er ist deshalb kraeftiger und weicher, sonst zerfaellt die Schrift ueber dem Motiv. */ .hero--klar .hero__kicker, .hero--klar .hero__claim, .hero--klar .hero__text, .hero--klar .hero__in h1, .hero--klar .hero__in p{text-shadow:0 1px 2px rgba(251,247,239,.92), 0 2px 16px rgba(251,247,239,.88),0 5px 34px rgba(251,247,239,.72)} .hero__bg::after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(96deg,rgba(251,247,239,.9) 0%,rgba(251,247,239,.72) 34%,rgba(251,247,239,.3) 58%,rgba(251,247,239,.05) 80%,rgba(251,247,239,0) 100%)} .hero__in{position:relative;z-index:2;width:min(100% - 2*clamp(16px,4vw,44px),var(--wrap));margin-inline:auto} /* Die Fahnen brauchen eine eigene Spur, sonst laeuft die Suchmaske darunter. */ @media(min-width:761px){.hero__in{padding-right:clamp(180px,22vw,300px)}} .hero__kicker{display:flex;width:fit-content;align-items:center;gap:10px;font-size:.85rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);margin-bottom:18px} .hero__kicker::before{content:'';width:34px;height:1.5px;background:var(--ink)} .hero h1{max-width:21ch;margin-bottom:18px; text-shadow:0 1px 22px rgba(251,247,239,.85), 0 1px 3px rgba(251,247,239,.9)} .hero__claim{max-width:46ch;font-size:clamp(1.03rem,1.5vw,1.24rem);color:var(--text-weich); margin-bottom:32px;text-shadow:0 1px 14px rgba(251,247,239,.8)} @media(max-width:520px){.brand__wort{height:24px}.brand__mark{width:36px}.brand{gap:9px}.brand__sub{display:none}} @media(max-width:900px){ /* Auf dem Telefon liegt der Text ueber dem Motiv. Der Schleier ist deshalb in der Mitte dichter als auf dem grossen Schirm. */ .hero__bg::after{background:linear-gradient(180deg,rgba(251,247,239,.92) 0%, rgba(251,247,239,.82) 42%,rgba(251,247,239,.7) 66%,rgba(251,247,239,.92) 100%)} .hero__bg img{object-position:66% 40%} } /* --- Der Kopf auf dem Telefon ---------------------------------------------- Vorher lag der Text ueber dem Bild, und das Bild zeigte nur einen Ausschnitt aus der Mitte: der Kopf war fest hoch, das Motiv wurde mit object-fit:cover beschnitten. Auf einem schmalen Geraet blieb vom Strandkorb ein Streifen uebrig, und die Schreibschrift stand auf unruhigem Grund. Jetzt steht das Bild oben in seinem eigenen Seitenverhaeltnis, vollstaendig sichtbar, und der Text darunter auf ruhigem Sand. Lesbar, und das Motiv ist zu erkennen. */ @media(max-width:760px){ .hero{display:block;min-height:0;padding:0;background:var(--sand-hell,#fbf7ef)} /* Randlos ueber die ganze Breite: ein Kopfbild mit Rand daneben sieht aus wie ein Versehen. */ .hero__bg{position:relative;inset:auto;width:100vw;margin-inline:calc(50% - 50vw); aspect-ratio:16/10;border-radius:0} .hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center; animation:none} /* Kein Schleier mehr: der Text liegt nicht mehr darauf. */ .hero__bg::after{display:none} .hero .wrap{padding-block:clamp(20px,5vw,30px) clamp(22px,6vw,34px)} .hero h1,.hero__claim{text-shadow:none} .hero h1{font-size:clamp(1.85rem,7.4vw,2.6rem);line-height:1.12} .hero__claim{margin-bottom:22px} .hero__kicker{margin-bottom:10px} } /* --- Suchpanel ---------------------------------------------------------- */ .suchpanel{background:none; -webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25); border:1px solid rgba(255,255,255,.5);border-radius:14px; box-shadow:var(--shadow-l);overflow:hidden;max-width:1080px} .suchpanel--float{margin-top:clamp(24px,4vw,46px)} /* Der obere Teil steht auf 60 Prozent Deckung, das Motiv scheint durch. */ .suchtabs{display:flex;gap:2px;padding:6px 6px 0; border-bottom:1px solid rgba(255,255,255,.35);background:rgba(252,250,246,.4)} .suchtabs button{flex:1 1 0;padding:14px clamp(14px,2.2vw,28px);border:0;cursor:pointer; border-radius:10px 10px 0 0;font-weight:700;font-size:.98rem; background:rgba(255,255,255,.34);color:var(--text-weich); transition:background .22s ease,color .22s ease} .suchtabs button:hover{background:rgba(255,255,255,.55)} /* Die beiden Wege sind farblich getrennt, damit man auf einen Blick sieht, worin man gerade sucht: See fuer Urlaub, Kliffrot fuer Kaufen. */ .suchtabs button[data-modus="miete"][aria-selected="true"]{ background:linear-gradient(160deg,#1a5490,#0c2c58);color:#fff} .suchtabs button[data-modus="kauf"][aria-selected="true"]{ background:linear-gradient(160deg,#c8734b,#a03d26);color:#fff} /* Flex statt Raster: beim Kaufen fallen drei Felder weg, ein festes Raster liesse dort Luecken stehen. */ .suchform{display:flex;align-items:stretch;background:rgba(255,255,255,.6)} .suchform .feld{flex:1 1 0} .suchform .feld:first-child{flex:1.3 1 0} .feld{padding:14px clamp(14px,1.7vw,20px);border-right:1px solid rgba(12,44,88,.1);display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0} .feld:last-of-type{border-right:0} .feld label{font-size:.75rem;font-weight:600;color:var(--sage);letter-spacing:.02em} .feld input,.feld select{border:0;background:none;padding:2px 0;font-size:.98rem;font-weight:500;width:100%;min-width:0} .feld input::placeholder{color:rgba(12,44,88,.4)} .suchform__go{flex:0 0 auto;padding:14px;display:grid;place-items:center} .suchform__go .btn{height:100%;padding-inline:30px;transition:background .22s ease} .suchpanel[data-modus="kauf"] .suchform__go .btn{ background:linear-gradient(160deg,#c8734b,#a03d26);border-color:transparent} @media(max-width:960px){ .suchform{grid-template-columns:1fr 1fr} .feld{border-bottom:1px solid var(--line-soft)} .feld:nth-child(2n){border-right:0} .suchform__go{grid-column:1/-1} .suchform__go .btn{width:100%;padding-block:14px} } @media(max-width:520px){.suchform{grid-template-columns:1fr}.feld{border-right:0}} /* --- Fotoschnipsel, die in die Flaeche hineinragen ------------------------ */ /* Sehr dezent, nur Stimmung. Sie liegen hinter dem Inhalt und nehmen keine Klicks an. Auf schmalen Schirmen sind sie aus, dort ist kein Platz. */ .section{position:relative} .deko{position:absolute;z-index:0;pointer-events:none;user-select:none;display:block} .deko img{display:block;width:100%;height:auto} .section > .wrap{position:relative;z-index:1} /* Strandhafer und Sandkante stehen vor dem Inhalt, sonst verschwinden sie hinter den weissen Karten. Klicks nehmen sie dank pointer-events nicht an. */ .deko--rechts{right:0;bottom:-10px;z-index:2;width:clamp(260px,28vw,460px)} /* Die Sandkante bleibt hinter dem Inhalt: sie ist breit genug, um sonst die erste Kartenspalte zu ueberdecken. Im Seitenrand ist sie voll zu sehen. */ .deko--links{left:0;bottom:0;width:clamp(130px,13vw,210px)} /* Volle Hoehe des Abschnitts: das Bild wird gestreckt, der Inhalt laeuft davor */ .deko--hoch{left:0;top:0;bottom:0;width:clamp(140px,14vw,230px)} /* Treibholz als ruhiger Zierrat am Rand. Es liegt hinter allem und faengt keine Klicks ab. */ /* Das Strandgut steht vollstaendig im Bild, nicht halb aus dem Rand geschnitten: es ist ein Foto mit Muscheln und Steinen, und die will man sehen. Deshalb groesser und mit Abstand zum Rand. */ .deko--holz{position:absolute;z-index:0;pointer-events:none;user-select:none; width:clamp(240px,29vw,520px);opacity:.9;display:block} .deko--holz img{width:100%;height:auto;display:block} .deko--holz-links{left:12px;bottom:18px;transform:rotate(-2deg)} .deko--holz-rechts{right:12px;top:26px;transform:rotate(1.5deg) scaleX(-1)} @media(max-width:900px){.deko--holz{display:none}} .deko--hoch img{height:100%;object-fit:cover;object-position:left center} .deko--unten{left:0;right:0;bottom:0;width:100%} @media(max-width:1180px){.deko--rechts{width:clamp(200px,22vw,300px)}} @media(max-width:960px){.deko{display:none}} @media print{.deko{display:none}} /* --- Fahnenmast im Hero --------------------------------------------------- Ein runder Mast mit Knauf, daran drei Fahnen im Querformat. Der Wind kommt aus vier Lagen, und erst zusammen ergibt das Stoff: 1. Drehung um die Aufhaengung, damit die Fahne ausweht 2. Wandernde Falten, hell und dunkel versetzt 3. Eine Kontur, die sich bewegt: die freie Kante und die kurzen Seiten sind nie gerade, sie wandern mit 4. Ein leichtes Heben und Senken Die Fahne haengt rechts am Mast und weht nach links ins Bild. */ .mast{position:absolute;z-index:3;right:clamp(30px,7vw,120px); top:var(--kopfhoehe,74px);bottom:-30px;width:11px; /* Rund statt flach: heller Glanzstreifen links der Mitte, Schatten aussen */ background:linear-gradient(90deg,#8d949b 0%,#c6ccd2 18%,#fbfcfd 38%, #dfe4e8 58%,#9aa1a8 82%,#6f767d 100%); border-radius:6px; box-shadow:0 0 0 1px rgba(12,44,88,.12), 0 6px 20px -8px rgba(12,44,88,.7), inset 0 -30px 40px -30px rgba(0,0,0,.4); perspective:700px;pointer-events:none} .mast::after{content:'';position:absolute;left:50%;bottom:-6px;width:34px;height:10px; transform:translateX(-50%);border-radius:50%; background:radial-gradient(ellipse at center,rgba(12,44,88,.34),transparent 72%)} .mast__knauf{position:absolute;left:50%;top:-13px;width:21px;height:21px; transform:translateX(-50%);border-radius:50%; background:radial-gradient(circle at 34% 28%,#fff8e2,#e5c383 42%,#b08c3e 74%,#7a5f22); box-shadow:0 3px 9px rgba(12,44,88,.55),inset -2px -3px 5px rgba(0,0,0,.3)} .fahne{position:absolute;right:7px;transform-origin:right center; width:clamp(150px,17vw,216px);padding:12px 15px;color:#fff; animation:weht 5.4s cubic-bezier(.45,.05,.55,.95) infinite; filter:drop-shadow(-7px 10px 10px rgba(12,44,88,.34)) drop-shadow(-16px 22px 26px rgba(12,44,88,.22))} /* Die Falten laufen von der Aufhaengung nach aussen. */ .fahne::after{content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(264deg,rgba(0,0,0,.2) 0%,rgba(255,255,255,0) 12%, rgba(255,255,255,.22) 30%,rgba(0,0,0,.16) 46%,rgba(255,255,255,.18) 64%, rgba(0,0,0,.13) 80%,rgba(255,255,255,.14) 100%); background-size:230% 100%; clip-path:inherit; animation:falte 5.4s cubic-bezier(.45,.05,.55,.95) infinite} .fahne--neu{top:14px;background:linear-gradient(118deg,#17518f,#0c2c58 72%)} .fahne--spo{top:calc(14px + clamp(104px,13vh,136px));color:#3d2c11; background:linear-gradient(118deg,#f6e6c2,#e0bb76 72%); width:clamp(128px,13.5vw,172px); animation-delay:-1.7s;animation-duration:6.1s} .fahne--spo::after{animation-delay:-1.7s;animation-duration:6.1s} .fahne--sylt{top:calc(14px + clamp(176px,21vh,232px)); background:linear-gradient(118deg,#d0794d,#a03d26 72%); width:clamp(112px,11.5vw,148px); animation-delay:-3.2s;animation-duration:4.7s} .fahne--sylt::after{animation-delay:-3.2s;animation-duration:4.7s} .fahne__gross{display:block;font-family:'Nordseeschrift','Segoe Script',cursive; font-weight:400;font-size:clamp(2.3rem,3vw,2.9rem);line-height:.86;margin-bottom:5px; text-shadow:0 2px 10px rgba(0,0,0,.35)} .fahne__text{display:block;font-size:.75rem;line-height:1.35;font-weight:600; color:rgba(255,255,255,.92)} .fahne__ort{display:block;font-weight:800;font-size:clamp(.92rem,1.15vw,1.08rem); line-height:1.08;letter-spacing:.04em;text-transform:uppercase} .fahne__zeichen{position:absolute;right:10px;top:50%;transform:translateY(-50%) rotate(-12deg); width:32px;height:32px;opacity:.32} .fahne--spo .fahne__zeichen{fill:#3d2c11;stroke:none;opacity:.3} .fahne--sylt .fahne__zeichen{fill:none;stroke:#fff;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;opacity:.62} .fahne--spo .fahne__ort,.fahne--sylt .fahne__ort{padding-right:26px} /* Die Kontur wandert mit: freie Kante und kurze Seiten sind nie gerade. */ /* Neun Punkte statt acht: der zusaetzliche liegt in der Mitte der freien Kante und wandert nach rechts. Dadurch ist diese Kante nicht gerade, sondern leicht hohl, so wie Stoff im Wind nach innen faellt. */ @keyframes weht{ 0%,100%{clip-path:polygon(0 6%,26% 1%,58% 5%,100% 0,100% 100%,56% 96%,24% 100%,0 94%,2.2% 66%,3.4% 50%,2.2% 34%); transform:rotateY(0deg) skewY(-1.2deg) translateY(0)} 25% {clip-path:polygon(0 1%,28% 6%,56% 1%,100% 4%,100% 97%,58% 100%,26% 95%,0 100%,3.4% 68%,5.2% 52%,3.4% 36%); transform:rotateY(-12deg) skewY(1.5deg) translateY(-3px)} 50% {clip-path:polygon(0 5%,24% 0,60% 6%,100% 1%,100% 99%,54% 95%,22% 100%,0 96%,1.4% 63%,2.2% 47%,1.4% 31%); transform:rotateY(4deg) skewY(-1.7deg) translateY(2px)} 75% {clip-path:polygon(0 2%,30% 5%,54% 0,100% 5%,100% 96%,60% 100%,28% 96%,0 99%,2.8% 69%,4.4% 53%,2.8% 37%); transform:rotateY(-8deg) skewY(.9deg) translateY(-2px)} } @keyframes falte{ 0%,100%{background-position:0 0} 50% {background-position:130% 0} } @media(max-width:1080px){ .mast{right:16px;bottom:-22px;width:9px} .mast__knauf{width:17px;height:17px;top:-10px} .fahne{padding:10px 12px} .fahne__gross{font-size:1.95rem} .fahne__text{font-size:.7rem} .fahne__zeichen{width:24px;height:24px} } @media(max-width:760px){ /* Auf dem Telefon waere ein Mast neben dem Text zu eng. Die Fahnen stellen sich in eine Reihe ueber die Ueberschrift, der Mast entfaellt. */ .hero{flex-wrap:wrap;padding-inline:clamp(16px,4vw,44px)} .hero__in{width:100%;padding-right:0} .mast{position:static;order:-1;flex:0 0 100%;width:100%;height:auto; background:none;box-shadow:none;perspective:none;border-radius:0; display:flex;gap:6px;align-items:stretch;margin-bottom:22px} .mast::after,.mast__knauf{display:none} .fahne{position:static;flex:1;min-width:0;width:auto;padding:11px 12px; animation:none;clip-path:polygon(0 4%,100% 0,100% 96%,0 100%,2.2% 66%,3.4% 50%,2.2% 34%); filter:drop-shadow(-4px 6px 8px rgba(12,44,88,.28))} .fahne::after{animation:none;opacity:.4} .fahne--neu{flex:1.5} .fahne__gross{font-size:1.7rem} .fahne__text{font-size:.68rem} .fahne__zeichen{width:20px;height:20px;right:7px;opacity:.24} .fahne--spo .fahne__ort,.fahne--sylt .fahne__ort{padding-right:20px} } @media(prefers-reduced-motion:reduce){ .fahne,.fahne::after{animation:none; clip-path:polygon(0 4%,100% 0,100% 96%,0 100%,2.2% 66%,3.4% 50%,2.2% 34%)} } html[data-ruhe="1"] .fahne,html[data-ruhe="1"] .fahne::after{animation:none} @media print{.mast{display:none}} /* --- Auftaktband unter dem Hero ------------------------------------------- */ .band{background:linear-gradient(112deg,#0c2c58 0%,#12447e 52%,#0c2c58 100%);color:#fff; position:relative;overflow:hidden;text-align:center} .band::after{content:'';position:absolute;right:-90px;top:-120px;width:420px;height:420px; border-radius:50%;background:rgba(255,255,255,.05)} .band .wrap{position:relative;z-index:1} .band__auftakt{display:inline-block;padding:6px 16px;margin-bottom:16px;border-radius:var(--r-pill); font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:#3d2c11;background:linear-gradient(104deg,#f2ddb0,#e5c383 52%,#f4e3c1)} .band__satz{color:#fff;font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1.22;margin-bottom:30px} .band .kennzahlen{border:0;padding:0;gap:clamp(18px,3vw,44px)} .band .kennzahl{border:0} .band .kennzahl b{color:#f0d9a8;font-size:clamp(2.6rem,4.6vw,3.8rem)} .band .kennzahl span{color:#fff;font-weight:600;font-size:.98rem;display:block} .band .kennzahl small{display:block;margin-top:3px;font-weight:400;font-size:.82rem; color:rgba(255,255,255,.68)} .band__knoepfe{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:32px} /* --- Banner im Hero ------------------------------------------------------- */ .neuband{display:flex;width:fit-content;max-width:100%;align-items:center;gap:11px;margin-bottom:14px;padding:7px 17px 7px 8px; border-radius:var(--r-pill);background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border:1px solid rgba(12,44,88,.12);box-shadow:0 8px 22px -12px rgba(12,44,88,.5); font-size:.86rem;font-weight:600;color:var(--ink)} .neuband__marke{padding:4px 12px;border-radius:var(--r-pill);font-size:.72rem;font-weight:800; letter-spacing:.14em;text-transform:uppercase;color:#3d2c11; background:linear-gradient(104deg,#f2ddb0,#e5c383 52%,#f4e3c1)} @media(max-width:620px){.neuband{font-size:.78rem;padding-right:13px}} /* --- Kennzahlen --------------------------------------------------------- */ .kennzahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,28px);border-block:1px solid var(--line);padding-block:clamp(22px,3vw,34px)} .kennzahl b{display:block;font-family:'Nordseeschrift','Segoe Script',cursive;font-size:clamp(2rem,3.4vw,2.8rem);font-weight:400;line-height:1;color:var(--ink)} .kennzahl span{font-size:.88rem;color:var(--text-weich)} @media(max-width:700px){.kennzahlen{grid-template-columns:1fr 1fr;gap:22px}} /* ========================================================================== Seekarte ========================================================================== */ .karte{position:relative;background:linear-gradient(180deg,#e6f2f6 0%,#dbeaf0 100%);border:1px solid var(--line);border-radius:12px;overflow:hidden} .karte__stage{display:block;width:100%;height:auto;max-height:min(56vh,620px);touch-action:pan-y} .karte__kopf{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line-soft);background:rgba(251,247,239,.82)} .karte__titel{font-family:'Nordseeschrift','Segoe Script','Bradley Hand',cursive;font-size:1.3rem;font-weight:400} .karte__titel small{display:block;font-family:'Inter',sans-serif;font-size:.76rem;font-weight:500;color:var(--sage)} .regionwahl{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:3px} .regionwahl button{border:0;background:none;padding:7px 16px;border-radius:var(--r-pill);font-size:.85rem;font-weight:600;color:var(--text-leise);cursor:pointer} .regionwahl button[aria-pressed="true"]{background:var(--blau-verlauf-hell);color:#fff} /* Kartenelemente */ .k-wasser{fill:#dceef4} .k-watt{fill:#c9dcd6;opacity:.6} .k-land{fill:#f2ead9} .k-kueste{fill:none;stroke:#17457e;stroke-width:1.6;stroke-linejoin:round} .k-see{fill:#dceef4;stroke:#17457e;stroke-width:1.1;stroke-linejoin:round} .k-sand{fill:#f6edd8;stroke:#c9b998;stroke-width:1.2;stroke-dasharray:5 4} .k-duene{fill:#e6dcc2;opacity:.85} .k-tiefe{fill:none;stroke:#9fcddd;stroke-width:1.1;stroke-dasharray:7 6;opacity:.75} .k-strasse{fill:none;stroke:#d8cbbb;stroke-width:2.2;stroke-linecap:round} .k-bahn{fill:none;stroke:#869b86;stroke-width:1.6;stroke-dasharray:2 6;stroke-linecap:round} .k-ort{font-family:'Fraunces',Georgia,serif;font-size:13px;font-weight:650;fill:#0c2c58;pointer-events:none;paint-order:stroke;stroke:rgba(251,247,239,.86);stroke-width:2.6px} .k-ort--klein{font-size:11px;font-weight:500;fill:rgba(12,44,88,.72)} .k-meer{font-family:'Fraunces',Georgia,serif;font-size:13.5px;fill:#7699b8;letter-spacing:.15em;pointer-events:none;paint-order:stroke;stroke:rgba(251,247,239,.86);stroke-width:2.6px} .k-note{font-family:'Inter',sans-serif;font-size:10.5px;fill:rgba(12,44,88,.5);pointer-events:none;paint-order:stroke;stroke:rgba(251,247,239,.86);stroke-width:2.6px} /* Marker */ .k-pin{cursor:pointer;transform-box:fill-box;transform-origin:center bottom} .k-pin__body{transition:transform .16s ease} .k-pin:hover .k-pin__body,.k-pin[data-aktiv="1"] .k-pin__body{transform:translateY(-4px) scale(1.14)} .k-pin[data-aktiv="1"] .k-pin__ring{opacity:1} .k-pin__ring{opacity:0;transition:opacity .16s ease} .k-pin:focus{outline:none} .k-pin:focus-visible .k-pin__ring{opacity:1} .k-pin--gedimmt{opacity:.22;pointer-events:none} /* Kartenpopup */ .k-popup__link{display:block;color:inherit;text-decoration:none} .k-popup__link:hover .k-popup__titel{color:var(--signal)} .k-popup__link:focus-visible{outline:3px solid var(--sky);outline-offset:-3px} .k-popup{position:absolute;left:0;top:0;width:270px;max-width:calc(100% - 16px);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-l);overflow:hidden;z-index:20} .k-popup--kompakt{width:236px} .k-popup--kompakt img{display:none} .k-popup--kompakt .k-popup__zu{background:transparent;top:4px;right:4px} .k-popup--kompakt .k-popup__in{padding:11px 34px 12px 13px} .k-popup img{width:100%;height:126px;object-fit:cover} .k-popup__in{padding:12px 14px 14px} .k-popup__titel{font-family:'Nordseeschrift','Segoe Script','Bradley Hand',cursive;font-weight:400;font-size:1.24rem;line-height:1.22;margin-bottom:3px} .k-popup__meta{font-size:.8rem;color:var(--sage);margin-bottom:9px} .k-popup__preis{font-weight:700;font-size:.98rem} .k-popup__preis small{font-weight:500;color:var(--sage)} .k-popup__zu{position:absolute;z-index:2;top:8px;right:8px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(255,255,255,.92);cursor:pointer;display:grid;place-items:center;font-size:1rem;line-height:1} .k-popup__row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px} /* Legende */ /* --- Lupe auf der Karte --------------------------------------------------- */ /* Sie steht in derselben Flaeche wie die SVG-Karte, die im Dokument spaeter kommt. Ohne z-index laege die Karte darueber und schluckte die Klicks. */ .lupe{position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:4; display:flex;flex-direction:column;align-items:center;gap:5px;padding:7px 6px; border-radius:var(--r-pill);background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border:1px solid var(--line-soft);box-shadow:0 8px 22px -12px rgba(12,44,88,.5)} .lupe button{width:34px;height:34px;padding:0;border:0;border-radius:50%;cursor:pointer; background:none;color:var(--signal);display:grid;place-items:center; transition:background .2s ease,color .2s ease} .lupe button:hover:not([disabled]){background:rgba(23,69,126,.1)} .lupe button[disabled]{opacity:.3;cursor:default} .lupe svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .lupe__stand{font-size:.7rem;font-weight:700;color:var(--text-leise);letter-spacing:.02em} @media(max-width:620px){ .lupe{right:8px;padding:5px 4px;gap:3px} .lupe button{width:30px;height:30px} .lupe svg{width:18px;height:18px} } html[data-dunkel="1"] .lupe{background:rgba(21,47,56,.88);border-color:#2f5561} .k-ortgruppe--aktiv{cursor:pointer} .k-ortgruppe--aktiv .k-ort{fill:var(--signal);font-weight:600} .k-ortgruppe--aktiv:hover .k-ort{text-decoration:underline} .k-ortgruppe--aktiv:focus-visible{outline:2px solid var(--signal);outline-offset:2px} .k-ortgruppe.an .k-ort{fill:#a8422c} .k-ortgruppe.an circle{fill:#a8422c;opacity:1} .k-punkt{opacity:.88} .k-punkt circle{transition:r .2s ease} .k-punkt:hover{opacity:1} .k-punkt:hover circle{r:6} .legende{display:flex;flex-wrap:wrap;gap:6px 18px;padding:12px 16px;border-top:1px solid var(--line-soft);background:rgba(251,247,239,.82)} .legende__eintrag{display:inline-flex;align-items:center;gap:9px;font-size:.84rem;font-weight:500;background:none;border:0;padding:4px 2px;cursor:pointer;color:var(--text-weich)} .legende__eintrag svg{width:34px;height:36px;flex:0 0 auto} .legende__eintrag[aria-pressed="false"]{opacity:.35} .legende__eintrag:hover{color:var(--ink)} /* --- Einheitliche Flaechen: Rundung, Rahmen, Schatten --------------------- */ .block,.kachel,.suchpanel,.karte,.filterspalte,.buchbox,.leer,.todo,.faq, .ablauf__punkt,.legende,.kerndaten__feld,.merkmal{ border-radius:14px;box-shadow:var(--schatten-bild)} .block,.kachel,.buchbox,.filterspalte,.karte{border:1px solid var(--line-soft)} .kachel{transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease} .kachel:hover{transform:translateY(-3px);box-shadow:var(--schatten-bild-hoch)} .suchpanel{border-radius:16px} /* --- Objektkarte ---------------------------------------------------------- */ .objektgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(286px,100%),1fr)); gap:clamp(15px,1.9vw,24px)} .objektgrid--2{grid-template-columns:repeat(auto-fill,minmax(min(258px,100%),1fr))} @media(max-width:520px){.objektgrid,.objektgrid--2{grid-template-columns:1fr}} .okarte{position:relative;background:#fff;border:1px solid var(--line-soft); border-top:3px solid var(--typfarbe,var(--line));border-radius:14px;overflow:hidden; display:flex;flex-direction:column;box-shadow:var(--schatten-bild); transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease, border-color .4s ease} .okarte:hover{transform:translateY(-6px);box-shadow:var(--schatten-bild-hoch);border-color:var(--typfarbe)} .okarte--fewo{--typfarbe:var(--typ-fewo);--typtint:#e4efe5} .okarte--fehaus{--typfarbe:var(--typ-fehaus);--typtint:#dfeae2} .okarte--hotel{--typfarbe:var(--typ-hotel);--typtint:#dfebf3} .okarte--zimmer{--typfarbe:var(--typ-zimmer);--typtint:#e5f1f7} .okarte--kaufhaus{--typfarbe:var(--typ-kaufhaus);--typtint:#f5e2db} .okarte--kaufwohnung{--typfarbe:var(--typ-kaufwohnung);--typtint:#f8eae0} .okarte--grund{--typfarbe:var(--typ-grund);--typtint:#f0ebda} .okarte__bild{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sand)} .okarte__spur{display:flex;height:100%;transition:transform .45s cubic-bezier(.2,.7,.3,1)} .okarte__spur img{flex:0 0 100%;width:100%;height:100%;object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.3,1)} .okarte:hover .okarte__spur img{transform:scale(1.05)} .okarte__pfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:32px;height:32px; border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--ink);font-size:1.2rem; line-height:1;cursor:pointer;display:grid;place-items:center;opacity:0; transition:opacity .25s ease;box-shadow:0 3px 10px rgba(12,44,88,.24)} .okarte:hover .okarte__pfeil,.okarte__pfeil:focus-visible{opacity:1} .okarte__pfeil--links{left:9px} .okarte__pfeil--rechts{right:9px} .okarte__punkte{position:absolute;left:0;right:0;bottom:9px;z-index:4;display:flex;justify-content:center;gap:5px} .okarte__punkte i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55); box-shadow:0 1px 3px rgba(12,44,88,.4);transition:background .25s ease,width .25s ease} .okarte__punkte i.an{background:#fff;width:16px;border-radius:3px} .okarte__typ{position:absolute;z-index:3;left:10px;top:10px;display:inline-flex;align-items:center;gap:6px; padding:5px 11px 5px 7px;border-radius:var(--r-pill);background:rgba(255,255,255,.94); font-size:.76rem;font-weight:600;box-shadow:var(--shadow-s)} .okarte__typ svg{width:17px;height:19px} .okarte__merk{position:absolute;z-index:5;right:10px;top:10px;width:36px;height:36px;border-radius:50%; border:0;background:rgba(255,255,255,.94);display:grid;place-items:center;cursor:pointer; box-shadow:var(--shadow-s)} .okarte__merk svg{width:19px;height:19px;fill:none;stroke:var(--ink);stroke-width:1.7} .okarte__merk[aria-pressed="true"] svg{fill:#c0392b;stroke:#c0392b} /* Top-Objekte bekommen einen hellgoldenen Grund, damit sie im Raster sofort auffallen, ohne dass die Karte laut wird. */ .okarte--top{background:linear-gradient(158deg,#fdf6e6 0%,#f7ead0 46%,#f2e0bb 100%); border-color:rgba(197,157,84,.42);border-top-color:#d9b262} .okarte--top .okarte__in{background:transparent} .okarte--top .okarte__fuss{border-top-color:rgba(120,92,34,.16)} .okarte--top .preispille{background:rgba(120,92,34,.1);color:#5d4715} .okarte--top .preispille small{color:rgba(93,71,21,.72)} .okarte--top .okarte__extras span{background:rgba(120,92,34,.09);border-color:rgba(120,92,34,.16)} .okarte--top .okarte__ort{color:#8a6a25} .okarte--top .btn--ghost{border-color:rgba(120,92,34,.32);color:#5d4715} .okarte--top .btn--ghost:hover{background:rgba(120,92,34,.1)} .okarte--top .pikto{color:rgba(93,71,21,.7)} .okarte--top:hover{border-color:#d9b262} html[data-dunkel="1"] .okarte--top{ background:linear-gradient(158deg,#2b2617 0%,#332c1a 50%,#251f12 100%); border-color:rgba(229,195,131,.34)} html[data-dunkel="1"] .okarte--top .okarte__ort{color:#e0c68c} html[data-dunkel="1"] .okarte--top .preispille{background:rgba(229,195,131,.14);color:#f0dcb4} .neumarke{position:absolute;z-index:3;right:10px;bottom:10px; display:inline-flex;align-items:center;padding:0 12px;border-radius:var(--r-pill); font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase; background:linear-gradient(150deg,#1a5490,#0c2c58);color:#fff; box-shadow:0 8px 18px -8px rgba(12,44,88,.7)} .okarte--top .neumarke{background:linear-gradient(150deg,#7a5a1c,#5d4715)} .topmarke{position:absolute;z-index:3;left:10px;bottom:10px;display:inline-flex; align-items:center;padding:0 11px;border-radius:var(--r-pill); font-size:.66rem;font-weight:700;letter-spacing:.03em;white-space:nowrap; color:#3d2c11;background:linear-gradient(100deg,#f2ddb0,#e5c383 55%,#f4e3c1); box-shadow:0 3px 12px rgba(61,44,17,.32)} /* Der Stern sass in der Zeile und machte die Pille breiter. Jetzt sitzt er als eigenes Rund oben auf ihrer Kante. */ .topmarke::before{content:'\2605';position:absolute;left:-5px;top:-6px; width:17px;height:17px;display:grid;place-items:center;border-radius:50%; background:linear-gradient(150deg,#f4e3c1,#d9b262);color:#3d2c11; font-size:.62rem;line-height:1;box-shadow:0 2px 6px rgba(61,44,17,.4)} /* Beide Marken sitzen unten in der Bildflaeche in einer Zeile. Der Rahmen uebernimmt die Lage, die Marken selbst stehen darin statisch, sonst haetten sie unterschiedliche Hoehen: "Neu" hat zwei Zeilen, "Top Nordseeherz" nur eine. */ /* Schaerpe quer ueber die obere linke Ecke. Sie liegt ueber allem, faengt keine Klicks ab und ist im Druck weg. */ /* Ein Band ueber die ganze Bildbreite, halb durchsichtig. Die schraege Schaerpe in der Ecke war zu laut: sie verdeckte das Motiv und zog mehr Aufmerksamkeit auf sich als das Haus. */ .beispielmarke{position:absolute;z-index:2;left:0;right:0;top:0; padding:7px 0;pointer-events:none;text-align:center; background:rgba(160,61,38,.5);color:#fff; -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px); font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase; text-shadow:0 1px 3px rgba(0,0,0,.35)} .okarte__marken{position:absolute;z-index:3;left:10px;right:10px;bottom:26px; display:flex;align-items:stretch;gap:7px;pointer-events:none} .okarte__marken > *{position:static;height:30px;padding-block:0;flex:0 0 auto; min-width:0;max-width:100%} .okarte__marken .topmarke{align-items:center;overflow:hidden;text-overflow:ellipsis} .okarte__in{padding:15px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1} .okarte__ort{font-size:.76rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--sage)} .okarte__nr{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:var(--r-pill); background:rgba(12,44,88,.06);color:var(--text-leise);letter-spacing:.03em;font-size:.7rem} .nummernfeld{width:100%;padding:10px 13px;border:1px solid var(--line);border-radius:10px; font:inherit;font-size:.9rem;background:#fff;color:var(--ink);margin-bottom:5px} .nummernfeld:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 3px rgba(23,69,126,.13)} .filtergruppe small{display:block;font-size:.78rem;color:var(--sage);line-height:1.45} .objektnummer{display:inline-flex;align-items:center;padding:4px 12px;border-radius:var(--r-pill); border:1px solid var(--line);background:rgba(12,44,88,.04);color:var(--text-weich); font-size:.8rem;font-weight:600;letter-spacing:.03em} .okarte__in h3{font-size:1.46rem;line-height:1.22} .okarte__link{color:inherit} .okarte__link::after{content:'';position:absolute;inset:0;z-index:1} .okarte__daten{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.85rem;color:var(--text-weich)} .okarte__daten span{display:inline-flex;align-items:center;gap:5px} .pikto{width:17px;height:17px;flex:0 0 auto;color:var(--text-leise);opacity:1} .okarte__extras{display:flex;align-items:center;gap:8px;padding-top:2px} .okarte__extras span{display:grid;place-items:center;width:28px;height:28px;border-radius:8px; background:rgba(12,44,88,.055);color:var(--text-weich);border:1px solid var(--line-soft)} .okarte__extras .pikto{width:16px;height:16px;opacity:1} .okarte__extras small{font-size:.75rem;color:var(--sage)} .okarte__fuss{margin-top:auto;padding-top:11px;display:flex;align-items:center; justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line-soft)} .preispille{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:2px 7px; padding:7px 15px;border-radius:var(--r-pill);max-width:100%; background:rgba(12,44,88,.06);color:var(--ink); font-family:'Nordseeschrift','Segoe Script','Bradley Hand',cursive;font-size:1.42rem;font-weight:400;line-height:1.05} .preispille small{font-family:'Inter',sans-serif;font-size:.7rem;font-weight:500;color:var(--text-leise)} .okarte__knopf{position:relative;z-index:2;flex:0 0 auto;white-space:nowrap} /* --- Bewertung als Seesterne --------------------------------------------- */ .bewertung{display:inline-flex;align-items:center;gap:7px;font-size:.84rem;color:var(--text-weich)} .bewertung__sterne{display:inline-flex;gap:2px} .seestern{width:15px;height:15px;flex:0 0 auto} .bewertung b{font-weight:700;color:var(--ink)} .bewertung small{color:var(--sage);font-size:.78rem} .bewertung--gross{font-size:.96rem;gap:9px} .bewertung--gross .seestern{width:23px;height:23px} /* --- Suchseite: Split Layout -------------------------------------------- */ .suchlayout{display:grid;grid-template-columns:262px minmax(0,1fr) 430px;gap:clamp(14px,1.6vw,24px);align-items:start} .suchlayout__karte{position:sticky;top:94px} @media(max-width:1280px){.suchlayout{grid-template-columns:250px minmax(0,1fr)}.suchlayout__karte{grid-column:1/-1;position:static;order:-1}} @media(max-width:900px){ .suchlayout{grid-template-columns:minmax(0,1fr)} .suchlayout > *{min-width:0} .suchlayout > div:first-child{order:-2} } .filterknopf{display:none;margin-bottom:12px} .filterspalte{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-card);padding:18px;position:sticky;top:94px} /* Die Spalte ist schmal: zwei Datumsfelder nebeneinander ragten ueber den Rand in die Trefferliste. Untereinander passen sie immer. Ebenso standen die drei Knoepfe Mieten, Kaufen und Beides mit vollem Innenabstand ueber. */ .filterspalte .zweispalt{grid-template-columns:minmax(0,1fr)} .filterspalte .regionwahl button{min-width:0;padding-inline:6px} @media(max-width:900px){ .filterspalte{position:static} .filterknopf{display:flex} .filterspalte[data-zu="1"]{display:none} } .filtergruppe+.filtergruppe{margin-top:20px;padding-top:20px;border-top:1px solid var(--line-soft)} .filtergruppe>h4{margin-bottom:10px;font-family:'Inter',sans-serif;font-size:.82rem;font-weight:700;color:var(--sage)} .check{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:.9rem;cursor:pointer} .check input{width:17px;height:17px;accent-color:var(--signal);flex:0 0 auto} .check__punkt{width:11px;height:11px;border-radius:3px;flex:0 0 auto} .check__zahl{margin-left:auto;font-size:.78rem;color:var(--sage)} .eingabe{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-input);background:#fff;font-size:.92rem} .eingabe:focus{border-color:var(--signal);outline:none;box-shadow:0 0 0 3px rgba(23,69,126,.14)} .zweispalt{display:grid;grid-template-columns:1fr 1fr;gap:8px} .ergebniskopf{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:16px} .ergebniskopf__zahl{font-size:.95rem} .ergebniskopf__zahl b{font-family:'Fraunces',Georgia,serif;font-size:1.25rem;font-weight:650} .sortier{display:flex;align-items:center;gap:8px;font-size:.88rem} .sortier select{padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-input);background:#fff} .aktivfilter{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px} .chip{display:inline-flex;align-items:center;gap:7px;padding:5px 8px 5px 12px;border-radius:var(--r-pill);background:var(--soft-blue);font-size:.82rem;font-weight:500} .chip button{border:0;background:none;cursor:pointer;font-size:1rem;line-height:1;padding:0 2px;color:var(--signal)} .leer{padding:44px 24px;text-align:center;border:1px dashed var(--line);border-radius:14px;background:rgba(255,255,255,.8)} .leer h3{margin-bottom:8px} /* --- Objektdetail ------------------------------------------------------- */ .galerie{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;gap:8px;border-radius:12px;overflow:hidden;aspect-ratio:16/8.4} .galerie__feld{position:relative;margin:0;overflow:hidden;cursor:zoom-in} .galerie__feld:nth-child(1){grid-column:1/3;grid-row:1/3} .galerie__feld:nth-child(4){grid-column:3/5} .galerie img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease} .galerie__feld:hover img{transform:scale(1.045)} .galerie__mehr{position:absolute;inset:0;display:grid;place-items:center;background:rgba(12,44,88,.46); color:#fff;font-weight:600;font-size:1rem;letter-spacing:.02em} @media(max-width:760px){.galerie{grid-template-columns:1fr;grid-template-rows:auto;aspect-ratio:auto}.galerie__feld:nth-child(1){grid-column:1;grid-row:auto;aspect-ratio:4/3}.galerie__feld:nth-child(n+2){display:none}} .detaillayout{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:clamp(24px,3.4vw,54px);align-items:start} @media(max-width:1000px){ /* minmax(0,1fr), nicht 1fr: sonst zieht ein breites Kind die Spalte mit und die ganze Seite laesst sich seitlich schieben. Auf dem Telefon ragte der Inhalt dadurch sieben Pixel hinaus. */ .detaillayout{grid-template-columns:minmax(0,1fr)} .detaillayout > *{min-width:0} } .buchbox{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-m);padding:20px;position:sticky;top:94px} @media(max-width:1000px){.buchbox{position:static}} .buchbox__preis{display:flex;align-items:baseline;gap:8px;padding-bottom:14px;border-bottom:1px solid var(--line-soft);margin-bottom:14px} .buchbox__preis b{font-family:'Nordseeschrift','Segoe Script','Bradley Hand',cursive;font-size:2.15rem;font-weight:400} .preiszeile{display:flex;justify-content:space-between;gap:14px;font-size:.92rem;padding:6px 0} .preiszeile--summe{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;font-weight:700;font-size:1.06rem} .preiszeile span:first-child{color:var(--text-weich)} .merkmalgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:10px} /* Lagefeld bei Ferienunterkuenften: kleine Strassenkarte neben der Lagebeschreibung, ein Klick oeffnet sie gross (lagefeld() in app.js) */ .lagefeld{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px 22px;align-items:start;margin-top:22px} .lagefeld__karte{position:relative;width:200px;height:200px;border-radius:12px;overflow:hidden; isolation:isolate;background:#f4ecdd;border:1px solid var(--line);box-shadow:var(--shadow-s);cursor:zoom-in} .lagefeld__karte:focus-visible{outline:3px solid var(--signal-hell);outline-offset:3px} .lagefeld__karte .maplibregl-canvas{cursor:zoom-in} .lagefeld__lade{position:absolute;inset:0;display:grid;place-items:center;padding:14px;text-align:center; font-size:.8rem;color:var(--text-leise)} .lagefeld__lupe{position:absolute;right:8px;top:8px;z-index:2;width:30px;height:30px;border-radius:50%; display:grid;place-items:center;background:rgba(251,247,239,.94);box-shadow:var(--shadow-s);pointer-events:none} .lagefeld__lupe svg{width:15px;height:15px;fill:none;stroke:var(--ink);stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .lagefeld__karte:hover .lagefeld__lupe{background:#fff} .lagefeld__osm{position:absolute;left:0;bottom:0;z-index:2;padding:1px 6px;border-top-right-radius:6px; font-size:.6rem;line-height:1.6;background:rgba(251,247,239,.86);color:var(--text-weich);pointer-events:none} .lagefeld__text{min-width:0} .lagefeld__marke{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--sage)} .lagefeld__adresse{display:block;margin-top:3px;font-size:1.02rem;color:var(--ink)} .lagefeld__text p{margin-top:8px;font-size:.98rem} /* Knopf im Kleid von .linkline: dieselbe Unterstreichung, ohne Knopfrahmen */ .lagefeld__knopf{margin-top:10px;padding:0 0 2px;background:none;border:0; border-bottom:1.5px solid rgba(12,44,88,.34);font:inherit;font-size:.92rem;font-weight:600; color:var(--ink);cursor:pointer} .lagefeld__knopf:hover{border-bottom-color:var(--ink)} @media(max-width:560px){ .lagefeld{grid-template-columns:minmax(0,1fr)} .lagefeld__karte{width:100%} } .nh-nadel{width:40px;height:52px;filter:drop-shadow(0 3px 4px rgba(12,44,88,.35))} .nh-nadel svg{display:block;width:100%;height:100%} .merkmal{display:flex;align-items:center;gap:11px;font-size:.92rem;padding:10px 12px; border:1px solid var(--line-soft);border-radius:10px;background:#fff; box-shadow:var(--schatten-bild)} .merkmal .pikto{color:var(--text-leise)} .merkmal svg{width:19px;height:19px;flex:0 0 auto;stroke:var(--signal);fill:none;stroke-width:1.7} /* Belegungskalender */ .kalender{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(238px,100%),1fr));gap:20px} .monat__kopf{font-family:'Fraunces',Georgia,serif;font-weight:650;margin-bottom:8px;text-align:center} .monat__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .monat__grid span{aspect-ratio:1;display:grid;place-items:center;font-size:.78rem;border-radius:4px} .monat__wt{font-size:.68rem !important;color:var(--sage);font-weight:600} .tag--frei{background:rgba(94,143,99,.16);color:#2f5d3f} .tag--belegt{background:rgba(168,66,44,.12);color:rgba(168,66,44,.75);text-decoration:line-through} .tag--leer{opacity:0} /* --- Objektdetail: Kopf, Kerndaten, Ausstattung --------------------------- */ .objektkopf{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;justify-content:space-between} .objektkopf__zeile{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px} .objektkopf__ort{font-size:.86rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase; color:var(--sage)} .typmarke{display:inline-flex;align-items:center;gap:7px;padding:5px 13px 5px 8px; border-radius:var(--r-pill);font-size:.8rem;font-weight:600; background:rgba(12,44,88,.05);color:var(--ink);border:1px solid var(--typfarbe,var(--line))} .typmarke svg{width:18px;height:20px} .topmarke--fest{position:static} .kerndaten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(112px,100%),1fr));gap:10px; margin-bottom:26px} .kerndaten__feld{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 10px; border:1px solid var(--line-soft);border-radius:12px;background:#fff;text-align:center; box-shadow:var(--schatten-bild)} .kerndaten__feld b{font-family:'Fraunces',Georgia,serif;font-size:1.24rem;font-weight:650;line-height:1} .kerndaten__feld span{font-size:.76rem;letter-spacing:.03em;color:var(--sage)} .pikto--gross{width:30px;height:30px;margin-bottom:3px} .pikto--mittel{width:22px;height:22px} body[class*="typ-"] .kerndaten__feld .pikto{color:var(--text-leise)} body.typ-fewo{--typfarbe:var(--typ-fewo);--typtint:#e4efe5} body.typ-fehaus{--typfarbe:var(--typ-fehaus);--typtint:#dfeae2} body.typ-hotel{--typfarbe:var(--typ-hotel);--typtint:#dfebf3} body.typ-zimmer{--typfarbe:var(--typ-zimmer);--typtint:#e5f1f7} body.typ-kaufhaus{--typfarbe:var(--typ-kaufhaus);--typtint:#f5e2db} body.typ-kaufwohnung{--typfarbe:var(--typ-kaufwohnung);--typtint:#f8eae0} body.typ-grund{--typfarbe:var(--typ-grund);--typtint:#f0ebda} .stufen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:14px;margin:22px 0 18px} .stufe{padding:18px 19px;border:1px solid var(--line-soft);border-left:3px solid var(--signal); border-radius:12px;background:#fff;box-shadow:var(--schatten-bild)} .stufe h3{font-size:1.5rem;margin:4px 0 8px} .stufe p{font-size:.89rem;line-height:1.6;color:var(--text-weich)} .stufe__marke{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--sage)} .stufe__preis{margin-top:9px;font-weight:600;color:var(--ink) !important;font-size:.85rem !important} .lightbox__text{position:absolute;left:50%;bottom:64px;transform:translateX(-50%); max-width:min(760px,86vw);margin:0;padding:9px 18px;border-radius:var(--r-pill); background:rgba(12,44,88,.72);color:#fff;font-size:.92rem;text-align:center; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .lightbox__text[hidden]{display:none} .energiechip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--r-pill); background:rgba(12,44,88,.05);border:1px solid var(--line-soft);font-size:.78rem;font-weight:600; color:var(--text-weich);align-self:flex-start} .energiechip i{width:9px;height:9px;border-radius:50%;flex:0 0 auto} /* --- Energieausweis ------------------------------------------------------- */ .ampel{max-width:560px} .ampel__skala{display:flex;border-radius:9px;overflow:hidden;box-shadow:var(--schatten-bild)} .ampel__feld{flex:1;padding:9px 2px;text-align:center;font-size:.76rem;font-weight:700;color:#fff; background:var(--f);opacity:.42;transition:opacity .3s ease} .ampel__feld.an{opacity:1;transform:scaleY(1.35);border-radius:5px;position:relative;z-index:2; box-shadow:0 3px 10px rgba(12,44,88,.28)} .ampel__wert{display:flex;align-items:center;gap:11px;margin-top:16px;font-size:.95rem; color:var(--text-weich)} .ampel__wert b{display:grid;place-items:center;min-width:46px;height:38px;border-radius:9px; color:#fff;font-size:1.16rem;font-weight:700} .ampel__daten{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:18px 0 0; font-size:.9rem} .ampel__daten dt{color:var(--sage)} .ampel__daten dd{margin:0;color:var(--ink)} .ampel--klein .ampel__feld{padding:5px 1px;font-size:.62rem} .ampel--klein .ampel__wert{margin-top:10px;font-size:.82rem} .ampel--klein .ampel__wert b{min-width:34px;height:28px;font-size:.95rem} /* --- Provision ------------------------------------------------------------ Steht nur auf der Objektseite, nicht in der Liste. Sie gehoert zum Angebot und soll gefunden werden, ohne den Preis zu ueberdecken. */ /* Das Provisionsfeld steht direkt unter den Eckdaten und liest sich wie eine weitere Zeile davon: gleiche Schriftgroesse, nur ein Kasten darum. */ .provision{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px; max-width:520px;margin-top:18px;padding:14px 18px;border-radius:12px; background:rgba(12,44,88,.04);border:1px solid var(--line-soft); border-left:4px solid var(--sand-tief,#c8a24e)} .provision[hidden]{display:none} .provision__marke{font-size:.92rem;font-weight:400;letter-spacing:0; text-transform:none;color:var(--text-weich)} .provision__wert{font-size:.92rem;font-weight:700;color:var(--ink);margin-left:auto} .provision__hinweis{flex:1 1 100%;font-size:.82rem;line-height:1.55; color:var(--text-leise)} html[data-dunkel="1"] .provision{background:rgba(255,255,255,.05);border-color:#27454f} /* --- Anbieter: privat, Verwaltung oder Makler ------------------------------ */ .anbietermarke{display:inline-flex;align-items:center;margin-left:5px;padding:2px 9px; border-radius:var(--r-pill);font-size:.68rem;font-weight:700;letter-spacing:.05em; text-transform:uppercase;border:1px solid currentColor;max-width:100%} /* Firmennamen bleiben in ihrer Schreibweise. Versalien machen aus einem Namen ein Etikett, und der Name ist das, wofuer der Partner zahlt. */ .anbietermarke--firma{text-transform:none;letter-spacing:.01em;font-size:.74rem; padding:2px 11px} /* Das Logo steht klein im Fuss der Karte. In der Marke selbst waere es sechzehn Pixel gross und damit unlesbar. */ .okarte__anbieter{display:flex;justify-content:flex-end;align-items:center; margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)} /* Gross genug, dass man den Namen im Logo lesen kann. Bei 22 Pixel Hoehe war die Unterzeile nur noch ein grauer Strich, bei 40 gerade eben. */ /* Nie breiter als die Karte und nie hoeher als drei Textzeilen: sonst ragt ein liegendes Logo aus dem Feld oder draengt den Preis nach unten. */ .okarte__anbieter img{max-width:min(100%,224px);max-height:54px;width:auto;height:auto; object-fit:contain;object-position:right center;opacity:.95} html[data-dunkel="1"] .okarte__anbieter img{filter:brightness(1.9) contrast(.85)} .anbietermarke--privat{color:#2f7d5a;background:rgba(47,125,90,.09)} .anbietermarke--verwaltung{color:#2f6d8a;background:rgba(47,109,138,.09)} .anbietermarke--makler{color:#a8562c;background:rgba(168,86,44,.09)} .anbieter{display:flex;gap:24px;align-items:center;max-width:640px; padding:20px 22px;border-radius:14px;background:#fff;border:1px solid var(--line-soft); box-shadow:var(--schatten-bild)} .anbieter__logo{flex:0 0 auto;width:clamp(130px,19vw,200px);height:auto;max-height:96px; object-fit:contain;object-position:left center} .anbieter__text{flex:1;min-width:0} .anbieter p{margin:0;font-size:.94rem;line-height:1.6;color:var(--text-weich)} .anbieter__daten{margin-top:12px !important;padding-top:12px; border-top:1px solid var(--line-soft);color:var(--ink) !important} .anbieter--privat{border-left:4px solid #2f7d5a} .anbieter--verwaltung{border-left:4px solid #2f6d8a} .anbieter--makler{border-left:4px solid #a8562c} @media(max-width:560px){ .anbieter{flex-direction:column;gap:12px} .anbieter__logo{width:120px} } html[data-dunkel="1"] .anbieter{background:#152f38;border-color:#27454f} /* --- Werbeplaetze --------------------------------------------------------- */ /* Klein, ruhig und als Anzeige gekennzeichnet. Sie sollen nicht mit den Objekten verwechselt werden, deshalb kein Schatten und ein anderer Grund. */ .anzeige{display:block;margin-top:18px;padding:13px 14px 15px;border-radius:12px; border:1px solid var(--line-soft);background:rgba(12,44,88,.035); text-decoration:none;color:var(--ink); transition:border-color .25s ease,background .25s ease} a.anzeige:hover{border-color:var(--line);background:rgba(12,44,88,.06)} .anzeige__marke{display:inline-block;margin-bottom:9px;padding:1px 8px;border-radius:var(--r-pill); background:rgba(12,44,88,.09);color:var(--text-leise);font-size:.62rem;font-weight:700; letter-spacing:.13em;text-transform:uppercase} .anzeige img{display:block;width:100%;height:auto;border-radius:8px;margin-bottom:10px} .anzeige__titel{display:block;font-weight:700;font-size:.95rem;line-height:1.35; margin-bottom:4px} .anzeige__text{display:block;font-size:.85rem;line-height:1.5;color:var(--text-weich)} @media print{.anzeige{display:none}} html[data-dunkel="1"] .anzeige{background:rgba(255,255,255,.05);border-color:#2f5561} /* Anzeige in der Ergebnisliste --------------------------------------------- Weisser Grund wie die Objektkarten, damit sie nicht wie ein Fremdkoerper wirkt. Damit sie trotzdem nicht mit einem Objekt verwechselt wird, traegt sie oben einen goldenen Streifen, ein deutliches Schild und einen gefuellten Knopf statt eines Umrisses. */ .listenanzeige{position:relative;display:flex;flex-direction:column;gap:10px; padding:26px 22px 24px;border-radius:var(--r-karte);text-decoration:none; color:var(--ink);background:#fff;border:1px solid var(--line-soft); box-shadow:var(--shadow-m);overflow:hidden; transition:box-shadow .25s ease,transform .25s ease} .listenanzeige::before{content:'';position:absolute;left:0;right:0;top:0;height:5px; background:linear-gradient(90deg,#e5c383,#c8a24e 55%,#e5c383)} a.listenanzeige:hover{transform:translateY(-4px);box-shadow:var(--shadow-l)} .listenanzeige .anzeige__marke{align-self:flex-start;margin:0; padding:4px 12px;border-radius:var(--r-pill); background:#f3ead8;color:#7a5f22;border:1px solid #e0cfa4; font-size:.64rem;font-weight:800;letter-spacing:.16em} .listenanzeige img{display:block;width:100%;height:auto;border-radius:10px; border:1px solid var(--line-soft)} .listenanzeige__titel{font-weight:800;font-size:1.3rem;line-height:1.22; letter-spacing:-.01em} .listenanzeige__text{font-size:.95rem;line-height:1.6;color:var(--text-weich);flex:1} .listenanzeige__mehr{align-self:flex-start;margin-top:6px;padding:12px 26px; border-radius:var(--r-pill);background:var(--blau-verlauf);color:#fff; font-size:.94rem;font-weight:700; box-shadow:0 10px 24px -12px rgba(12,44,88,.8)} a.listenanzeige:hover .listenanzeige__mehr{background:var(--blau-verlauf-hell)} @media print{.listenanzeige{display:none}} html[data-dunkel="1"] .listenanzeige{background:#152f38;border-color:#27454f} html[data-dunkel="1"] .listenanzeige .anzeige__marke{background:rgba(229,195,131,.16); color:#e5c383;border-color:rgba(229,195,131,.4)} /* --- Kontaktanfrage zum Objekt -------------------------------------------- Ohne Skript liegt das Formular einfach auf der Seite, deshalb sind die Fenstereigenschaften an eine Klasse gebunden, die das Skript setzt. */ @keyframes einblenden{from{opacity:0}to{opacity:1}} .anfragefenster{position:fixed;inset:0;z-index:95;display:flex;align-items:center; justify-content:center;padding:clamp(12px,3vw,34px)} .anfragefenster[hidden]{display:none} .anfragefenster__hintergrund{position:absolute;inset:0;background:rgba(12,44,88,.55); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); animation:einblenden .22s ease both} .anfragefenster__feld{position:relative;width:min(620px,100%);max-height:92vh; max-height:92dvh;display:flex;flex-direction:column;background:#fff; border-radius:16px;box-shadow:0 40px 90px -30px rgba(12,44,88,.7);overflow:hidden; animation:fensterAuf .28s cubic-bezier(.2,.8,.3,1) both} .anfragefenster__kopf{display:flex;align-items:center;justify-content:space-between; gap:14px;padding:20px 24px 16px;border-bottom:1px solid var(--line-soft)} .anfragefenster__kopf h2{font-family:'Inter',sans-serif;font-weight:700; font-size:1.3rem;color:var(--ink)} .anfragefenster__zu{width:38px;height:38px;border:0;border-radius:50%;cursor:pointer; background:rgba(12,44,88,.06);color:var(--ink);font-size:1.5rem;line-height:1; display:grid;place-items:center} .anfragefenster__zu:hover{background:rgba(12,44,88,.12)} .anfragefenster__inhalt{overflow-y:auto;padding:20px 24px 26px; -webkit-overflow-scrolling:touch;overscroll-behavior:contain} html[data-fenster="1"],html[data-fenster="1"] body{overflow:hidden} /* Strassenkarte gross, im Fenster der Anfrage (kartenfenster() in app.js) */ .kartenfenster__feld{width:min(1100px,100%);height:min(780px,92vh);height:min(780px,92dvh)} .kartenfenster__adresse{margin-top:2px;font-size:.9rem;color:var(--text-weich)} .kartenfenster__karte{position:relative;flex:1;min-height:0;background:#f4ecdd} .kartenfenster__fehler{padding:24px;color:var(--text-weich)} @media(max-width:640px){ .kartenfenster{padding:0} .kartenfenster__feld{width:100%;height:100%;max-height:none;border-radius:0} } .anfrageanbieter{display:flex;align-items:center;gap:16px;margin-bottom:20px; padding:14px 16px;border-radius:12px;background:var(--shell); border:1px solid var(--line-soft)} .anfrageanbieter img{width:auto;height:auto;max-width:118px;max-height:40px; object-fit:contain;object-position:left center} .anfrageanbieter__wer{display:block;font-weight:700;color:var(--ink)} .anfrageanbieter__name{display:block;font-size:.9rem;color:var(--text-weich)} .anfrageanbieter__objekt{display:block;margin-top:3px;font-size:.82rem;color:var(--sage)} .anfrage__zwischen{font-family:'Inter',sans-serif;font-weight:700;font-size:1.02rem; margin:22px 0 4px;color:var(--ink)} .anfrage__eigentum{margin:16px 0 6px;padding:14px 16px;border-radius:12px; border:1px solid var(--line-soft);background:rgba(12,44,88,.03)} .anfrage__eigentum legend{padding:0 6px;font-size:.92rem;font-weight:600;color:var(--ink)} .anfrage__eigentum .wahl{display:inline-flex;margin-right:22px} .anfrage__zustimmung{margin-top:14px} .anfrage__zustimmung .wahl{align-items:flex-start;gap:10px;font-size:.88rem; line-height:1.55;color:var(--text-weich)} .anfrage__meldung{margin:14px 0 0;padding:12px 15px;border-radius:10px;font-size:.92rem; line-height:1.55} .anfrage__meldung[hidden]{display:none} .anfrage__meldung--gut{background:rgba(47,125,90,.1);color:#1f5a41; border:1px solid rgba(47,125,90,.3)} .anfrage__meldung--schlecht{background:rgba(168,86,44,.1);color:#8d3624; border:1px solid rgba(168,86,44,.3)} #anfrageSenden{margin-top:18px} @media(max-width:620px){ .anfragefenster{padding:0;align-items:stretch} .anfragefenster__feld{width:100%;max-height:100vh;max-height:100dvh;border-radius:0} } html[data-dunkel="1"] .anfragefenster__feld{background:#152f38} html[data-dunkel="1"] .anfrageanbieter{background:rgba(255,255,255,.05);border-color:#27454f} /* Hinweis auf ein erfundenes Objekt. Er steht ueber der Beschreibung, nicht darunter: wer das Haus fuer echt haelt, soll es erfahren, bevor er liest. */ /* Schmaler Balken ganz oben auf dem Inserat, solange es ein Musterobjekt ist. Dieselbe Farbe wie das Band auf den Objektkarten. */ .musterbalken{position:relative;z-index:5;padding:6px 16px;text-align:center; background:#a03d26;color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.16em; text-transform:uppercase;line-height:1.4} .musterbalken span{font-weight:500;letter-spacing:.04em;text-transform:none;opacity:.9} .musterbalken[hidden]{display:none} @media (max-width:560px){.musterbalken span{display:none}} @media print{.musterbalken{display:none}} .beispielhinweis{display:grid;gap:5px;max-width:70ch;margin-bottom:22px; padding:15px 19px;border-radius:12px; background:linear-gradient(120deg,rgba(200,115,75,.1),rgba(160,61,38,.07)); border:1px solid rgba(160,61,38,.28);border-left:5px solid #a03d26} .beispielhinweis[hidden]{display:none} .beispielhinweis b{font-size:1rem;color:#8d3624} .beispielhinweis span{font-size:.92rem;line-height:1.6;color:var(--text-weich)} @media print{.beispielmarke,.beispielhinweis{display:none}} /* --- Aufruf an Partneragenturen ------------------------------------------- */ .partneraufruf{display:grid;gap:0;grid-template-columns:1.25fr .85fr;margin-top:30px; border-radius:18px;overflow:hidden;box-shadow:var(--shadow-l); background:linear-gradient(150deg,#17457e,#0c2c58 72%)} .partneraufruf__text{padding:clamp(26px,3.4vw,44px);color:#fff} .partneraufruf__marke{display:inline-block;margin-bottom:14px;padding:5px 15px; border-radius:var(--r-pill);background:linear-gradient(100deg,#f2ddb0,#e5c383 55%,#f4e3c1); color:#3d2c11;font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase} .partneraufruf h2{font-family:'Inter',sans-serif;font-weight:800;letter-spacing:-.015em; font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.2;color:#fff;margin-bottom:14px; max-width:19ch} .partneraufruf p{font-size:1rem;line-height:1.65;color:rgba(255,255,255,.88);max-width:52ch} .partneraufruf__punkte{list-style:none;margin:18px 0 22px;display:grid;gap:9px} .partneraufruf__punkte li{position:relative;padding-left:28px;font-size:.95rem; color:rgba(255,255,255,.92)} .partneraufruf__punkte li::before{content:'\2713';position:absolute;left:0;top:0; width:19px;height:19px;display:grid;place-items:center;border-radius:50%; background:rgba(229,195,131,.22);color:#e5c383;font-size:.72rem;font-weight:700} .partneraufruf__knoepfe{display:flex;flex-wrap:wrap;gap:11px;margin-top:6px} .partneraufruf__bild{position:relative;min-height:260px;overflow:hidden} .partneraufruf__bild img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:22% 40%;display:block} .partneraufruf__bild::after{content:'';position:absolute;inset:0; background:linear-gradient(90deg,rgba(12,44,88,.55),rgba(12,44,88,0) 45%)} @media(max-width:820px){ .partneraufruf{grid-template-columns:1fr} .partneraufruf__bild{min-height:190px;order:-1} .partneraufruf__bild::after{background:linear-gradient(180deg,rgba(12,44,88,.3),rgba(12,44,88,.55))} } /* Ein schmaler Rahmen fuer einzelne Formulare. Ueber die volle Breite waeren die Felder unangenehm lang zu lesen. */ .wrap--schmal{max-width:min(760px,calc(100% - 2*clamp(16px,4vw,44px)))} /* --- Partnerkacheln und Anforderungen ------------------------------------- */ .partnergitter{display:grid;gap:18px;margin-top:24px; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))} .partnerkachel{padding:22px 22px 24px;border-radius:14px;background:#fff; border:1px solid var(--line-soft);box-shadow:var(--shadow-s)} .partnerkachel__zeichen{display:grid;place-items:center;width:46px;height:46px; margin-bottom:13px;border-radius:12px;background:rgba(23,69,126,.08);color:var(--signal)} .partnerkachel__zeichen svg{width:25px;height:25px;fill:none;stroke:currentColor; stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .partnerkachel h3{font-family:'Inter',sans-serif;font-weight:700;font-size:1.06rem; margin-bottom:7px;color:var(--ink)} .partnerkachel p{font-size:.92rem;line-height:1.6;color:var(--text-weich)} /* minmax(min(310px,100%),1fr): unter 310 Pixeln nimmt die Kachel die volle Breite, statt ueber den Rand hinauszuwachsen. */ .anforderungen{list-style:none;display:grid;gap:16px;margin-top:22px; grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr))} .anforderungen li{position:relative;padding:20px 22px 21px 62px;border-radius:14px; background:#fff;border:1px solid var(--line-soft);font-size:.92rem;line-height:1.6; color:var(--text-weich)} .anforderungen b{display:block;margin-bottom:5px;font-size:1.02rem;color:var(--ink)} .anforderungen__zahl{position:absolute;left:20px;top:20px;width:28px;height:28px; display:grid;place-items:center;border-radius:50%; background:linear-gradient(150deg,#e5c383,#c8a24e);color:#3d2c11; font-size:.86rem;font-weight:800} /* Bueros: eines echt, zwei offen */ .bueros{display:grid;gap:16px;margin-top:20px; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))} .buero{border-radius:14px;overflow:hidden;background:#fff; border:1px solid var(--line-soft);box-shadow:var(--shadow-s);display:flex; flex-direction:column} .buero__bild{position:relative;overflow:hidden} .buero__bild img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover} /* Ein freier Platz zeigt trotzdem ein Bild: sonst wirkt die Kachel wie ein Fehler. Das Fragezeichen sagt, was gemeint ist. */ .buero--offen .buero__bild::after{content:'';position:absolute;inset:0; background:linear-gradient(160deg,rgba(23,69,126,.72),rgba(12,44,88,.86))} /* Ein Umriss statt eines Fragezeichens: das Fragezeichen las sich, als wuessten wir selbst nicht, was dort hin soll. */ .buero__avatar{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%); z-index:2;width:clamp(64px,13vw,92px);height:clamp(64px,13vw,92px); display:grid;place-items:center;border-radius:50%; background:rgba(255,255,255,.14);border:2px dashed rgba(255,255,255,.55)} .buero__avatar svg{width:58%;height:58%;fill:none;stroke:rgba(255,255,255,.9); stroke-width:4;stroke-linecap:round} .buero__band{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:9px 0; text-align:center;background:linear-gradient(100deg,#f2ddb0,#e5c383 55%,#f4e3c1); color:#3d2c11;font-size:.82rem;font-weight:800;letter-spacing:.1em; text-transform:uppercase} .buero__text{padding:16px 18px 18px} .buero__text h3{font-family:'Inter',sans-serif;font-weight:700;font-size:1.02rem; margin-bottom:8px;color:var(--ink)} .buero__text p{font-size:.9rem;line-height:1.65;color:var(--text-weich);margin-bottom:9px} .buero__text p:last-child{margin-bottom:0} /* Ein offener Platz sieht anders aus als ein besetzter: gestrichelt, ohne Bild. */ .buero--offen{border-style:dashed;border-color:rgba(23,69,126,.34)} .buero__marke{display:inline-block;margin-bottom:9px;padding:3px 11px; border-radius:var(--r-pill);background:rgba(229,195,131,.34);color:#7a5f22; font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase} /* Marken im Impressum */ .marke{margin:6px 0 14px} .marke img{display:block;max-width:min(100%,340px);height:auto} .marke--p{display:flex;align-items:center;gap:14px} .marke--p img{width:52px;max-width:52px} .marke--p span{display:grid;font-family:'Inter',sans-serif;font-weight:800; font-size:1.24rem;letter-spacing:-.01em;color:var(--ink);line-height:1.1} .marke--p small{font-size:.76rem;font-weight:500;letter-spacing:.02em; color:var(--text-leise)} /* --- Schlussband ---------------------------------------------------------- Der Abschluss jeder Seite. Es laeuft unter die Wellenkante des Fusses, deshalb der negative Abstand: die Welle soll darauf liegen, nicht daneben. */ /* Der Fuss hat 60 Pixel Abstand nach oben. Zieht das Band nur 58 hoch, bleiben zwei Pixel Seitenhintergrund stehen, und in den Wellentaelern, wo die Welle keine Farbe hat, blitzt das hell durch. Deshalb genau 60. */ .schlussband{position:relative;width:100%;height:clamp(240px,36vh,420px); overflow:hidden;background:var(--ink);margin-bottom:-60px} .schlussband__film{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;display:block} .schlussband__schleier{position:absolute;inset:0; background:linear-gradient(180deg,rgba(12,44,88,.06) 0%,rgba(12,44,88,.02) 46%, rgba(12,44,88,.42) 100%)} @media print{.schlussband{display:none}} /* Ortskachel, die zur Ortsseite fuehrt */ a.kachel--verweis{display:block;text-decoration:none;color:inherit; transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease} a.kachel--verweis:hover{transform:translateY(-3px);box-shadow:var(--shadow-m); border-color:rgba(23,69,126,.34)} .kachel__mehr{display:inline-block;margin-top:10px;font-size:.84rem;font-weight:700; color:var(--signal)} /* Gestaltbare Anzeigen. Die Schriften kommen aus dem vorhandenen Bestand: ein zusaetzlicher Zeichensatz waere ein Download, den alle bezahlen, damit eine Anzeige anders aussieht. */ .anzeige--serifen,.anzeige--serifen .listenanzeige__titel{font-family:Georgia,'Times New Roman',serif} .anzeige--schmal{font-family:'Inter',system-ui,sans-serif;letter-spacing:-.01em} .anzeige--rund{font-family:'Trebuchet MS',Verdana,sans-serif} .anzeige--grund .anzeige__titel,.anzeige--grund .listenanzeige__titel{color:var(--ink)} .anzeige__logo{display:block;max-width:150px;max-height:40px;width:auto;height:auto; object-fit:contain} .anzeige__logo--oben{margin:2px 0 10px} .anzeige__logo--fuss{margin:12px 0 0;max-height:28px;opacity:.85} /* Der Aquarellgrund gehoert auf die Karte selbst, nicht hinter eine weisse Flaeche: sonst sieht man nichts davon. */ .listenanzeige.anzeige--grund,.anzeige.anzeige--grund{background-color:transparent} .anzeige--grund .anzeige__marke{background:rgba(255,255,255,.82)} /* --- Haeufige Fragen ------------------------------------------------------ details und summary statt eigenem Aufklappmechanismus: das bringt Tastatur, Vorlesefunktion und die Suchfunktion des Browsers gratis mit. */ .faq{display:grid;gap:40px} .faq__gruppe h2{font-family:'Nordseeschrift','Segoe Script',cursive;font-weight:400; font-size:clamp(1.7rem,3vw,2.3rem);color:var(--ink);margin-bottom:16px; padding-bottom:11px;border-bottom:2px solid var(--sand)} .faq__liste{display:grid;gap:11px} .faq__punkt{background:#fff;border:1px solid var(--line-soft);border-radius:12px; overflow:hidden;transition:box-shadow .2s ease} .faq__punkt[open]{box-shadow:var(--shadow-s)} .faq__punkt summary{padding:16px 46px 16px 20px;cursor:pointer;position:relative; font-weight:600;font-size:1rem;line-height:1.45;color:var(--ink);list-style:none} .faq__punkt summary::-webkit-details-marker{display:none} .faq__punkt summary::after{content:'';position:absolute;right:20px;top:22px;width:9px; height:9px;border-right:2px solid var(--signal);border-bottom:2px solid var(--signal); transform:rotate(45deg);transition:transform .2s ease} .faq__punkt[open] summary::after{transform:rotate(-135deg);top:25px} .faq__punkt summary:hover{background:rgba(23,69,126,.03)} .faq__punkt p{padding:0 20px 18px;font-size:.95rem;line-height:1.68;color:var(--text-weich); max-width:76ch} /* --- Videobaender --------------------------------------------------------- Kurze Schleifen ohne Ton ueber die volle Breite. Das Standbild traegt, bis der Film da ist, und bleibt stehen, wenn jemand keine Bewegung will. */ .videoband{position:relative;width:100%;height:var(--bandhoehe,380px);overflow:hidden; background:var(--ink);display:grid;place-items:center;isolation:isolate} /* Zwei Baender untereinander brauchen eine sichtbare Kante, sonst wirken sie wie ein einziger langer Film. Beige, damit sie zum Rest passt. */ .videoband + .videoband{border-top:4px solid #efe7dc} .videoband__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; display:block;z-index:0} .videoband__schleier{position:absolute;inset:0;z-index:1; background:linear-gradient(100deg,rgba(12,44,88,.74),rgba(12,44,88,.36) 52%, rgba(12,44,88,.12))} /* Ohne Text braucht es kaum Schleier, dann darf das Bild sprechen. */ .videoband:not(:has(.videoband__text)) .videoband__schleier{ background:linear-gradient(180deg,rgba(12,44,88,.16),rgba(12,44,88,.04) 40%, rgba(12,44,88,.24))} .videoband__text{position:relative;z-index:2;width:min(1280px,100%); padding:0 clamp(20px,5vw,56px);color:#fff} .videoband__text h2{font-family:'Nordseeschrift','Segoe Script',cursive;font-weight:400; font-size:clamp(1.9rem,4vw,3.2rem);line-height:1.1;margin-bottom:12px;color:#fff; text-shadow:0 4px 24px rgba(12,44,88,.65);max-width:18ch} .videoband__text p{font-size:clamp(.98rem,1.3vw,1.12rem);line-height:1.62; max-width:52ch;margin-bottom:20px;color:rgba(255,255,255,.93); text-shadow:0 2px 14px rgba(12,44,88,.6)} @media print{.videoband{display:none}} /* --- Veranstaltungen ------------------------------------------------------ */ .vliste{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr))} .vkarte{display:flex;flex-direction:column;border-radius:16px;overflow:hidden; background:#fff;border:1px solid var(--line-soft);box-shadow:var(--shadow-s); transition:transform .25s ease,box-shadow .25s ease} .vkarte:hover{transform:translateY(-3px);box-shadow:var(--shadow-m)} .vkarte[hidden]{display:none} .vkarte__bild{position:relative} .vkarte__bild img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover} .vkarte__kategorie{position:absolute;left:12px;top:12px;padding:4px 12px; border-radius:var(--r-pill);background:rgba(251,247,239,.94);color:var(--ink); font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase} .vkarte__text{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1} .vkarte__wann{display:inline-block;align-self:flex-start;margin-bottom:8px; padding:3px 11px;border-radius:var(--r-pill); background:linear-gradient(100deg,#f2ddb0,#e5c383 60%);color:#3d2c11; font-size:.74rem;font-weight:800;letter-spacing:.03em} .vkarte h3{font-family:'Inter',sans-serif;font-weight:700;font-size:1.12rem; line-height:1.25;color:var(--ink);margin-bottom:4px} .vkarte__ort{font-size:.84rem;color:var(--sage);margin-bottom:9px} .vkarte__text > p{font-size:.92rem;line-height:1.6;color:var(--text-weich)} .vkarte__fuss{margin-top:auto;padding-top:13px;display:flex;flex-wrap:wrap;gap:6px 14px; align-items:baseline;justify-content:space-between} .vkarte__fuss a{font-size:.86rem;font-weight:700;color:var(--signal)} .vkarte__nachweis{font-size:.68rem;color:var(--text-leise)} .vteaser{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))} /* Zwei Aufmacher nebeneinander, nicht in schmalen Saeulen: bei drei Spalten bricht die Ueberschrift, und der Text wird zur Litfasssaeule. */ .vteaser--zwei{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); max-width:1000px} .vteaser--zwei .vkarte{flex-direction:row} .vteaser--zwei .vkarte__bild{flex:0 0 44%} .vteaser--zwei .vkarte__bild img{height:100%;aspect-ratio:auto} .vteaser__mehr{grid-column:1/-1;margin:0} @media(max-width:640px){ .vteaser--zwei .vkarte{flex-direction:column} .vteaser--zwei .vkarte__bild img{aspect-ratio:3/2} } .vtipps{list-style:none;display:grid;gap:12px;margin-top:20px;max-width:74ch} .vtipps li{position:relative;padding-left:32px;font-size:.95rem;line-height:1.65; color:var(--text-weich)} .vtipps li::before{content:'\2713';position:absolute;left:0;top:2px;width:21px;height:21px; display:grid;place-items:center;border-radius:50%;background:rgba(47,125,90,.14); color:#2f7d5a;font-size:.74rem;font-weight:800} /* --- Buchungsstrecke ---------------------------------------------------- */ .schritte{display:flex;flex-wrap:wrap;gap:8px 26px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:clamp(24px,3vw,40px)} .schritt{display:flex;align-items:center;gap:9px;font-size:.9rem;color:var(--text-leise)} .schritt b{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-size:.8rem} .schritt[data-aktiv="1"]{color:var(--ink);font-weight:600} .schritt[data-aktiv="1"] b{background:var(--blau-verlauf-hell);border-color:transparent;color:#fff} .block{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-card);padding:clamp(18px,2.4vw,28px)} .block+.block{margin-top:18px} .block>h3{margin-bottom:6px} .block__hint{font-size:.88rem;color:var(--sage);margin-bottom:16px} .formgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .formgrid .voll{grid-column:1/-1} @media(max-width:640px){.formgrid{grid-template-columns:1fr}} .feldgruppe label{display:block;font-size:.8rem;font-weight:600;color:var(--sage);margin-bottom:5px} .zusatz{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line-soft)} .zusatz:last-child{border-bottom:0} .zusatz input{margin-top:4px;width:18px;height:18px;accent-color:var(--signal);flex:0 0 auto} .zusatz__txt{flex:1} .zusatz__txt b{display:block;font-weight:600;font-size:.95rem} .zusatz__txt span{font-size:.84rem;color:var(--sage)} .zusatz__preis{font-weight:600;white-space:nowrap;text-align:right} /* Auf schmalen Schirmen passt ein Preis wie "2 € / Person / Nacht" nicht neben den Text und schob die ganze Seite zur Seite. Dann steht er darunter. */ @media(max-width:560px){ .zusatz{flex-wrap:wrap} .zusatz__txt{flex:1 1 calc(100% - 40px);min-width:0} .zusatz__preis{flex:1 0 100%;padding-left:30px;text-align:left;white-space:normal} } .gutschein{display:flex;gap:8px} .gutschein .eingabe{flex:1} .hinweisbox{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r-card); background:var(--soft-blue);font-size:.9rem;line-height:1.6} /* Ohne Symbol davor ist der Kasten ein Absatz, kein Zweispalter. Sonst rutscht der letzte Satz in eine eigene Spalte. */ .hinweisbox:not(:has(svg)){display:block} .hinweisbox svg{width:22px;height:22px;flex:0 0 auto;stroke:var(--signal);fill:none;stroke-width:1.7} .zahlarten{display:flex;flex-wrap:wrap;gap:10px} .zahlart{display:flex;align-items:center;gap:9px;padding:11px 15px;border:1px solid var(--line);border-radius:var(--r-input);font-size:.9rem;font-weight:500;cursor:pointer} .zahlart input{accent-color:var(--signal)} .zahlart:has(input:checked){border-color:var(--signal);background:rgba(23,69,126,.06)} /* --- Inhaltskacheln / Regionen ------------------------------------------ */ .kachelgrid--eng{grid-template-columns:repeat(2,minmax(0,1fr))} @media(max-width:620px){.kachelgrid--eng{grid-template-columns:1fr}} .kachelgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:clamp(16px,2vw,26px)} .kachel{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;gap:10px} .kachel svg.icon{width:38px;height:38px} .kachel h3{font-size:1.16rem} .kachel p{font-size:.93rem;color:var(--text-weich)} .section--deep .kachel{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)} .section--deep .kachel p{color:rgba(255,255,255,.78)} .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center} .split--eng{grid-template-columns:1fr .82fr} @media(max-width:900px){.split,.split--eng{grid-template-columns:1fr}} .split img{border-radius:12px} .regionband{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)} @media(max-width:820px){.regionband{grid-template-columns:1fr}} .regionkarte{position:relative;border-radius:12px;overflow:hidden;min-height:340px;display:flex;align-items:flex-end;padding:26px;color:#fff} .regionkarte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .regionkarte::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,44,88,.86) 0%,rgba(12,44,88,.25) 55%,rgba(12,44,88,.05) 100%)} .regionkarte__txt{position:relative;z-index:2} .regionkarte h3{color:#fff;font-size:1.6rem;margin-bottom:5px} .regionkarte p{color:rgba(255,255,255,.85);font-size:.92rem;max-width:38ch} /* Ablauf in drei Schritten */ .ablauf{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,38px);counter-reset:s} @media(max-width:800px){.ablauf{grid-template-columns:1fr}} .ablauf__punkt{position:relative;padding-top:26px;border-top:2px solid var(--sky)} .ablauf__punkt::before{counter-increment:s;content:counter(s);position:absolute;top:-15px;left:0;width:28px;height:28px;border-radius:50%;background:var(--blau-verlauf-hell);color:#fff;display:grid;place-items:center;font-size:.82rem;font-weight:700} .ablauf__punkt h3{margin-bottom:7px;font-size:1.12rem} .ablauf__punkt p{font-size:.93rem;color:var(--text-weich)} /* FAQ */ .faq{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{padding:18px 40px 18px 0;cursor:pointer;font-weight:600;position:relative;list-style:none;font-size:1.02rem} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'+';position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:1.4rem;color:var(--signal);font-weight:400} .faq details[open] summary::after{content:'\2013'} .faq p{padding:0 40px 20px 0;color:var(--text-weich);max-width:78ch} /* --- Fusszeile ---------------------------------------------------------- */ .fuss{margin-top:60px;background:var(--ink);color:rgba(255,255,255,.76);padding-block:clamp(44px,6vw,76px) 26px;font-size:.92rem} .fuss a:hover{color:#fff;text-decoration:underline} .fuss__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(20px,3vw,44px)} @media(max-width:900px){.fuss__grid{grid-template-columns:1fr 1fr}} @media(max-width:540px){.fuss__grid{grid-template-columns:1fr}} .fuss h4{color:#fff;font-family:'Inter',sans-serif;font-size:.84rem;font-weight:700;letter-spacing:.04em;margin-bottom:12px} .fuss li{padding:4px 0} .fuss__marke{display:flex;align-items:center;gap:12px;margin-bottom:14px;color:#fff} .fuss__marke .brand__wort{height:31px} .fuss__marke .brand__sub{color:rgba(255,255,255,.62)} .fuss__zahlung{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(20px,3vw,54px); margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14)} .fuss__zahlung h4{margin-bottom:8px} .fuss__zahlung p{max-width:52ch;margin-bottom:10px} .fuss__klein{font-size:.78rem;color:rgba(255,255,255,.55)} .fuss__insta{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:4px 0; color:rgba(255,255,255,.82);font-size:.88rem} .fuss__insta svg{width:20px;height:20px;flex:0 0 auto} /* Staerker als die Tippflaechen-Regel fuer Links im Fuss auf dem Telefon, sonst rutscht der Name unter das Zeichen */ .fuss .fuss__insta{display:inline-flex} /* Hinweis aufs Instagram-Profil (instagram_hinweis() in seiten.py) */ .instahinweis{padding-block:clamp(22px,3.4vw,40px)} .instahinweis__feld{display:flex;align-items:center;gap:18px;max-width:880px;margin-inline:auto; padding:16px 20px;border:1px solid var(--line);border-radius:14px;background:#fff; box-shadow:var(--shadow-s);color:var(--ink);text-decoration:none;transition:border-color .2s ease} .instahinweis__feld:hover{border-color:var(--signal)} .instahinweis__feld:focus-visible{outline:3px solid var(--signal-hell);outline-offset:3px} .instahinweis__zeichen{display:grid;place-items:center;width:48px;height:48px;flex:0 0 auto; border-radius:14px;background:var(--blau-verlauf-hell);color:#fff} .instahinweis__zeichen svg{width:26px;height:26px} .instahinweis__text{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0; font-size:.95rem;color:var(--text-weich)} .instahinweis__text b{font-size:1.02rem;color:var(--ink)} .instahinweis__knopf{flex:0 0 auto} @media(max-width:560px){ .instahinweis__feld{flex-wrap:wrap;align-items:flex-start;gap:12px 14px} .instahinweis__text{flex-basis:calc(100% - 64px)} .instahinweis__knopf{flex-basis:100%;justify-content:center} } html[data-dunkel="1"] .instahinweis__feld{background:#152f38;border-color:#2f5561} /* Linkseite fuer die Instagram-Bio (links.html) */ .linkseite{padding-top:clamp(28px,5vw,56px)} .linkseite__kopf{max-width:620px;margin:0 auto 20px;text-align:center} .linkseite__kopf .hero__kicker{margin-left:auto;margin-right:auto;margin-bottom:12px} /* Ueberschrift nur zwischen Woertern umbrechen, beide Zeilen etwa gleich lang */ .linkseite__kopf h1{hyphens:manual;overflow-wrap:normal;text-wrap:balance} .linkseite__kopf .lead{margin:12px auto 0} .linkliste{display:grid;gap:10px;max-width:620px;margin:0 auto} .linkliste__gruppe{margin:16px 0 0;font-size:.74rem;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--sage)} .linkliste__eintrag{display:flex;align-items:center;gap:14px;padding:13px 16px;background:#fff; border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-s);color:var(--ink); text-decoration:none;transition:border-color .2s ease,transform .2s ease} .linkliste__eintrag:hover{border-color:var(--signal);transform:translateY(-1px)} .linkliste__eintrag:focus-visible{outline:3px solid var(--signal-hell);outline-offset:3px} .linkliste__zeichen{display:grid;place-items:center;width:44px;height:44px;flex:0 0 auto; border-radius:12px;background:var(--soft-blue);color:var(--signal)} .linkliste__zeichen svg{width:24px;height:24px} .linkliste__text{display:flex;flex-direction:column;gap:1px;flex:1 1 auto;min-width:0} .linkliste__text b{font-size:1rem} .linkliste__text small{font-size:.84rem;color:var(--text-weich)} .linkliste__pfeil{flex:0 0 auto;font-size:1.6rem;line-height:1;color:var(--sage)} .linkseite__kontakt{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:620px;margin:24px auto 0} .linkseite__kontakt .btn{gap:8px} .linkseite__kontakt .btn svg{width:18px;height:18px;color:inherit} .linkliste__text b .zusammen{white-space:nowrap} @media(max-width:560px){ .linkliste__eintrag{gap:12px;padding:12px 14px} .linkliste__zeichen{width:40px;height:40px} /* Anrufen und E-Mail nebeneinander, Newsletter darunter ueber die ganze Breite */ .linkseite__kontakt{display:grid;grid-template-columns:1fr 1fr} .linkseite__kontakt .btn{padding:13px 14px} .linkseite__kontakt .btn:last-child{grid-column:1 / -1} } /* Sprung zum Newsletter: nicht unter der festen Kopfleiste verschwinden */ .nlfeld{scroll-margin-top:110px} html[data-dunkel="1"] .linkliste__eintrag{background:#152f38;border-color:#2f5561;color:#e9f1f3} .fuss__insta:hover{color:#fff} .zahlarten{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 12px;padding:0;list-style:none} .zahlarten li{padding:6px 12px;border-radius:var(--r-pill);font-size:.78rem;letter-spacing:.01em; border:1px solid rgba(255,255,255,.24);color:rgba(255,255,255,.86);background:rgba(255,255,255,.06)} @media(max-width:760px){.fuss__zahlung{grid-template-columns:1fr;gap:24px}} .fuss__unten{margin-top:clamp(30px,4vw,52px);padding-top:20px;border-top:1px solid rgba(255,255,255,.16);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:.84rem;color:rgba(255,255,255,.6)} /* Weiche Welle als Uebergang zur dunklen Fusszeile, dazu das kleine P */ .fuss{position:relative} .fuss__welle{position:absolute;z-index:2;left:0;right:0;top:-60px;width:100%;height:62px; display:block;color:var(--ink);pointer-events:none} .fuss__pw{display:inline-flex;align-items:center;gap:9px} /* Newsletter im Fuss */ .nlfeld{display:grid;gap:16px 34px;grid-template-columns:1.1fr 1fr;align-items:start; margin-top:34px;padding-top:28px;border-top:1px solid rgba(255,255,255,.14)} .nlfeld__text h4{margin-bottom:6px} .nlfeld__text p{font-size:.88rem;line-height:1.6;color:rgba(255,255,255,.72);max-width:46ch} .nlfeld__zeile{display:flex;gap:9px;flex-wrap:wrap} .nlfeld__zeile input{flex:1 1 210px;min-width:0;padding:12px 15px;border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.08);color:#fff; font:inherit;font-size:.95rem} .nlfeld__zeile input::placeholder{color:rgba(255,255,255,.5)} .nlfeld__zeile input:focus-visible{outline:2px solid var(--sand);outline-offset:2px} .nlfeld__zeile .btn{flex:0 0 auto} .nlfeld__zustimmung{display:flex;gap:9px;margin-top:11px;font-size:.8rem;line-height:1.55; color:rgba(255,255,255,.7)} .nlfeld__zustimmung input{width:17px;height:17px;flex:0 0 auto;margin-top:2px} .nlfeld__zustimmung a{color:rgba(255,255,255,.9);text-decoration:underline} @media(max-width:760px){.nlfeld{grid-template-columns:1fr}} @media print{.nlfeld{display:none}} @media(min-width:721px){.fuss__unten{padding-right:76px}} .fuss__pw img{width:32px;height:auto;flex:0 0 auto; filter:drop-shadow(0 2px 5px rgba(0,0,0,.35))} .fuss__pw:hover img{transform:scale(1.08);transition:transform .3s ease} @media(max-width:760px){.fuss__welle{top:-40px;height:42px}} /* --- Cookie-Hinweis ----------------------------------------------------- */ .cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:80;max-width:460px; background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-l);padding:18px 20px;font-size:.9rem} .cookie h4{margin-bottom:6px;font-family:'Nordseeschrift','Segoe Script','Bradley Hand',cursive;font-weight:400;font-size:1.3rem} .cookie__btns{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px} /* --- Toast -------------------------------------------------------------- */ .toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);z-index:90;background:var(--ink);color:#fff;padding:12px 22px;border-radius:var(--r-pill);font-size:.9rem;font-weight:500;box-shadow:var(--shadow-l);transition:transform .3s ease} .toast[data-an="1"]{transform:translate(-50%,0)} /* --- Lightbox ----------------------------------------------------------- */ .lightbox{position:fixed;inset:0;z-index:95;background:rgba(12,44,88,.94);display:grid;place-items:center;padding:26px} .lightbox img{max-width:min(1200px,94vw);max-height:88vh;border-radius:8px;object-fit:contain} .lightbox__zu{position:absolute;top:20px;right:24px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:none;color:#fff;font-size:1.3rem;cursor:pointer} /* --- Textseiten --------------------------------------------------------- */ .textseite{max-width:78ch} .textseite h2{margin-top:2em;font-size:1.5rem} .textseite h3{margin-top:1.6em;font-size:1.12rem} .textseite ul{list-style:disc;padding-left:1.3em;margin:0 0 1em} .textseite li{padding:2px 0} .todo{background:#fff5e2;border:1px solid #e2c48a;border-radius:var(--r-card);padding:14px 18px;font-size:.9rem;margin:18px 0} /* Sachlicher Hinweiskasten, kein Warnhinweis fuer die Redaktion */ .todo--sachlich{background:rgba(12,44,88,.05);border-color:rgba(12,44,88,.2);line-height:1.65; padding:17px 19px} .todo--sachlich b{display:block;margin-bottom:5px;font-size:.95rem} .todo b{color:#8a5a12} /* --- Bildwirkung: Rahmenschatten, Bewegung beim Ueberfahren, langsamer Zoom -- */ :root{ --schatten-bild:0 10px 26px -14px rgba(12,44,88,.32), 0 2px 8px -4px rgba(12,44,88,.15); --schatten-bild-hoch:0 22px 44px -18px rgba(12,44,88,.4), 0 4px 12px -6px rgba(12,44,88,.19); } /* Grosse Motive atmen langsam. Der Rahmen bleibt stehen, nur das Bild zieht sich zusammen und wieder auseinander. */ @keyframes ruhigerZoom{ 0% {transform:scale(1.005)} 50% {transform:scale(1.075)} 100%{transform:scale(1.005)} } .bildrahmen{position:relative;overflow:hidden;border-radius:12px;box-shadow:var(--schatten-bild); transition:transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease} .bildrahmen img{display:block;width:100%;height:100%;object-fit:cover} .bildrahmen--zoom img{animation:ruhigerZoom 34s ease-in-out infinite} .bildrahmen:hover{transform:translateY(-5px)} .bildrahmen:hover{box-shadow:var(--schatten-bild-hoch)} /* Breite Bilder: der Rahmen schneidet ab, das Bild zoomt darin. Traegt das Bild selbst den Zoom, waechst es ueber seinen Platz in den naechsten Abschnitt. isolation haelt die Rundung auch in Safari. */ .bildband{position:relative;display:block;width:100%;overflow:hidden;isolation:isolate; border-radius:12px;box-shadow:var(--schatten-bild);background:var(--sand)} .bildband picture{display:block;width:100%;height:100%} .bildband img{display:block;width:100%;height:100%;object-fit:cover; animation:ruhigerZoom 40s ease-in-out infinite} /* Objektkarten und Kacheln heben sich leicht an */ .mosaik__feld{box-shadow:var(--schatten-bild); transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease} .mosaik__feld:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:var(--schatten-bild-hoch)} .mosaik__feld:nth-child(even):hover{transform:translateY(-4px) rotate(.4deg)} .galerie{box-shadow:var(--schatten-bild)} .galerie__feld img{transition:transform .7s cubic-bezier(.2,.7,.3,1)} .galerie__feld:nth-child(1) img{animation:ruhigerZoom 46s ease-in-out infinite} .regionkarte{box-shadow:var(--schatten-bild); transition:transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease} .regionkarte:hover{transform:translateY(-6px);box-shadow:var(--schatten-bild-hoch)} .regionkarte img{animation:ruhigerZoom 44s ease-in-out infinite} .regionkarte:nth-child(2) img{animation-delay:-22s} .split img{border-radius:12px;box-shadow:var(--schatten-bild)} .bildpaar img{box-shadow:var(--schatten-bild)} /* --- Bildbausteine ------------------------------------------------------- */ .bildhoch{width:100%;height:100%;object-fit:cover;border-radius:12px} .bildpaar{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-height:520px} .bildpaar img:last-child{margin-top:34px} @media(max-width:760px){.bildpaar{max-height:300px}.bildpaar img:last-child{margin-top:0}} .mosaik{display:grid;grid-auto-rows:170px;gap:10px} .mosaik--acht{grid-template-columns:repeat(4,1fr)} .mosaik--sechs{grid-template-columns:repeat(3,1fr)} .mosaik__feld{margin:0;overflow:hidden;border-radius:10px;cursor:zoom-in;background:var(--sand)} .mosaik__feld img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease} .mosaik__feld picture{display:block;width:100%;height:100%} .mosaik__feld:hover img{transform:scale(1.05)} .mosaik__feld:nth-child(1){grid-column:span 2;grid-row:span 2} .mosaik--acht .mosaik__feld:nth-child(6){grid-column:span 2} @media(max-width:900px){ .mosaik--acht,.mosaik--sechs{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px} .mosaik__feld:nth-child(1){grid-column:span 2;grid-row:span 2} .mosaik--acht .mosaik__feld:nth-child(6){grid-column:span 1} } /* --- Verschiebbares Konzeptfenster --------------------------------------- */ .fenster{position:fixed;z-index:70;left:auto;right:24px;bottom:92px;width:min(320px,calc(100vw - 32px)); border-radius:16px;overflow:hidden;color:var(--ink); background:rgba(251,247,239,.8); -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5); border:1px solid rgba(255,255,255,.75); box-shadow:0 28px 64px -22px rgba(12,44,88,.52), 0 6px 18px -8px rgba(12,44,88,.24); animation:fensterAuf .42s cubic-bezier(.2,.8,.3,1) both} @keyframes fensterAuf{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}} .fenster[hidden]{display:none} .fenster__leiste{display:flex;align-items:center;gap:12px;padding:9px 14px;cursor:grab; background:rgba(255,255,255,.5);border-bottom:1px solid rgba(12,44,88,.1);user-select:none} .fenster__leiste:active{cursor:grabbing} .fenster__punkte{display:flex;gap:7px;flex:0 0 auto} .punkt{width:12px;height:12px;border-radius:50%;border:0;cursor:pointer;padding:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)} .punkt--rot{background:#ff5f57} .punkt--gelb{background:#febc2e} .punkt--gruen{background:#28c840} .punkt:hover{filter:brightness(1.12)} .fenster__titel{font-size:.8rem;font-weight:600;letter-spacing:.03em;color:var(--sage); text-transform:uppercase} .fenster__inhalt{padding:16px 17px 15px;font-size:.86rem;line-height:1.55; max-height:min(72vh,620px);overflow:auto} .fenster__kopf{display:grid;place-items:center;margin:-16px -17px 14px;padding:16px 17px 13px; background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.14)); border-bottom:1px solid rgba(12,44,88,.09)} .fenster__stern{width:56px;height:auto;margin-bottom:-6px} .fenster__wort{width:172px;height:auto} .fenster__unter{margin-top:3px;font-size:.72rem;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--signal)} /* Der Blickfang: grosse Zahl, kurze Worte */ .knaller{display:flex;align-items:center;gap:15px;padding:15px 17px;margin-bottom:12px; border-radius:13px;color:#fff;position:relative;overflow:hidden; background:linear-gradient(112deg,#0c2c58 0%,#12447e 46%,#0c2c58 100%); box-shadow:0 10px 26px -12px rgba(12,44,88,.7)} .knaller::after{content:'';position:absolute;right:-26px;top:-34px;width:120px;height:120px; border-radius:50%;background:rgba(255,255,255,.07)} .knaller__zahl{font-family:'Nordseeschrift','Segoe Script','Bradley Hand',cursive; font-size:3.4rem;line-height:.8;color:#f0d9a8;text-shadow:0 2px 10px rgba(0,0,0,.3)} .knaller__text{display:flex;flex-direction:column;gap:2px;position:relative;z-index:1} .knaller__text b{font-size:1.16rem;font-weight:700;letter-spacing:.01em;line-height:1.1} .knaller__text span{font-size:.76rem;letter-spacing:.02em;color:rgba(255,255,255,.78)} .vorteile{display:grid;grid-template-columns:1fr 1fr;gap:7px;list-style:none;padding:0;margin:0 0 13px} .vorteile li{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:9px; background:rgba(255,255,255,.6);border:1px solid rgba(12,44,88,.09); font-size:.755rem;line-height:1.25} .vorteile svg{width:17px;height:17px;flex:0 0 auto;color:var(--signal)} .fenster__form{margin-bottom:11px} .fenster__hauptknopf{margin-bottom:13px;font-size:.96rem;padding-block:13px} .fenster__frage{margin:0 0 7px;font-size:.75rem;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--sage)} .fenster__zeile{display:block;width:100%;margin-bottom:7px;padding:11px 14px;border-radius:var(--r-pill); border:1px solid var(--line);background:rgba(255,255,255,.85);font-size:.87rem;font-family:inherit} .fenster__zeile:focus{outline:2px solid var(--signal);outline-offset:1px} .fenster__klein{margin:8px 0 0 !important;font-size:.71rem;line-height:1.45;color:var(--sage)} .honigtopf{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} .wahlgruppe{display:flex;gap:5px;margin-bottom:9px} .wahlgruppe label{flex:1} .wahlgruppe input{position:absolute;opacity:0;pointer-events:none} .wahlgruppe span{display:block;text-align:center;padding:7px 4px;border-radius:var(--r-pill); border:1px solid var(--line);background:rgba(255,255,255,.55);font-size:.73rem;font-weight:600; cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease} .wahlgruppe input:checked + span{background:var(--blau-verlauf-hell);color:#fff;border-color:transparent} .wahlgruppe input:focus-visible + span{outline:2px solid var(--signal);outline-offset:2px} .fenster__mehr{display:none;margin-top:13px;padding-top:12px;border-top:1px solid rgba(12,44,88,.13)} .fenster__mehr p{margin-bottom:9px;font-size:.82rem;color:rgba(12,44,88,.82)} .fenster__fuss{margin:11px 0 0;font-size:.7rem;color:var(--sage)} .fenster--klein .fenster__inhalt{display:none} .fenster--gross{width:min(400px,calc(100vw - 32px))} .fenster--gross .fenster__mehr{display:block} .fenster--gross .fenster__stern{width:66px} .fenster--gross .fenster__wort{width:208px} .fenster--gezogen{animation:none} .fensterknopf{position:fixed;z-index:69;right:24px;bottom:92px;border:0; background:linear-gradient(104deg,#f5e2bb,#e8c98d 52%,#f7e9cb);color:#3d2c11; font-family:'Inter',sans-serif;font-size:.82rem;font-weight:700;letter-spacing:.01em; padding:11px 17px;border-radius:var(--r-pill);cursor:pointer; box-shadow:0 12px 30px -12px rgba(61,44,17,.55)} .fensterknopf[hidden]{display:none} .fensterknopf:hover{transform:translateY(-2px)} @media(max-width:720px){ /* Auf dem Telefon nimmt das Fenster hoechstens die Haelfte der Hoehe ein und laesst unten Platz fuer die Bedienhilfe. */ .fenster{right:10px;left:10px;bottom:76px;width:auto;border-radius:14px} .fenster--gross{width:auto} .fenster__leiste{cursor:default;padding:7px 12px} .fenster__inhalt{max-height:min(50vh,380px);padding:12px 13px 11px} .fenster__kopf{margin:-12px -13px 10px;padding:11px 13px 9px} .fenster__stern{width:38px} .fenster__wort{width:124px} .fenster__unter{font-size:.68rem;letter-spacing:.1em} .knaller{padding:11px 13px;margin-bottom:9px;gap:11px} .knaller__zahl{font-size:2.5rem} .knaller__text b{font-size:1rem} .knaller__text span{font-size:.7rem} .vorteile{gap:5px;margin-bottom:9px} .vorteile li{padding:6px 7px;font-size:.7rem} .vorteile svg{width:15px;height:15px} .fenster__hauptknopf{margin-bottom:9px;padding-block:11px;font-size:.9rem} .fenster__zeile{padding:9px 12px;font-size:.84rem} .fenster__frage{margin-bottom:5px} .fenster__klein{font-size:.66rem} .fenster__fuss{display:none} .fensterknopf{right:12px;bottom:80px;font-size:.78rem;padding:10px 15px} } @media print{.fenster,.fensterknopf{display:none}} /* --- Bedienhilfen --------------------------------------------------------- */ .hilfeknopf{position:fixed;right:24px;bottom:24px;z-index:72;width:52px;height:52px;border-radius:50%; border:0;background:var(--blau-verlauf-hell);color:#fff;display:grid;place-items:center;cursor:pointer; box-shadow:0 14px 34px -12px rgba(12,44,88,.6);transition:transform .3s ease} .hilfeknopf svg{width:25px;height:25px} .hilfeknopf:hover{transform:scale(1.06)} .hilfeknopf:focus-visible{outline:3px solid var(--sky);outline-offset:3px} .hilfe{position:fixed;right:24px;bottom:88px;z-index:73;width:min(288px,calc(100vw - 28px)); max-height:min(70vh,600px);overflow:auto;padding:15px;border-radius:14px; background:rgba(12,44,88,.8);-webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);color:#fff; box-shadow:0 26px 60px -20px rgba(12,44,88,.6); animation:fensterAuf .3s cubic-bezier(.2,.8,.3,1) both} .hilfe[hidden]{display:none} .hilfe__kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .hilfe__titel{font-family:'Nordseeschrift','Segoe Script','Bradley Hand',cursive;font-size:1.32rem;font-weight:400} .hilfe__zu{background:none;border:0;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;padding:0 4px} .hilfe__block{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.14)} .hilfe__block:last-of-type{border-bottom:0;padding-bottom:0} .hilfe__label{display:block;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:rgba(255,255,255,.55);margin-bottom:8px} .hilfe__stufen{display:flex;align-items:center;gap:10px} .hilfe__stufen button{width:38px;height:38px;border-radius:9px;border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.08);color:#fff;font-size:1.15rem;cursor:pointer} .hilfe__stufen button:hover{background:rgba(255,255,255,.16)} .hilfe__stufen output{flex:1;text-align:center;font-variant-numeric:tabular-nums;font-size:.9rem} .hilfe__schalter{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%; padding:9px 11px;margin-bottom:6px;border-radius:9px;border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06);color:#fff;font-family:'Inter',sans-serif;font-size:.85rem; text-align:left;cursor:pointer} .hilfe__schalter:hover{background:rgba(255,255,255,.13)} .hilfe__schalter i{flex:0 0 auto;width:34px;height:19px;border-radius:999px;background:rgba(255,255,255,.22); position:relative;transition:background .22s ease} .hilfe__schalter i::after{content:'';position:absolute;top:2.5px;left:3px;width:14px;height:14px; border-radius:50%;background:#fff;transition:transform .22s ease} .hilfe__schalter[aria-pressed="true"] i{background:var(--sky)} .hilfe__schalter[aria-pressed="true"] i::after{transform:translateX(14px)} .hilfe .btn--ghost{border-color:rgba(255,255,255,.3);color:#fff} .hilfe .btn--ghost:hover{background:rgba(255,255,255,.12)} .hilfe__hinweis{margin-top:10px;font-size:.72rem;line-height:1.5;color:rgba(255,255,255,.6)} .hilfe__hinweis a{color:var(--sky)} @media(max-width:720px){ .hilfeknopf{right:14px;bottom:14px;width:48px;height:48px} .hilfe{right:12px;left:12px;bottom:72px;width:auto} } @media print{.hilfe,.hilfeknopf{display:none}} @media(max-width:720px){ /* Die Bedienhilfe darf auf dem Telefon nicht die ganze Seite verdecken. Dieser Block steht bewusst hinter der Grundregel, sonst gewinnt sie. */ .hilfe{right:10px;left:10px;bottom:72px;width:auto;max-height:54vh;padding:13px} .hilfe__reihe{padding:8px 11px;font-size:.88rem} .hilfe__titel{font-size:1.16rem} .hilfe__gruppe{margin-bottom:12px} .hilfeknopf{right:14px;bottom:14px;width:46px;height:46px} .cookie{left:10px;right:10px;bottom:10px;padding:14px 16px;font-size:.86rem;max-width:none} } /* --- Zustaende, die die Bedienhilfe setzt --------------------------------- */ html[data-kontrast="1"]{--ink:#08222b;--sage:#2c4438;--line:#17457e;--line-soft:#5c8090; --text-weich:#08222b;--text-leise:#274049} html[data-kontrast="1"] body{background:#fff} html[data-kontrast="1"] .lead,html[data-kontrast="1"] p,html[data-kontrast="1"] li{color:#08222b} html[data-kontrast="1"] .btn--ghost{border-width:2px} html[data-kontrast="1"] a:not(.btn){text-decoration:underline;text-underline-offset:2px} html[data-kontrast="1"] .okarte,html[data-kontrast="1"] .block, html[data-kontrast="1"] .kachel{border-color:#17457e} html[data-kontrast="1"] .meergrund{display:none} html[data-dunkel="1"]{--text-weich:rgba(233,241,243,.8);--text-leise:rgba(233,241,243,.58);--ink:#e9f1f3;--shell:#0e2129;--sand:#152f38;--foam:#122a33; --line:#2f5561;--line-soft:#27454f;--sage:#93b3bb;--signal:#8ec4d3} html[data-dunkel="1"] body{background:#0e2129;color:#e9f1f3} /* Flaechen, die sonst weiss waeren */ html[data-dunkel="1"] .block,html[data-dunkel="1"] .kachel,html[data-dunkel="1"] .okarte, html[data-dunkel="1"] .suchpanel,html[data-dunkel="1"] .karte,html[data-dunkel="1"] .filterspalte, html[data-dunkel="1"] .cookie,html[data-dunkel="1"] .k-popup,html[data-dunkel="1"] .buchbox, html[data-dunkel="1"] .sortier select,html[data-dunkel="1"] input,html[data-dunkel="1"] select, html[data-dunkel="1"] textarea{background:#152f38;color:#e9f1f3;border-color:#2f5561} html[data-dunkel="1"] .section--sand,html[data-dunkel="1"] .section--foam{background:#122a33} html[data-dunkel="1"] .topbar{background:rgba(14,33,41,.94);border-bottom-color:#27454f} html[data-dunkel="1"] .topbar--onhero{background:transparent} html[data-dunkel="1"] .merk-btn,html[data-dunkel="1"] .burger,html[data-dunkel="1"] .insta-btn{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.24)} html[data-dunkel="1"] .burger span{background:#e9f1f3;box-shadow:0 -6px 0 #e9f1f3,0 6px 0 #e9f1f3} /* Die Wortmarke ist marineblau und verschwindet auf dunklem Grund */ html[data-dunkel="1"] .brand__wort{filter:brightness(0) invert(1)} html[data-dunkel="1"] .fuss__marke .brand__wort{filter:none} /* Der Hero behaelt sein helles Foto, also muss der Verlauf umkehren */ html[data-dunkel="1"] .hero__bg::after{background:linear-gradient(96deg, rgba(9,25,32,.95) 0%,rgba(9,25,32,.86) 34%,rgba(9,25,32,.34) 62%,rgba(9,25,32,0) 88%)} @media(max-width:900px){ html[data-dunkel="1"] .hero__bg::after{background:linear-gradient(180deg, rgba(9,25,32,.9) 0%,rgba(9,25,32,.66) 48%,rgba(9,25,32,.92) 100%)} } html[data-dunkel="1"] .hero__claim{color:rgba(233,241,243,.82)} html[data-dunkel="1"] .hero__kicker{color:#8ec4d3} html[data-dunkel="1"] .hero__kicker::before{background:#8ec4d3} html[data-dunkel="1"] .hero--klar{background:var(--ink)} /* Suchpanel und Reiter */ html[data-dunkel="1"] .suchtabs{background:#122a33;border-bottom-color:#27454f} html[data-dunkel="1"] .suchtabs button{color:rgba(233,241,243,.6)} html[data-dunkel="1"] .suchtabs button[aria-selected="true"]{background:#152f38;color:#e9f1f3; border-bottom-color:#8ec4d3} html[data-dunkel="1"] .feld input::placeholder{color:rgba(233,241,243,.45)} /* Schaltflaechen */ html[data-dunkel="1"] .btn--primary{background:linear-gradient(112deg,#1c4f8f,#2f6db4 55%,#1c4f8f);color:#fff} html[data-dunkel="1"] .btn--ghost{color:#e9f1f3;border-color:rgba(233,241,243,.34)} html[data-dunkel="1"] .btn--ghost:hover{background:rgba(233,241,243,.1)} /* Meldung und Konzeptfenster */ html[data-dunkel="1"] .toast{background:#8ec4d3;color:#0e2129} html[data-dunkel="1"] .fenster{background:rgba(21,47,56,.88);border-color:rgba(233,241,243,.16); color:#e9f1f3} html[data-dunkel="1"] .fenster__leiste{background:rgba(255,255,255,.07); border-bottom-color:rgba(233,241,243,.14)} html[data-dunkel="1"] .fenster__titel{color:#e9f1f3} html[data-dunkel="1"] .fenster__inhalt p{color:rgba(233,241,243,.8)} html[data-dunkel="1"] .fenster__lead{color:#e9f1f3 !important} html[data-dunkel="1"] .fenster__angebot{background:rgba(142,196,211,.13); border-color:rgba(142,196,211,.32)} html[data-dunkel="1"] .fenster__marke{color:#8ec4d3} html[data-dunkel="1"] .fenster__mehr{border-top-color:rgba(233,241,243,.16)} html[data-dunkel="1"] .fensterknopf{background:rgba(21,47,56,.92);color:#e9f1f3; border-color:rgba(233,241,243,.2)} /* Karte: Wasser und Land abdunkeln, Symbole bleiben farbig */ html[data-dunkel="1"] .k-wasser,html[data-dunkel="1"] .k-see{fill:#0d2831} html[data-dunkel="1"] .k-land{fill:#1d3a42} html[data-dunkel="1"] .k-ort,html[data-dunkel="1"] .k-meer{fill:#9fc3cd} html[data-dunkel="1"] .k-ort--klein{fill:rgba(190,215,224,.8)} html[data-dunkel="1"] .k-note{fill:rgba(190,215,224,.55)} html[data-dunkel="1"] .k-strasse,html[data-dunkel="1"] .k-bahn{stroke:rgba(190,215,224,.35)} html[data-dunkel="1"] .k-sand{fill:#2a4048} html[data-dunkel="1"] .k-watt{fill:#1a3a3c} html[data-dunkel="1"] .okarte__typ{background:rgba(21,47,56,.94);color:#e9f1f3} html[data-dunkel="1"] .okarte__merk{background:rgba(21,47,56,.94)} html[data-dunkel="1"] .legende__eintrag--aus{opacity:.42} html[data-dunkel="1"] .regionwahl{background:rgba(255,255,255,.08);border-color:rgba(233,241,243,.2)} html[data-dunkel="1"] .regionwahl button[aria-pressed="true"]{background:#1c4f8f;color:#fff} html[data-dunkel="1"] .regionwahl button{color:rgba(233,241,243,.72)} html[data-dunkel="1"] .karte__kopf{background:rgba(18,44,53,.9);border-bottom-color:#27454f} html[data-dunkel="1"] .k-popup{box-shadow:0 18px 40px -14px rgba(0,0,0,.7)} html[data-dunkel="1"] .todo{background:rgba(214,168,60,.16);border-color:rgba(214,168,60,.4);color:#f2e2bd} html[data-dunkel="1"] .fuss{background:#081a21} html[data-dunkel="1"] .legende{background:#152f38;border-color:#2f5561} /* Fotos einen Hauch zuruecknehmen, Marke ausgenommen */ html[data-dunkel="1"] img:not(.brand__mark):not(.brand__wort):not(.fenster__wort):not(.fenster__stern){filter:brightness(.88)} html[data-dunkel="1"] .meergrund{color:#8ec4d3;opacity:.85} html[data-warm="1"] body{filter:sepia(.22) saturate(.94)} html[data-graustufen="1"] body{filter:grayscale(1)} html[data-warm="1"][data-graustufen="1"] body{filter:grayscale(1) sepia(.22)} html[data-lesbar="1"] body,html[data-lesbar="1"] h1,html[data-lesbar="1"] h2, html[data-lesbar="1"] h3,html[data-lesbar="1"] h4,html[data-lesbar="1"] .brand__name{ font-family:'Inter',-apple-system,Segoe UI,sans-serif !important;letter-spacing:.01em} html[data-abstand="1"] body{line-height:2.05;letter-spacing:.035em;word-spacing:.12em} html[data-abstand="1"] p,html[data-abstand="1"] li{margin-bottom:1.1em} html[data-links="1"] a:not(.btn){text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:2px;background:rgba(159,205,221,.3);padding:0 2px;border-radius:3px} html[data-ohnebild="1"] img{visibility:hidden} html[data-ohnebild="1"] .okarte__bild,html[data-ohnebild="1"] .mosaik__feld, html[data-ohnebild="1"] .galerie__feld,html[data-ohnebild="1"] .hero__bg, html[data-ohnebild="1"] .regionkarte img{background:var(--sand)} html[data-ohnebild="1"] .bildband{min-height:80px;background:var(--sand)} html[data-ruhe="1"] *,html[data-ruhe="1"] *::before,html[data-ruhe="1"] *::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important} .vorlese-marke{background:var(--sky);color:var(--ink);border-radius:3px} /* Neue Bausteine in der dunklen Ansicht */ html[data-dunkel="1"] .okarte{background:#152f38;border-color:#27454f} html[data-dunkel="1"] .kerndaten__feld,html[data-dunkel="1"] .merkmal{background:#152f38; border-color:#27454f} html[data-dunkel="1"] .preispille{background:rgba(255,255,255,.1);color:#e9f1f3} html[data-dunkel="1"] .preispille small{color:rgba(233,241,243,.62)} html[data-dunkel="1"] .okarte__extras span{background:rgba(255,255,255,.1)} html[data-dunkel="1"] .typmarke{background:rgba(255,255,255,.08);color:#e9f1f3} html[data-dunkel="1"] .okarte__typ,html[data-dunkel="1"] .okarte__merk{ background:rgba(21,47,56,.94);color:#e9f1f3} html[data-dunkel="1"] .okarte__merk svg{stroke:#e9f1f3} html[data-dunkel="1"] .okarte__merk[aria-pressed="true"] svg{fill:#e8776a;stroke:#e8776a} html[data-dunkel="1"] .okarte__pfeil{background:rgba(21,47,56,.92);color:#e9f1f3} html[data-dunkel="1"]{--stern-leer:rgba(233,241,243,.22)} /* Die Objektfarben sind fuer hellen Grund gemacht. Im Dunkeln braucht es aufgehellte Varianten, sonst verschwinden Rahmen und Piktogramme. */ html[data-dunkel="1"] .okarte--fewo,html[data-dunkel="1"] body.typ-fewo, html[data-dunkel="1"].typ-fewo{--typfarbe:#8fc296;--typtint:rgba(143,194,150,.16)} html[data-dunkel="1"] .okarte--fehaus{--typfarbe:#79ad8c;--typtint:rgba(121,173,140,.16)} html[data-dunkel="1"] .okarte--hotel{--typfarbe:#7cb9d8;--typtint:rgba(124,185,216,.16)} html[data-dunkel="1"] .okarte--zimmer{--typfarbe:#9ccbdd;--typtint:rgba(156,203,221,.16)} html[data-dunkel="1"] .okarte--kaufhaus{--typfarbe:#e0836a;--typtint:rgba(224,131,106,.16)} html[data-dunkel="1"] .okarte--kaufwohnung{--typfarbe:#e5a077;--typtint:rgba(229,160,119,.16)} html[data-dunkel="1"] .okarte--grund{--typfarbe:#c9b884;--typtint:rgba(201,184,132,.16)} html[data-dunkel="1"] body.typ-fehaus{--typfarbe:#79ad8c;--typtint:rgba(121,173,140,.16)} html[data-dunkel="1"] body.typ-hotel{--typfarbe:#7cb9d8;--typtint:rgba(124,185,216,.16)} html[data-dunkel="1"] body.typ-zimmer{--typfarbe:#9ccbdd;--typtint:rgba(156,203,221,.16)} html[data-dunkel="1"] body.typ-kaufhaus{--typfarbe:#e0836a;--typtint:rgba(224,131,106,.16)} html[data-dunkel="1"] body.typ-kaufwohnung{--typfarbe:#e5a077;--typtint:rgba(229,160,119,.16)} html[data-dunkel="1"] body.typ-grund{--typfarbe:#c9b884;--typtint:rgba(201,184,132,.16)} html[data-dunkel="1"] .okarte__extras span{background:rgba(255,255,255,.08); border-color:rgba(233,241,243,.14);color:rgba(233,241,243,.78)} /* Konzeptfenster im Dunkeln: helle Wortmarke, dunkle Kacheln */ html[data-dunkel="1"] .fenster__wort{filter:brightness(0) invert(1)} html[data-dunkel="1"] .fenster__unter{color:#8ec4d3} html[data-dunkel="1"] .vorteile li{background:rgba(255,255,255,.08); border-color:rgba(233,241,243,.14);color:#e9f1f3} html[data-dunkel="1"] .vorteile svg{color:#8ec4d3} html[data-dunkel="1"] .fenster__zeile{background:rgba(255,255,255,.1);color:#e9f1f3; border-color:rgba(233,241,243,.24)} html[data-dunkel="1"] .fenster__zeile::placeholder{color:rgba(233,241,243,.5)} html[data-dunkel="1"] .fenster__kopf{background:linear-gradient(180deg,rgba(255,255,255,.09),transparent); border-bottom-color:rgba(233,241,243,.14)} html[data-dunkel="1"] .wahlgruppe span{background:rgba(255,255,255,.08);color:#e9f1f3; border-color:rgba(233,241,243,.2)} html[data-dunkel="1"] .wahlgruppe input:checked + span{background:#1c4f8f;border-color:#1c4f8f} /* Im Kontrastmodus brauchen die Rahmen mehr Gewicht */ html[data-kontrast="1"] .okarte,html[data-kontrast="1"] .kerndaten__feld, html[data-kontrast="1"] .merkmal,html[data-kontrast="1"] .vorteile li{border-color:#17457e} html[data-kontrast="1"]{--stern-leer:rgba(8,34,43,.3)} .erlebenlinks{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center} /* --- Verweis auf eine Unterseite ------------------------------------------ */ .unterseite{display:block;margin-bottom:16px;padding:17px 19px;border-radius:14px; border:1px solid var(--line-soft);background:#fff;box-shadow:var(--schatten-bild); transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease} .unterseite:hover{transform:translateY(-3px);box-shadow:var(--schatten-bild-hoch)} .unterseite__kicker{display:block;font-size:.72rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--sage);margin-bottom:5px} .unterseite b{display:block;font-family:'Nordseeschrift','Segoe Script','Bradley Hand',cursive; font-weight:400;font-size:1.46rem;line-height:1.2;margin-bottom:5px;color:var(--ink)} .unterseite span:last-child{display:block;font-size:.88rem;color:var(--text-weich)} .unterseite::after{content:'\203A';float:right;margin-top:-30px;font-size:1.5rem;color:var(--signal)} /* --- Brotkrumen ----------------------------------------------------------- */ .brotkrumen{padding-top:clamp(16px,2vw,26px);font-size:.84rem;color:var(--text-leise)} .brotkrumen a{color:var(--text-leise)} .brotkrumen a:hover{color:var(--ink)} .brotkrumen [aria-current]{color:var(--ink);font-weight:600} /* --- Redaktionsseite: Erlebnisbausteine ----------------------------------- */ .erlebnisliste{display:flex;flex-direction:column;gap:clamp(20px,3vw,38px)} .erleben{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,3vw,38px); align-items:center} .erleben:nth-child(even) .erleben__bild{order:2} .erleben__bild{margin:0;border-radius:14px;overflow:hidden;box-shadow:var(--schatten-bild)} .erleben__bild img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:3/2; cursor:zoom-in;transition:transform .6s cubic-bezier(.2,.7,.3,1)} .erleben__bild:hover img{transform:scale(1.04)} .erleben__bild picture{display:block;height:100%} .erleben__kicker{display:inline-block;margin-bottom:7px;font-size:.7rem;font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:var(--sage)} .erleben__text h3{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:10px} .erleben__text p{color:var(--text-weich);line-height:1.7} .erleben__hinweis{margin-top:10px;padding:11px 14px;border-radius:10px;font-size:.86rem; background:rgba(23,69,126,.06);border-left:3px solid var(--signal)} @media(max-width:800px){ .erleben{grid-template-columns:1fr} .erleben:nth-child(even) .erleben__bild{order:0} } .nachweise{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:8px} .nachweise li{padding-left:16px;position:relative;font-size:.86rem;line-height:1.6; color:var(--text-weich)} .nachweise li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px; border-radius:50%;background:var(--signal);opacity:.5} /* Ortsnamen tragen die Regionsseite, deshalb deutlich groesser */ .kachel--ort h3{font-size:clamp(1.7rem,2.4vw,2.1rem);line-height:1.15;margin-bottom:6px} .kachel--ort p{font-size:.95rem} .kachel--weg{display:block;position:relative;padding-top:28px} .kachel--weg .kachel__nr{position:absolute;top:16px;right:18px; font-family:'Nordseeschrift','Segoe Script','Bradley Hand',cursive;font-size:2.4rem; line-height:1;color:rgba(23,69,126,.16)} .kachel--weg .linkline{margin-top:12px} .logofeld{margin-top:16px;padding:17px 19px;border-radius:12px; background:rgba(23,69,126,.05);border:1px solid rgba(23,69,126,.16)} .logofeld[hidden]{display:none} .logofeld h4{font-family:'Inter',sans-serif;font-weight:700;font-size:1.04rem;margin-bottom:6px} .logofeld p{font-size:.93rem;line-height:1.6;color:var(--text-weich)} .logofeld input[type=file]{padding:10px 12px;border:1px dashed var(--line);border-radius:10px; background:#fff;font-size:.9rem;width:100%} .stichworte{margin-bottom:22px;padding:19px 21px;border-radius:12px; background:rgba(23,69,126,.05);border:1px solid rgba(23,69,126,.16)} .stichworte h3{font-family:'Inter',sans-serif;font-weight:700;font-size:1.08rem;margin-bottom:7px} .stichworte p{font-size:.94rem;line-height:1.6;color:var(--text-weich)} .stichworte__knoepfe{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:12px} .stichworte__stand{font-size:.88rem;color:var(--sage)} .stichworte__stand--gut{color:#2f7d4f} .stichworte__stand--fehler{color:#b4453a} .stichworte__klein{margin-top:10px;font-size:.85rem !important;color:var(--sage) !important} .angebot{margin-top:18px;padding:17px 19px;border-radius:12px; border:1px solid rgba(229,195,131,.55);background:rgba(229,195,131,.13)} .angebot h4{font-family:'Inter',sans-serif;font-weight:700;font-size:1.06rem;margin-bottom:7px} .angebot p{margin:0 0 8px;font-size:.94rem;line-height:1.6;color:var(--text-weich)} .angebot__klein{font-size:.85rem !important;color:var(--sage) !important} .angebot .haken{padding-top:4px} /* --- Eigentuemerformulare -------------------------------------------------- */ .formkarte{background:#fff;border:1px solid var(--line-soft);border-radius:16px; padding:clamp(20px,3vw,34px);box-shadow:var(--schatten-bild)} .formkarte--breit{max-width:none} .formkarte h2{font-family:'Inter',sans-serif;font-weight:700;letter-spacing:-.01em; font-size:clamp(1.3rem,2vw,1.6rem);margin-bottom:18px} .formkarte fieldset{border:0;padding:0;margin:0 0 24px} .kastenkopf{font-family:'Inter',sans-serif;font-weight:700;font-size:1.14rem;letter-spacing:0} .formkarte legend{padding:0;margin-bottom:14px;font-family:'Inter',sans-serif; font-size:1.06rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink)} .formgitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:14px 18px} .formfeld{margin:0;display:flex;flex-direction:column;gap:5px} .formfeld--breit{grid-column:1/-1} .formfeld label{font-size:.94rem;font-weight:600;color:var(--ink)} .formfeld abbr{color:#b4453a;text-decoration:none} .formfeld input,.formfeld select,.formfeld textarea{width:100%;padding:11px 14px; border:1px solid var(--line);border-radius:10px;background:#fff;font-family:inherit; font-size:.94rem;color:var(--ink)} .formfeld textarea{resize:vertical;line-height:1.6} .formfeld input:focus,.formfeld select:focus,.formfeld textarea:focus{ outline:none;border-color:var(--signal);box-shadow:0 0 0 3px rgba(23,69,126,.14)} .formfeld small{font-size:.84rem;color:var(--sage);line-height:1.5} .formhinweis{margin-top:12px;font-size:.9rem;line-height:1.6;color:var(--text-leise)} .haken{display:flex;align-items:flex-start;gap:10px;padding:9px 0;font-size:.98rem; line-height:1.45;cursor:pointer} .haken input{margin-top:2px;width:18px;height:18px;accent-color:var(--signal);flex:0 0 auto} .hakengitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:0 20px} .rollenwahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:10px} .rollenwahl input{position:absolute;opacity:0;pointer-events:none} .rollenwahl span{display:block;padding:14px 15px;border-radius:12px;border:1px solid var(--line); background:#fff;cursor:pointer;font-size:.92rem;color:var(--text-weich);line-height:1.4; transition:border-color .2s ease,background .2s ease} .rollenwahl b{display:block;font-family:'Inter',sans-serif;font-weight:700;font-size:1.08rem; color:var(--ink);margin-bottom:4px} .rollenwahl input:checked + span{border-color:var(--signal);background:rgba(23,69,126,.06)} .rollenwahl input:focus-visible + span{outline:2px solid var(--signal);outline-offset:2px} /* Abschnittsleiste */ .strecke{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0; margin:0 0 clamp(20px,3vw,32px)} .strecke li[data-schritt]{display:flex;align-items:center;gap:9px;padding:10px 16px; border-radius:var(--r-pill);border:1px solid var(--line-soft);background:#fff; font-size:.92rem;color:var(--text-leise);cursor:pointer; transition:border-color .2s ease,color .2s ease} .strecke__pfeil{display:flex;align-items:center;color:var(--line);font-size:1.2rem; list-style:none;padding:0 2px} @media(max-width:820px){.strecke__pfeil{display:none}} .strecke li b{display:grid;place-items:center;width:23px;height:23px;border-radius:50%; background:rgba(23,69,126,.1);font-size:.78rem;color:var(--signal)} .strecke li[data-stand="aktiv"]{border-color:var(--signal);color:var(--ink);font-weight:600} .strecke li[data-stand="aktiv"] b{background:var(--blau-verlauf-hell);color:#fff} .strecke li[data-stand="fertig"] b{background:var(--signal);color:#fff} .strecke li[data-stand="fertig"] b::after{content:'\2713';font-size:.72rem} .strecke li[data-stand="fertig"] b{font-size:0} [hidden]{display:none !important} .pfeil{display:inline-block;transition:transform .25s ease} .btn:hover .pfeil{transform:translateX(3px)} .btn--ghost:hover .pfeil{transform:translateX(-3px)} .streckenknoepfe{display:flex;align-items:center;gap:12px;margin-top:8px; padding-top:20px;border-top:1px solid var(--line-soft)} .streckenstand{flex:1;font-size:.84rem;color:var(--sage)} .vorgaben{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:7px} .vorgaben li{padding-left:22px;position:relative;font-size:.95rem;line-height:1.6; color:var(--text-weich)} .vorgaben li::before{content:'\2713';position:absolute;left:0;top:0;color:var(--signal); font-weight:700} .pruefung{margin:24px 0;padding:20px 22px;border-radius:14px;background:rgba(23,69,126,.05); border:1px solid rgba(23,69,126,.16)} .pruefung h3{font-size:1.55rem;margin-bottom:12px} .ablaufliste{margin:0;padding-left:20px;display:grid;gap:11px} .ablaufliste li{font-size:.96rem;line-height:1.6;color:var(--text-weich)} .ablaufliste b{display:block;font-family:'Inter',sans-serif;color:var(--ink);font-weight:700; font-size:1rem;margin-bottom:2px} .vorpruefung{margin:22px 0;padding:18px 20px;border-radius:14px;border-left:4px solid var(--signal); background:rgba(23,69,126,.05)} .vorpruefung[data-zustand="fehlt"]{border-left-color:#b4453a;background:rgba(180,69,58,.06)} .vorpruefung[data-zustand="ok"]{border-left-color:#3d7d4f;background:rgba(61,125,79,.06)} .vorpruefung h4{font-family:'Inter',sans-serif;font-size:1.08rem;font-weight:700;margin-bottom:8px} .vorpruefung ul{margin:0 0 12px;padding-left:20px;display:grid;gap:6px} .vorpruefung li{font-size:.95rem;line-height:1.6;color:var(--text-weich)} .vorpruefung__fuss{margin:0;font-size:.86rem;line-height:1.55;color:var(--sage)} html[data-dunkel="1"] .formkarte,html[data-dunkel="1"] .formfeld input, html[data-dunkel="1"] .formfeld select,html[data-dunkel="1"] .formfeld textarea, html[data-dunkel="1"] .rollenwahl span,html[data-dunkel="1"] .strecke li, html[data-dunkel="1"] .unterseite{background:#152f38;color:#e9f1f3;border-color:#2f5561} /* --- Lichtkasten --------------------------------------------------------- */ .lightbox__pfeil{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px; border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--ink);font-size:1.7rem; line-height:1;cursor:pointer;display:grid;place-items:center} .lightbox__pfeil--links{left:max(16px,3vw)} .lightbox__pfeil--rechts{right:max(16px,3vw)} .lightbox__zaehler{position:absolute;bottom:24px;left:50%;transform:translateX(-50%); color:#fff;font-size:.88rem;letter-spacing:.04em;background:rgba(12,44,88,.55); padding:6px 14px;border-radius:var(--r-pill)} /* --- Bewegungsreduktion ------------------------------------------------- */ @media(prefers-reduced-motion:reduce){ .meergrund__wellenband,.meergrund__feinband,.meergrund__stern,.fisch,.fisch__bild{animation:none} .bildband,.hero__bg img,.bildrahmen--zoom img,.galerie__feld:nth-child(1) img{animation:none} .okarte:hover,.mosaik__feld:hover,.bildrahmen:hover,.regionkarte:hover{transform:none} .regionkarte img{animation:none} .fisch--1{transform:translateX(72vw)} .fisch--2{transform:translateX(14vw) } .fisch--3{transform:translateX(46vw)} *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important} html{scroll-behavior:auto} } /* --- Druck -------------------------------------------------------------- */ @media print{.topbar,.fuss,.cookie,.karte,.meergrund{display:none}body{background:#fff}} /* Traegt die Karte ein Musterband, ruecken Objektart und Merkknopf darunter, sonst liegen sie halb darin. */ .okarte:has(.beispielmarke) .okarte__typ, .okarte:has(.beispielmarke) .okarte__merk{top:42px} /* ========================================================================= Telefon: aufraeumen ------------------------------------------------------------------------- Alles hier ist an einem 390 Pixel breiten Geraet gemessen, nicht geschaetzt. Drei Dinge stoeren dort am meisten: Zierrat, der Platz kostet, Text der seitlich hinauslaeuft, und Tippziele, die kleiner sind als ein Finger. ========================================================================= */ @media(max-width:760px){ /* 1. Zierrat aus. Auf einem grossen Schirm sind das Akzente am Rand, auf einem Telefon liegen sie ueber dem Inhalt oder kosten Ladezeit fuer etwas, das niemand sieht. */ .deko,.deko--holz,.deko--rechts,.deko--hoch, .meergrund__stern,.meergrund__feinband,.meergrund__wellenband{display:none} /* 2. Das schwebende Fenster mit dem Angebot bleibt zu. Auf dem Telefon verdeckt es einen guten Teil des Bildschirms, und wer scrollt, will lesen, nicht wegklicken. Der Hinweis steht ohnehin im Band. */ .fenster,.fensterknopf{display:none !important} /* 3. Lange Woerter und Adressen umbrechen lassen. Im Impressum hat eine Nachweiszeile die Seite auf 730 Pixel gezogen, sie liess sich seitlich schieben. */ .textseite,.textseite li,.textseite p,.nachweisliste li, .fuss,.faq__punkt p,.anfrage__daten,.vkarte__nachweis{overflow-wrap:anywhere} /* 4. Tippziele. Unter 30 Pixel Hoehe trifft man mit dem Daumen daneben. Gemessen an allen 28 Seiten, nicht geschaetzt. */ .fuss a,.faq__punkt summary,.linkline,.vkarte__fuss a,.kachel__mehr, .buero__text a,.hinweis a,.textseite a{display:inline-block;padding-block:7px} .fuss__grid a{padding-block:8px} /* Kaestchen und Punkte: 17 Pixel sind zu klein fuer einen Daumen. */ input[type="checkbox"],input[type="radio"]{width:24px;height:24px} .wahl,.formzeile label,.nlfeld__zustimmung{align-items:flex-start;gap:11px} /* 5. Kleinstschrift anheben. Elf Pixel liest man am Schreibtisch, auf dem Telefon in der Sonne nicht mehr. Marken und Nummern auf mindestens zwoelf. */ .beispielmarke,.topmarke,.neumarke,.okarte__nr,.vkarte__kategorie, .vkarte__wann,.vkarte__nachweis,small,.fuss__klein, .anzeige__marke,.unterseite__kicker,.erleben__kicker,.stufe__marke, .okarte__daten small,.formfeld small,.fahne__text,.band__auftakt, .partneraufruf__marke,.buero__marke,.listenanzeige small{font-size:.78rem} /* small steckt in vielen Bausteinen, deshalb pauschal */ /* small steckt in vielen Bausteinen, deshalb pauschal, und die beiden Faelle mit hoeherer Spezifitaet einzeln. */ small,.hinweis small,.okarte small,.formfeld small,.vkarte small, .buero__text small,.tafel small{font-size:.78rem} .listenanzeige .anzeige__marke,.anzeige .anzeige__marke{font-size:.76rem} .beispielmarke,.topmarke{letter-spacing:.12em} /* 6. Auf dem Telefon laeuft in den Baendern kein Film. Er kostet Daten und Akku fuer etwas, das auf einem Streifen von 240 Pixeln Hoehe kaum wirkt. Das Standbild bleibt, der Text auch: er traegt die Aussage, nicht die Bewegung. */ .videoband{height:auto;min-height:0;padding-block:clamp(26px,7vw,40px)} .videoband__film{display:none} .videoband__schleier{background:linear-gradient(150deg,#17457e,#0c2c58 76%)} .videoband__text{padding-block:0} .videoband__text h2{font-family:'Inter',system-ui,sans-serif;font-weight:800; font-size:clamp(1.35rem,5.6vw,1.7rem);line-height:1.22;max-width:none; letter-spacing:-.01em} .videoband + .videoband{border-top-width:3px} /* 7. Der Inhalt braucht die Breite, nicht der Rand. */ .wrap,.wrap-wide{padding-inline:clamp(14px,4.4vw,20px)} .wrap--schmal{max-width:100%} } /* Sehr schmale Geraete, etwa ein iPhone SE der ersten Generation mit 320 Pixeln. Dort passt die Kopfzeile nicht mehr in einer Zeile, und die Formularpaare stehen besser untereinander. */ /* Lange Ueberschriften umbrechen lassen. "Buchungsbedingungen" hat auf einem 360er Geraet die Seite ueber den Rand gezogen: die Schreibschrift bricht nicht von allein. */ @media(max-width:760px){ h1,h2,h3{overflow-wrap:anywhere;hyphens:auto} } @media(max-width:440px){ /* Zweispaltige Filterpaare stehen auf schmalen Geraeten untereinander. Bei 360 Pixeln ragte die rechte Spalte zehn Pixel hinaus. */ .zweispalt{grid-template-columns:1fr} } @media(max-width:400px){ .brand__sub{display:none} .brand__wort,.brand__name img{max-width:118px;width:118px;height:auto} .topbar__in{gap:8px} .merk-btn{padding-inline:10px} .feldgruppe,.gitter,.formgrid,.formgitter{grid-template-columns:1fr} .hilfeknopf,.fensterknopf{right:10px} .suchtabs button{font-size:.86rem;padding-inline:10px} } /* ========================================================================= Startseite, Suche und Navigation auf dem Telefon ------------------------------------------------------------------------- Reiter, flache Suchmaske, Suchseite mit Leiste und ein fester Balken unten. Es ist dieselbe Suchmaske wie auf dem grossen Schirm, nur anders gesetzt: zwei Masken im selben Dokument haetten doppelte Feldkennungen und kaputte Beschriftungen. ========================================================================= */ .telreiter,.wahlbalken{display:none} .feld__zeichen{display:none} .suchleiste,.blattkopf,.blattfuss{display:none} @media(max-width:760px){ .telreiter{display:flex;gap:8px;padding:12px 0 2px} .telreiter .btn{flex:1 1 auto;min-height:42px;padding:9px 12px;font-size:.88rem; text-align:center;justify-content:center} /* Die Maske: kein Rahmen, nur der Schatten der Objektkarten, darunter 100 Pixel Luft. Anreise und Abreise stehen nebeneinander, jede Zeile so flach, wie sie lesbar bleibt. Eingaben bleiben bei 16 Pixeln Schrift, sonst zoomt iOS beim Antippen hinein. */ .hero__in{display:flow-root} .suchpanel--float{position:static;margin:14px 0 100px;padding:0;border:0;border-radius:14px; box-shadow:var(--schatten-bild);overflow:hidden;background:#fff} .suchpanel .suchtabs{display:none} /* die Reiter oben tun das schon */ .suchform{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0;gap:0} .suchpanel .suchform .feld{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr); align-items:center;column-gap:10px;row-gap:1px;min-height:0;padding:8px 14px; border:0;border-bottom:1px solid var(--line-soft)} .suchpanel .suchform .feld:nth-child(2), .suchpanel .suchform .feld:nth-child(3){grid-column:auto} .suchpanel .suchform .feld:nth-child(2){border-right:1px solid var(--line-soft)} .feld__zeichen{display:flex;grid-column:1;grid-row:1/3} .suchpanel .suchform .feld label{grid-column:2;grid-row:1;margin:0;font-size:.72rem;font-weight:500; line-height:1.2;letter-spacing:.02em;text-transform:none;text-align:left;color:var(--text-leise)} .suchpanel .suchform .feld select, .suchpanel .suchform .feld input{grid-column:2;grid-row:2;width:100%;height:auto;min-height:0; margin:0;padding:0;border:0;background:transparent;font-size:1rem;font-weight:600; line-height:1.25;color:var(--ink);text-align:left;appearance:none;-webkit-appearance:none} .suchpanel .suchform .feld select:focus-visible, .suchpanel .suchform .feld input:focus-visible{outline:2px solid var(--signal);outline-offset:3px} /* Das Kalenderzeichen steht links. Das des Browsers bleibt als unsichtbare Flaeche ueber dem ganzen Feld, damit ein Tipp den Waehler oeffnet. */ .suchform input[type="date"]{position:relative} .suchform input[type="date"]::-webkit-calendar-picker-indicator{position:absolute;inset:0; width:auto;height:auto;margin:0;padding:0;opacity:0;cursor:pointer} .suchform input[type="date"]::-webkit-date-and-time-value{text-align:left} .suchform__go{grid-column:1/-1;padding:0} .suchform__go .btn{width:100%;min-height:50px;border-radius:0;font-size:1rem} /* Suchseite: oben die Suche in einer Zeile und die drei Knoepfe, darunter gleich die Treffer. Filter und Karte kommen als Blatt darueber. */ .suchseite__titel{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap} .suchleiste{display:block;position:sticky;top:calc(var(--kopfhoehe,74px) - 4px);z-index:55; margin:0 calc(50% - 50vw) 14px;padding:10px calc(50vw - 50%) 2px; background:var(--sand-hell,#fbf7ef);box-shadow:0 10px 14px -14px rgba(12,44,88,.4)} .suchleiste__zeile{display:flex;align-items:center;min-height:48px;padding:0 4px; background:#fff;border-radius:14px;box-shadow:var(--schatten-bild)} .suchleiste__zurueck{display:grid;place-items:center;flex:0 0 auto;width:42px;height:44px;color:var(--ink)} .suchleiste__zurueck .pikto{color:inherit} .suchleiste__auswahl{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px; padding:10px 12px 10px 0;border:0;background:none;font:inherit;font-size:.95rem; color:var(--ink);text-align:left;cursor:pointer} .suchleiste__auswahl b{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600} .suchleiste__auswahl span:last-child{flex:0 0 auto;margin-left:auto;white-space:nowrap} .suchleiste__knoepfe{display:flex} .suchleiste__knopf{position:relative;flex:1;display:flex;align-items:center;justify-content:center; gap:7px;min-height:46px;padding:0 4px;border:0;background:none;font:inherit;font-size:.92rem; font-weight:500;color:var(--ink);cursor:pointer} .suchleiste__knopf select{position:absolute;inset:0;width:100%;height:100%;opacity:0; cursor:pointer;font-size:16px} .suchleiste__knopf[aria-expanded="true"]{color:var(--signal)} /* Ort und Zeitraum stehen schon in der Leiste, alles andere im Filterblatt */ .filterknopf,.ergebniskopf .sortier,.trefferzahl__karte,.aktivfilter{display:none} .filterspalte,.suchlayout__karte{display:none} .filterspalte[data-offen],.suchlayout__karte[data-offen]{display:block;position:fixed;left:0;right:0; top:calc(var(--kopfhoehe,74px) - 4px);bottom:0;z-index:70;margin:0;padding:0 16px; overflow:auto;overscroll-behavior:contain;background:#fff;border:0;border-radius:0;box-shadow:none} .suchlayout__karte[data-offen]{padding-bottom:16px} .blattkopf{display:flex;position:sticky;top:0;z-index:5;align-items:center;justify-content:space-between; margin:0 -16px 14px;padding:6px 6px 6px 16px;background:#fff;border-bottom:1px solid var(--line-soft)} .blattkopf b{font-size:1.05rem} .blattkopf__zu{min-width:44px;min-height:44px;border:0;background:none;font:inherit;font-size:1.6rem; line-height:1;color:var(--ink);cursor:pointer} .blattkopf__zu--text{padding:0 10px;font-size:.95rem;font-weight:600;color:var(--signal)} .blattfuss{display:block;position:sticky;bottom:0;margin:18px -16px 0;padding:12px 16px 16px; background:#fff;border-top:1px solid var(--line-soft)} /* Die Blaetter liegen in main, das eine eigene Stapelebene hat. Balken und Hilfeknopf stehen ausserhalb und laegen sonst ueber dem Knopf unten. */ html[data-blatt]{overflow:hidden} html[data-blatt] .hilfeknopf,html[data-blatt] .wahlbalken{display:none} /* Offenes Menue: Der Balken laege sonst ueber den letzten Menuepunkten (Kontakt, Instagram), und die waeren auch per Scrollen nicht erreichbar. */ html[data-menue="1"] .wahlbalken{display:none} /* Fester Balken unten. Er verdeckt 74 Pixel, dafuer das Polster am Koerper. */ body{padding-bottom:86px} .wahlbalken{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60; background:#fff;border-top:1px solid var(--line-soft);padding:9px 4px 12px; box-shadow:0 -4px 18px -12px rgba(12,44,88,.5)} .wahlbalken a{flex:1;min-height:46px;border:0;background:none; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:3px;font:inherit;font-size:.7rem;color:var(--text-leise);text-decoration:none; cursor:pointer;padding:2px 0} .wahlbalken svg{width:22px;height:22px;fill:none;stroke:currentColor; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .wahlbalken .wahlbalken__an{color:var(--signal);font-weight:700} /* Der Barrierefreiheitsknopf muss ueber den Balken, sein Fenster ueber den Knopf. */ .hilfeknopf{bottom:92px} .hilfe{bottom:150px} /* Kurzmeldungen erscheinen ueber dem Balken und tauchen ganz darunter ab. */ .toast{bottom:86px;transform:translate(-50%,calc(100% + 100px))} /* Das Schlussband darf nicht darunter verschwinden. */ .schlussband{margin-bottom:-58px} } /* Preis fuer den gesuchten Aufenthalt in der Objektkarte */ .aufenthalt{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right} .aufenthalt__rabatt{align-self:flex-start;padding:3px 9px;border-radius:6px;background:#2f6b3c; color:#fff;font-size:.78rem;font-weight:600;line-height:1.35} .aufenthalt__preis{margin:0;font-size:.86rem;color:var(--text-leise)} .aufenthalt__preis s{margin-left:6px;color:#b3261e} .aufenthalt__preis b{margin-left:6px;font-size:1.3rem;font-weight:700;color:var(--ink);white-space:nowrap} .aufenthalt small{font-size:.74rem;color:var(--text-leise)} .aufenthalt--hinweis{margin:0;font-size:.84rem;color:#a8422c} html[data-dunkel="1"] .aufenthalt__preis b{color:#e9f1f3} html[data-dunkel="1"] .suchleiste{background:#0e2129} html[data-dunkel="1"] .suchleiste__zeile,html[data-dunkel="1"] .blattkopf,html[data-dunkel="1"] .blattfuss, html[data-dunkel="1"] .filterspalte[data-offen], html[data-dunkel="1"] .suchlayout__karte[data-offen]{background:#152f38;color:#e9f1f3} html[data-dunkel="1"] .suchleiste__auswahl,html[data-dunkel="1"] .suchleiste__knopf, html[data-dunkel="1"] .suchleiste__zurueck,html[data-dunkel="1"] .blattkopf__zu{color:#e9f1f3} /* --- Objektseite: Ausstattung im Detail, Preise, Gut zu wissen ------------ Die beiden Listen klappen mit details und summary auf, wie die haeufigen Fragen: Tastatur, Vorlesefunktion und Seitensuche gehen damit von selbst. */ .klappe{margin-top:40px;background:#fff;border:1px solid var(--line-soft);border-radius:14px; box-shadow:var(--schatten-bild);overflow:hidden} #ausstattungdetail .klappe{margin-top:22px} .klappe__kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:18px 58px 16px 22px; cursor:pointer;position:relative;list-style:none} .klappe__kopf::-webkit-details-marker{display:none} .klappe__kopf::after{content:'';position:absolute;right:24px;top:27px;width:10px;height:10px; border-right:2px solid var(--signal);border-bottom:2px solid var(--signal); transform:rotate(45deg);transition:transform .2s ease} .klappe[open] > .klappe__kopf::after{transform:rotate(-135deg);top:32px} .klappe__kopf:hover{background:rgba(23,69,126,.03)} .klappe__kopf:focus-visible{outline:2px solid var(--signal);outline-offset:-3px;border-radius:14px} .klappe__titel{font-size:1.5rem} .klappe__unter{font-size:.84rem;color:var(--sage)} .klappe__inhalt{border-top:1px solid var(--line-soft);padding:4px 22px 22px} @media(max-width:560px){ .klappe__kopf{padding:16px 50px 14px 16px} .klappe__kopf::after{right:20px} .klappe__inhalt{padding:2px 16px 18px} } .ausstattung{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:0 30px} .ausstattung__gruppe h4{font-family:'Inter',system-ui,sans-serif;font-size:.74rem;font-weight:700; letter-spacing:.09em;text-transform:uppercase;color:var(--sage);margin:18px 0 6px} .ausstattung__gruppe ul{list-style:none;margin:0;padding:0} .ausstattung__gruppe li{display:flex;align-items:flex-start;gap:9px;padding:4px 0;font-size:.93rem; line-height:1.45;color:var(--text-weich)} .ausstattung__gruppe li svg{width:16px;height:16px;flex:0 0 auto;margin-top:3px;fill:none; stroke:var(--signal);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .ausstattung__gruppe b{color:var(--ink);font-weight:650} .preisliste__block{margin-top:12px} .preisliste__kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline; gap:2px 14px;margin:0;padding:10px 0 4px;font-family:'Inter',system-ui,sans-serif; font-size:.98rem;font-weight:700;line-height:1.35;color:var(--ink)} .preisliste__kopf small{font-size:.8rem;font-weight:500;color:var(--sage)} .preisliste__gruppe{margin:28px 0 0;padding-top:14px;border-top:2px solid var(--sand); font-family:'Inter',system-ui,sans-serif;font-size:.74rem;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--sage)} .preisliste__gruppe small{margin-left:8px;font-size:.8rem;font-weight:500;letter-spacing:0;text-transform:none} .preisliste__zeile{display:grid;grid-template-columns:13.5em minmax(0,1fr) auto;gap:2px 18px; align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:.92rem;line-height:1.4} .preisliste__zeit{color:var(--text-weich);font-variant-numeric:tabular-nums} .preisliste__name{color:var(--ink);font-weight:600} .preisliste__text{color:var(--text-weich)} .preisliste__text small{font-size:.8rem;color:var(--sage)} .preisliste__preis{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)} .preisliste__zeile--posten{margin-top:4px} .preisliste__fuss{margin-top:16px;font-size:.84rem;color:var(--sage)} @media(max-width:560px){ .preisliste__zeile{grid-template-columns:minmax(0,1fr) auto} .preisliste__zeit{grid-column:1/-1;font-size:.8rem;color:var(--sage)} .preisliste__zeit:empty{display:none} .preisliste__zeile--kurz .preisliste__zeit{grid-column:auto;font-size:.92rem;color:var(--text-weich)} .preisliste__zeile--kurz .preisliste__text{display:none} .preisliste__zeile--posten .preisliste__text{grid-row:2;grid-column:1;font-size:.8rem;color:var(--sage)} .preisliste__zeile--posten .preisliste__preis{grid-row:1;grid-column:2} } .gutzuwissen h2,.zahlweg h2{margin-top:48px;font-size:1.5rem} .gutzuwissen__liste{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px} .gutzuwissen__liste li{display:flex;align-items:center;gap:14px;font-size:1rem;line-height:1.45;color:var(--ink)} /* Goldbraun wie in der Vorlage, der Haken bleibt weiss */ .gutzuwissen__haken{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:#8f7b52; display:grid;place-items:center} .gutzuwissen__haken svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.8; stroke-linecap:round;stroke-linejoin:round} .zahlweg__schritte{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:34px} .zahlweg__schritte li{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px; align-items:start} .zahlweg__schritte li:not(:last-child)::after{content:'';position:absolute;left:31px;top:72px;bottom:-26px; width:2px;border-radius:1px;background:var(--line)} .zahlweg__nr{width:64px;height:64px;border-radius:50%;background:#fff;box-shadow:var(--schatten-bild); display:grid;place-items:center;font-family:'Fraunces',Georgia,serif;font-size:1.7rem;font-weight:500; color:var(--ink)} .zahlweg__text{padding-top:6px} .zahlweg__text b{display:block;font-size:1.02rem;color:var(--ink)} .zahlweg__text span{display:block;margin-top:2px;font-size:.96rem;line-height:1.5;color:var(--text-weich)} html[data-dunkel="1"] .klappe{background:#152f38;border-color:#27454f} html[data-dunkel="1"] .klappe__kopf:hover{background:rgba(255,255,255,.04)} html[data-dunkel="1"] .zahlweg__nr{background:#152f38;color:#e9f1f3} html[data-dunkel="1"] .gutzuwissen__haken{background:#a8925f} html[data-kontrast="1"] .klappe{border-color:#17457e} /* --- Heroslider der Regionsseiten ------------------------------------------ Aufbau wie der Hero der Startseite, darin mehrere Motive uebereinander. Das sichtbare traegt data-an. Punkte und Pfeile liegen unten rechts im Bild. */ .hero--region{min-height:min(82vh,780px)} .hero__folie{position:absolute;inset:0;display:block;opacity:0;transition:opacity 1.4s ease} .hero__folie[data-an]{opacity:1} .hero__knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin:0} .heroslider__steuer{position:absolute;right:clamp(16px,4vw,44px);bottom:clamp(16px,3vw,30px);z-index:3; display:flex;align-items:center;gap:8px} .heroslider__text{margin:0 8px 0 0;padding:6px 13px;border-radius:999px;background:rgba(12,44,88,.5); color:#fff;font-size:.82rem;font-weight:600;line-height:1.3; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .heroslider__punkte{display:flex;align-items:center} .heroslider__punkt{position:relative;width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer} .heroslider__punkt::before{content:'';position:absolute;inset:8px;border-radius:50%;border:1.5px solid #fff; background:rgba(255,255,255,.3);box-shadow:0 1px 5px rgba(12,44,88,.35);transition:transform .2s ease,background .2s ease} .heroslider__punkt[aria-current="true"]::before{background:#fff;transform:scale(1.25)} .heroslider__pfeil{width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.88); color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;box-shadow:0 2px 10px rgba(12,44,88,.25)} .heroslider__pfeil:hover{background:#fff} .heroslider__punkt:focus-visible,.heroslider__pfeil:focus-visible{outline:3px solid #fff;outline-offset:2px} @media(prefers-reduced-motion:reduce){.hero__folie{transition:none}} html[data-ruhe="1"] .hero__folie{transition:none} @media(max-width:760px){ .heroslider__steuer{right:10px;bottom:8px;gap:4px} .heroslider__text{display:none} .heroslider__pfeil{width:34px;height:34px;font-size:1.3rem} }