/* =========================================================================
   Design System — Components
   Geteilte Button-Komponenten für ALLE Projekte in diesem Repo (siehe
   Root-CLAUDE.md). Varianten sind nach Farbe benannt (blue/green/teal/rose),
   nicht nach Bedeutung (primary/accent) — welche Farbe die Haupt-CTA-Farbe
   ist, entscheidet der Kontext des jeweiligen Projekts (siehe dessen
   CLAUDE.md), nicht der Klassenname hier.
   Baut ausschließlich auf den semantischen Tokens aus tokens.css auf.
   ========================================================================= */

.btn{
  display:inline-flex;align-items:center;gap:9px;
  font:700 15px/1 var(--font-sans);
  text-decoration:none;cursor:pointer;
  border:none;border-radius:8px;
  padding:15px 26px;
  transition:background-color .15s ease,border-color .15s ease,opacity .15s ease,transform .15s ease;
}
.btn--sm{font:700 13px/1 var(--font-sans);padding:10px 16px;border-radius:6px}

/* ---- solide Varianten --------------------------------------------------- */
.btn--blue{background:var(--colors-blue-1);color:var(--colors-button)}
.btn--blue:hover{background:var(--colors-blue-2)}
.btn--green{background:var(--colors-green-1);color:var(--colors-button)}
.btn--green:hover{background:var(--colors-green-2)}
.btn--teal{background:var(--colors-teal-1);color:var(--colors-button)}
.btn--teal:hover{background:var(--colors-teal-2)}
.btn--rose{background:var(--colors-rose-1);color:var(--colors-button)}
.btn--rose:hover{background:var(--colors-rose-2)}

/* ---- Outline-Varianten --------------------------------------------------
   Basis ist für alle Farben identisch (transparent, Text-/Border-Farbe aus
   Theme-Token) — nur die Hover-Füllfarbe unterscheidet sich. Kein
   dark/light-Suffix: das übernimmt schon [data-theme] auf der Sektion. */
.btn--outline-blue,
.btn--outline-green,
.btn--outline-teal,
.btn--outline-rose{
  background:transparent;color:var(--colors-headline);border:1px solid var(--colors-border);
}
/* -2 statt -1: dieselbe "einen Schritt weiter"-Hover-Logik wie die soliden
   Varianten (.btn--blue:hover etc. gehen auch von -1 auf -2), nicht der
   Basiswert einer anderen Stufe. -1 hier hätte sonst dieselbe Farbe gezeigt,
   die eine solide Variante bereits im Ruhezustand hat. */
.btn--outline-blue:hover{background:var(--colors-blue-2);border-color:var(--colors-blue-2);color:var(--colors-button)}
.btn--outline-green:hover{background:var(--colors-green-2);border-color:var(--colors-green-2);color:var(--colors-button)}
.btn--outline-teal:hover{background:var(--colors-teal-2);border-color:var(--colors-teal-2);color:var(--colors-button)}
.btn--outline-rose:hover{background:var(--colors-rose-2);border-color:var(--colors-rose-2);color:var(--colors-button)}

/* ---------------------------------------------------------------------
   docu.combit.net — Vorschaltseite/Dokuportal-Landingpage.
   Design-Update auf tokens.css/components.css (Root-CLAUDE.md-SSOT) -
   Layout/Struktur/Inhalt bewusst 1:1 aus der Vorlage übernommen, s.
   Kommentar in index.html. Kein core.css-Import (das ist NUR innerhalb
   ll.combit.com geteilt, s. Root-CLAUDE.md) - .container/Font-Setup
   deshalb hier lokal repliziert statt importiert (KEIN .bg-grid mehr -
   wurde ausprobiert, auf User-Wunsch wieder entfernt, s. CLAUDE.md).
   ------------------------------------------------------------------- */

@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/Inter-VariableFont_opsz_wght.woff2') format('woff2-variations');
  font-variation-settings:"opsz" 14;
}

