/* ============================================================
   WICHTIG: Diese @import-Zeile muss GANZ OBEN in der zentralen
   CSS stehen (vor allen anderen Regeln), sonst wird sie vom
   Browser ignoriert! Sie lädt die Schriften (Anton, Playfair
   Display, Barlow, Barlow Condensed) – die <link>-Tags im
   HTML-Content werden vom Programm entfernt und funktionieren
   deshalb nicht.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Playfair+Display:ital,wght@0,400;1,400&family=Barlow:wght@300;400;500&family=Barlow+Condensed:wght@400;500;600&display=swap");

/* ============================================================
   TENNENWIRT – Willkommensseite (Redesign 2026, Loisium-Stil)
   Diesen Block in die zentrale CSS einfügen.
   Alle Selektoren sind mit "twx-" gescoped und wirken nur
   innerhalb von <div class="twx"> → keine Kollision mit
   .logo-default, .roomcontent, #footer etc.

   Schriften (Google Fonts, an Loisium angelehnt):
   - Anton            → condensed Black-Headlines, UPPERCASE
                        (Ersatz für URW DIN Condensed 900)
   - Playfair Display → Serif-Subheadlines, UPPERCASE
                        (nutzt Loisium ebenfalls)
   - Barlow           → Fließtext (DIN-artig)
   - Barlow Condensed → Labels & unterstrichene Text-Links
   ============================================================ */

.twx{
  --twx-ink:#212529;
  --twx-soft:#5c6166;
  --twx-red:#ba372a;
  --twx-line:#dfdfdb;
  --twx-cond:'Anton','Arial Narrow',sans-serif;
  --twx-serif:'Playfair Display',Georgia,serif;
  --twx-sans:'Barlow','Helvetica Neue',Arial,sans-serif;
  --twx-label:'Barlow Condensed','Arial Narrow',sans-serif;
  font-family:var(--twx-sans);
  color:var(--twx-ink);
  font-weight:400;
  font-size:16px;
  line-height:1.65;
  text-align:left;
  margin:0;
  background:#fff;
}
.twx *,.twx *::before,.twx *::after{box-sizing:border-box;}
.twx img{max-width:100%;display:block;}
.twx p{margin:0 0 1.2em;color:var(--twx-ink);font-family:var(--twx-sans);font-weight:400;}
.twx a{text-decoration:none;color:var(--twx-ink);}

/* ---------- Typo-Bausteine ---------- */
.twx .twx-eyebrow{
  display:block;
  font-family:var(--twx-label);
  font-size:16px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--twx-red);
  margin:0 0 22px;
}
.twx .twx-h1{
  font-family:var(--twx-cond);
  font-weight:400;
  font-size:clamp(48px,7vw,88px);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.01em;
  margin:0 0 18px;
  color:var(--twx-ink);
}
.twx .twx-h2{
  font-family:var(--twx-cond);
  font-weight:400;
  font-size:clamp(36px,4.6vw,65px);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.01em;
  margin:0 0 20px;
  color:var(--twx-ink);
}
.twx .twx-h3{
  font-family:var(--twx-cond);
  font-weight:400;
  font-size:clamp(26px,2.6vw,34px);
  line-height:1.05;
  text-transform:uppercase;
  margin:0 0 14px;
  color:var(--twx-ink);
}
/* Serif-Subheadline im Loisium-Stil: Playfair, ebenfalls UPPERCASE */
.twx .twx-serifline{
  font-family:var(--twx-serif);
  font-weight:400;
  font-size:clamp(22px,3.4vw,44px);
  line-height:1.25;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--twx-red);
  margin:0 0 34px;
}

/* Akzentfarbe für einzelne Wörter im Fließtext */
.twx .twx-accent{color:var(--twx-red);font-weight:500;}

/* ---------- Text-Links (statt Buttons, wie Loisium) ---------- */
.twx .twx-link{
  display:inline-block;
  font-family:var(--twx-label);
  font-size:18px;
  font-weight:500;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--twx-red);
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-thickness:1px;
  transition:color .25s;
}
.twx .twx-link:hover{color:var(--twx-ink);text-decoration:underline;}
.twx .twx-linklist{margin-top:26px;}
.twx .twx-linklist .twx-link{display:block;margin-bottom:14px;}
.twx .twx-linklist .twx-link:last-child{margin-bottom:0;}

