/* =========================================
   1) Design-Tokens & Farb-Variablen (global)
   ========================================= */
:root{
  --bg:#ffffff;
  --fg:#0f172a;
  --muted:#475569;
  --primary:#0d6efd;
  --accent:#0ea5a4;
  --surface:#f8fafc;
  --border:#e2e8f0;

  /* Brand-Farben */
  --brand:#F27849;
  --brand-600:#E46B3F; /* etwas dunkler für Hover */
  --brand-700:#D65A2C; /* noch dunkler für active/focus ring */
}


/* =========================================
   2) Basiselemente, Typografie & Utilities
   ========================================= */
html{ scroll-behavior:smooth; }
body{ color:var(--fg); background:var(--bg); }
.lead-max{ max-width:70ch; }
h2.h1{ line-height:1.2; }
.skill-category{ font-weight:600; color:#475569; } /* dunkel-grau für Listenlabels */


/* =========================================
   3) Navbar (transparent → weiß beim Scroll)
   ========================================= */
.navbar .nav-link:hover { opacity: .8; text-decoration: underline; text-underline-offset: 3px; }

/* Oben (transparent) – Grundlayout */
.navbar.navbar-dark {
  background: transparent !important;
  border-bottom: none !important;
}

/* Nach Scroll (weiß) – Grundlayout */
.navbar.nav-scrolled {
  background: #fff !important;
  border-bottom: 1px solid var(--border) !important;
}

/* STATE-SPEZIFISCHE LINKFARBEN (hohe Spezifität + !important) */
.navbar.navbar-dark .navbar-nav .nav-link,
.navbar.navbar-dark .navbar-nav .nav-link:visited{
  color:#fff !important;
}
.navbar.navbar-dark .navbar-nav .nav-link:hover,
.navbar.navbar-dark .navbar-nav .nav-link:focus{
  color:#fff !important;
  opacity:.85;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.navbar.nav-scrolled .navbar-nav .nav-link,
.navbar.nav-scrolled .navbar-nav .nav-link:visited{
  color: var(--fg) !important; /* #0f172a */
}
.navbar.nav-scrolled .navbar-nav .nav-link:hover,
.navbar.nav-scrolled .navbar-nav .nav-link:focus{
  color: var(--fg) !important;
  opacity:.85;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Brand: Logo bleibt orange; Text wechselt (weiß → dunkel) */
.navbar .navbar-brand svg { display:block; } 
.brand-logo{ color: var(--brand); }        /* SVG nutzt currentColor für Bildmarke */
.navbar.navbar-dark .brand-text { color:#fff !important; }
.navbar.nav-scrolled .brand-text { color: var(--fg) !important; }

/* Fallback: Stelle sicher, dass nur der Text erbt (keine erzwungene Brand-Farbe) */
.navbar .navbar-brand .brand-text { color: inherit !important; }

/* Login-Icon – dezente Farben & Abstand */
.navbar .login-icon{
  margin-left:.75rem;
  display:inline-flex;
  align-items:center;
  line-height:1;
}
.navbar .login-icon i{ font-size:1.25rem; }

/* Transparent (oben): weiß, leicht dezenter */
.navbar.navbar-dark .login-icon{ color:rgba(255,255,255,.85); }
.navbar.navbar-dark .login-icon:hover{ color:#fff; opacity:.95; }

/* Gescrollt (weißer Header): muted grau */
.navbar.nav-scrolled .login-icon{ color:#64748b; }     /* slate-500 */
.navbar.nav-scrolled .login-icon:hover{ color:#475569; }/* slate-600 */

/* Login-Icon: grün, sobald eingeloggt */
#topnav .login-icon.is-auth {
    color: var(--bs-warning) !important; /* Bootstrap-Grün */
}

/* =========================================
   4) Hero (Eyecatcher mit Overlay & Höhe)
   ========================================= */
.hero{
  position: relative; color: #fff;
  height: 857px; min-height: 857px;
  display: flex; align-items: center;
  background: #0b1220 url('../img/lofoten-bg.jpg') center/cover no-repeat fixed;
}
.hero::before{
  position: absolute; content: ""; top:0; left:0; width:100%; height:100%;
  background:#000; opacity:.6; z-index:0;
}
.hero > .container { position: relative; z-index: 1; }


/* =========================================
   5) Abschnitt-Layouts, Karten-Grundstil, Footer
   ========================================= */
.section{ padding:4rem 0; }
.section-alt{ background:var(--surface); }

.shadow-card{
  border:1px solid var(--border);
  border-radius:.75rem;
  background:#fff;
}

.footer{
  background:var(--surface);
  margin-top: 0; /* kein zusätzlicher Abstand nach oben */
}


/* =========================================
   6) Feature-Kacheln (Leistungen/Beispiele)
   ========================================= */
/* Grundstil */
.feature-card{
  border:1px solid var(--border);
  border-radius:.9rem;
  background:#fff;
  padding:1.1rem 1.1rem 1.2rem;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.feature-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(2,8,23,.08);
  border-color:#e5e7eb; /* etwas heller */
}

/* Titel mit Markenlinie */
.feature-card h3{
  display:flex; align-items:center; gap:.45rem;
  margin:0 0 .35rem;
  font-weight:700;
  font-size:1.05rem;  /* dezent größer als body */
  line-height:1.25;
  position:relative;
  padding-bottom:.45rem;
}
.feature-card h3::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:42px; height:3px;
  background: var(--brand);
  border-radius:999px;
  opacity:.9;
}

/* Brandfarbene Icons in Überschriften/Kacheln/Stack-Titeln (gezielt, nicht global) */
.feature-card h3 .bi,
.stack-title .bi,
#publikationen .shadow-card h3 .bi {
  color: var(--brand);
}

/* Text in Cards ruhiger */
.feature-card p{
  margin:0;
  color:#475569;  /* slate-600 */
  font-size:.97rem;
}
.feature-card li{
  margin:0;
  color:#475569;  /* slate-600 */
  font-size:.97rem;
}

/* Optional: kleines Zier-Icon vor Titel (wenn genutzt) */
.feature-card .fi{
  font-style: normal;
  display:inline-block;
  width:1.2rem; text-align:center;
  margin-right:.35rem; opacity:.9;
  color:var(--brand);
}

/* Akzente: Brand-Top-Border & Tinted-Card */
.feature-card.brand-top { border-top: 4px solid var(--brand); }
.feature-card.tint      { background: #FFF7F2; } /* sehr hell, AA-freundlich */


/* =========================================
   7) Portrait & Bildstile (Über mich, Bilder)
   ========================================= */
.figure-portrait img,
.pictureShadow{
  border-radius:12px;
  box-shadow:0 8px 24px rgba(2,8,23,.15);
}

/* Weißer Rahmen fürs Portrait unter dem Titel */
.portrait-frame{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 10px 28px rgba(2,8,23,.12);
  display: inline-block;
}
.portrait-frame img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}


/* =========================================
   8) Buttons (Brand-Varianten & States)
   ========================================= */
/* Outline-Variante in Brand */
.btn-outline-primary{
  color: var(--brand);
  border-color: var(--brand);
}
.btn-outline-primary:hover{
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* Brand-Primary (gefüllt) */
.btn-brand{
  background: var(--brand);
  border: 1px solid var(--brand);
  color: #fff;
}
.btn-brand:hover{
  background: var(--brand-600);
  border-color: var(--brand-600);
  color:#fff;
}
.btn-brand:active{
  background: var(--brand-700);
  border-color: var(--brand-700);
}
.btn-brand:focus-visible{
  box-shadow: 0 0 0 .25rem rgba(242,120,73,.35);
  outline: none;
}

/* Brand-Outline */
.btn-outline-brand{
  background: transparent;
  border: 1px solid var(--brand);
  color: var(--brand);
  font-weight: 700;
}
.btn-outline-brand:hover{
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.btn-outline-brand:focus-visible{
  box-shadow: 0 0 0 .25rem rgba(242,120,73,.35);
  outline: none;
}

/* Brand-Button immer mit weißer Schrift – auch visited */
.btn-brand,
.btn-brand:link,
.btn-brand:visited,
.btn-brand:hover,
.btn-brand:active,
.btn-brand:focus {
  color: #fff !important;
}

/* Publikationen: Button-Text auch bei visited weiß halten */
#publikationen .btn-brand,
#publikationen .btn-brand:link,
#publikationen .btn-brand:visited,
#publikationen .btn-brand:hover,
#publikationen .btn-brand:active,
#publikationen .btn-brand:focus {
  color: #fff !important;
}

/* Dezenter grauer Button (z. B. "Weitere Technologien anzeigen") */
.btn-soft{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.45rem .85rem;
  background:#f3f6f9;                 /* helles, neutrales Grau */
  color:#475569;                      /* leicht grauer Text (muted) */
  border:1px solid var(--border);     /* sehr dezente Linie */
  border-radius:.5rem;                /* normal abgerundet wie andere Buttons */
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease;
}
.btn-soft:hover{
  background:#eef2f6;                 /* minimal dunkler */
  border-color:#d8dee6;
  color:#334155;                      /* etwas satteres Grau beim Hover */
  text-decoration:none;
}
.btn-soft:active{
  background:#e8edf3;
  border-color:#cfd6df;
  color:#334155;
}
.btn-soft:focus-visible{
  outline:0;
  box-shadow:0 0 0 .2rem rgba(15,23,42,.08); /* dezenter Fokus */
}


/* =========================================
   9) Links (Footer, Publikationen, Utility)
   ========================================= */
/* Footer-Links schwarz, mit sichtbarem Hover */
.footer a{
  color: #0f172a;          /* schwarz/dunkel */
  text-decoration: none;
}
.footer a:hover{
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer a:visited{
  color: #0f172a;
}

/* Publikationen & Vorträge – Links ohne Unterstreichung + Brand-Hover */
#publikationen a {
  text-decoration: none;
  border-bottom: 0;
  transition: color .15s ease;
}
#publikationen a:hover,
#publikationen a:focus {
  text-decoration: none;
  color: var(--brand); /* dezenter Brand-Hover */
}
#publikationen a:visited {
  color: inherit; /* keine violette visited-Farbe */
}

/* Underline-freier Link (allgemein), mit Brand-Farbe */
.link-clean,
.link-clean:link,
.link-clean:visited {
  text-decoration: none;
  border-bottom: 0;
  color: var(--brand);
  font-weight: 600;
}
.link-clean:hover,
.link-clean:focus {
  text-decoration: none;
  color: #D65A2C; /* leicht dunklerer Brand-Ton für Hover */
  outline: none;
}


/* =========================================
   10) Icons (Bootstrap Icons & Titelzeilen)
   ========================================= */
.bi { font-size: 1.1rem; } /* keine globale Farbe */
.title-flex{ display:flex; align-items:center; gap:.45rem; } /* H3 mit Icon links */
.stack-title{ display:flex; align-items:center; gap:.45rem; margin:0; font-weight:700; } /* Stack-Kartentitel */


/* =========================================
   11) Sticky CTA & Back-to-Top
   ========================================= */
/* Floating CTA (ausblenden, wenn Kontakt/Footer sichtbar) */
.sticky-cta{
  position:fixed; right:16px; bottom:16px; z-index:1030;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.sticky-cta.is-hidden{
  opacity:0; visibility:hidden; pointer-events:none; transform: translateY(8px);
}

/* Body-Padding nur, wenn CTA sichtbar (verhindert Überdeckung unten) */
body.has-sticky-cta{
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0));
}

/* Back-to-top Button */
.back-to-top{
  position:fixed; bottom:16px; left:16px; display:none; z-index:1030;
}

/* Accordion Focus */
.accordion-button:focus{
  box-shadow:0 0 0 .25rem rgba(13,110,253,.25);
}


/* =========================================
   12) Publikationen-Boxen (Angleichen an Kachelstil)
   ========================================= */
@media (min-width: 768px){
  #publikationen .col-md-6.d-flex { align-items: stretch; } /* gleiche Höhe */
}
#publikationen .shadow-card h3 {
  position: relative;
  padding-bottom: .4rem;
  margin-bottom: .35rem;
  font-weight: 700;
}
#publikationen .shadow-card h3::after{
  content:"";
  position:absolute; left:0; bottom:0; width:40px; height:3px;
  background: var(--brand); border-radius:999px; opacity:.85;
}