:root{
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{margin:0;font-family:var(--font-sans)}
h1,h2,h3,p{margin:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

body{
  overflow-x:hidden;
  background:var(--colors-background);
  color:var(--colors-body);
}

.container{
  width:90%;
  max-width:1080px;
  margin:20px auto;
  display:flex;
  gap:30px;
  flex-wrap:wrap;
}

.left-column, .right-column{
  display:flex;
  flex-direction:column;
  gap:30px;
}

.left-column{flex:2 1 100%}
.right-column{flex:1 1 100%}

@media (min-width: 768px){
  .left-column{flex:2}
  .right-column{flex:1}
}

.box{
  background:var(--colors-card);
  border-radius:var(--radius-lg);
  padding:20px 20px 25px 20px;
}

.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px;
  width:90%;
  max-width:1080px;
  margin:40px auto 0;
  flex-wrap:wrap;
  gap:10px;
}

.header .logo{display:flex;align-items:center;gap:10px}

.header h1{
  font:700 clamp(26px,4vw,32px)/1.15 var(--font-sans);
  letter-spacing:-.5px;
  margin:0 auto;
  text-align:center;
  flex:1 1 auto;
  color:var(--colors-headline);
}

@media (max-width: 600px){
  .header{flex-wrap:nowrap;flex-direction:row;justify-content:space-between}
  .header h1{font-size:20px;flex:1;margin:0;text-align:center}
  .header .logo, .header .lang-dropdown{flex:0 0 auto}
}

h2{
  font:700 22px/1.2 var(--font-sans);
  letter-spacing:-.3px;
  color:var(--colors-headline);
  margin-bottom:0;
  margin-top:0;
  text-align:left;
}

h3{
  font:700 15px/1.3 var(--font-sans);
  color:var(--colors-headline);
  margin-top:0;
  margin-bottom:15px;
  text-align:left;
}

.button, .bluebutton{
  display:block;
  color:var(--colors-button);
  padding:15px 0;
  margin:5px 0;
  border-radius:8px;
  text-align:center;
  width:100%;
  font:700 15px/1 var(--font-sans);
  box-sizing:border-box;
  transition:background-color .15s ease;
}

/* Bewusst NICHT --colors-green-1/-2: im Dark-Theme sind das ll-green-400/350
   (#a6e62e/#b2eb48) - bei vielen Buttons untereinander zu grell. Lokal eine
   Stufe gedaempft (ll-green-500/400); ll-green-600 war zu olivstichig. */
.button{background:var(--colors-ll-green-500)}
.button:hover{background:var(--colors-ll-green-400)}

.bluebutton{background:var(--colors-blue-1)}
.bluebutton:hover{background:var(--colors-blue-2)}

.box .two-columns{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

.box .column{
  flex:1 1 300px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:0 10px;
}

.box .column h3{
  margin:5px 0 5px 5px;
  color:var(--colors-headline);
  font-size:15px;
  text-align:left;
}

.footer{
  text-align:center;
  padding:20px;
  font:400 13px/1.5 var(--font-sans);
  color:var(--colors-muted);
}
.footer a{color:var(--colors-muted);transition:color .15s ease}
.footer a:hover{color:var(--colors-blue-1)}

/* ---- Sprach-Dropdown (1:1 Optik aus startcenter/getting-started -
   Root-CLAUDE.md-SSOT deckt nur tokens/components/layout ab, dieses
   Komponenten-CSS selbst ist projektlokal, wie in jedem der Templates
   dort auch). ---- */
.lang-dropdown{position:relative}
.lang-dropdown__trigger{
  display:flex;align-items:center;gap:6px;
  background:transparent;border:none;border-radius:6px;
  padding:6px;cursor:pointer;
  transition:background-color .15s ease;
}
.lang-dropdown__trigger:hover{background:color-mix(in srgb, var(--colors-card) 50%, transparent)}
.lang-dropdown__flag{border-radius:3px;display:block}
.lang-dropdown__chevron{width:14px;height:14px;color:var(--colors-muted)}
.lang-dropdown__menu{
  position:absolute;top:calc(100% + 6px);right:0;min-width:160px;
  background:color-mix(in srgb, var(--colors-popover) 96%, transparent);
  backdrop-filter:blur(10px);
  border:1px solid var(--colors-border-subtle);border-radius:var(--radius);
  box-shadow:0 12px 20px -4px color-mix(in srgb, var(--colors-shadow) 16%, transparent),
             0 4px 8px -2px color-mix(in srgb, var(--colors-shadow) 12%, transparent);
  padding:6px;list-style:none;margin:0;z-index:20;
}
.lang-dropdown__menu[hidden]{display:none}
.lang-dropdown__menu li a{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;
  font:500 14px var(--font-sans);color:var(--colors-body);
  transition:background-color .15s ease;
}
.lang-dropdown__menu li a:hover{background:var(--colors-surface)}
.lang-dropdown__menu li a img{border-radius:3px}
.lang-dropdown__menu li[aria-selected="true"] a{color:var(--colors-blue-1);font-weight:700}