/* ---------- Layout-Container ---------- */
.twx .twx-wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
.twx .twx-narrow{max-width:820px;margin:0 auto;padding:0 24px;}
.twx .twx-center{text-align:center;}
.twx .twx-sectionhead{max-width:820px;margin:0 auto 0;text-align:center;}
.twx .twx-section{padding:clamp(70px,9vw,120px) 0;}
.twx .twx-section--pt0{padding-top:0;}

/* ---------- Anker-Zeile (wie Loisium-Subnav) ---------- */
.twx .twx-anchors{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px 48px;
  padding:26px 24px;
  border-top:1px solid var(--twx-line);
  border-bottom:1px solid var(--twx-line);
}
.twx .twx-anchors a{
  font-family:var(--twx-label);
  font-size:17px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--twx-ink);
  transition:color .25s;
}
.twx .twx-anchors a:hover{color:var(--twx-red);}

/* ---------- Split-Sektionen (Hotel/Restaurant/Guesthouse) ---------- */
.twx .twx-split{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(36px,5vw,80px);
  align-items:start;
}
.twx .twx-split + .twx-split{margin-top:clamp(80px,10vw,150px);}
.twx .twx-split__img img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}
.twx .twx-split--flip .twx-split__img{order:2;}
.twx .twx-split--flip .twx-split__txt{order:1;}
.twx .twx-split__txt{padding-top:clamp(0px,2vw,24px);}

/* Öffnungszeiten im Loisium-Stil: nüchterner Block, kein Rahmen */
.twx .twx-hours{margin:26px 0 6px;}
.twx .twx-hours strong{
  display:block;
  font-family:var(--twx-label);
  font-size:16px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--twx-red);
  margin-bottom:6px;
}
.twx .twx-hours span{display:block;}

/* ---------- Zitat-Band ---------- */
.twx .twx-quote{text-align:center;}
.twx .twx-quote .twx-serifline{margin-bottom:18px;color:var(--twx-red);}
.twx .twx-quote p{color:var(--twx-soft);}
.twx .twx-claim{
  font-family:var(--twx-serif);
  font-size:clamp(19px,2.2vw,26px);
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--twx-red);
  margin:0;
}

/* ---------- Region / Videos (Kartenzeile wie Frühstück/Dinner) ---------- */
.twx .twx-region{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(36px,5vw,80px);
  margin-top:clamp(44px,6vw,70px);
}
.twx .twx-video{
  position:relative;
  aspect-ratio:16/9;
  background:#1c1c1c;
  margin-bottom:26px;
}
.twx .twx-video iframe{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  border:0;
}
.twx .twx-region p{color:var(--twx-soft);}

/* ---------- Outro ---------- */
.twx .twx-outro{text-align:center;}
.twx .twx-outro .twx-h2{margin-bottom:14px;}
.twx .twx-outro .twx-serifline{font-size:clamp(20px,2.6vw,32px);margin-bottom:38px;}
.twx .twx-cta{
  display:flex;
  gap:16px 48px;
  justify-content:center;
  flex-wrap:wrap;
}

/* ---------- Mobile ---------- */
@media (max-width:900px){
  .twx .twx-split{grid-template-columns:1fr;gap:26px;}
  .twx .twx-split--flip .twx-split__img{order:0;}
  .twx .twx-split--flip .twx-split__txt{order:1;}
  .twx .twx-split__txt{padding-top:0;}
  .twx .twx-region{grid-template-columns:1fr;}
  .twx .twx-anchors{gap:12px 28px;}
}
@media (max-width:600px){
  .twx{font-size:15px;}
  .twx .twx-h1{font-size:clamp(32px,10.5vw,48px);}
  .twx .twx-h2{font-size:clamp(28px,9vw,36px);}
  .twx .twx-link{font-size:17px;}
  .twx .twx-cta{flex-direction:column;gap:14px;}
}

/* ---------- Zusatz für Unterseiten (Hotel etc.) ---------- */

/* schlichte Ausstattungsliste (z. B. Wellnessbereich) */
.twx .twx-list{
  list-style:none;
  margin:0 0 22px;
  padding:0;
}
.twx .twx-list li{
  font-family:var(--twx-label);
  font-size:17px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:9px 0;
  border-bottom:1px solid var(--twx-line);
}
.twx .twx-list li:first-child{border-top:1px solid var(--twx-line);}

