:root{
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Cinzel", Georgia, "Times New Roman", serif;

  --brand-ink:#23282B;
  --brand-slate:#3A4556;
  --brand-blue:#4C9CD6;
  --brand-mist:#BECADC;

  --gold-500:#C8A45A;
  --gold-600:#B58A3A;
  --gold-700:#9A742E;

  --wood-50:#FAF6EF;
  --wood-100:#F3EBDD;
  --wood-200:#E6D8C4;
  --wood-700:#5B3E2A;
  --wood-800:#3E281B;

  --bg: var(--wood-50);
  --bg-elev: rgba(255,255,255,.72);
  --surface: rgba(255,255,255,.78);
  --surface-2: rgba(255,255,255,.62);
  --text:#131516;
  --text-2: rgba(19,21,22,.78);
  --text-3: rgba(19,21,22,.62);
  --border: rgba(35,40,43,.14);

  --link: var(--brand-blue);
  --focus: rgba(76,156,214,.45);

  --radius-xs:10px;
  --radius-sm:14px;
  --radius-md:18px;
  --radius-lg:24px;
  --radius-xl:30px;

  --shadow-xs: 0 1px 1px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.08), 0 18px 48px rgba(0,0,0,.10);
  --shadow-md: 0 8px 24px rgba(0,0,0,.14), 0 24px 60px rgba(0,0,0,.18);

  --container: 1200px;
  --gutter: 18px;
  --header-h: 56px;
  --tabbar-h: 68px;

  --grad-hero: radial-gradient(1100px 680px at 20% 0%, rgba(76,156,214,.22), transparent 60%),
               radial-gradient(900px 520px at 80% 20%, rgba(200,164,90,.24), transparent 60%),
               linear-gradient(180deg, rgba(190,202,220,.35), rgba(250,246,239,.98));
  --grad-wood: linear-gradient(180deg, rgba(243,235,221,.92), rgba(250,246,239,.98));
  --grad-ink: linear-gradient(180deg, rgba(35,40,43,.96), rgba(58,69,86,.96));
}

