/* ===========================
   GLOBAL VARS
=========================== */
:root{
  --page-bg-url: url('/images/background.png');
  --radius: 18px;
  --maxw: 1200px;
  --focus: 0 0 0 3px rgba(31,74,64,.35);

  /* Overlay/Spotlight Tuning */
  --overlay-strength: .85;       /* Light */
  --spotlight-alpha: .06;
  --spotlight-rgb: 31,74,64;   /* deep teal */
  --overlay-rgb: 244,239,230;   /* warm beige overlay */
}

/* Dark-Mode: stärkerer Overlay */
[data-theme="dark"]{
  --overlay-strength: .9;
  --spotlight-alpha: .10;
  --spotlight-rgb: 111,184,166;  /* lighter teal in dark */
  --overlay-rgb: 14,32,29;       /* deep forest */
}



/* ===========================
   THEME TOKENS
=========================== */
[data-theme="light"]{
  --bg:       rgba(244,239,230,.85);
  --bg-soft:  rgba(236,229,214,.85);
  --card:     rgba(255,253,248,.92);
  --footer:   rgba(255,253,248,.92);
  --header:   rgba(255,253,248,1);
  --text:     #1a3530;
  --muted:    #6b7a76;
  --line:     rgba(31,74,64,.12);
  --accent:   #1f4a40;
  --accent-2: #2d6055;
  --glow:     0 0 18px rgba(31,74,64,.18), 0 0 42px rgba(45,96,85,.10);
  --shadow:   0 10px 30px rgba(31,74,64,.08);
}

[data-theme="dark"]{
  --bg:       rgba(14,32,29,.85);
  --bg-soft:  rgba(10,24,22,.85);
  --card:     rgba(20,42,38,.92);
  --footer:   rgba(20,42,38,.92);
  --header:   rgba(28,52,46,1);
  --text:     #ebe7df;
  --muted:    #9eada8;
  --line:     rgba(255,255,255,.08);
  --accent:   #6fb8a6;
  --accent-2: #8ed2bf;
  --glow:     0 0 18px rgba(111,184,166,.35), 0 0 42px rgba(111,184,166,.18);
  --shadow:   0 10px 30px rgba(0,0,0,.45);
}

/* ===========================
   BASE / RESET
=========================== */
*{ box-sizing: border-box; }

html, body{
  margin:0; padding:0;
  scroll-behavior: smooth;
  min-height: 100%;
  overflow-x: clip;
}
@supports not (overflow: clip){
  html, body{ overflow-x: hidden; }
}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  color: var(--text);
  background: transparent; /* wir nutzen die Layer unten */
  position: relative;
 display:flex;
  flex-direction: column;
min-height: 100vh;
}

/* Background stack: Bild + Overlay/Spotlight */
body::before{
  content:"";
  position: fixed; inset:0; z-index:-2; pointer-events:none;
  background-image: var(--page-bg-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateZ(0);
}

body::after{
  content:"";
  position: fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 70% -10%,
      rgba(var(--spotlight-rgb), var(--spotlight-alpha)), transparent 60%),
    linear-gradient(0deg,
      rgba(var(--overlay-rgb), var(--overlay-strength)),
      rgba(var(--overlay-rgb), var(--overlay-strength)));
}
main {
flex:1;
/*  min-height: calc(100vh - 300px);*/

}

/* Footer bleibt unten, aber NICHT fixed (damit er nicht überlappt) */
[data-theme="dark"] body::after{
  background:
    radial-gradient(1200px 600px at 70% -10%,
      rgba(var(--spotlight-rgb), var(--spotlight-alpha)), transparent 60%),
    linear-gradient(0deg,
      rgba(var(--overlay-rgb), var(--overlay-strength)),
      rgba(var(--overlay-rgb), var(--overlay-strength)));
}

img, video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }

/* ===========================
   LAYOUT UTILITIES
=========================== */
.container{ width: min(100% - 2rem, var(--maxw)); margin-inline:auto; z-index:7; }
.grid{ display:grid; gap:1.25rem; z-index:10; }
.section{ padding: clamp(3rem, 5vw, 6rem) 0; position:relative; }
.section.alt{ background: linear-gradient(180deg, var(--bg), var(--bg-soft)); }

.fullheight{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; }
.centered{ display:flex; align-items:center; justify-content:center; text-align:center; }

.muted{ color:var(--muted); }
.pill{
  border:1px solid var(--line); padding:.35rem .65rem; border-radius:999px;
  font-size:.82rem; color:var(--muted);
}
.glass{
  background: linear-gradient(180deg, rgba(31,74,64,.02), rgba(31,74,64,.01));
  border:1px solid var(--line); border-radius: var(--radius);
  backdrop-filter: blur(8px); box-shadow: var(--shadow);
}

.headline-xl{ font-size: clamp(2.2rem, 4.8vw, 4.5rem); line-height:1.05; letter-spacing:-.02em; font-weight:800; z-index:10; }
.headline-lg{ font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height:1.1; letter-spacing:-.02em; font-weight:750; z-index:10; }
.subtle{ font-size: clamp(1rem, 1.6vw, 1.1rem); color: var(--muted); z-index:10; }

