/* ============================================================ JORDVIND — Stylesheet (konsolidiert) Aufbau: Tokens → Grundlagen → Raster → Komponenten → Zustände → Breakpoints Regeln: keine Einzelfall-max-widths, keine doppelten Selektoren, kein !important, Farben nur über Variablen. ============================================================ */ :root{ /* Farben */ --forest:#3b5043; --forest-dk:#2c3d33; --pine-deep:#26332b; --sage:#7c9080; --mist:#eef1ec; --white:#faf9f5; --birch:#e8e2d4; --gold:#b8874a; --ink:#232a24; --line:#dbe0d8; --text-weich:#556052; /* Maße — ZWEI Spuren, keine Einzelfälle */ --wrap:1180px; /* Spur A: breite Raster */ --mass-text:820px; /* Spur B: alles Lesbare */ --measure:68ch; /* Zeilenlänge im Fließtext */ --wrap-pad:clamp(1.25rem,4vw,3rem); /* Schriftstufen */ --step-hero:clamp(2.4rem,5.5vw,4.8rem); --step-h2:clamp(1.5rem,3.4vw,2.6rem); --step-h3:clamp(1.2rem,1.8vw,1.5rem); /* Abstände */ --luft-s:1.4rem; --luft-m:2.6rem; --luft-l:clamp(3.5rem,7vw,6rem); /* Bewegung */ --tempo:.2s; --tempo-lang:.5s; } /* ---------- Schriften (selbst gehostet) ---------- */ @font-face{font-family:Lato;font-weight:100;font-style:normal;font-display:swap;src:url("../fonts/lato-100.woff2") format("woff2")} @font-face{font-family:Lato;font-weight:300;font-style:normal;font-display:swap;src:url("../fonts/lato-300.woff2") format("woff2")} @font-face{font-family:Lato;font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/lato-400.woff2") format("woff2")} @font-face{font-family:Lato;font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/lato-700.woff2") format("woff2")} /* ---------- GRUNDLAGEN ---------- */ html{scroll-behavior:smooth} body{font-family:'Lato',system-ui,sans-serif;font-weight:400;font-size:1.125rem;line-height:1.75;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased} img{display:block;max-width:100%} body.hk main p,body.hk .price-info .d,body.hk .icard p,body.hk .price-note{color:#1a1a1a} body.hk .eyebrow{color:#6b4310;font-weight:400;letter-spacing:.22em} body.hk .lang a:not(.active){color:#d8d2c4} body.hk .sub,body.hk .crumb{color:#fff} body.hk main a,body.hk .price-note a{text-decoration:underline;text-underline-offset:3px} body.hk .btn-p{background:#7a4f16;color:#fff;border:2px solid #fff} body.hk .scrim{background:linear-gradient(100deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.68) 55%,rgba(0,0,0,.42) 100%)} body.hk header{background:#12190f} body.hk .submenu{background:#12190f;border-color:#fff} body.hk .submenu::before{background:#12190f;border-color:#fff} body.hk .icard,body.hk .price-list,body.hk .card{border:2px solid #2b3a2e} body.hk .cta-green .box{background:#1e2b22;border:2px solid #fff} body.hk .contact-card{background:#12190f;border:2px solid #fff} body.hk :focus-visible{outline:3px solid #7a4f16;outline-offset:2px} body.hk .a11y-btn{border-color:#fff;color:#fff} body.hk .tts-aktiv{background:#ffe9a8;color:#000;box-shadow:0 0 0 3px #ffe9a8} body.hk .jv-form input,body.hk .jv-form select,body.hk .jv-form textarea{border:2px solid #2b3a2e;color:#000} body.hk .consent{color:#1a1a1a} body.hk .card{border:2px solid #2b3a2e} body.hk .card-body p{color:#1a1a1a} body.hk .card-body .go{color:#6b4310;text-decoration:underline} /* ---------- RASTER & ABSCHNITTE ---------- */ .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem)} .narrow{max-width:var(--mass-text);margin-inline:auto} /* INTRO */ .intro{padding-block:clamp(4rem,8vw,6rem)} .intro .eyebrow{color:var(--sage)} .intro h1,.intro h2{font-weight:300;font-size:var(--step-h2);color:var(--forest);line-height:1.12;margin:.7rem 0 1.4rem} .intro p{font-weight:300;color:#43503f;margin-bottom:1.1rem;max-width:var(--measure)} .intro .lead{font-size:1.22rem;color:var(--forest)} /* PROSE-Sektionen (Wirkung, Ablauf …) */ .band{padding-block:clamp(3.5rem,7vw,5.5rem)} .band.tint{background:var(--mist);border-block:1px solid var(--line)} .band h2{font-weight:300;font-size:var(--step-h2);color:var(--forest);line-height:1.12;margin-bottom:1.4rem} .band h3{font-weight:400;font-size:var(--step-h3);color:var(--forest);margin-bottom:1rem;display:flex;align-items:center;gap:.6rem} .band h3 svg.ic{color:var(--gold)} .band p{font-weight:300;color:#43503f;margin-bottom:1rem;max-width:var(--measure)} /* ---------- Intro zweispaltig (Häst) ---------- */ .intro-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:start} /* ============================================================ RASTER — zwei Spuren, EIN Maß. Keine Einzelfall-max-widths mehr. Spur A (breit) = .wrap → für Raster mit 3 Spalten, boka-grid Spur B (Text) = var(--mass-text) → für alles Lesbare, zentriert Überschriften liegen IMMER in derselben Spur wie ihr Inhalt. ============================================================ */ /* Beide Bauweisen müssen dieselbe Kante ergeben:
und
content-box sorgt dafür, dass das Maß für den INHALT gilt, nicht inkl. Polster. */ .wrap.narrow,.wrap.priser>.head{box-sizing:content-box;max-width:var(--mass-text)} /* Spur B: alles Lesbare teilt EIN Maß */ .narrow,.price-list,.info-cards.two,.cards.zwei,.kontakt-formular, .priser .head,.boka-embed .head,.band .head{max-width:var(--mass-text);margin-inline:auto} .wrap.narrow{box-sizing:content-box;max-width:var(--mass-text)} /* ---------- KOPFBEREICH & NAVIGATION ---------- */ /* ANNOUNCE + HEADER (identisch zur Startseite) */ .announce{background:var(--pine-deep);color:var(--birch);text-align:center;font-weight:300;font-size:.9rem;padding:.55rem;letter-spacing:.02em} .announce b{color:var(--gold);font-weight:400} header{position:sticky;top:0;z-index:50;background:rgba(38,51,43,.90);backdrop-filter:blur(8px);color:var(--birch)} nav{display:flex;align-items:center;justify-content:space-between;padding-block:.9rem} .brand img{height:38px;width:auto} .menu{display:flex;gap:1.9rem;list-style:none;font-weight:300;font-size:1rem} .menu a{text-decoration:none;padding-block:.4rem;border-bottom:1px solid transparent;transition:border-color .2s} .menu a.active{border-color:var(--gold)} .menu a:hover,.menu a:focus-visible{border-color:var(--gold)} .nav-r{display:flex;align-items:center;gap:1.3rem} .lang{display:flex;gap:.5rem;font-size:.85rem;font-weight:300;letter-spacing:.08em;color:var(--sage)} .lang b{color:var(--birch)} .nav-cta{background:var(--gold);color:#1c150a;text-decoration:none;padding:.55rem 1.25rem;border-radius:3px;font-size:.95rem} .nav-cta:hover{background:#cb9a5c} .burger{display:none;background:none;border:0;color:var(--birch);cursor:pointer} /* SLIDER — 4 Slides, Anker-Navigation (das Muster dieser Seite) */ .slider{position:relative;display:grid;min-height:min(70vh,620px); /* minmax(0,1fr) statt der Vorgabe auto: sonst waechst die Rasterspalte auf die Mindestbreite ihres Inhalts und sprengt den Container um ein paar Pixel — bei 320px messbar. */ grid-template-columns:minmax(0,1fr); background:var(--pine-deep)} .menu>li:hover>.submenu,.menu>li:focus-within>.submenu{opacity:1;visibility:visible;transform:translate(-50%,0)} .submenu a{display:block;padding:.85rem 1.1rem .85rem 1.35rem;color:var(--birch);font-weight:300;white-space:nowrap;border-bottom:0;position:relative;font-size:.98rem;border-radius:4px;transition:background .15s,color .15s} .submenu a:hover,.submenu a:focus-visible{background:rgba(232,226,212,.08);color:#fff;border-bottom:0} /* ============================================================ NAVIGATION — entworfen, nicht nachgebaut ============================================================ */ .menu>li{position:relative} .menu>li>a{display:inline-flex;align-items:center;gap:.4rem} /* Caret zeigt an, dass ein Untermenü existiert */ .menu .caret{width:.95rem;height:.95rem;transition:transform .2s;opacity:.75} .menu>li:hover>a .caret,.menu>li:focus-within>a .caret{transform:rotate(180deg);opacity:1} /* Untermenü: eigenes Panel, mit dem Header verbunden statt schwebend */ .submenu{list-style:none;position:absolute;top:calc(100% + 26px);left:50%;transform:translate(-50%,6px);min-width:268px;background:var(--pine-deep);border-radius:6px;padding:.4rem;border:1px solid rgba(232,226,212,.14);box-shadow:0 18px 40px rgba(14,20,16,.45),0 2px 6px rgba(14,20,16,.3);opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:60} /* Verbindungsspitze zum Elternpunkt */ .submenu::before{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(45deg);width:14px;height:14px;background:var(--pine-deep);border-radius:2px;border-left:1px solid rgba(232,226,212,.14);border-top:1px solid rgba(232,226,212,.14)} /* Unsichtbare Brücke, damit der Weg zum Untermenü nicht abreißt */ .menu>li:has(.submenu)>a::after{content:"";position:absolute;left:-.6rem;right:-.6rem;top:100%;height:28px} .submenu li+li{border-top:1px solid rgba(232,226,212,.12)} /* Goldener Akzent statt Farbfläche */ .submenu a::before{content:"";position:absolute;left:.45rem;top:50%;transform:translateY(-50%);width:3px;height:0;background:var(--gold);border-radius:2px;transition:height .18s} .submenu a:hover::before,.submenu a:focus-visible::before{height:calc(100% - 1.1rem)} .submenu a.active{color:#fff;font-weight:400} .submenu a.active::before{height:calc(100% - 1.1rem)} /* Sprachumschaltung: echte Links mit klarem Zustand */ .lang a{position:relative;text-decoration:none;color:var(--sage);padding:.15rem .1rem;transition:color .15s} .lang a:hover,.lang a:focus-visible{color:var(--birch)} .lang a.active{color:var(--birch);font-weight:400} .lang a.active::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--gold)} .burger[aria-expanded="true"]{color:var(--gold)} /* Sprachumschalter: auf Desktop im Kopfbereich, auf Mobil im geöffneten Menü — IMMER nur einer sichtbar. */ .lang.mobil{display:none} /* ---------- Mobil-Navigation (Panel unter dem Header) ---------- */ /* ---------- Sehr schmale Geräte (iPhone mini/SE, 320–380px) ---------- */ /* Schwedische Komposita ("laserbehandling") sind unteilbar breit → umbrechen erlauben */ .cap h1,.cap .slide-title,main h1,main h2,main h3{overflow-wrap:break-word;hyphens:manual} /* Skip-Link: erst bei Tastaturfokus sichtbar */ .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:#1c150a;padding:.8rem 1.4rem;border-radius:0 0 4px 0;font-weight:400;text-decoration:none} .skip:focus{left:0} /* ---------- SLIDER ---------- */ .slide{grid-area:1/1;position:relative;opacity:0;transition:opacity 1.1s ease; /* unsichtbare Folien duerfen keine Klicks abfangen */ pointer-events:none} .slide.on{opacity:1;pointer-events:auto} .slide-img{position:absolute;inset:0;background-size:cover;background-position:center} .scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(38,51,43,.90) 0%,rgba(38,51,43,.5) 50%,rgba(38,51,43,.12) 100%)} .cap{position:relative;min-height:100%;display:flex;flex-direction:column; justify-content:center;color:var(--white); /* Der Hero liegt in DERSELBEN Spur wie der Inhalt darunter — Lesespur, wie .wrap.narrow. Vorher war er auf 58% gedeckelt und begann weiter links als alles andere: Die linken Kanten fluchteten nicht, und rechts blieb bei 1440px ueber 750px leer. */ box-sizing:content-box;max-width:var(--mass-text); padding-block:2.2rem 4rem} .cap .crumb{font-weight:300;font-size:.85rem;letter-spacing:.05em;color:rgba(232,226,212,.75);margin-bottom:.6rem} .cap .crumb a{text-decoration:none} .cap h1{font-weight:100;font-size:var(--step-hero);line-height:1.04;margin:.4rem 0;letter-spacing:-.01em} .cap h1 b{font-weight:400} .cap .sub{font-weight:300;font-size:1.2rem;max-width:46ch;color:rgba(250,249,245,.9)} .to{display:inline-flex;align-items:center;gap:.55rem;margin-top:1.6rem;width:fit-content;font-weight:400;text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:.25rem} .to svg.ic{width:1.1rem;height:1.1rem;color:var(--gold)} .dots{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);display:flex;gap:.7rem;z-index:3} .dots button{width:34px;height:4px;border:0;background:rgba(250,249,245,.4);cursor:pointer;padding:0;border-radius:2px} .dots button[aria-current="true"]{background:var(--gold)} .card .top{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--mist)} .card .top img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease} .card:hover .top img{transform:scale(1.04)} /* ---------- INHALTS-BAUSTEINE (Preise, Karten, Listen) ---------- */ .ticks{list-style:none;display:grid;gap:.7rem;margin:1rem 0 1.6rem} .ticks li{display:flex;gap:.7rem;align-items:flex-start;font-weight:300} .ticks svg.ic{width:1.2rem;height:1.2rem;color:var(--gold);margin-top:.28rem} .subblock{margin-top:2.4rem} .price-list{max-width:var(--mass-text);margin-inline:auto;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--white)} .price-row{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;padding:1.3rem 1.6rem;border-bottom:1px solid var(--line)} .price-row:last-child{border-bottom:0} .price-row.feature{background:rgba(255,255,255,0.35)} .price-info{flex:1} .price-info .n{font-weight:400;color:var(--forest);font-size:1.1rem} .price-info .d{font-weight:300;font-size:.92rem;color:#556052;margin-top:.2rem} .price-amt{font-weight:300;font-size:1.7rem;color:var(--forest);white-space:nowrap} .price-amt small{font-size:.9rem;font-weight:400;color:var(--sage)} .price-note{max-width:var(--mass-text);margin:1.6rem auto 0;font-weight:300;font-size:.92rem;color:#556052} .price-note a{color:var(--gold)} .badge{display:inline-block;margin-top:1.2rem} .badge img{height:70px} /* INFO-CARDS */ .info-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:1rem} .icard{background:var(--white);border:1px solid var(--line);border-radius:4px;padding:1.8rem} .icard h4{font-weight:400;font-size:1.15rem;color:var(--forest);margin-bottom:.7rem;display:flex;align-items:center;gap:.5rem} .icard h4 svg.ic{width:1.3rem;height:1.3rem;color:var(--gold)} .icard p{font-weight:300;font-size:.98rem;color:#556052} .aside-card .badge-ic{width:56px;height:56px;border-radius:50%;background:var(--white);display:grid;place-items:center;margin-bottom:1rem;color:var(--forest)} .info-cards.two{grid-template-columns:repeat(2,1fr);max-width:var(--mass-text);margin-inline:auto} .price-info .n,.icard h4,.aside-card h4{overflow-wrap:break-word} /* ============================================================ SERVICE-KARTEN — Komponente (fehlte im gemeinsamen Stylesheet) ============================================================ */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:2.2rem} .cards.zwei{grid-template-columns:repeat(2,1fr);max-width:var(--mass-text);margin-inline:auto} .card{background:var(--white);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .25s ease,box-shadow .25s ease} .card:hover,.card:focus-visible{transform:translateY(-4px);box-shadow:0 14px 32px rgba(44,61,51,.14)} .card:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .card .num{position:absolute;top:.7rem;left:1.1rem;color:#fff;font-weight:100;font-size:2rem;text-shadow:0 1px 12px rgba(0,0,0,.55);z-index:1;line-height:1} .card-body{padding:1.7rem;flex:1;display:flex;flex-direction:column} .card-body h3{font-weight:400;font-size:var(--step-h3);color:var(--forest);margin:0 0 .7rem} .card-body p{font-weight:300;font-size:1rem;color:#556052;flex:1;margin:0;text-decoration:none} .card-body .go{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.2rem;font-weight:400;color:var(--gold);text-decoration:none} .card-body .go svg.ic{width:1.05rem;height:1.05rem} /* ---------- SONDERBLÖCKE (Parallax, CTA, Kontakt, Lightbox) ---------- */ /* BOKA / KONTAKT */ .boka{background:var(--forest);color:var(--white);padding-block:clamp(4rem,8vw,6rem)} .boka-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem)} .boka h2{font-weight:100;font-size:var(--step-h2);line-height:1.12;margin-bottom:1.2rem} .boka p{font-weight:300;color:rgba(250,249,245,.88);margin-bottom:1rem;max-width:48ch} .contact-card{background:rgba(38,51,43,.5);border:1px solid rgba(232,226,212,.2);border-radius:6px;padding:2rem} .contact-card .row{display:flex;gap:.8rem;align-items:center;padding-block:.7rem;border-bottom:1px solid rgba(232,226,212,.14);font-weight:300} .contact-card .row:last-child{border-bottom:0} .contact-card svg.ic{color:var(--gold);width:1.3rem;height:1.3rem} .contact-card a{text-decoration:none;color:var(--white)} /* ---------- Parallax mit Siegel (Qualitätsmerkmal) ---------- */ .parallax{position:relative;min-height:var(--px-h-desktop,min(78vh,700px));background-size:cover;background-position:center;background-attachment:fixed;display:grid;place-items:center;overflow:hidden} .parallax::before{content:"";position:absolute;inset:0;background:rgba(38,51,43,.18)} .parallax .px-inner{position:relative;display:grid;justify-items:center;gap:1.6rem;text-align:center;padding-inline:clamp(1.25rem,4vw,3rem)} /* Siegel-/Logo-Größe je Viewport über CSS-Variablen — aus dem CMS setzbar */ .parallax .seal{width:var(--seal-desktop,430px);height:auto;filter:drop-shadow(0 2px 12px rgba(0,0,0,.25))} /* Optionaler Text im Parallax */ .parallax .px-text{max-width:44ch;color:var(--white)} .parallax .px-text h2{font-weight:100;font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1.15;color:var(--white);margin:0} .parallax .px-text p{font-weight:300;margin:.9rem 0 0;color:rgba(250,249,245,.92)} .parallax .px-text .btn{margin-top:1.4rem} /* Sicherheitsnetz: leerer Textblock im Parallax darf keinen Platz belegen — greift auch, wenn Inhalte über einen anderen Weg als den Build hereinkommen. */ .parallax .px-text:empty{display:none} .parallax .px-text:has(h2:empty):has(p:empty){display:none} .parallax .px-text h2:empty,.parallax .px-text p:empty{display:none} /* Overlay-Stärke editierbar */ .parallax::before{background:rgba(38,51,43,var(--px-overlay,.18))} /* Tablet */ /* Mobil — parallax-fixed wird auf iOS nicht unterstützt → scroll */ /* ---------- Grünes CTA-Band ---------- */ .cta-green{background:var(--mist);padding-block:clamp(3rem,7vw,5rem)} .cta-green .box{max-width:var(--mass-text);box-sizing:content-box;margin-inline:auto;background:#5c7360;color:var(--white);border-radius:6px;padding:clamp(2rem,5vw,3.4rem) clamp(1.5rem,4vw,3rem);text-align:center;box-sizing:content-box} .cta-green .box h2{font-weight:100;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.2;color:var(--white);margin:0} .cta-green .box p{font-weight:300;margin:1.2rem 0 0;color:rgba(250,249,245,.9);font-size:1rem} .diplom{margin-top:2rem} .diplom img{max-width:var(--diplom-w,320px);width:100%;height:auto;border:0;border-radius:0;background:transparent;cursor:zoom-in;transition:transform .2s} .diplom img:hover{transform:scale(1.02)} .diplom figcaption{font-size:.85rem;font-weight:300;color:var(--sage);margin-top:.5rem} /* ---------- Lightbox (Diplom) ---------- */ .lb{position:fixed;inset:0;background:rgba(38,51,43,.94);display:none;place-items:center;z-index:100;padding:2rem} .lb.open{display:grid} .lb img{max-width:min(92vw,1100px);max-height:88vh;border-radius:0;background:transparent} .lb .close{position:absolute;top:1.5rem;right:2rem;background:none;border:0;color:var(--white);font-size:2.2rem;line-height:1;cursor:pointer;padding:.3rem .8rem} .lb .close:focus-visible{outline:2px solid var(--gold)} /* ---------- Boka mit Einbettung ---------- */ .boka-embed{background:var(--white);padding-block:clamp(3rem,7vw,5rem)} .boka-embed .head{text-align:center;max-width:var(--mass-text);margin:0 auto 2.5rem} .boka-embed .head h2{font-weight:100;font-size:var(--step-h2);color:var(--forest);margin-bottom:1rem} .boka-embed .head p{font-weight:300;color:#43503f;margin-bottom:.7rem} .embed{max-width:var(--mass-text);margin-inline:auto} .embed iframe{width:100%;border:0;border-radius:6px} /* ---------- Hintergrund-Varianten für sauberen Wechsel ---------- */ .cta-green.plain{background:var(--white)} .boka-embed.tint{background:var(--mist)} /* ---------- FORMULAR ---------- */ /* Hintergrund sperren, solange das Mobilmenü offen ist */ /* ============================================================ KONTAKTFORMULAR — gemeinsam für alle Seiten ============================================================ */ .kontakt-formular{max-width:var(--mass-text);margin-inline:auto} .jv-form{display:grid;gap:1.1rem;margin-top:1.8rem} .jv-form label{font-weight:400;color:var(--forest);font-size:.95rem;display:block;margin-bottom:.35rem} .jv-form label .pflicht{color:var(--gold)} .jv-form input[type=text],.jv-form input[type=email],.jv-form input[type=tel],.jv-form select,.jv-form textarea{font:inherit;font-weight:300;width:100%;padding:.85rem 1rem;border:1px solid var(--line);border-radius:4px;background:var(--white);color:var(--ink);min-height:44px} .jv-form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b5043' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:1.1rem;padding-right:2.6rem} .jv-form input:focus,.jv-form select:focus,.jv-form textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:transparent} .jv-form textarea{resize:vertical;min-height:130px} .jv-form .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden} /* .jv-form label setzt display:block und hat hoehere Spezifitaet als .consent — das Flexlayout kam nie zum Einsatz. Deshalb klebte der Text am Kaestchen und die Luecke blieb wirkungslos. */ .jv-form label.consent{display:flex;gap:.7rem;align-items:flex-start; font-weight:300;font-size:.92rem;line-height:1.5;color:#556052; margin-bottom:0;cursor:pointer} /* Das Kaestchen sitzt optisch mittig zur ERSTEN Zeile, nicht zum ganzen Absatz. Der Versatz ist die halbe Differenz aus Zeilenhoehe und Kaestchenhoehe: (1.5 * .92rem - 20px) / 2. */ .jv-form label.consent input[type=checkbox]{width:22px;height:22px;min-height:22px; margin:calc((1.5em - 22px) / 2) 0 0;flex:none;accent-color:var(--gold);cursor:pointer} .jv-form label.consent span{display:block} .consent a{color:var(--forest);text-underline-offset:2px} .form-status{padding:.95rem 1.15rem;border-radius:4px;font-weight:400;display:none} .form-status.ok{display:block;background:#e7f0e7;color:#2b4a2d;border:1px solid #b9d3ba} .form-status.err{display:block;background:#f6e9e9;color:#6f2b2b;border:1px solid #dcbcbc} .jv-form button[type=submit]{justify-self:start} .jv-form button[disabled]{opacity:.6;cursor:wait} /* ---------- SCHALTFLÄCHEN ---------- */ .btn{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;padding:.9rem 2rem;font-weight:400;border-radius:3px;transition:.2s;margin-top:.6rem} .btn-p{background:var(--gold);color:#1c150a} .btn-p:hover{background:#cb9a5c} /* Buttons: hat keinen Rahmen,