html[data-theme="dark"]{
  --bg: #3A4556; /* Dein Schieferton */
  --text: #FFFFFF;
  --text-2: rgba(255,255,255,.85);
  --text-3: rgba(255,255,255,.60);
  
  /* Footer & Oberflächen dunkel und deckend machen */
  --grad-wood: linear-gradient(180deg, #23282B 0%, #3A4556 100%); 
  --surface: rgba(35, 40, 43, 0.95);
  --surface-2: rgba(23, 26, 28, 0.80);
  --border: rgba(255, 255, 255, 0.15);
  
  /* Hero-Bereich abdunkeln */
  --grad-hero: linear-gradient(180deg, #23282B 0%, #3A4556 100%);
}
html[data-theme="dark"] .site-footer {
  background: var(--grad-wood);
  border-top: 1px solid var(--border);
}




/* Theme Visibility Helper */
.dark-only { display: none !important; }
html[data-theme="dark"] .dark-only { display: block !important; }
html[data-theme="dark"] .light-only { display: none !important; }

*,
*::before,
*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background: var(--bg);
  overflow-x:hidden;
  line-height:1.55;
  padding-bottom: var(--tabbar-h);
}

@media (min-width: 980px){
  body{ padding-bottom: 0; }
}

img, video, canvas, svg{
  display:block;
  max-width:100%;
  height:auto;
}

a{
  color:var(--link);
  text-decoration:none;
}
a:hover{ text-decoration:underline; }

button, input, select, textarea{
  font:inherit;
  color:inherit;
}

:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.container{
  width: min(var(--container), 100%);
  margin-inline:auto;
  padding-inline: clamp(16px, 4vw, 28px);
}

.stack{ display:grid; gap:16px; }
.stack-sm{ display:grid; gap:10px; }
.stack-lg{ display:grid; gap:26px; }

.section{
  padding: clamp(28px, 6vw, 74px) 0;
}

.section-tight{
  padding: clamp(22px, 4.6vw, 52px) 0;
}

.surface{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.surface-2{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow:hidden;
}

.card-pad{
  padding: clamp(16px, 3vw, 26px);
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(200,164,90,.12);
  color: var(--text-2);
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(76,156,214,.10);
  color: var(--text-2);
  font-weight:600;
  font-size: 12px;
}

.hr{
  height:1px;
  width:100%;
  background: var(--border);
  border:0;
  margin:0;
}

.kicker{
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--text-3);
  font-size: 12px;
}

h1, h2, h3{
  font-family: var(--font-display);
  letter-spacing:.02em;
  margin:0;
}

h1{
  font-size: clamp(34px, 6vw, 64px);
  line-height: 1.05;
}

h2{
  font-size: clamp(26px, 4.4vw, 44px);
  line-height: 1.10;
}

h3{
  font-size: clamp(18px, 3.2vw, 26px);
  line-height: 1.15;
}

p{ margin:0; color: var(--text-2); }
.small{ font-size: 13px; color: var(--text-3); }
.lead{ font-size: clamp(16px, 2.2vw, 19px); color: var(--text-2); }
.muted{ color: var(--text-3); }

.align-center{ text-align:center; }
.align-left{ text-align:left; }
.align-right{ text-align:right; }

.grid{
  display:grid;
  gap: clamp(14px, 2.6vw, 24px);
}

.grid-2{ grid-template-columns: 1fr; }
.grid-3{ grid-template-columns: 1fr; }
.grid-4{ grid-template-columns: 1fr; }

@media (min-width: 860px){
  .grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.split{
  display:grid;
  gap: clamp(16px, 3.2vw, 30px);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 980px){
  .split{ grid-template-columns: 1.1fr .9fr; }
  .split.reverse{ grid-template-columns: .9fr 1.1fr; }
  .split.reverse > :first-child{ order:2; }
  .split.reverse > :last-child{ order:1; }
}


.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  align-items:center;
}
.btn-row.align-center {
  justify-content: center; /* Das sorgt für die mittige Ausrichtung */
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.55);
  color: var(--text);
  text-decoration:none;
  cursor:pointer;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
  box-shadow: var(--shadow-xs);
  max-width: 100%;
  white-space: nowrap;
}

html[data-theme="dark"] .btn:not(.btn-primary) { 
  background: rgba(255,255,255,.1);
  color: #FFFFFF;
}
html[data-theme="dark"] .btn-primary {
  background: linear-gradient(180deg, #C8A45A, #9A742E) !important;
  color: #1a140c !important;
  border: none;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  text-decoration:none;
}

.btn:active{ transform: translateY(0); }

.btn-primary{
  border-color: rgba(200,164,90,.48);
  background: linear-gradient(180deg, rgba(200,164,90,.96), rgba(154,116,46,.96));
  color: #1a140c;
}

.btn-primary:hover{ box-shadow: var(--shadow-md); }

.btn-ghost{
  background: transparent;
  box-shadow:none;
}

.btn-ghost:hover{
  background: rgba(76,156,214,.10);
  box-shadow: var(--shadow-xs);
}

.btn-link{
  padding: 10px 10px;
  border: 0;
  background: transparent;
  box-shadow:none;
  color: var(--link);
}

.icon-btn{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.55);
  display:inline-grid;
  place-items:center;
  cursor:pointer;
  box-shadow: var(--shadow-xs);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}

html[data-theme="dark"] .icon-btn{ background: rgba(35,40,43,.64); }
.icon-btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.input,
.select,
.textarea{
  width: 100%;
  max-width: 100%;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.70);
  color: var(--text);
  padding: 12px 12px;
  outline: none;
}

html[data-theme="dark"] .input,
html[data-theme="dark"] .select,
html[data-theme="dark"] .textarea{ background: rgba(35,40,43,.60); }

.textarea{ min-height: 120px; resize: vertical; }