.btn, .button{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.9rem 1.2rem; border:1px solid var(--line); border-radius:999px;
  background: linear-gradient(180deg, rgba(31,74,64,.03), rgba(31,74,64,.01));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition:.25s ease; font-weight:600; cursor:pointer;
  color: var(--text);
}
.btn:hover{ transform: translateY(-1px); border-color: rgba(31,74,64,.35); box-shadow: var(--glow); }
.btn:focus-visible{ outline:none; box-shadow: var(--focus); }
.btn.primary{ background: var(--accent); color:#fff; border:none; }
.btn.primary:hover{ background: var(--accent-2); }
[data-theme="dark"] .btn.primary{ color:#0e201d; }

/* ===========================
   HEADER / FOOTER WRAPPER
=========================== */
#footer-placeholder, #header-placeholder{ width:100%; }

.footgrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap:2rem;
  padding:2rem 1rem;
  border-top:1px solid var(--line);
  background: var(--bg-soft);
  color: var(--text);
}
.footgrid h4{ margin:0 0 .5rem; font-weight:600; }
.footgrid a{ color:inherit; font-size:.95rem; }
.footgrid .muted{ font-size:.9rem; }

/* ===========================
   PRIVACY / IMPRESSUM
=========================== */
.scroll-content-row{ max-width:100%; overflow-x: clip; contain: layout paint; }
@supports not (overflow: clip){ .scroll-content-row{ overflow-x: hidden; } }

.scroll-div-privacy-top{
  flex:1; display:flex; flex-direction:column;
  gap: 4em; padding: 4em 1em 1em;
}

.scroll-div-privacy{
  width: min(900px, 100%);
  margin-inline: auto;
  border:1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
  display:flex; flex-direction:column;
  gap: 4em; margin-bottom: 4em;
  padding: 1rem;
  box-sizing: border-box;
}

.scroll-area{
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - 160px);
  padding: 2em;
  -webkit-overflow-scrolling: touch;
}

.text-column{ padding:0; }
.privacy-text{ text-align:left; width:100%; }

#privacy-content{
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
#privacy-content img, #privacy-content video{ max-width:100%; height:auto; }

/* ===========================
   TABLE (horizontal scroll on mobile & desktop)
=========================== */
.table-scroll{
  max-width: 100%;
  overflow-x: auto;                 /* horizontal wischen erlaubt */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.table-scroll table{
  border-collapse: collapse;
  width: max-content;               /* Breite = Inhalt -> Scrollbar */
  min-width: 100%;                  /* min. so breit wie der Viewport */
}
.table-scroll th, .table-scroll td{
  white-space: nowrap;              /* einzeilig, damit Scroll Sinn macht */
  padding: .5rem .75rem;
  text-align: left;
}
.table-scroll thead th{
  position: sticky; top: 0; z-index: 1;
  background: var(--card, #f7f7f7);
}
.table-scroll th:nth-child(2),
.table-scroll th:nth-child(3),
.table-scroll td:nth-child(3),
.table-scroll td:nth-child(2){
  white-space: normal;
  overflow-wrap: anywhere;   /* bricht lange Tokens/Links */
  word-break: break-word;
  hyphens: auto;             /* Silbentrennung (wenn html[lang] gesetzt) */
  max-width: 34rem;          /* optionales Cap */
}

/* Wenn du die 2. Spalte optional umbrechen willst, nimm diesen Block dazu:
.table-scroll th:nth-child(2),
.table-scroll td:nth-child(2){
  white-space: normal;
  word-break: break-word;
  max-width: 34rem;
}
*/

/* ===========================
   REVEAL ANIMATION
=========================== */
.reveal{ opacity:0; transform: translateY(16px); transition:.6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ===========================
   ICONS
=========================== */
.icon-colored{
  width: 20px; height: 20px;
  color: var(--text);
  margin-right: 1em;
  vertical-align: -4px;
}

li{
margin-left:40px;
}

p.marker-white {
  position: relative;
  display: inline-block;
  margin: 0.8em 0;
  padding: .2em .4em;
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  color: var(--mutedu);
/*  color: rgba(0,0,0,1);*/

/*  z-index: 1;*/
  line-height: 1.5;
}

/* SVG Marker-Ebene */
p.marker-white::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--card);   /* <- Markerfarbe hier */
  -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'>\
  <path d=\"M2,12 Q8,10 15,11 T30,12 Q37,13 45,11 T60,12 Q68,13 75,11 T90,12 Q95,13 98,11\" \
        fill=\"none\" stroke=\"black\" stroke-width=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\
</svg>") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'>\
  <path d=\"M2,12 Q8,10 15,11 T30,12 Q37,13 45,11 T60,12 Q68,13 75,11 T90,12 Q95,13 98,11\" \
        fill=\"none\" stroke=\"black\" stroke-width=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\
</svg>") center / 100% 100% no-repeat;
  opacity: .9;
  filter: blur(0.5px);
  border-radius: .4em;
}


/* Animations */
/*
.animate-welcome-zoom, .animate-welcome-slide{ opacity:0.1; }
.animate-welcome-zoom.animate-in{ animation: zoomIn 1s ease-out forwards; }
.animate-welcome-slide.animate-in{ animation: slideUp 1.2s ease-out forwards; animation-delay: .15s; }
@keyframes zoomIn{ from{ transform: scale(.96); opacity:0;} to{ transform: scale(1); opacity:1;} }
@keyframes slideUp{ from{ transform: translateY(14px); opacity:0;} to{ transform: translateY(0); opacity:1;} }
*/