/* =========================================
   13) Responsive-Optimierungen (Media Queries)
   ========================================= */
/* Hero auf Mobile smoother & etwas kleiner */
@media (max-width: 768px){
  .hero{
    background-attachment: scroll;
    height: 70vh; min-height: 520px; /* 857px ist mobil zu hoch */
  }
}

/* Off-Canvas (MOBIL) – NUR mobil aktiv */
@media (max-width: 991.98px){ /* < lg */
  .offcanvas,
  .offcanvas .offcanvas-header { background:#fff; }

  .offcanvas .offcanvas-title { color:#0f172a; }

  .offcanvas .nav-link{
    color:#0f172a !important;         /* dunkler Text im Off-Canvas */
    padding:.5rem .25rem;
    border-radius:.5rem;
  }
  .offcanvas .nav-link:hover,
  .offcanvas .nav-link:focus{
    color:#334155 !important;         /* etwas satter im Hover */
    background:#f3f6f9;               /* dezenter Hover-Hintergrund */
    text-decoration:none;
  }

  .offcanvas .btn-close{ filter:none; } /* X sichtbar auf weiß */
}

/* Sektionen auf sehr kleinen Screens kompakter */
@media (max-width: 576px){
  .section { padding: 3rem 0; }
  .sticky-cta{ right:12px; bottom:12px; } /* CTA etwas näher an den Rand */
}

/* Tech-Stack: Listen zweispaltig ab LG + Desktop-Reset für Off-Canvas-UL */
@media (min-width: 992px){
  .stack-col-2 { columns: 2; column-gap: 1.75rem; }
  .stack-col-2 li { break-inside: avoid; }

  /* Desktop (>= lg) – Navbar normal lassen, evtl. geerbte Off-Canvas-Regeln zurücksetzen */
  .offcanvas .nav-link{
    color: inherit !important;        /* erbt wieder vom Navbar-Zustand */
    background: transparent !important;
  }
}


/* =========================================
   14) Letzte Feinschliffe (Spacing-Guards)
   ========================================= */
/* Kein zusätzlicher Leerraum unter dem letzten Abschnitt */
.section:last-of-type{ margin-bottom: 0; }

/* =========================================================
   OFF-CANVAS (mobil) – sicher dunkle Links im #offcanvasNav,
   unabhängig vom Navbar-Zustand (transparent/weiß)
   ========================================================= */
@media (max-width: 991.98px){ /* < lg */
  /* Weißer Hintergrund im Off-Canvas */
  #offcanvasNav.offcanvas,
  #offcanvasNav .offcanvas-header { background:#fff; }

  #offcanvasNav .offcanvas-title { color:#0f172a; }

  /* Stärkere Spezifität als .navbar.navbar-dark .navbar-nav .nav-link */
  #offcanvasNav .navbar-nav .nav-link,
  #offcanvasNav.show .navbar-nav .nav-link,
  #offcanvasNav.showing .navbar-nav .nav-link {
    color:#0f172a !important;
    background: transparent !important;
  }
  #offcanvasNav .navbar-nav .nav-link:hover,
  #offcanvasNav .navbar-nav .nav-link:focus {
    color:#334155 !important;
    background:#f3f6f9 !important;
    text-decoration:none !important;
  }

  /* Schließen-Icon im Off-Canvas sichtbar */
  #offcanvasNav .btn-close { filter:none; }
}