.field{
  display:grid;
  gap: 8px;
}

.label{
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}

.form{
  display:grid;
  gap: 14px;
}

.form-row{
  display:grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 860px){
  .form-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.table{
  width:100%;
  max-width:100%;
  overflow:hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.table-scroll{
  width:100%;
  overflow:auto;
}

.table table{
  width:100%;
  border-collapse: collapse;
  min-width: 640px;
}

.table th, .table td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align:left;
  vertical-align: top;
  color: var(--text-2);
}

.table th{
  color: var(--text);
  font-weight:700;
  letter-spacing:.02em;
  background: rgba(190,202,220,.20);
}

.hero{
  position:relative;
  background: var(--grad-hero);
  border-bottom: 1px solid var(--border);
  overflow:hidden;
}

.hero-inner{
  padding: clamp(34px, 7vw, 86px) 0;
}

.hero .hero-card{
  background: rgba(255,255,255,.68);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: clamp(18px, 3vw, 30px);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

html[data-theme="dark"] .hero .hero-card{
  background: rgba(18,20,23,.66);
}

.hero-media{
  border-radius: var(--radius-xl);
  overflow:hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  background: rgba(0,0,0,.06);
}

.media{
  border-radius: var(--radius-lg);
  overflow:hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  background: rgba(0,0,0,.05);
}

.media img, .media video{
  width:100%;
  height:auto;
}

.image-panel{
  position:relative;
  border-radius: var(--radius-xl);
  overflow:hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  background: rgba(0,0,0,.05);
  min-height: 220px;
}

.image-panel img{
  width:100%;
  height:100%;
  object-fit:cover;
  min-height: 220px;
}

.image-panel .overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  padding: 18px;
  background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.62));
}

.image-panel .overlay .overlay-box{
  width:100%;
  max-width: 100%;
  background: rgba(0,0,0,.40);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  padding: 14px 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,.92);
}

.image-panel .overlay .overlay-box .overlay-title{
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.12;
  margin:0 0 6px 0;
}

.image-panel .overlay .overlay-box .overlay-text{
  margin:0;
  color: rgba(255,255,255,.80);
}

.carousel{
  position:relative;
}

.carousel-track{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 18px;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.carousel-track::-webkit-scrollbar{ height: 10px; }
.carousel-track::-webkit-scrollbar-thumb{ background: rgba(190,202,220,.45); border-radius: 999px; }
html[data-theme="dark"] .carousel-track::-webkit-scrollbar-thumb{ background: rgba(190,202,220,.20); }

.slide{
  scroll-snap-align: start;
  border-radius: var(--radius-xl);
  overflow:hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  background: rgba(0,0,0,.06);
  min-height: 260px;
}

.slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  min-height: 260px;
}

@media (min-width: 860px){
  .carousel-track{ grid-auto-columns: 70%; }
}

@media (min-width: 1120px){
  .carousel-track{ grid-auto-columns: 52%; }
}

