/* Apartments Katarina, Konzeptdemo von Kunden KI. Eigene Token der Demo, 8-px-Skala.
   Gang 26 (01.10.2026, R5): kein Text unter 15 px (.9375rem) bei Gewicht unter 600 und jede Trefferfläche mindestens 44 px,
   wie auf jeder Seite des Auftritts; Schriften, Farben und Skala der Demowelt bleiben eigen. */
@font-face{font-family:"Instrument Serif";src:url("fonts/instrument-serif-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("fonts/instrument-serif-latin-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("fonts/source-sans-3-latin-variable.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("fonts/source-sans-3-latin-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
:root{
  --papier:#F7F3EC;--papier-2:#EFE8DC;--stein:#D9D0C2;--stein-2:#6B6459;--sand:#C8B08E;
  --meer:#1E5A6E;--meer-2:#164754;--meer-hell:#E3EDF0;--messing:#A98A55;--tinte:#22302F;--tinte-2:#4B5654;
  --display:"Instrument Serif",Georgia,"Times New Roman",serif;--text:"Source Sans 3","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;
  --radius:4px;--breite:1200px;--seite:clamp(16px,5vw,48px);--fokus:3px solid var(--meer);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--text);font-size:17px;line-height:1.6;font-variation-settings:"wght" 400}
@media(min-width:900px){body{font-size:18px}}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.1;letter-spacing:-.01em;margin:0 0 var(--s2);text-wrap:balance}
h1{font-size:clamp(2.25rem,5.5vw,4.25rem)}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem)}
h3{font-size:clamp(1.3rem,2vw,1.6rem)}
p,ul,ol,dl{margin:0 0 var(--s2)}
p,li,dd,dt,blockquote,figcaption,label,td,th{max-width:68ch}
a{color:var(--meer);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--meer-2)}
:focus-visible{outline:var(--fokus);outline-offset:3px;border-radius:2px}
img{display:block;max-width:100%;height:auto}
strong{font-variation-settings:"wght" 650;font-weight:650}
small,.klein{font-size:.9375rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--s2);top:-100px;background:var(--meer);color:#fff;padding:var(--s1) var(--s2);border-radius:var(--radius);z-index:50;display:inline-flex;align-items:center;min-height:44px}
.skip:focus{top:var(--s2)}
.rahmen{width:min(100% - 2*var(--seite),var(--breite));margin-inline:auto}
.kicker{font-family:var(--text);font-size:.9375rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stein-2);font-variation-settings:"wght" 600;margin:0 0 var(--s1)}
.lead{font-size:1.15rem;color:var(--tinte-2)}
.hinweis{background:var(--papier-2);border-left:3px solid var(--messing);padding:var(--s2);border-radius:0 var(--radius) var(--radius) 0;font-size:.95rem}
.hinweis p:last-child{margin:0}
/* Demo-Balken */
.demo{background:var(--tinte);color:var(--papier);font-size:.9375rem;letter-spacing:.03em;padding:var(--s1) var(--seite);display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;align-items:center}
.demo a{color:var(--papier);display:inline-flex;align-items:center;min-height:44px;padding:0;text-underline-offset:.2em}
/* Kopf */
.kopf{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--papier) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--stein)}
.kopf .rahmen{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:72px}
.marke{display:flex;flex-direction:column;text-decoration:none;color:var(--tinte);padding:var(--s1) 0}
.marke b{font-family:var(--display);font-size:1.5rem;font-weight:500;letter-spacing:.08em;line-height:1.1}
.marke span{font-size:.9375rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stein-2)}
.nav{display:none}
.nav ul{display:flex;gap:var(--s3);list-style:none;margin:0;padding:0}
.nav a{display:inline-block;padding:12px 2px;text-decoration:none;color:var(--tinte);border-bottom:2px solid transparent;font-variation-settings:"wght" 500}
.nav a:hover{border-color:var(--sand)}
.nav a[aria-current="page"]{border-color:var(--meer);color:var(--meer-2)}
@media(min-width:960px){.nav{display:block}}
.menue{min-height:44px;min-width:44px;padding:var(--s1) var(--s2);border:1px solid var(--stein);background:transparent;border-radius:var(--radius);font:inherit;color:var(--tinte);cursor:pointer;display:inline-flex;align-items:center;gap:var(--s1)}
.menue svg{width:20px;height:20px}
@media(min-width:960px){.kopf .menue{display:none}}
dialog.mobil{border:0;padding:0;margin:0;max-width:100vw;width:100vw;height:100dvh;max-height:100dvh;background:var(--papier);color:var(--tinte)}
dialog.mobil::backdrop{background:rgba(34,48,47,.5)}
.mobil-kopf{display:flex;justify-content:space-between;align-items:center;padding:var(--s2) var(--seite);border-bottom:1px solid var(--stein)}
.mobil ul{list-style:none;margin:0;padding:var(--s2) var(--seite)}
.mobil li a{display:block;padding:var(--s2) 0;font-family:var(--display);font-size:1.9rem;text-decoration:none;color:var(--tinte);border-bottom:1px solid var(--stein)}
.mobil li a[aria-current="page"]{color:var(--meer)}
.mobil-fuss{padding:var(--s2) var(--seite)}
/* Knoepfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);min-height:48px;padding:12px 24px;border-radius:var(--radius);background:var(--meer);color:#fff;text-decoration:none;font:inherit;font-variation-settings:"wght" 600;border:1px solid var(--meer);cursor:pointer;line-height:1.2}
.btn:hover{background:var(--meer-2);color:#fff}
.btn-2{background:transparent;color:var(--meer-2);border-color:var(--meer)}
.btn-2:hover{background:var(--meer-hell)}
.kopf .kopf-aktion{display:none}
@media(min-width:960px){.kopf .kopf-aktion{display:inline-flex}}
.btn-reihe{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
/* Abschnitte */
.abschnitt{padding-block:var(--s6)}
@media(min-width:900px){.abschnitt{padding-block:var(--s7)}}
.abschnitt-kopf{max-width:70ch;margin-bottom:var(--s4)}
.abschnitt-kopf h2{margin-bottom:var(--s2)}
.ton{background:var(--papier-2)}
.linie{border:0;border-top:1px solid var(--messing);margin:0;opacity:.6}
/* Buehne */
.buehne{padding-block:var(--s4) var(--s5)}
.buehne-text{max-width:60ch}
.buehne-bild{margin-top:var(--s4);aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius)}
.buehne-bild img{width:100%;height:100%;object-fit:cover}
@media(min-width:900px){.buehne .rahmen{display:grid;grid-template-columns:5fr 7fr;gap:var(--s5);align-items:center}.buehne-bild{margin:0;aspect-ratio:4/3}}
/* Schnellstart */
.schnell{background:var(--meer-hell);border:1px solid var(--stein);border-radius:var(--radius);padding:var(--s3)}
.schnell form{display:grid;gap:var(--s2)}
@media(min-width:720px){.schnell form{grid-template-columns:1fr 1fr 1fr auto;align-items:end}}
/* Kacheln */
.kacheln{display:grid;gap:var(--s3)}
@media(min-width:720px){.kacheln{grid-template-columns:repeat(3,1fr)}}
.kachel{display:flex;flex-direction:column;background:var(--papier-2);border-radius:var(--radius);overflow:hidden;border:1px solid var(--stein)}
.kachel .bild{aspect-ratio:4/3;overflow:hidden}
.kachel .bild img{width:100%;height:100%;object-fit:cover}
.kachel-text{padding:var(--s3)}
.kachel h3{margin-bottom:var(--s1)}
.kachel p{margin-bottom:var(--s2)}
.kachel a.mehr{font-variation-settings:"wght" 600}
a.mehr{display:inline-flex;align-items:center;min-height:44px}
/* Bildbahn */
.bahn{padding-block:0 var(--s6)}
.bahn-bild{margin:0}
.bahn-bild picture{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius)}
.bahn-bild img{width:100%;height:100%;object-fit:cover}
.bahn-bild figcaption{font-size:.9375rem;color:var(--tinte-2);padding-top:var(--s1)}
/* Stimmen */
.stimmen{display:grid;gap:var(--s3)}
@media(min-width:720px){.stimmen{grid-template-columns:repeat(3,1fr)}}
.stimme{margin:0;padding:var(--s3);border-top:2px solid var(--messing);background:var(--papier)}
.stimme p{font-family:var(--display);font-size:1.2rem;line-height:1.35}
.stimme footer{font-size:.95rem;color:var(--tinte-2)}
/* Gastgeber */
.gastgeber{display:grid;gap:var(--s4);align-items:center}
@media(min-width:900px){.gastgeber{grid-template-columns:4fr 7fr}}
.portrait{aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius);max-width:420px}
.portrait img{width:100%;height:100%;object-fit:cover}
/* FAQ */
.faq details{border-top:1px solid var(--stein)}
.faq details:last-child{border-bottom:1px solid var(--stein)}
.faq summary{cursor:pointer;padding:var(--s2) 0;font-family:var(--display);font-size:1.2rem;list-style:none;display:flex;justify-content:space-between;gap:var(--s2);min-height:48px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--text);color:var(--meer);font-size:1.5rem;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding-bottom:var(--s2)}
/* Zimmer */
.zimmer{display:grid;gap:var(--s5)}
.zimmerkarte{display:grid;gap:var(--s3);background:var(--papier-2);border:1px solid var(--stein);border-radius:var(--radius);overflow:hidden}
@media(min-width:900px){.zimmerkarte{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.zimmerkarte:nth-child(even) .zk-bild{order:2}.zimmerkarte .zk-bild{aspect-ratio:auto;position:relative;min-height:420px;min-width:0}.zimmerkarte .zk-bild picture{position:absolute;inset:0}.zimmerkarte .zk-bild img{position:absolute;inset:0}}
.zk-bild{aspect-ratio:16/9;overflow:hidden}
.zk-bild img{width:100%;height:100%;object-fit:cover}
.zk-text{padding:var(--s3)}
@media(min-width:900px){.zk-text{padding:var(--s4) var(--s4) var(--s4) 0}.zimmerkarte:nth-child(even) .zk-text{padding:var(--s4) 0 var(--s4) var(--s4)}}
.fakten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s1) var(--s3);list-style:none;padding:0;margin:0 0 var(--s2);color:var(--tinte-2);font-size:.95rem}
.fakten li{display:flex;align-items:center;gap:6px}
.fakten svg{width:18px;height:18px;flex:none;stroke:var(--messing)}
.preis{font-family:var(--display);font-size:1.5rem;margin:var(--s2) 0 var(--s1)}
.preis small{font-family:var(--text);font-size:.9375rem;color:var(--tinte-2);font-variation-settings:"wght" 400}
.zk-text details{margin:var(--s2) 0}
.zk-text summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--meer);font-variation-settings:"wght" 600}
.zk-text details ul{columns:2;column-gap:var(--s3);padding-left:1.1em;margin-top:var(--s1)}
.galerie{display:grid;gap:var(--s2)}
@media(min-width:600px){.galerie{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.galerie{grid-template-columns:repeat(3,1fr)}}
.galerie figure{margin:0}
.galerie .bild{aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius)}
.galerie img{width:100%;height:100%;object-fit:cover}
.galerie figcaption{font-size:.9375rem;color:var(--tinte-2);padding-top:var(--s1)}
/* Ausstattung */
.raster{display:grid;gap:var(--s3);list-style:none;padding:0;margin:0}
@media(min-width:560px){.raster{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.raster{grid-template-columns:repeat(4,1fr)}}
.raster li{display:flex;gap:var(--s2);align-items:flex-start;padding:var(--s3);background:var(--papier);border:1px solid var(--stein);border-radius:var(--radius)}
.raster svg{width:32px;height:32px;flex:none;stroke:var(--meer);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.raster b{display:block;font-variation-settings:"wght" 600}
.raster span{color:var(--tinte-2);font-size:.95rem}
.paar{display:grid;gap:var(--s4);align-items:center}
.paar>*{min-width:0}
@media(min-width:900px){.paar{grid-template-columns:1fr 1fr}.paar.tausch .bild{order:2}}
.paar .bild{aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius)}
.paar .bild img{width:100%;height:100%;object-fit:cover}
.liste-zeit{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s1) var(--s3);margin:0}
.liste-zeit dt{font-variation-settings:"wght" 600}
.liste-zeit dd{margin:0;overflow-wrap:break-word;hyphens:auto}
/* Lage */
.karte{background:var(--papier-2);border:1px solid var(--stein);border-radius:var(--radius);overflow:hidden}
.karte svg{display:block;width:100%;height:auto}
.karte figcaption{padding:var(--s2) var(--s3);font-size:.9375rem;color:var(--tinte-2)}
table{border-collapse:collapse;width:100%;max-width:70ch;margin-bottom:var(--s3)}
th,td{text-align:left;padding:10px var(--s1);border-bottom:1px solid var(--stein);vertical-align:top}
th{font-variation-settings:"wght" 600;color:var(--tinte-2);font-size:.9rem;letter-spacing:.04em;text-transform:uppercase}
.drei{display:grid;gap:var(--s3)}
@media(min-width:800px){.drei{grid-template-columns:repeat(3,1fr)}}
.drei article{padding:var(--s3);background:var(--papier);border:1px solid var(--stein);border-radius:var(--radius)}
.drei h3{margin-bottom:var(--s1)}
/* Kontakt */
.kontakt{display:grid;gap:var(--s5)}
@media(min-width:960px){.kontakt{grid-template-columns:7fr 5fr}}
.formular{display:grid;gap:var(--s2)}
@media(min-width:720px){.formular{grid-template-columns:1fr 1fr}.formular .voll{grid-column:1/-1}}
.feld{display:flex;flex-direction:column;gap:6px}
.feld label,.feld .lab{font-variation-settings:"wght" 600;font-size:.95rem}
.feld input,.feld textarea,.feld select{width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--stein-2);border-radius:var(--radius);background:#fff;font:inherit;color:var(--tinte)}
.feld textarea{min-height:140px;resize:vertical}
.feld input:focus,.feld textarea:focus,.feld select:focus{outline:var(--fokus);outline-offset:2px;border-color:var(--meer)}
.check{display:flex;gap:var(--s2);align-items:flex-start}
.check input{width:24px;height:24px;margin:2px 0 0;flex:none;accent-color:var(--meer)}
.check label{max-width:60ch}
.status{margin:0}
.status[data-art="ok"]{background:var(--meer-hell);border-left-color:var(--meer)}
.kontaktdaten address{font-style:normal}
.kontaktdaten ul{list-style:none;padding:0}
.kontaktdaten li{margin-bottom:var(--s1)}
.kontaktdaten a{display:inline-flex;align-items:center;min-height:44px;padding:0}
/* Rechtliches */
.prosa h2{margin-top:var(--s5)}
/* Fuss */
.fuss{background:var(--tinte);color:var(--papier);padding-block:var(--s6) var(--s4);margin-top:var(--s6)}
.fuss a{color:var(--papier)}
.fuss-spalten{display:grid;gap:var(--s4)}
@media(min-width:720px){.fuss-spalten{grid-template-columns:2fr 1fr 1fr 1fr}}
.fuss h2{font-size:1rem;font-family:var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--sand);margin-bottom:var(--s2)}
.fuss ul{list-style:none;padding:0;margin:0}
.fuss li{margin-bottom:0}
.fuss li a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0;text-decoration:none}
.fuss li a:hover{text-decoration:underline}
.fuss address{font-style:normal;color:var(--stein)}
.fuss-zeile{border-top:1px solid rgba(247,243,236,.2);margin-top:var(--s5);padding-top:var(--s3);font-size:.9375rem;color:var(--stein);display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:space-between;align-items:center}
.fuss-zeile a{display:inline-flex;align-items:center;min-height:44px}
/* 404 */
.leer{display:grid;place-items:center;text-align:center;padding-block:var(--s4)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
@media(prefers-reduced-motion:no-preference){.btn,.nav a,.kachel{transition:background-color .15s ease,border-color .15s ease,color .15s ease}}