@charset "utf-8"; /* Schriften: variabel, latin und latin-ext getrennt, damit die meisten Besucher nur den kleinen Schnitt laden. Die optische Achse (opsz) wurde aus der Serife entfernt - halbiert die Datei ohne sichtbaren Unterschied. */ @font-face{font-family:"Source Serif";src:url(/schriften/source-serif-4-latin.woff2) format("woff2"); font-weight:200 900;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Source Serif";src:url(/schriften/source-serif-4-latin-ext.woff2) format("woff2"); font-weight:200 900;font-style:normal;font-display:swap; unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Source Sans";src:url(/schriften/source-sans-3-latin.woff2) format("woff2"); font-weight:200 900;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Source Sans";src:url(/schriften/source-sans-3-latin-ext.woff2) format("woff2"); font-weight:200 900;font-style:normal;font-display:swap; unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF} /* Farben von der Fassade abgenommen: brauner Riemenstein, goldene Schrift. */ :root{ --tinte:#2c2420; --grau:#6b5c53; --rost:#9a4226; --rost-dunkel:#7d3520; --gold:#b8894a; /* Aufgehellt fuer Schrift auf dem Hero-Foto: das gedeckte Markengold erreicht dort nur 3.3:1, gemessen am Bild. */ --gold-hell:#edcf9c; --papier:#faf6f0; --sand:#f0e8dd; --dunkel:#33261f; --dunkel-2:#432f26; --linie:rgba(44,36,32,.14); --linie-hell:rgba(250,246,240,.18); --serif:"Source Serif",Georgia,"Times New Roman",serif; --sans:"Source Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --breite:1180px; --eng:760px; --rand:clamp(1.15rem,4vw,2.5rem); --luft:clamp(3.5rem,7vw,6rem); --rund:10px; --schatten:0 1px 2px rgba(44,36,32,.05),0 6px 20px -8px rgba(44,36,32,.14); --schatten-tief:0 2px 4px rgba(44,36,32,.06),0 18px 40px -16px rgba(44,36,32,.28); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--papier);color:var(--tinte); font-family:var(--sans);font-size:clamp(1rem,.97rem + .18vw,1.09rem); line-height:1.65;font-weight:400; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img,picture,svg{max-width:100%} img{display:block;height:auto} [hidden]{display:none !important} /* Deutsche Komposita ("Datenschutzerklaerung") passen auf 320 px in keine Zeile und schoben die ganze Seite waagrecht heraus. Trennung erlauben - die Sprache steht am , darum greift hyphens:auto. */ h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.18; letter-spacing:-.008em;margin:0 0 .55em;color:var(--tinte); text-wrap:balance;overflow-wrap:break-word;hyphens:auto} h1{font-size:clamp(2.1rem,1.5rem + 2.8vw,3.5rem)} h2{font-size:clamp(1.65rem,1.3rem + 1.5vw,2.4rem)} h3{font-size:clamp(1.2rem,1.08rem + .5vw,1.45rem)} h4{font-size:1.05rem} p,li,dd,address{overflow-wrap:break-word} p{margin:0 0 1.1em;text-wrap:pretty} p:last-child{margin-bottom:0} a{color:var(--rost);text-underline-offset:.18em; text-decoration-thickness:from-font;transition:color .18s ease} a:hover{color:var(--rost-dunkel)} :focus-visible{outline:3px solid var(--rost);outline-offset:3px;border-radius:3px} .huelle{width:100%;max-width:var(--breite);margin-inline:auto; padding-inline:var(--rand)} .eng{max-width:var(--eng);margin-inline:auto} .sprung{position:absolute;left:-9999px;top:0;z-index:200;background:var(--rost); color:#fff;padding:.7rem 1.1rem;border-radius:0 0 var(--rund) 0;font-weight:600} .sprung:focus{left:0;color:#fff} /* --------------------------------------------------------------- Bildmarke */ .marke{display:inline-flex;align-items:center;gap:.6rem;color:var(--tinte); text-decoration:none} .signet{width:1.45rem;height:1.45rem;flex:none;color:var(--rost)} .marke__text{display:flex;flex-direction:column;line-height:1.1} .marke__haupt{font-family:var(--serif);font-weight:600; font-size:clamp(1.08rem,1rem + .35vw,1.3rem);letter-spacing:-.01em} .marke__ort{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase; color:var(--grau);margin-top:.12rem} .marke--hell{color:var(--papier)} .marke--hell .signet{color:var(--gold)} .marke--hell .marke__ort{color:rgba(250,246,240,.72)} /* -------------------------------------------------------------------- Kopf */ .kopf{position:sticky;top:0;z-index:60;background:rgba(250,246,240,.96); border-bottom:1px solid var(--linie); backdrop-filter:saturate(140%) blur(8px)} .kopf__reihe{display:flex;align-items:center;gap:1rem; min-height:4.4rem;padding-block:.55rem} .kopf__marke{text-decoration:none;margin-right:auto} .kopf__nav{display:none} .kopf__nav ul{display:flex;gap:.15rem;list-style:none;margin:0;padding:0} .kopf__nav a{display:block;padding:.5rem .7rem;border-radius:var(--rund); color:var(--tinte);text-decoration:none;font-size:.95rem;font-weight:500; transition:background .18s ease,color .18s ease} .kopf__nav a:hover{background:var(--sand);color:var(--rost-dunkel)} .kopf__nav a[aria-current="page"]{color:var(--rost); box-shadow:inset 0 -2px 0 var(--rost)} .kopf__tat{display:flex;align-items:center;gap:.5rem} .knopf__lang{display:none} .menuknopf{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--linie); background:transparent;color:var(--tinte);font:inherit;font-size:.9rem; font-weight:600;padding:.55rem .8rem;border-radius:var(--rund);cursor:pointer} .menuknopf__balken{position:relative;width:1.1rem;height:2px;background:currentColor; transition:background .18s ease} .menuknopf__balken::before,.menuknopf__balken::after{content:"";position:absolute; left:0;width:100%;height:2px;background:currentColor;transition:transform .22s ease} .menuknopf__balken::before{top:-.33rem} .menuknopf__balken::after{top:.33rem} .menuknopf[aria-expanded="true"] .menuknopf__balken{background:transparent} .menuknopf[aria-expanded="true"] .menuknopf__balken::before{transform:translateY(.33rem) rotate(45deg)} .menuknopf[aria-expanded="true"] .menuknopf__balken::after{transform:translateY(-.33rem) rotate(-45deg)} /* Kein eigenes display auf .mobilnav - sonst schlaegt es das hidden-Attribut und das Menue bliebe dauerhaft offen. Gesteuert wird nur ueber [hidden]. */ .mobilnav{border-top:1px solid var(--linie);background:var(--papier); padding:1rem var(--rand) 1.6rem;max-height:calc(100dvh - 4.4rem);overflow-y:auto} .mobilnav nav ul{list-style:none;margin:0 0 1.2rem;padding:0} .mobilnav nav a{display:block;padding:.85rem .2rem;font-size:1.1rem;font-weight:500; color:var(--tinte);text-decoration:none;border-bottom:1px solid var(--linie)} .mobilnav nav a[aria-current="page"]{color:var(--rost)} .mobilnav__fuss{display:flex;flex-direction:column;gap:.7rem;align-items:flex-start} .mobilnav__mail{font-size:.95rem} /* ------------------------------------------------------------------ Knoepfe */ .knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5rem; padding:.82rem 1.4rem;border-radius:var(--rund);font-weight:600; font-size:1rem;line-height:1.25;text-decoration:none;border:1px solid transparent; transition:background .18s ease,color .18s ease,border-color .18s ease, transform .18s ease,box-shadow .18s ease} .knopf--primaer{background:var(--rost);color:#fff;box-shadow:var(--schatten)} .knopf--primaer:hover{background:var(--rost-dunkel);color:#fff; transform:translateY(-1px);box-shadow:var(--schatten-tief)} .knopf--zweit{background:transparent;color:var(--tinte);border-color:rgba(44,36,32,.3)} .knopf--zweit:hover{background:var(--sand);color:var(--tinte);border-color:var(--tinte)} .knopf--hell{background:var(--papier);color:var(--dunkel)} .knopf--hell:hover{background:#fff;color:var(--dunkel);transform:translateY(-1px)} .knopf--umriss-hell{background:transparent;color:var(--papier); border-color:rgba(250,246,240,.45)} .knopf--umriss-hell:hover{background:rgba(250,246,240,.12);color:var(--papier); border-color:var(--papier)} .knopf--klein{padding:.58rem 1rem;font-size:.92rem} .knopf--voll{width:100%} @media (prefers-reduced-motion:reduce){ .knopf:hover{transform:none} } /* -------------------------------------------------------------------- Band */ .band{background:var(--dunkel);color:var(--papier)} .band__inhalt{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .7rem; padding-block:.75rem;font-size:.95rem} .band__titel{font-weight:700;color:var(--gold);letter-spacing:.02em} .band__text{color:rgba(250,246,240,.92)} /* -------------------------------------------------------------------- Hero */ .hero{position:relative;isolation:isolate;background:var(--dunkel); color:var(--papier);overflow:hidden} .hero__bild{position:absolute;inset:0;width:100%;height:100%} .hero__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 55%} /* Abdunkeln als Hintergrundbild der Huelle, nicht als eigene Schicht mit z-index darueber - sonst liegt sie ueber den Knoepfen und macht sie tot. */ .hero__inhalt{position:relative; background:linear-gradient(to right,rgba(28,20,16,.86) 0%,rgba(28,20,16,.72) 45%,rgba(28,20,16,.38) 100%); padding-block:clamp(4rem,11vw,8.5rem)} .hero__box{max-width:38rem} .hero h1{color:#fff;margin-bottom:.4em; text-shadow:0 2px 18px rgba(0,0,0,.35)} .hero__vor{display:inline-block;font-size:.8rem;letter-spacing:.16em; text-transform:uppercase;color:var(--gold-hell);font-weight:600; margin-bottom:1rem} .hero__text{font-size:clamp(1.05rem,1rem + .4vw,1.25rem);color:rgba(255,255,255,.93); margin-bottom:1.8rem;max-width:34rem} .hero__taten{display:flex;flex-wrap:wrap;gap:.75rem} .hero__status{margin-top:1.8rem;display:inline-flex;align-items:center;gap:.55rem; background:rgba(250,246,240,.12);border:1px solid rgba(250,246,240,.25); border-radius:999px;padding:.45rem .95rem;font-size:.9rem;color:#fff} .punkt{width:.55rem;height:.55rem;border-radius:50%;background:var(--gold);flex:none} .punkt--offen{background:#7bbf7b} .punkt--zu{background:#d98a6a} /* ------------------------------------------------------------------ Vertrauen */ .vertrauen{background:var(--sand);border-bottom:1px solid var(--linie)} .vertrauen__raster{display:grid;gap:1.6rem;padding-block:2.2rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))} .vertrauen__punkt{min-width:0} .vertrauen__punkt h3{font-family:var(--sans);font-size:.98rem;font-weight:700; margin-bottom:.2em} .vertrauen__punkt p{font-size:.92rem;color:var(--grau);margin:0} /* ---------------------------------------------------------------- Abschnitte */ .abschnitt{padding-block:var(--luft)} .abschnitt--sand{background:var(--sand)} .abschnitt--dunkel{background:var(--dunkel);color:var(--papier)} .abschnitt--dunkel h2,.abschnitt--dunkel h3{color:var(--papier)} .abschnitt--dunkel p{color:rgba(250,246,240,.86)} .abschnitt--dunkel a:not(.knopf){color:var(--gold)} .abschnitt--knapp{padding-block:clamp(2.5rem,5vw,3.5rem)} .kopfzeile{max-width:42rem;margin-bottom:clamp(2rem,4vw,3rem)} .kopfzeile--mitte{margin-inline:auto;text-align:center} .augen{display:block;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase; color:var(--rost);font-weight:700;margin-bottom:.85rem} .abschnitt--dunkel .augen{color:var(--gold)} .vorspann{font-size:clamp(1.05rem,1rem + .35vw,1.2rem);color:var(--grau)} .abschnitt--dunkel .vorspann{color:rgba(250,246,240,.8)} /* Zwei Spalten: Text und Bild */ .duo{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center} .duo__bild{min-width:0} .duo__bild .bild{border-radius:var(--rund);overflow:hidden;box-shadow:var(--schatten-tief)} .duo__text{min-width:0} .duo__text h2{margin-top:0} /* --------------------------------------------------------------- Bildkacheln */ .bild img{width:100%;height:auto} .kacheln{display:grid;gap:clamp(1rem,2.2vw,1.6rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))} .kachel{min-width:0;background:var(--papier);border:1px solid var(--linie); border-radius:var(--rund);overflow:hidden;display:flex;flex-direction:column; transition:transform .22s ease,box-shadow .22s ease} .abschnitt--sand .kachel{background:#fff} .kachel--link:hover{transform:translateY(-3px);box-shadow:var(--schatten-tief)} /* picture braucht eine eigene Hoehe, sonst greift object-fit im Kind nicht. */ .kachel .bild{display:block;width:100%;aspect-ratio:3/2;overflow:hidden} .kachel .bild img{width:100%;height:100%;object-fit:cover} .kachel__text{padding:1.3rem 1.4rem 1.5rem;flex:1 1 auto; display:flex;flex-direction:column} .kachel__text h3{margin-bottom:.35em} .kachel__text p{font-size:.95rem;color:var(--grau);margin-bottom:0} .kachel__mehr{margin-top:1rem;font-weight:600;font-size:.95rem; display:inline-flex;align-items:center;gap:.35rem} .kachel__mehr::after{content:"\2192";transition:transform .2s ease} .kachel--link:hover .kachel__mehr::after{transform:translateX(3px)} @media (prefers-reduced-motion:reduce){ .kachel--link:hover{transform:none} .kachel--link:hover .kachel__mehr::after{transform:none} } /* ------------------------------------------------------------------- Raeume */ .raeume{display:grid;gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))} .raum{min-width:0;padding:1.5rem;border:1px solid var(--linie-hell); border-radius:var(--rund);background:rgba(250,246,240,.05)} .raum h3{font-size:1.15rem;margin-bottom:.4em;color:var(--papier)} .raum p{font-size:.94rem;margin:0} /* -------------------------------------------------------------------- Karte */ .karte__gruppe{margin-bottom:clamp(2.4rem,5vw,3.4rem);scroll-margin-top:6rem} .karte__gruppe h2{display:flex;align-items:baseline;gap:.8rem;margin-bottom:.5em; font-size:clamp(1.4rem,1.2rem + .9vw,1.9rem)} .karte__gruppe h2::after{content:"";flex:1 1 auto;height:1px; background:var(--linie);transform:translateY(-.28em)} .karte__hinweis{color:var(--grau);font-size:.95rem;margin-bottom:1.4rem; max-width:42rem} .karte__spalten{display:flex;justify-content:flex-end;gap:1.5rem; font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grau); font-weight:700;border-bottom:1px solid var(--linie);padding-bottom:.4rem; margin-bottom:.3rem} .karte__spalte{width:4.2rem;text-align:right} .gericht{display:flex;align-items:baseline;gap:1rem;padding:.7rem 0; border-bottom:1px solid var(--linie)} .gericht:last-child{border-bottom:0} .gericht__wort{flex:1 1 auto;min-width:0} .gericht__name{font-weight:600} .gericht__zusatz{display:block;font-size:.9rem;color:var(--grau);margin-top:.1rem} .gericht__preise{display:flex;gap:1.5rem;flex:none;font-variant-numeric:tabular-nums} .gericht__preis{width:4.2rem;text-align:right;font-weight:600} .gericht__preis--leer{color:rgba(44,36,32,.28)} .notiz{background:var(--sand);border-left:3px solid var(--gold); border-radius:0 var(--rund) var(--rund) 0;padding:1.2rem 1.4rem; font-size:.95rem;color:var(--grau)} .notiz strong{color:var(--tinte)} .notiz p:last-child{margin-bottom:0} .deklaration{display:grid;gap:.1rem 1.5rem;margin:0;font-size:.92rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))} .deklaration div{display:flex;justify-content:space-between;gap:1rem; padding:.4rem 0;border-bottom:1px solid var(--linie);min-width:0} .deklaration dt{color:var(--grau)} .deklaration dd{margin:0;font-weight:600;text-align:right} /* Sprungleiste zu den Kartenabschnitten */ .anker{position:sticky;top:4.4rem;z-index:40;background:rgba(250,246,240,.96); border-bottom:1px solid var(--linie);backdrop-filter:blur(8px)} .anker__rolle{display:flex;gap:.4rem;overflow-x:auto;padding-block:.65rem; scrollbar-width:thin;-webkit-overflow-scrolling:touch} .anker__rolle a{flex:none;padding:.35rem .8rem;border-radius:999px;font-size:.87rem; font-weight:500;color:var(--grau);text-decoration:none; border:1px solid var(--linie);white-space:nowrap; transition:background .18s ease,color .18s ease,border-color .18s ease} .anker__rolle a:hover{background:var(--sand);color:var(--rost-dunkel); border-color:rgba(44,36,32,.28)} /* -------------------------------------------------------------------- Weine */ .weinsuche{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center; margin-bottom:1.8rem} .weinsuche label{font-weight:600;font-size:.95rem} .weinsuche input{flex:1 1 16rem;min-width:0;font:inherit;font-size:1rem; padding:.68rem .9rem;border:1px solid rgba(44,36,32,.28);border-radius:var(--rund); background:#fff;color:var(--tinte)} .weinsuche input:focus-visible{border-color:var(--rost)} .weinzahl{font-size:.9rem;color:var(--grau);flex:none} .weine{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))} .wein{min-width:0;background:#fff;border:1px solid var(--linie); border-radius:var(--rund);padding:1.25rem 1.35rem;display:flex; flex-direction:column;gap:.5rem} .wein__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:1rem} .wein__name{font-family:var(--serif);font-weight:600;font-size:1.1rem; line-height:1.25;min-width:0} .wein__preis{flex:none;font-weight:700;font-variant-numeric:tabular-nums; color:var(--rost);white-space:nowrap} .wein__gebinde{display:block;font-size:.78rem;color:var(--grau);font-weight:500; text-align:right} .wein__her{font-size:.88rem;color:var(--grau)} .wein__sorte{font-size:.88rem;font-weight:600} .wein__text{font-size:.92rem;color:var(--grau);margin:0} .wein__marken{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.15rem} .marke-etikett{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase; font-weight:700;padding:.18rem .5rem;border-radius:999px; background:var(--sand);color:var(--grau)} .marke-etikett--rot{background:rgba(154,66,38,.1);color:var(--rost-dunkel)} .marke-etikett--weiss{background:rgba(184,137,74,.16);color:#79541f} .leermeldung{padding:2rem 0;color:var(--grau)} /* Offenausschank als Tabelle */ .offen{width:100%;border-collapse:collapse;font-size:.96rem} .offen caption{text-align:left;font-family:var(--serif);font-weight:600; font-size:1.2rem;padding-bottom:.5rem;color:var(--tinte)} .offen th,.offen td{padding:.6rem .5rem;border-bottom:1px solid var(--linie); text-align:left} .offen th{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase; color:var(--grau)} .offen td.zahl,.offen th.zahl{text-align:right;font-variant-numeric:tabular-nums; width:5.5rem} .offen__her{display:block;font-size:.85rem;color:var(--grau)} /* ------------------------------------------------------------------- Menues */ .menuliste{display:grid;gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))} .menu{min-width:0;background:#fff;border:1px solid var(--linie); border-radius:var(--rund);padding:1.4rem 1.5rem;display:flex;flex-direction:column} .menu__kopf{display:flex;justify-content:space-between;align-items:baseline; gap:1rem;border-bottom:1px solid var(--linie);padding-bottom:.7rem; margin-bottom:.9rem} .menu__nr{font-family:var(--serif);font-size:1.3rem;font-weight:600} .menu__preis{font-weight:700;color:var(--rost);font-variant-numeric:tabular-nums} .menu__gaenge{list-style:none;margin:0;padding:0;display:flex; flex-direction:column;gap:.6rem;font-size:.95rem;flex:1 1 auto} .menu__gaenge li{position:relative;padding-left:1.1rem} .menu__gaenge li::before{content:"";position:absolute;left:0;top:.62em; width:.35rem;height:.35rem;border-radius:50%;background:var(--gold)} .menu__fuss{margin-top:1rem;font-size:.85rem;color:var(--grau)} /* ------------------------------------------------------------------ Galerie */ .galerie{display:grid;gap:clamp(.8rem,1.6vw,1.2rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))} .galerie figure{margin:0;min-width:0;border-radius:var(--rund);overflow:hidden; background:#fff;border:1px solid var(--linie);display:flex;flex-direction:column} .galerie .bild{display:block;width:100%;aspect-ratio:3/2;overflow:hidden} .galerie .bild img{width:100%;height:100%;object-fit:cover} .galerie figcaption{padding:.85rem 1rem 1rem;font-size:.9rem;color:var(--grau)} /* Hochformatige Vorlagen: gleicher Rasterzuschnitt, aber der Bildausschnitt sitzt weiter oben, damit Gesichter drin bleiben. */ .galerie figure.oben .bild img{object-position:50% 20%} /* ------------------------------------------------------------------ Zeiten */ .zeiten{min-width:0} .zeiten__titel{font-family:var(--sans);font-size:.78rem;letter-spacing:.14em; text-transform:uppercase;color:var(--grau);font-weight:700;margin-bottom:.7rem} .zeiten dl{margin:0} .zeiten__zeile{display:flex;justify-content:space-between;gap:1rem; padding:.42rem 0;border-bottom:1px solid var(--linie);font-size:.95rem} .zeiten__zeile:last-child{border-bottom:0} .zeiten dt{color:var(--grau);min-width:0} .zeiten dd{margin:0;font-weight:600;text-align:right;flex:none; font-variant-numeric:tabular-nums} .zeiten__zu{color:var(--rost);font-variant-numeric:normal} .zeiten--hell .zeiten__titel{color:rgba(250,246,240,.7)} .zeiten--hell .zeiten__zeile{border-color:var(--linie-hell)} .zeiten--hell dt{color:rgba(250,246,240,.78)} .zeiten--hell dd{color:var(--papier)} .zeiten--hell .zeiten__zu{color:var(--gold)} /* Untereinander statt nebeneinander: in einer halben Spalte brechen die Tagesangaben sonst um und die beiden Tabellen laufen auseinander. */ .zeitenpaar{display:grid;gap:1.8rem;grid-template-columns:1fr} @media (min-width:1400px){ .zeitenpaar{grid-template-columns:1fr 1fr;gap:2rem} } /* ----------------------------------------------------------------- Kontakt */ .kontaktraster{display:grid;gap:clamp(2rem,4vw,3rem)} .kontakt__karte{background:#fff;border:1px solid var(--linie); border-radius:var(--rund);padding:clamp(1.5rem,3vw,2.2rem)} .kontakt__liste{list-style:none;margin:0 0 1.5rem;padding:0;display:flex; flex-direction:column;gap:.9rem} .kontakt__liste li{display:flex;gap:.85rem;align-items:flex-start;min-width:0} .kontakt__eti{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase; color:var(--grau);font-weight:700;width:5.5rem;flex:none;padding-top:.18rem} .kontakt__wert{min-width:0;font-weight:500} .kontakt__taten{display:flex;flex-wrap:wrap;gap:.7rem} .karte-einbettung{border:0;width:100%;aspect-ratio:4/3;border-radius:var(--rund); background:var(--sand);display:block} form .feld{margin-bottom:1.1rem} form label{display:block;font-weight:600;font-size:.93rem;margin-bottom:.35rem} form input,form textarea,form select{width:100%;font:inherit;font-size:1rem; padding:.7rem .85rem;border:1px solid rgba(44,36,32,.28);border-radius:var(--rund); background:#fff;color:var(--tinte)} form textarea{min-height:8rem;resize:vertical} form input:focus-visible,form textarea:focus-visible{border-color:var(--rost)} .feldpaar{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))} .pflicht{color:var(--rost)} .formhinweis{font-size:.88rem;color:var(--grau);margin-top:1rem} .honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* --------------------------------------------------------------- Rechtstext */ .rechtstext{max-width:var(--eng);margin-inline:auto} .rechtstext h2{font-size:clamp(1.3rem,1.15rem + .7vw,1.6rem);margin-top:2.2em} .rechtstext h2:first-of-type{margin-top:0} .rechtstext h3{font-size:1.1rem;margin-top:1.6em} .rechtstext ul{padding-left:1.2rem} .rechtstext li{margin-bottom:.5em} /* ----------------------------------------------------------------- Aufruf */ .aufruf{background:var(--dunkel-2);color:var(--papier);text-align:center} .aufruf h2{color:#fff} .aufruf p{color:rgba(250,246,240,.86);max-width:36rem;margin-inline:auto} .aufruf__taten{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center; margin-top:1.8rem} /* -------------------------------------------------------------------- Fuss */ .fuss{background:var(--dunkel);color:rgba(250,246,240,.86); padding-top:clamp(3rem,6vw,4.5rem);margin-top:0} .fuss__raster{display:grid;gap:2.2rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))} .fuss__spalte{min-width:0} .fuss__titel{font-family:var(--sans);font-size:.78rem;letter-spacing:.14em; text-transform:uppercase;color:rgba(250,246,240,.7);font-weight:700; margin-bottom:.9rem} .fuss__satz{font-size:.93rem;color:rgba(250,246,240,.72);margin-top:1rem; max-width:22rem} .fuss address{font-style:normal;font-size:.96rem;line-height:1.9} .fuss a{color:var(--papier);text-decoration:none} .fuss a:hover{color:var(--gold);text-decoration:underline} .fuss__liste{list-style:none;margin:0;padding:0;display:flex; flex-direction:column;gap:.5rem;font-size:.96rem} .fuss__unten{display:flex;flex-wrap:wrap;justify-content:space-between; gap:.6rem 1.5rem;padding-block:1.6rem;margin-top:2.8rem; border-top:1px solid var(--linie-hell);font-size:.87rem; color:rgba(250,246,240,.62)} .fuss__unten p{margin:0} .fuss__recht{list-style:none;margin:0;padding:0;display:flex;gap:1.2rem} /* ---------------------------------------------------------- Fussleiste mobil */ .fussleiste{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex; gap:1px;background:var(--linie);border-top:1px solid var(--linie); padding-bottom:env(safe-area-inset-bottom)} .fussleiste__tat{flex:1 1 0;min-width:0;text-align:center;padding:.9rem .5rem; background:var(--papier);color:var(--tinte);text-decoration:none; font-weight:600;font-size:.95rem} .fussleiste__tat--haupt{background:var(--rost);color:#fff} body{padding-bottom:3.5rem} /* ------------------------------------------------------------- Einblenden */ .auftritt{opacity:0;transform:translateY(14px); transition:opacity .6s ease,transform .6s ease} .auftritt.da{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .auftritt{opacity:1;transform:none;transition:none} } /* --------------------------------------------------------------- Breiten */ @media (min-width:600px){ .knopf__lang{display:inline} .knopf__kurz{display:none} } /* Keine einsame Kachel in der letzten Rasterzeile: bei ungerader Anzahl nimmt die letzte im Zweispalter die ganze Breite ein. */ @media (min-width:600px) and (max-width:999px){ .kacheln > :last-child:nth-child(odd){grid-column:1 / -1} } @media (min-width:760px){ .duo{grid-template-columns:1fr 1fr} .duo--umgekehrt .duo__bild{order:2} .kontaktraster{grid-template-columns:1fr 1fr;align-items:start} } @media (min-width:1000px){ .kopf__nav{display:block} .menuknopf{display:none} .mobilnav{display:none !important} .fussleiste{display:none} body{padding-bottom:0} .duo--breit{grid-template-columns:1.05fr .95fr} } /* ------------------------------------------------------- Hilfsklassen Ersetzen die frueheren style-Attribute. Inline-Stile wuerden eine Content-Security-Policy ohne 'unsafe-inline' fuer style-src brechen - und diese Sperre ist mehr wert als die Bequemlichkeit. */ .mitte-eng{text-align:center;padding-block:clamp(2rem,6vw,5rem)} .abstand-oben{margin-top:1.5rem} .abstand-oben-klein{margin-top:1.2rem} .abstand-unten{margin-bottom:1.5rem} .titel-luft{margin-bottom:1.2em} .titel-klein{font-size:1.3rem} .hinweis-klein{color:var(--grau);font-size:.95rem} .blankliste{list-style:none;margin:0;padding:0} .blankliste--abstand{margin-top:1.2rem} .ohne-oben{padding-top:0} .oben-bündig{align-items:start} .spalte{min-width:0} .offen tbody th{font-weight:600} .notiz p + p{margin-top:.8rem}