.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar{
  height: var(--header-h);
  display:flex;
  align-items:center;
  background: rgba(255,255,255,.62);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
html[data-theme="dark"] .btn-ghost {
  border: 1px solid rgba(255,255,255,0.4);
}
html[data-theme="dark"] .topbar{
  background: rgba(18,20,23,.62);
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
  color: var(--text);
  text-decoration:none;
}

.brand-mark{
  width: 32px;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.brand-mark img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-name{
  font-family: var(--font-display);
  letter-spacing:.03em;
  font-size: 15px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.nav-desktop{
  display:none;
  align-items:center;
  gap: 18px;
  justify-content:center;
  flex: 1 1 auto;
  min-width: 0;
}

.nav-desktop a{
  color: var(--text-2);
  font-weight: 600;
  font-size: 13px;
  letter-spacing:.04em;
  text-transform: uppercase;
  text-decoration:none;
  padding: 10px 10px;
  border-radius: 999px;
}

.nav-desktop a:hover{
  background: rgba(76,156,214,.10);
  text-decoration:none;
  color: var(--text);
}

.topbar-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}

.mobile-tabbar{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--tabbar-h);
  background: rgba(255,255,255,.82);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 55;
  padding: 0 4px;
}

html[data-theme="dark"] .mobile-tabbar{
  background: rgba(18,20,23,.82);
}

.tab-item{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 10px;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 0;
}

.tab-item .i{
  width: 22px;
  height: 22px;
}

.tab-item:hover, .tab-item.active{
  color: var(--brand-blue);
}

@media (min-width: 980px){
  .nav-desktop{ display:flex; }
  .mobile-tabbar{ display:none; }
}

html[data-layout="desktop"] .nav-desktop{ display:flex; }
html[data-layout="desktop"] .mobile-tabbar{ display:none; }

html[data-layout="mobile"] .nav-desktop{ display:none; }
html[data-layout="mobile"] .mobile-tabbar{ display:flex; }

.mobile-drawer{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.44);
  display:none;
  z-index: 60;
}

.mobile-drawer.open{ display:block; }

.mobile-panel{
  position:absolute;
  top: 0;
  right: 0;
  width: min(380px, 92vw);
  height: 100%;
  background: var(--bg);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  padding: 16px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.mobile-nav{
  display:grid;
  gap: 8px;
  padding-top: 6px;
}

.mobile-nav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration:none;
  max-width:100%;
}

.mobile-nav a:hover{
  background: rgba(76,156,214,.10);
}

.site-main{
  min-height: calc(100vh - var(--header-h));
}

.site-footer{
  border-top: 1px solid var(--border);
  background: var(--grad-wood);
  padding: 40px 0 26px 0;
}

.footer-grid{
  display:grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

@media (min-width: 860px){
  .footer-grid{ grid-template-columns: 2fr 1fr 1fr; }
}

.footer-title{
  font-family: var(--font-display);
  font-size: 18px;
  margin: 0 0 10px 0;
}

.footer-links{
  display:grid;
  gap: 8px;
}

.footer-links a{
  color: var(--text-2);
  text-decoration:none;
  overflow-wrap:anywhere;
}

.footer-links a:hover{
  color: var(--text);
  text-decoration:underline;
}

.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  justify-content:space-between;
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid var(--border);
  color: var(--text-3);
  font-size: 12px;
}

.wrap-anywhere{ overflow-wrap:anywhere; word-break: break-word; }
.no-overflow{ max-width:100%; overflow:hidden; }

.theme-icon .i-moon{ display:none; }
.theme-icon .i-sun { display: none; }
.theme-icon .i-moon { display: inline-block; }

html[data-theme="dark"] .theme-icon .i-sun { display: inline-block; }
html[data-theme="dark"] .theme-icon .i-moon { display: none; }


/* Premium PWA Banner */
.pwa-install-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: min(450px, 92vw);
  z-index: 1000;
  display: none; /* Wird per JS eingeblendet */
  animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp {
  from { transform: translate(-50%, 100%); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

.pwa-card {
  background: var(--surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--gold-500);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 24px;
  text-align: center;
}

.pwa-icon-circle {
  width: 60px;
  height: 60px;
  background: var(--brand-ink);
  border-radius: 18px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
}

.pwa-card h3 {
  font-family: var(--font-display);
  color: var(--text);
  margin-bottom: 8px;
}

.ios-instruction {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(200, 164, 90, 0.1);
  padding: 12px;
  border-radius: var(--radius-md);
  font-size: 14px;
  margin-top: 15px;
}
/* Standardmäßig verstecken (Mobile First) */
.desktop-only {
    display: none !important;
}

/* Ab einer Breite von 768px (PC/Tablet) anzeigen */
@media (min-width: 768px) {
    .desktop-only {
        display: block !important;
    }
    
    /* Optional: Das Grid im Footer auf 4 Spalten erweitern */
    .footer-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
    }
}