/* Hashtags im Outro */
.twx .twx-tags{
  font-family:var(--twx-label);
  font-size:16px;
  font-weight:500;
  letter-spacing:.08em;
  color:var(--twx-red);
  margin:34px 0 0;
}

/* ============================================================
   TENNENWIRT – Restaurant-Seite (twr-Klassen)
   Eigenes Farbschema der Restaurant-Seite (dunkel/gold/grün),
   Design unverändert – nur sauber als Klassen, responsiv und
   mit echten Full-Width-Bändern statt Negativ-Margins.
   ============================================================ */

.twr{
  --twr-dark:#1a1a18;
  --twr-cream:#f5f0e8;
  --twr-gold:#c8b99a;
  --twr-red:#ba372a;
  --twr-light:#faf8f4;
  --twr-cond:'Anton','Arial Narrow',sans-serif;
  --twr-serif:'Playfair Display',Georgia,serif;
  --twr-sans:'Barlow','Helvetica Neue',Arial,sans-serif;
  --twr-label:'Barlow Condensed','Arial Narrow',sans-serif;
  font-family:var(--twr-sans);
  margin:0;
}
.twr *,.twr *::before,.twr *::after{box-sizing:border-box;}
.twr img{max-width:100%;height:auto;display:block;}

/* Band über die volle Browserbreite ziehen
   (#page-content hat overflow-x:hidden, daher gefahrlos) */
.twr .twr-bleed{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
}

.twr .twr-inner{max-width:1140px;margin:0 auto;}

.twr .twr-eyebrow{
  font-family:var(--twr-label);
  font-size:14px;
  letter-spacing:.25em;
  text-transform:uppercase;
  font-weight:600;
  display:block;
  margin-bottom:16px;
  color:var(--twr-gold);
}
.twr .twr-title{
  font-family:var(--twr-cond);
  font-size:clamp(28px,4vw,52px);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;
  color:var(--twr-cream);
  margin:0 0 12px;
  line-height:1.15;
}
.twr .twr-title em{font-style:normal;color:var(--twr-red);}

/* ---------- Hero ---------- */
.twr .twr-hero{background:var(--twr-dark);padding:60px 5%;text-align:center;}
.twr .twr-hero__claim{
  font-family:var(--twr-serif);
  font-size:clamp(16px,2vw,22px);
  font-style:italic;
  color:var(--twr-gold);
  font-weight:300;
  margin:0 auto 28px;
  max-width:560px;
}
.twr .twr-hero__text{
  font-size:15px;font-weight:300;line-height:1.8;
  color:rgba(245,240,232,.7);
  max-width:640px;margin:0 auto 32px;
}
.twr .twr-btn{
  display:inline-block;
  font-family:var(--twr-label);
  font-size:14px;letter-spacing:.15em;text-transform:uppercase;font-weight:500;
  padding:13px 32px;text-decoration:none;
  background:var(--twr-red);color:#fff;border:1px solid var(--twr-red);
  margin:0 6px 10px;
}
.twr .twr-btn--ghost{background:transparent;color:var(--twr-cream);border-color:rgba(245,240,232,.45);}

