/* =========================
   FreedFolio – Base Styles
   ========================= */
:root{
  --bg:#0f1115;
  --card:#161a21;
  --txt:#e7ecf7;
  --muted:#a7b0c0;
  --acc:#18c77b;      /* Hauptakzent (grün) */
  --acc2:#4cc9f0;     /* Sekundärakzent (blau) */
  --line:#1f2430;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Helvetica,Arial,sans-serif;
  color:var(--txt);
  background:linear-gradient(180deg,#0b0d12,#121622);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Container */
.ff{}
.wrap{max-width:1100px;margin:0 auto;padding:20px}

/* Topbar (dünner Streifen + kleines Logo rechts) */
.topbar{
  height:18px;
  background:linear-gradient(90deg,var(--acc) 0%,#0ba06a 100%);
  display:flex;align-items:center;
  padding:0 10px;
  border-bottom:1px solid rgba(0,0,0,.15);
}
.top-logo{
  margin-left:auto;
  height:14px;width:auto;display:block;
  opacity:.75;filter:brightness(0) invert(1);
  transition:opacity .2s ease;
}
.top-logo:hover{opacity:1}

/* Headings & Text */
.h1{font-size:clamp(28px,4vw,44px);line-height:1.15;margin:10px 0 8px}
h2{font-size:clamp(22px,3vw,30px);margin:18px 0 10px}
h3{font-size:clamp(18px,2.4vw,22px);margin:8px 0}
p{margin:0 0 12px}
.lead{color:var(--muted);font-size:clamp(16px,2.2vw,18px)}
.muted{color:var(--muted)}

/* Badges & Buttons */
.badge{
  display:inline-block;background:#12221b;color:#a9f5cd;
  border:1px solid #1f3b2c;border-radius:999px;
  padding:6px 10px;font-weight:700;font-size:12px;letter-spacing:.3px
}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 16px;border-radius:10px;background:var(--acc);color:#0a1212;
  font-weight:700;text-decoration:none;box-shadow:0 8px 24px rgba(24,199,123,.2)
}
.btn.alt{
  background:transparent;color:var(--txt);border:1px solid #2a3140;box-shadow:none
}

/* Layout Sections */
.hero{padding:32px 0}
hr{border:none;border-top:1px solid var(--line);margin:22px 0}

/* Cards & Grids */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
}
.grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}

/* Utility */
.note{
  background:#121a16;border:1px dashed #204b34;border-radius:10px;
  padding:12px;margin-top:8px
}

/* Footer */
.footer{
  border-top:1px solid var(--line);
  background:#0d1016;
  color:var(--muted);
  padding:22px 0;
}
.footer a{color:var(--txt);text-decoration:none}
.footer a:hover{text-decoration:underline}

/* Optional: Brand-Reihe (falls im Hero benutzt) */
.brand-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.brand-logo{height:28px;width:auto;display:block}
.brand-name{font-weight:800;letter-spacing:.2px}

/* Links, Lists */
a{color:var(--acc2);text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{margin:0 0 12px 18px}

/* Images */
img{max-width:100%;height:auto}

/* Responsive Tweaks */
@media (max-width:900px){
  .wrap{padding:16px}
}

/* Optional: Codelinks/Codeblocks minimal */
code,kbd,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,"Roboto Mono",monospace}
pre{
  background:#121722;border:1px solid #22283a;border-radius:10px;
  padding:12px;overflow:auto
}

/* Small helper for section spacing if needed */
.section{padding:24px 0}
/* ==== OVERRIDES (am Ende der Datei einfügen) ==== */

/* 1) Topbar wieder nur als dünner grüner Akzent */
.topbar{
  height:6px !important;
  background:linear-gradient(90deg,var(--acc) 0%,#0ba06a 100%) !important;
  border-bottom:1px solid rgba(0,0,0,.2) !important;
  padding:0 !important;
  display:block !important;
}
.top-logo{ display:none !important; } /* falls noch vorhanden, ausblenden */

/* 2) Brand-Zeile mit Logo LINKS auf dunklem Hintergrund */
.brand-header{
  display:flex; align-items:center; gap:10px;
  padding:12px 0 8px;
}
.brand-logo{
  height:64px; width:auto; display:block;
  /* kein Filter, Logo bleibt grün auf dunkel */
}
.brand-name{
  font-weight:800; letter-spacing:.2px;
}

/* 3) Seitenabstände (Gutters) links/rechts wieder herstellen */
.wrap{
  max-width:1100px;
  margin:24px;
  padding:24px 24px;   /* links/rechts Luft */
}
@media (max-width:900px){
  .wrap{ padding:16px; }
}
/* ==== OVERRIDES: Abstände + Branding (füge ganz unten ein) ==== */

/* Dünner grüner Akzent oben */
.topbar{
  height:6px !important;
  background:linear-gradient(90deg,var(--acc) 0%,#0ba06a 100%) !important;
  border-bottom:1px solid rgba(0,0,0,.2) !important;
  padding:0 !important;
}

/* Brand: nur Logo links, ohne Text */
.brand-header{
  display:flex; align-items:center; justify-content:flex-start;
  padding:12px 0 8px;
}
.brand-logo{
  height:64px !important;   /* deine gewünschte Höhe */
  width:auto; display:block;
}
.brand-name{ display:none !important; }  /* falls irgendwo noch vorhanden */

/* >>> SEITENABSTÄNDE (links/rechts) WIEDERHERSTELLEN <<< */
.ff > .wrap,
.footer .wrap{
  max-width:1100px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:24px !important;
  padding-right:24px !important;
}

/* etwas Luft innerhalb der Inhalte */
.hero{ padding:32px 0 !important; }
.section{ padding:24px 0 !important; }

/* Sicherheitshalber: nichts klemmt am Rand */
body{ overflow-x:hidden; }
/* ==== HARD OVERRIDE: feste Seitenabstände/Gutters ==== */
/* 1) Primärer Container: alles mittig, mit links/rechts 24px Luft */
body .ff > .wrap{
  max-width:1100px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:24px !important;
  padding-right:24px !important;
  box-sizing:border-box !important;
}

/* 2) Falls .wrap irgendwo fehlt/übersprungen wird: 
      Erzwinge dieselben Abstände für direkte Kinder von .ff */
body .ff > section,
body .ff > div:not(.footer){
  max-width:1100px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:24px !important;
  padding-right:24px !important;
  box-sizing:border-box !important;
}

/* 3) Footer-Container bekommt ebenfalls saubere Gutters */
body .footer .wrap{
  max-width:1100px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:24px !important;
  padding-right:24px !important;
  box-sizing:border-box !important;
}

/* 4) Sicherheitshalber Kollisionen entschärfen */
html, body{ overflow-x:hidden; }