/* =========================================================
   BRAND-TEXT-Farben: du nutzt hier .brand-title statt .brand-text
   – Umschalten je Navbar-Zustand (transparent/weiß)
   ========================================================= */
.navbar.navbar-dark .brand-title { color:#fff !important; }
.navbar.nav-scrolled .brand-title { color: var(--fg) !important; }

/* Bildmarke bleibt orange (currentColor) – falls du sie hier brauchst */
.brand-logo { color: var(--brand); }

/* (Optional) Login-Icon: übernimmt Zustand, bleibt dezent */
.navbar.navbar-dark .login-icon { color: rgba(255,255,255,.85); }
.navbar.nav-scrolled .login-icon { color: #64748b; }
.navbar .login-icon:hover { opacity:.95; }

/* =========================================
   15) Fixed Header Padding (HasFixedHeaderStyle)
   – sorgt dafür, dass Content nicht unter dem
     fixen Header startet (für Seiten mit fixed-top)
   ========================================= */

/* Variante A: explizit aktivieren, wenn der Body die Klasse hat */
body.has-fixed-header{
  padding-top: 64px; /* typische Headerhöhe */
}

/* Variante B: automatisch, wenn ein fixed-top-Header vorhanden ist (moderne Browser mit :has) */
body:has(header.fixed-top){
  padding-top: 64px;
}

/* auf sehr kleinen Screens etwas kompakter */
@media (max-width: 576px){
  body.has-fixed-header,
  body:has(header.fixed-top){
    padding-top: 60px;
  }
}

/* Header immer über dem Inhalt halten */
header.fixed-top{ z-index:1030; }

/* Optional: erste Container-Reihe direkt unter dem Header nicht zusätzlich absetzen */
/* main, .container > .row:first-child { margin-top: 0 !important; } */


/* Social-Row: immer neue Zeile, größere Icons, einheitliche Größe */
.social-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:.75rem;       /* neue Zeile unter dem Text/Portrait/Form */
}

/* Link-Container: klickbare Fläche, Fokus sichtbar */
.social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;              /* einheitliche Kachelgröße */
  height:40px;
  line-height:1;
  text-decoration:none;
  color:#0f172a;           /* Default-Farbe (dunkel) */
  transition: color .15s ease, opacity .15s ease, transform .15s ease;
  border-radius:.5rem;     /* leicht abgerundet, optional */
}
.social-link:focus-visible{
  outline:0;
  box-shadow:0 0 0 .2rem rgba(15,23,42,.15);
}
.social-link:hover{ opacity:.9; transform: translateY(-1px); }

