/* Unsere Auswahl: Haltung vor der Anfrage. Bild links, Worte rechts. */
.selection{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100svh;background:var(--deep);color:var(--cream);border-top:1px solid var(--gold);outline:none;overflow:clip}
.selection-image{position:relative;overflow:hidden}
.selection-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.selection-image:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0f181300 58%,#0f1813 100%),linear-gradient(0deg,#0f181366,#0f181300 30%)}
.selection-copy{align-self:center;max-width:660px;padding:104px var(--gutter) 46px clamp(40px,5.5vw,96px)}
.selection-eyebrow{display:flex;align-items:center;gap:16px;margin:0 0 22px;font:500 10px/1.5 Archivo,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.selection-eyebrow:before{content:'';width:44px;height:1px;background:var(--gold)}
.selection h2{font:350 clamp(44px,4.3vw,66px)/1.04 'Luxus Serif',Georgia,serif;letter-spacing:-.05em;margin:0}
.selection-lead{font:400 14px/1.7 Archivo,sans-serif;color:#d8cdb8;margin:22px 0 0;max-width:32em;text-wrap:pretty}
.selection-values{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid #b6a27a42}
.selection-values li{display:grid;grid-template-columns:46px 1fr;padding:13px 0;border-bottom:1px solid #b6a27a42}
.selection-number{font:400 11px/2 Archivo,sans-serif;letter-spacing:.06em;color:var(--gold)}
.selection-values h3{font:400 20px/1.2 'Luxus Serif',Georgia,serif;letter-spacing:-.01em;margin:0}
.selection-values p{font:400 13px/1.5 Archivo,sans-serif;color:#b9ae97;margin:4px 0 0}
.selection-close{font:italic 400 19px/1.45 'Luxus Serif',Georgia,serif;color:var(--gold);margin:26px 0 0}
/* Laptop-Fenster (29.9.): Auswahl passt sich der Fensterhöhe an (--dichte aus kopf.js) */
@media(min-width:701px){.selection h2{font-size:calc(clamp(44px,4.3vw,66px) * var(--dichte,1))}.selection-eyebrow{margin-bottom:calc(22px * var(--dichte,1))}.selection-lead{margin-top:calc(22px * var(--dichte,1))}.selection-values{margin-top:calc(28px * var(--dichte,1))}.selection-values li{padding:calc(13px * var(--dichte,1) * var(--dichte,1)) 0}.selection-copy{padding-top:max(96px,calc(104px * var(--dichte,1)))}.selection-lead{font-size:max(13px,calc(14px * var(--dichte,1)))}.selection-values h3{font-size:calc(20px * var(--dichte,1))}.selection-values p{margin-top:calc(4px * var(--dichte,1))}.selection-close{font-size:calc(19px * var(--dichte,1))}.selection-close{margin-top:calc(26px * var(--dichte,1))}.selection-copy{padding-bottom:calc(46px * var(--dichte,1))}}
.selection-quill-anchor{display:inline-block;width:1px;height:1px;margin-left:34px;vertical-align:baseline}
@media(max-width:700px){
 .selection{grid-template-columns:1fr;min-height:0}
 .selection-image{height:30svh;min-height:210px}.selection-image:after{background:linear-gradient(0deg,#0f1813 0%,#0f181300 45%)}
 .selection-copy{padding:10px 22px 76px;max-width:none}.selection h2{font-size:clamp(40px,11.5vw,52px)}.selection-lead{font-size:13px}.selection-values h3{font-size:19px}.selection-close{font-size:17px;padding-right:34px}.selection-quill-anchor{margin-left:14px}
}
/* Anfrage: Goldrahmen und ein ruhiger Lichtschimmer. Beim Zeigen füllt sich der Knopf mit Gold, beim Klick öffnet er sich zum Briefbogen. */
.inquiry-link,.inquiry-link:hover,.apply-link,.apply-link:hover{background:#16231c}
:is(.inquiry-link,.apply-link){position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:34px;min-height:60px;padding:0 28px 0 34px;border:1px solid #cdb783;color:#f3e8cf;font:500 12px/1 Archivo,sans-serif;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;box-shadow:0 0 0 5px #b6a27a14,0 22px 44px -26px #000;transition:color 380ms,box-shadow 380ms}
:is(.inquiry-link,.apply-link) span{position:relative;z-index:2;font-size:19px;letter-spacing:0;color:#d9c38c;transition:transform 300ms,color 380ms}
:is(.inquiry-link,.apply-link):before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,#8f7746 0%,#d6bd83 34%,#f3e2b5 50%,#c9ae74 66%,#8f7746 100%);opacity:0;transition:opacity 420ms}
:is(.inquiry-link,.apply-link):after{content:'';position:absolute;top:-20%;bottom:-20%;left:0;width:42%;z-index:1;pointer-events:none;background:linear-gradient(100deg,#fff0 0%,#f6e7bf1f 30%,#fff5dc8c 50%,#f6e7bf1f 70%,#fff0 100%);transform:translateX(-170%) skewX(-20deg);animation:inquiry-shimmer 6s cubic-bezier(.45,.05,.25,1) 1.4s infinite}
@keyframes inquiry-shimmer{0%{transform:translateX(-170%) skewX(-20deg)}34%,100%{transform:translateX(330%) skewX(-20deg)}}
:is(.inquiry-link,.apply-link):is(:hover,:focus-visible){color:#0f1813;box-shadow:0 0 0 5px #b6a27a26,0 26px 50px -24px #000}
:is(.inquiry-link,.apply-link):is(:hover,:focus-visible):before{opacity:1}
:is(.inquiry-link,.apply-link):is(:hover,:focus-visible) span{color:#0f1813}
/* Windrose statt Pfeil (Ilja 29.9.): Beim Zeigen dreht sie sich um eine Viertelwende und steht danach wieder wie zuvor, wie eine Nadel, die ihre Richtung findet. */
.windrose{display:block;width:1.2em;height:1.2em;transition:transform 900ms cubic-bezier(.2,.7,.2,1)}
:is(.inquiry-link,.apply-link):is(:hover,:focus-visible) .windrose{transform:rotate(90deg)}
@media(prefers-reduced-motion:reduce){.windrose{transition:none}}
:is(.inquiry-link,.apply-link):focus-visible{outline:1px solid #cdb783;outline-offset:6px}
/* Derselbe Knopf in der Kopfleiste, kleiner und mit versetztem Schimmer. */
.apply-link{min-height:46px;gap:20px;padding:0 18px 0 22px;font-size:11px;box-shadow:0 0 0 4px #b6a27a12,0 14px 30px -20px #000}.apply-link:after{animation-delay:4.2s}.apply-link span{font-size:17px}
@media(max-width:700px){.apply-link{min-height:40px;gap:10px;padding:0 12px 0 14px;font-size:10px;letter-spacing:.12em}.apply-link span{font-size:15px}}
.inquiry-note a{color:inherit;text-decoration:underline;text-decoration-color:#b6a27a88;text-underline-offset:3px}
html.letter-open{overflow:hidden;scrollbar-gutter:stable}
.letter{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#1c1716;text-align:left;overflow:hidden}
.letter[open]{display:grid;place-items:center}.letter::backdrop{background:transparent}
.letter-veil{position:absolute;inset:0;background:#0b120eeb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity 600ms cubic-bezier(.3,.6,.2,1)}
.letter[data-phase="open"] .letter-veil{opacity:1}.letter[data-phase="leave"] .letter-veil{transition-duration:520ms;transition-delay:120ms}
/* Der Brief ist ein Bogen handgeschöpftes Büttenpapier (Foto, freigestellt). Hochformat wie ein echter Briefbogen, damit das Papier unverzerrt bleibt. */
.letter-sheet{position:relative;display:grid;width:min(660px,calc((100svh - 32px) * .8),calc(100vw - 32px));max-height:calc(100svh - 32px);background:url(assets/papier/papier-bogen.webp?v=2) center/100% 100% no-repeat;clip-path:inset(0 round 2px)}
/* Wie ein gefalteter Brief: der Knopf wird zum Band über die ganze Breite, dann öffnet sich das Band. */
/* Schriftrolle (Feedback 28.9.): rolle.js zeichnet die Rolle in 3D und gibt das Blatt über clip-path frei. */
.letter[data-phase="rolle"] .letter-sheet{clip-path:inset(0 0 100% 0)}
.letter[data-phase="rolle"] .letter-veil{opacity:1}
.letter[data-phase="rolle"] :is(.letter-body,.letter-thanks){opacity:1;transform:none;transition:none}
.letter-roll{position:fixed;z-index:3;pointer-events:none;transition:opacity 320ms}
.letter[data-phase="leave"] :is(.letter-roll,.letter-sheet){opacity:0;transition:opacity 320ms}
.letter-body,.letter-thanks{opacity:0;transform:translateY(14px);transition:opacity 520ms 520ms,transform 800ms 520ms cubic-bezier(.2,.7,.2,1)}
.letter[data-phase="open"] :is(.letter-body,.letter-thanks){opacity:1;transform:none}
.letter[data-phase="leave"] :is(.letter-body,.letter-thanks),.letter-body.is-leaving{opacity:0;transform:translateY(-8px);transition:opacity 220ms,transform 260ms}
.letter-close{position:absolute;top:22px;right:22px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border:1px solid #72613e66;border-radius:50%;background:#f3e8d4cc;color:#1c1716;cursor:pointer;opacity:0;transition:opacity 400ms 700ms,background-color 180ms}.letter-close span{font:200 28px/1 Archivo,sans-serif}
.letter[data-phase="open"] .letter-close{opacity:1}
.letter-body{overflow:auto;overscroll-behavior:contain;max-height:calc(100svh - 32px);padding:52px 54px 44px;scrollbar-color:#b6a27a transparent}
/* Mit skaliertem Inhalt (anfrage.js, einpassen) bleibt die Höhe des Bogens gleich: zoom verkleinert auch diese Angabe */
@media(min-width:701px){.letter-body{max-height:calc((100svh - 32px) / var(--brief-zoom,1))}}
.letter-head{padding-bottom:26px;border-bottom:1px solid #b6a27a70}
.letter-brand{display:block;height:30px;width:auto;margin:0 0 26px}
.letter-head h2{font:350 44px/1.05 'Luxus Serif',Georgia,serif;letter-spacing:-.04em;margin:0;outline:none}
.letter-intro{font:400 14px/1.65 Archivo,sans-serif;color:#5f5646;margin:12px 0 0;max-width:34em}
.letter-group{border:0;margin:0;padding:26px 0 4px;min-width:0}
.letter-group legend{float:left;width:100%;padding:0;margin:0 0 16px;font:500 10px/1.4 Archivo,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#72613e}
.letter-group legend+*{clear:both}.letter-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px 30px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}.field-wide{grid-column:1/-1}.field[hidden]{display:none}
.field-label,.group-hint{font:400 12px/1.35 Archivo,sans-serif;color:#5f5646}.group-hint{margin:0 0 10px}
.field-label em,.group-hint em{font-style:normal;color:#9d8c69;margin-left:6px}
.field input,.field textarea{width:100%;border:0;border-bottom:1px solid #72613e5c;border-radius:0;background:transparent;padding:8px 0 10px;font:400 16px/1.45 Archivo,sans-serif;color:#1c1716;outline:none;transition:border-color 200ms,background-color 200ms}
.field input::placeholder,.field textarea::placeholder{color:#a3977f}
.field textarea{min-height:124px;resize:vertical;border:1px solid #72613e5c;padding:12px 14px;background:#fffaf02e;line-height:1.6}
.field input:focus,.field textarea:focus{border-color:#1e2e25}.field textarea:focus{background:#fffaf066}
.field-idea{margin-top:22px}.field-source{margin-top:26px}.field select:has(option[value='']:checked){color:#a3977f}.field-other{margin-top:14px}
.phone-row{display:grid;grid-template-columns:minmax(118px,.85fr) 2fr;gap:14px}
.field select{-webkit-appearance:none;appearance:none;width:100%;min-width:0;border:0;border-bottom:1px solid #72613e5c;border-radius:0;padding:8px 20px 10px 0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2372613e' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 2px center/10px 6px;font:400 16px/1.45 Archivo,sans-serif;color:#1c1716;outline:none;cursor:pointer;transition:border-color 200ms}
.field select:invalid{color:#a3977f}.field select:focus{border-color:#1e2e25}.field select option{color:#1c1716}
.consent a{color:inherit;text-decoration:underline;text-decoration-color:#72613e88;text-underline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:block;cursor:pointer}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip span{display:flex;align-items:center;min-height:40px;padding:0 15px;border:1px solid #72613e5c;background:#fffaf033;font:400 13px/1.2 Archivo,sans-serif;color:#3b342b;transition:background-color 180ms,border-color 180ms,color 180ms}
.chip input:checked+span{background:#1e2e25;border-color:#1e2e25;color:#f1e9dc}
.chip input:focus-visible+span{outline:2px solid #1e2e25;outline-offset:2px}
.consent{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;margin:28px 0 0;font:400 12px/1.55 Archivo,sans-serif;color:#5f5646;cursor:pointer}
.consent input{width:18px;height:18px;margin:1px 0 0;accent-color:#1e2e25}.consent .field-error{grid-column:2}
.field-error{margin:3px 0 0;font:400 12px/1.4 Archivo,sans-serif;color:#8a2b2b}
.field [aria-invalid="true"]{border-color:#8a2b2b}.letter-group.is-invalid .chip span{border-color:#8a2b2b88}
.letter-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.letter-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:26px;padding-top:22px;border-top:1px solid #b6a27a70}
.letter-status{margin:0;font:400 12px/1.5 Archivo,sans-serif;color:#8a2b2b}
.letter-send{flex:none;display:flex;align-items:center;gap:30px;min-height:54px;padding:0 24px 0 28px;border:0;background:#1e2e25;color:#f1e9dc;font:500 12px/1 Archivo,sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background-color 220ms}
.letter-send span{font-size:19px;color:var(--gold);transition:transform 240ms}.letter-send[disabled]{cursor:progress;opacity:.8}
.letter-thanks{display:grid;justify-items:center;align-content:center;min-height:min(520px,calc(100svh - 32px));padding:60px 40px;text-align:center}.letter-thanks[hidden]{display:none}
.letter-seal{position:relative;width:150px;height:150px;margin-bottom:26px}
.letter-wax{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(.84) rotate(-10deg);transition:opacity 240ms 470ms,transform 520ms 470ms cubic-bezier(.2,.8,.25,1.15)}
.letter-stamp{position:absolute;left:50%;top:50%;width:136px;height:136px;margin:-68px 0 0 -68px;opacity:0}
.letter[data-sealed] .letter-wax{opacity:1;transform:none}
.letter[data-sealed] .letter-stamp{animation:letter-stamp 1150ms cubic-bezier(.3,.7,.2,1) forwards}
@keyframes letter-stamp{0%{opacity:0;transform:translateY(-100px) scale(1.25)}36%{opacity:1;transform:translateY(0) scale(1)}46%{transform:translateY(0) scale(.93)}60%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-120px) scale(1.12)}}
.letter-thanks h2{font:350 42px/1.1 'Luxus Serif',Georgia,serif;letter-spacing:-.035em;margin:0;outline:none}
.letter-thanks p{max-width:26em;margin:14px 0 0;font:400 14px/1.65 Archivo,sans-serif;color:#5f5646}
.letter-thanks :is(h2,p,.letter-done){animation:letter-rise 800ms 780ms cubic-bezier(.2,.7,.2,1) both}
@keyframes letter-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.letter-done{margin-top:30px;min-height:48px;padding:0 24px;border:1px solid #72613e66;background:transparent;font:400 13px/1 Archivo,sans-serif;color:#1c1716;cursor:pointer;transition:background-color 180ms}
.letter button:focus-visible{outline:2px solid #1e2e25;outline-offset:3px}
@media(hover:hover) and (pointer:fine){.chip:hover span{border-color:#72613e}.letter-send:hover{background:#0f1813}.letter-send:hover span{transform:translate(3px,-3px)}.letter-close:hover,.letter-done:hover{background:#e9e1d2}}
@media(max-width:700px){
 .letter-sheet{width:100%;height:100%;max-height:none;clip-path:inset(0);background-size:cover}.letter-body{max-height:100svh;padding:26px 22px 32px}
 .letter-close{top:10px;right:10px}.letter-brand{margin-bottom:22px}.letter-head{padding-right:40px}.letter-head h2{font-size:34px}.letter-intro{font-size:13px}
 .letter-fields{grid-template-columns:1fr}.chip span{min-height:38px;padding:0 12px;font-size:12px}
 .letter-actions{flex-direction:column-reverse;align-items:stretch}.letter-send{justify-content:space-between}
 .letter-thanks{min-height:100svh;padding:40px 24px}.letter-thanks h2{font-size:34px}
}
@media(prefers-reduced-motion:reduce){:is(.inquiry-link,.apply-link):after{display:none}.letter *,.letter{transition:none!important;animation:none!important}.letter .letter-sheet{clip-path:none!important}.letter[data-sealed] .letter-stamp{opacity:0}}
/* Fußzeile: der Blick über die Berge, die Werte der großen Häuser, dann alles Nötige in einem ruhigen, präzisen Raster. */
.site-footer{position:relative;background:var(--deep);color:var(--cream);border-top:1px solid var(--gold);overflow:clip}
.footer-panorama{position:relative;height:clamp(280px,48svh,500px);overflow:hidden}
.footer-panorama img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.footer-panorama:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0f181300 30%,#0f1813b3 72%,#0f1813 100%)}
.footer-inner{position:relative;max-width:1440px;margin:-170px auto 0;padding:0 var(--gutter) 30px}
.footer-statement{margin:0;max-width:15em;font:350 clamp(36px,3.7vw,58px)/1.06 'Luxus Serif',Georgia,serif;letter-spacing:-.045em;text-shadow:0 2px 30px #0f181399}
.footer-values{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 30px;list-style:none;margin:56px 0 0;padding:17px 0;border-top:1px solid #b6a27a55;border-bottom:1px solid #b6a27a55;font:500 11px/1 Archivo,sans-serif;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.footer-values li{display:flex;align-items:center;gap:30px}.footer-values li+li:before{content:'';width:4px;height:4px;border-radius:50%;background:#b6a27a88}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1.25fr .8fr;gap:40px;padding:44px 0 40px}
.footer-logo{display:block;width:150px;height:auto}
.footer-claim{margin:14px 0 0;max-width:17em;font:italic 400 18px/1.45 'Luxus Serif',Georgia,serif;color:#d8cdb8}
.footer-title{margin:0 0 14px;font:500 10px/1.4 Archivo,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.footer-col a,.footer-ratgeber a{font:400 13px/1.5 Archivo,sans-serif;color:var(--cream);text-decoration:none;background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:background-size 380ms cubic-bezier(.2,.7,.2,1),color 200ms}
.footer-col a span{color:var(--gold)}
.footer-col a:focus-visible,.footer-ratgeber a:focus-visible,.footer-ratgeber summary:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.footer-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding-top:20px;border-top:1px solid #b6a27a33;font:400 11px/1.5 Archivo,sans-serif;color:#a89c82}
.footer-bottom p{margin:0}.footer-bottom p:last-child{text-align:right}
.footer-signature{position:relative;display:grid;place-items:center;width:64px;height:64px}.footer-signature img{width:56px;height:56px;transform:rotate(8deg);filter:drop-shadow(0 4px 6px #0006)}
.footer-quill-anchor{position:absolute;left:-6px;top:52px;width:1px;height:1px}
/* Ratgeber ganz unten und zugeklappt (2.10.2026, Ilja): Besucher bleiben auf der Seite, Google findet die Links trotzdem.
   Die Liste füllt ratgeber_seiten.py zwischen den Marken im Footer der Startseite. */
.footer-ratgeber{border-top:1px solid #b6a27a33}
.footer-ratgeber summary{display:flex;align-items:center;gap:14px;padding:16px 0;cursor:pointer;list-style:none;font:500 10px/1.4 Archivo,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.footer-ratgeber summary::-webkit-details-marker{display:none}
.footer-ratgeber summary i{position:relative;width:9px;height:9px}
.footer-ratgeber summary i:before,.footer-ratgeber summary i:after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--gold);transition:transform 320ms cubic-bezier(.2,.7,.2,1)}
.footer-ratgeber summary i:after{transform:rotate(90deg)}.footer-ratgeber[open] summary i:after{transform:rotate(0)}
.footer-ratgeber ul{display:flex;flex-wrap:wrap;gap:10px 48px;margin:0;padding:0 0 22px;list-style:none}
@media(hover:hover) and (pointer:fine){.footer-col a:hover,.footer-ratgeber a:hover{background-size:100% 1px}}
@media(max-width:700px){
 .footer-panorama{height:220px}.footer-panorama img{object-position:64% 45%}
 .footer-inner{margin-top:-120px;padding:0 22px 26px}.footer-statement{font-size:clamp(30px,8.6vw,36px)}
 .footer-values{justify-content:flex-start;gap:12px 14px;margin-top:34px;font-size:10px;letter-spacing:.2em}.footer-values li{gap:14px}
 .footer-grid{grid-template-columns:1fr 1fr;gap:30px 18px;padding:32px 0 30px}.footer-brand,.footer-contact{grid-column:1/-1}.footer-contact{order:1}.footer-grid nav{order:2}.footer-grid>.footer-col:last-child{order:3}.footer-claim{font-size:16px}
 .footer-bottom{grid-template-columns:1fr auto;row-gap:6px}.footer-bottom p:first-child{grid-column:1;grid-row:1}.footer-bottom p:last-child{grid-column:1;grid-row:2;text-align:left}.footer-signature{grid-column:2;grid-row:1/3}
}
/* Menü für schmale Bildschirme: volle Fläche, großes Logo, vier Wege und die Anfrage. */
html.menu-open{overflow:hidden}
.site-menu{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#0f1813;color:var(--cream);overflow:auto}
.site-menu::backdrop{background:transparent}
.site-menu[open]{display:block;animation:menu-in 420ms cubic-bezier(.2,.7,.2,1)}
@keyframes menu-in{from{opacity:0}to{opacity:1}}
.site-menu-inner{position:relative;display:grid;align-content:center;justify-items:center;gap:42px;min-height:100%;padding:70px 24px 50px}
.site-menu-logo{width:150px;height:auto}
.site-menu-close{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:44px;height:44px;border:1px solid #b6a27a66;border-radius:50%;background:transparent;color:var(--cream);cursor:pointer}.site-menu-close span{font:200 28px/1 Archivo,sans-serif}
.site-menu-nav{display:grid;gap:16px}
.site-menu-nav a{display:flex;align-items:baseline;justify-content:center;gap:14px;padding:4px 0;font:italic 400 30px/1.2 'Luxus Serif',Georgia,serif;color:var(--cream);text-decoration:none}
.site-menu-nav a{justify-content:flex-start}.site-menu-nav span{min-width:30px;text-align:right;font-family:Archivo,sans-serif;font-variation-settings:'wdth' 125,'wght' 500;font-size:10px;letter-spacing:.14em;font-style:normal;color:var(--gold)}
.site-menu .site-menu-cta{min-height:56px;padding:0 26px 0 30px;font-size:12px;gap:28px}
@media(prefers-reduced-motion:reduce){.site-menu[open]{animation:none}}

/* Brief in einer einzigen, gut lesbaren Kanzleikursive (Feedback 29.9.: Wahl 2, Fondamento Italic, Google Fonts, OFL, lokal eingebunden).
   Überschrift, Text, Feldnamen, Eingaben, Auswahl, Einwilligung und Knopf stehen in derselben Schrift. */
@font-face{font-family:'Luxus Handschrift';src:url('fonts/fondamento-italic.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
.letter-sheet{--brief:'Luxus Handschrift','Luxus Serif',Georgia,serif}
.letter-head h2,.letter-thanks h2{font:400 50px/1.1 var(--brief);letter-spacing:0}
.letter-intro,.letter-thanks p{font:400 19px/1.55 var(--brief);color:#4d4436}
.letter-group legend{font:400 24px/1.25 var(--brief);letter-spacing:0;text-transform:none;color:#72613e;margin-bottom:12px}
.field-label,.group-hint{font:400 18px/1.35 var(--brief);color:#2a241c}
.field-label em,.group-hint em{color:#8a7a5a}
.field input,.field textarea,.field select,.chip span,.consent,.field-error,.letter-status{font-family:var(--brief)}
.field input,.field textarea,.field select{font-size:18px}.chip span{font-size:16.5px}.consent{font-size:15px;line-height:1.5}.field-error{font-size:15px}
.letter-send{font:400 19px/1 var(--brief);letter-spacing:.01em;text-transform:none}
@media(max-width:700px){.letter-head h2,.letter-thanks h2{font-size:40px}.letter-intro,.letter-thanks p{font-size:18px}.letter-group legend{font-size:22px}.field-label,.group-hint{font-size:17px}}
/* Im offenen Brief führt eine kleine Feder als Mauszeiger, Spitze nach Nordwesten (Ilja 29.9.). In Textfeldern bleibt der Schreibstrich. */
.letter,.letter :is(button,label,a,select,.chip span){cursor:url(assets/feder-zeiger.png) 0 0,auto;cursor:image-set(url(assets/feder-zeiger.png) 1x,url(assets/feder-zeiger@2x.png) 2x) 0 0,auto}
.letter :is(input:not([type="checkbox"],[type="radio"]),textarea){cursor:text}
/* FAQ als neunte Sektion (Ilja 29.9.): dunkel wie die Anfrage, links der antike Kompass, unten weicher Übergang ins helle Alpenpanorama des Footers. */
/* Sieben Fragen passen ins Laptop-Fenster (29.9.): Zeilenabstand und Kompass richten sich nach der Fensterhöhe. */
.faq{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,110px);align-items:start;padding:clamp(44px,6vh,110px) var(--gutter) clamp(64px,9vh,140px);background:linear-gradient(180deg,#0f1813 0%,#0f1813 72%,#1d2a22 100%);color:var(--cream);border-top:1px solid #b6a27a55;overflow:clip}
/* Kompass steht still, auch wenn eine Antwort aufgeht (Ilja 29.9.): Spalten oben ausgerichtet statt mittig. Die Nadel ist eine eigene Ebene (kompass.js). */
.faq-kompass{position:relative;display:grid;place-items:center}
.kompass-buehne{position:relative;width:fit-content;max-width:min(100%,560px)}
.kompass-grund{display:block;width:auto;height:auto;max-width:100%;max-height:clamp(300px,calc(100svh - 230px),660px);filter:drop-shadow(0 40px 60px #000a)}
.kompass-schatten,.kompass-kappe{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.kompass-schatten{filter:drop-shadow(3px 7px 3px #1a0f0573)}
.kompass-nadel{display:block;width:100%;height:100%;transform-origin:61.35% 66.98%;will-change:transform}
.faq-kicker{margin:0 0 14px;font:500 11px/1.4 Archivo,sans-serif;font-variation-settings:'wdth' 125,'wght' 450;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.faq h2{font:350 calc(clamp(44px,4.3vw,66px) * var(--dichte,1))/1.04 'Luxus Serif',Georgia,serif;letter-spacing:-.045em;margin:0 0 clamp(18px,3vh,34px)}
.faq-list{border-top:1px solid #b6a27a44}
.faq-item{border-bottom:1px solid #b6a27a44}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(9px,1.55vh,20px) 2px;cursor:pointer;list-style:none;font:400 clamp(19px,1.45vw,23px)/1.3 'Luxus Serif',Georgia,serif;color:var(--cream);transition:color 220ms}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary i{position:relative;flex:none;width:14px;height:14px}
.faq-item summary i:before,.faq-item summary i:after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--gold);transition:transform 320ms cubic-bezier(.2,.7,.2,1)}
.faq-item summary i:after{transform:rotate(90deg)}.faq-item[open] summary i:after{transform:rotate(0)}
.faq-item summary:hover,.faq-item[open] summary{color:#f3e2b5}
.faq-item summary:focus-visible{outline:1px solid #b6a27a8c;outline-offset:6px}
.faq-item p{margin:0;padding:0 40px 22px 2px;max-width:640px;font:400 15px/1.7 Archivo,sans-serif;color:#d9ccb3}
.faq:after{content:'';position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg,#1d2a2200,#2b3a3066);pointer-events:none}
@media(max-width:900px){.faq{grid-template-columns:1fr;gap:30px}.kompass-buehne{width:min(70%,380px)}.kompass-grund{width:100%;max-height:none}}
/* Handy: Kompass klein rechts neben der Überschrift, die Fragen beginnen gleich darunter (29.9.) */
@media(max-width:700px){.faq-kompass{position:absolute;top:62px;right:8px;width:132px;z-index:1}.kompass-buehne{width:100%}.faq-kicker,.faq h2{max-width:calc(100% - 118px)}}
@media(max-width:700px){.faq{padding:86px 22px 110px}.faq h2{font-size:clamp(38px,10.5vw,48px);margin-bottom:24px}.faq-item summary{font-size:18px;padding:18px 0}.faq-item p{padding-right:10px;font-size:14px}}
/* Nach dem Absenden (rolle.js): Das Blatt ist jetzt 3D und wird zum versiegelten Umschlag, der Dank steht darunter auf dem dunklen Grund. */
.letter-sheet.is-folding{background:none}
.letter[data-sealed="umschlag"] .letter-seal{display:none}
.letter[data-sealed="umschlag"] .letter-thanks{align-content:end;padding-bottom:clamp(36px,7vh,72px)}
.letter[data-sealed="umschlag"] .letter-thanks :is(h2,p){color:#f3e8d4}
.letter[data-sealed="umschlag"] .letter-done{border-color:#cdb78388;color:#f3e8d4}
@media(hover:hover) and (pointer:fine){.letter[data-sealed="umschlag"] .letter-done:hover{background:#b6a27a22}}
.site-menu-lang{padding:12px 4px;font:500 11px/1 Archivo,sans-serif;font-variation-settings:'wdth' 125,'wght' 500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);text-decoration:none;border-bottom:1px solid #b6a27a55}

/* Premium-Sichtbarkeit (29.9., Ilja): Spiegel der Auswahl, Text links, Weltkarte mit Lupe rechts. Kein Zusatz, fester Teil jedes Projekts. */
.visibility{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100svh;background:var(--deep);color:var(--cream);border-top:1px solid var(--gold);outline:none;overflow:clip}
.visibility-copy{position:relative;align-self:center;justify-self:end;width:100%;max-width:760px;padding:104px clamp(40px,5.5vw,96px) 46px var(--gutter)}
.visibility-eyebrow{display:flex;align-items:center;gap:16px;margin:0 0 22px;font:500 10px/1.5 Archivo,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.visibility-eyebrow:before{content:'';width:44px;height:1px;background:var(--gold)}
.visibility h2{font:350 clamp(44px,4.3vw,66px)/1.04 'Luxus Serif',Georgia,serif;letter-spacing:-.05em;margin:0}
.visibility h2 span{color:var(--gold)}
.visibility-lead{font:400 14px/1.7 Archivo,sans-serif;color:#d8cdb8;margin:22px 0 0;max-width:37em;text-wrap:pretty}
.visibility-list{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid #b6a27a42}
.visibility-list li{position:relative;padding:10px 0 10px 24px;border-bottom:1px solid #b6a27a42;font:400 13px/1.5 Archivo,sans-serif;color:#b9ae97}
.visibility-list li:before{content:'';position:absolute;left:2px;top:17px;width:6px;height:6px;border:1px solid var(--gold);transform:rotate(45deg)}
.visibility-list strong{font-weight:500;color:var(--cream)}
.visibility-close{font:italic 400 19px/1.45 'Luxus Serif',Georgia,serif;color:var(--gold);margin:22px 0 0}
.visibility-quill-anchor{position:absolute;right:clamp(4px,1.2vw,22px);bottom:calc(46px * var(--dichte,1) + 8px);width:1px;height:1px}
.visibility-image{position:relative;overflow:hidden}
.visibility-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 42%}
.visibility-image:after{content:'';position:absolute;inset:0;background:linear-gradient(270deg,#0f181300 58%,#0f1813 100%),linear-gradient(0deg,#0f181366,#0f181300 30%)}
@media(min-width:701px){.visibility h2{font-size:calc(clamp(44px,4.3vw,66px) * var(--dichte,1))}.visibility-eyebrow{margin-bottom:calc(22px * var(--dichte,1))}.visibility-lead{margin-top:calc(22px * var(--dichte,1));font-size:max(13px,calc(14px * var(--dichte,1)))}.visibility-list{margin-top:calc(24px * var(--dichte,1))}.visibility-list li{padding-top:calc(10px * var(--dichte,1) * var(--dichte,1));padding-bottom:calc(10px * var(--dichte,1) * var(--dichte,1))}.visibility-close{font-size:calc(19px * var(--dichte,1));margin-top:calc(22px * var(--dichte,1))}.visibility-copy{padding-top:max(96px,calc(104px * var(--dichte,1)));padding-bottom:calc(46px * var(--dichte,1))}}
@media(max-width:700px){
 .visibility{grid-template-columns:1fr;min-height:0}
 .visibility-image{order:-1;height:34svh;min-height:230px}.visibility-image:after{background:linear-gradient(0deg,#0f1813 0%,#0f181300 45%)}
 .visibility-copy{padding:10px 44px 76px 22px;max-width:none;justify-self:stretch}.visibility h2{font-size:clamp(40px,11.5vw,52px)}.visibility-lead{font-size:13px}.visibility-close{font-size:17px;padding-right:34px}.visibility-quill-anchor{position:static;display:inline-block;margin-left:14px}
 .visibility-image img{object-position:70% 44%}
}