/* ---------- 3 Info-Spalten ---------- */
.twr .twr-cols{background:var(--twr-light);padding:60px 5%;}
.twr .twr-cols__grid{
  max-width:1140px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;
}
.twr .twr-col{border-top:3px solid var(--twr-red);padding-top:20px;}
.twr .twr-col--dark{border-top-color:var(--twr-dark);}
.twr .twr-col--gold{border-top-color:var(--twr-gold);}
.twr .twr-col h3{
  font-family:var(--twr-cond);
  font-size:19px;font-weight:400;text-transform:uppercase;letter-spacing:.03em;color:var(--twr-dark);margin:0 0 12px;
}
.twr .twr-col p{font-size:14px;color:#666;line-height:1.7;font-weight:300;margin:0;}

/* ---------- Öffnungszeiten-Band ---------- */
.twr .twr-band{background:var(--twr-red);padding:22px 5%;text-align:center;}
.twr .twr-band p{
  font-size:14px;font-weight:500;letter-spacing:.1em;
  color:#fff;text-transform:uppercase;margin:0;
}

/* ---------- Speisekarte ---------- */
.twr .twr-menu{background:var(--twr-dark);padding:60px 5%;}
.twr .twr-menu__head{text-align:center;margin-bottom:40px;}
.twr .twr-menu__head .twr-title{font-size:clamp(24px,3vw,38px);margin-bottom:8px;}
.twr .twr-menu__head p{font-size:14px;color:rgba(245,240,232,.5);font-weight:300;margin:0;}
.twr .twr-menu__grid{
  display:grid;grid-template-columns:3fr 2fr;gap:32px;
  align-items:start;
}
.twr .twr-menu__img img{box-shadow:0 8px 40px rgba(0,0,0,.5);width:100%;}
.twr .twr-menu__hint{
  font-size:11px;color:rgba(245,240,232,.35);
  text-align:center;margin-top:10px;letter-spacing:.1em;
}
.twr .twr-card{
  background:rgba(255,255,255,.05);
  padding:28px;border-left:3px solid var(--twr-red);
  margin-bottom:20px;
}
.twr .twr-card--gold{border-left-color:var(--twr-gold);}
.twr .twr-card h3{
  font-family:var(--twr-cond);
  font-size:20px;font-weight:400;text-transform:uppercase;letter-spacing:.03em;color:var(--twr-cream);margin:0 0 10px;
}
.twr .twr-card p{font-size:14px;color:rgba(245,240,232,.65);line-height:1.7;font-weight:300;margin:0 0 16px;}
.twr .twr-card .twr-btn{font-size:11px;letter-spacing:.12em;padding:11px 22px;margin:0;}
.twr .twr-card a.twr-contact{
  display:block;font-size:15px;color:var(--twr-gold);
  text-decoration:none;margin-bottom:6px;font-weight:300;
}

/* ---------- Gedicht ---------- */
.twr .twr-poem{background:var(--twr-dark);padding:70px 5%;text-align:center;border-top:1px solid rgba(200,185,154,.25);}
.twr .twr-poem__inner{max-width:520px;margin:0 auto;}
.twr .twr-poem__line{
  font-family:var(--twr-serif);
  font-size:clamp(18px,2.5vw,26px);font-style:italic;
  color:var(--twr-gold);line-height:1.8;margin:0 0 4px;
}
.twr .twr-poem__line--last{margin-bottom:36px;}
.twr .twr-poem__big{
  font-family:var(--twr-serif);
  font-size:clamp(24px,3vw,36px);color:var(--twr-cream);
  font-weight:400;margin:0 0 4px;
}
.twr .twr-poem__big--last{margin-bottom:28px;}
.twr .twr-poem__tags{border-top:1px solid rgba(200,185,154,.25);padding-top:20px;}
.twr .twr-poem__tags span{font-size:12px;color:rgba(245,240,232,.4);letter-spacing:.12em;}

/* ---------- Tischreservierung ---------- */
.twr .twr-reserve{background:var(--twr-light);padding:60px 5%;}
.twr .twr-reserve .twr-eyebrow{color:#8b6f47;margin-bottom:12px;}
.twr .twr-reserve h2{
  font-family:var(--twr-cond);
  font-size:clamp(22px,2.5vw,34px);font-weight:400;text-transform:uppercase;letter-spacing:.01em;
  color:var(--twr-dark);margin:0 0 32px;line-height:1.2;
}
.twr .twr-reserve h2 em{font-style:normal;color:var(--twr-red);}

/* ---------- Mobile ---------- */
@media (max-width:900px){
  .twr .twr-cols__grid{grid-template-columns:1fr;gap:28px;}
  .twr .twr-menu__grid{grid-template-columns:1fr;}
}

/* ============================================================
   TENNENWIRT – gemeinsame Akzent-Bausteine (Restaurant-Vibe
   für alle twx-Seiten: dunkle Bänder, rotes Info-Band,
   Buttons, Spalten mit Farblinien)
   ============================================================ */

.twx{
  --twx-dark:#1a1a18;
  --twx-cream:#f5f0e8;
  --twx-gold:#c8b99a;
}

/* Band über die volle Browserbreite ziehen
   (#page-content hat overflow-x:hidden, daher gefahrlos) */
.twx .twx-bleed{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
}

/* ---------- dunkle Sektion ---------- */
.twx .twx-dark{background:var(--twx-dark);}
.twx .twx-dark .twx-claim{margin-bottom:16px;}
.twx .twx-dark .twx-h1,
.twx .twx-dark .twx-h2{color:var(--twx-cream);}
.twx .twx-dark .twx-h1 em,
.twx .twx-dark .twx-h2 em{font-style:normal;color:var(--twx-red);}
.twx .twx-dark .twx-eyebrow{color:var(--twx-gold);}
.twx .twx-dark .twx-serifline{color:var(--twx-gold);}
.twx .twx-dark p{color:rgba(245,240,232,.7);}
.twx .twx-dark .twx-claim{color:var(--twx-gold);}
.twx .twx-dark .twx-accent{color:var(--twx-gold);}
.twx .twx-dark .twx-tags{color:rgba(245,240,232,.45);}

/* ---------- Buttons (wie Restaurant-Seite) ---------- */
.twx .twx-btn{
  display:inline-block;
  font-family:var(--twx-label);
  font-size:14px;letter-spacing:.15em;text-transform:uppercase;font-weight:500;
  padding:13px 32px;text-decoration:none;
  background:var(--twx-red);color:#fff;border:1px solid var(--twx-red);
  margin:0 6px 10px;
  transition:opacity .25s;
}
.twx .twx-btn:hover{opacity:.85;color:#fff;}
.twx .twx-btn--ghost{background:transparent;color:var(--twx-cream);border-color:rgba(245,240,232,.45);}
.twx .twx-btn--ghost:hover{color:var(--twx-cream);}

/* ---------- rotes Info-Band ---------- */
.twx .twx-band{background:var(--twx-red);padding:22px 5%;text-align:center;}
.twx .twx-band p{
  font-family:var(--twx-sans);
  font-size:14px;font-weight:500;letter-spacing:.1em;
  color:#fff;text-transform:uppercase;margin:0;
}

/* ---------- Info-Spalten mit Farblinien ---------- */
.twx .twx-cols{
  max-width:1140px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;
}
.twx .twx-col{border-top:3px solid var(--twx-red);padding-top:20px;}
.twx .twx-col--dark{border-top-color:var(--twx-dark);}
.twx .twx-col--gold{border-top-color:var(--twx-gold);}
.twx .twx-col h3{
  font-family:var(--twx-cond);
  font-size:19px;font-weight:400;text-transform:uppercase;letter-spacing:.03em;
  color:var(--twx-ink);margin:0 0 12px;
}
.twx .twx-col p{font-size:14px;color:var(--twx-soft);line-height:1.7;margin:0;}

@media (max-width:900px){
  .twx .twx-cols{grid-template-columns:1fr;gap:28px;}
}

/* ---------- Erlebnis-Karten (z. B. Sommer-Seite) ---------- */
.twx .twx-cards{
  max-width:1180px;margin:clamp(40px,6vw,70px) auto 0;padding:0 24px;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,64px);
}
.twx .twx-card{border-top:3px solid var(--twx-red);padding-top:22px;}
.twx .twx-card--dark{border-top-color:var(--twx-dark);}
.twx .twx-card--gold{border-top-color:var(--twx-gold);}
.twx .twx-card img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  margin-bottom:20px;
}
/* großes Stimmungsbild über volle Contentbreite */
.twx .twx-photo{
  width:100%;
  aspect-ratio:21/9;
  object-fit:cover;
}
.twx .twx-card h3{
  font-family:var(--twx-cond);
  font-size:clamp(22px,2.2vw,28px);
  font-weight:400;
  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--twx-ink);
  margin:0 0 12px;
}
.twx .twx-card p{font-size:15px;color:var(--twx-soft);line-height:1.7;margin:0;}
@media (max-width:900px){
  .twx .twx-cards{grid-template-columns:1fr;gap:40px;}
}

/* ---------- eingebettete Widgets/Karten (z. B. Skimap) ---------- */
.twx .twx-iframe{
  display:block;
  width:100%;
  height:700px;
  border:0;
  margin-top:clamp(30px,4vw,50px);
}
@media (max-width:600px){
  .twx .twx-iframe{height:520px;}
}