/* Bootstrap-Icons Größe vereinheitlichen */
.social-link .bi{
  font-size:32px;          /* größer als vorher */
}

/* Xing-SVG auf gleiche Größe bringen */
.social-link .icon-xing{
  width:32px;
  height:32px;
  display:block;
}

/* Markenfarben (gewünscht: LinkedIn in Blau) */
.social-link.linkedin{ color:#0A66C2; }      /* LinkedIn Blue */
.social-link.linkedin:hover{ color:#084d96; }

.social-link.github{ color:#0f172a; }        /* dunkel */
.social-link.github:hover{ color:#334155; }

.social-link.docker{ color:#0db7ed; }        /* Docker optional in Blau */
.social-link.docker:hover{ color:#0a9bd0; }

/* Xing-SVG hat eigene Farben im SVG; Link-Kachel bleibt neutral */
.social-link.xing{ color:#0f172a; }          /* nur für Text/Fokus, Icon ist Bild */


/* =========================================================
   Referenzen: Logo-Kacheln
   ========================================================= */

/* Kachel-Layout + sanfter Hover */
.logo-grid .tile{
    border:1px solid rgba(0,0,0,.08);
    border-radius:.75rem;
    padding:.75rem;
    background:#fff;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease;
    height:100%;
}
.logo-grid .tile:hover,
.logo-grid .tile:focus-within{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    border-color:rgba(0,0,0,.14);
    background-color:#fefefe;
}

/* WICHTIG: Zentrierung im Ratio-Inhalt */
.logo-grid .ratio > .logo-box{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    width:100%; height:100%;
}
.logo-grid img{
    max-width:90%; max-height:90%;
    display:block;
    transition:transform .18s ease;
}
.logo-grid .tile:hover img,
.logo-grid .tile:focus-within img{
    transform:scale(1.04);
}

@media (prefers-reduced-motion: reduce){
    .logo-grid .tile, .logo-grid img{ transition:none; }
}