/* len9one1 CCC theme — cleaned */

/* ---------- Farben & Basics ---------- */
:root{
  --bg:#000;
  --fg:#c7f784;          /* neon-green */
  --muted:#7fbf7f;
  --accent:#00ff88;
  --link:#9aff9a;
  --card:#0a0f0a;
  --grid:#0b2f0b;
}

*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

/* --- Fix für Mobile Overflow --- */
html,
body{
  height:100%;
  width:100%;
  max-width:100%;
  margin:0;
  overflow-x:hidden;   /* horizontales Scrollen verhindern */
}

/* Desktop-Zoom: Seite wirkt wie 90%, Browser bleibt auf 100% */
@media (min-width:1024px){
  html{
    zoom:0.9;
  }
}

.card.project-card{
  cursor:default;
}

/* Haupt-Content-Bereich (Home + Projektseiten) */
.page,
.project-page{
  max-width:1100px;
  margin:0 auto;
  padding:40px 16px 60px;   /* gleicher Rahmen für alle Seiten */
}

@media (min-width:900px){
  .page,
  .project-page{
    padding-top:24px;   /* statt 110px — wirkt viel cleaner */
  }
}

/* Breadcrumb-Linie */
.breadcrumb{
  display:block;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
}

/* Bilder dürfen nie breiter als das Display sein */
img{
  max-width:100%;
  height:auto;
  display:block;
}

body{
  margin:0;
  background:
    radial-gradient(1000px 600px at 20% 10%, rgba(0,255,100,.05), transparent 60%),
    radial-gradient(800px 500px at 80% 90%, rgba(0,255,160,.05), transparent 60%),
    var(--bg);
  color:var(--fg);
  font:16px/1.55 ui-monospace,Menlo,Consolas,monospace;
  text-shadow:0 0 2px rgba(0,255,120,.25);

  /* NEU: Layout-Gerüst, damit Footer unten klebt */
  display:flex;
  flex-direction:column;
}

a{color:var(--link);text-decoration:none}
a:hover{filter:brightness(1.15)}

/* ---------- Header / Nav ---------- */

.header{
  position:sticky;
  top:0;
  z-index:10;

  display:flex;
  justify-content:center;    /* Nav mittig */
  align-items:center;

  padding:10px 10px 8px 12px;  /* etwas schlanker als vorher */
  background:#020402cc;
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--grid);
  box-shadow:0 0 20px rgba(0,255,120,.06);
  flex:0 0 auto;
}

/* Logo links "andocken" ohne die Nav zu verschieben */
.brand{
  position:absolute;
  left:16px;
  display:flex;
  align-items:center;
  gap:10px;
  letter-spacing:.5px;
  min-width:0;
}

.brand img{
  width:26px;
  height:26px;
  filter:drop-shadow(0 0 6px rgba(0,255,120,.6));
}
.brand b{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Nav mittig im Header */
.nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:2px;   /* feinjustieren, damit es zur Mitte passt */
}

/* Buttons oben */
.nav a{
  min-width:130px;
  height:34px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:14px;
  letter-spacing:0.6px;
  padding:0;

  background:#000;
  border:1px solid var(--grid);
  border-radius:8px;
  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    transform .15s ease;
}

.nav a:hover{
  border-color:var(--accent);
  background:#071407;
  box-shadow:0 0 12px rgba(0,255,120,.28);
  transform:translateY(-1px);
}

.nav .ghost{background:transparent}

.menu-toggle{
  display:none;            /* nur Desktop: versteckt */
  margin-left:10px;
  border:1px solid var(--grid);
  background:transparent;
  color:var(--fg);
  padding:6px 10px;
  border-radius:10px;
}

/* Mittelteil */
.container{
  flex:1 0 auto;
  max-width:980px;
  margin:12px auto;
  padding:0 18px;
}

/* Footer unten */
footer.footer-custom{
  flex:0 0 auto;
}

.footer-clock {
  text-align: center;
  margin-bottom: 6px;
  font-size: 0.9rem;
  opacity: 0.85;
  color: var(--fg);
  letter-spacing: 0.05em;
  text-shadow: 0 0 4px rgba(0,255,120,0.35);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  letter-spacing:.5px;
  min-width:0;
  flex:1;              /* <-- NEU: nimmt links Raum ein */
}

.brand img{
  width:26px;
  height:26px;
  filter:drop-shadow(0 0 6px rgba(0,255,120,.6));
}
.brand b{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.nav{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:6px;   /* falls du 10px drin hattest → etwas runterdrehen */
}

/* Einheitliche Größe für Nav-Buttons */
/* Compact UI */

.nav a{
  min-width:137px;
  height:30px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:13px;
  letter-spacing:0.6px;
  padding:0;

  /* Korrektes Design */
  background:#000;                  /* rein schwarz */
  border:1px solid var(--grid);
  border-radius:8px;                /* leicht eckiger */
  
  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    transform .15s ease;
}

.nav a:hover{
  border-color:var(--accent);
  background:#071407;               /* dezenter hover tint */
  box-shadow:0 0 12px rgba(0,255,120,.28);
  transform:translateY(-1px);
}

.nav .ghost{background:transparent}

.menu-toggle{
  display:none;
  margin-left:10px;
  border:1px solid var(--grid);
  background:transparent;
  color:var(--fg);
  padding:6px 10px;
  border-radius:10px;
}

/* ---------- Hero mit Illustration & Submenu ---------- */

.hero{
  padding-top:8px;
}

.hero-inner{
  max-width:980px;
  margin:0 auto;
  padding:0 18px;
  display:flex;
  flex-direction:column;      /* alles untereinander */
  align-items:center;         /* mittig ausrichten */
  justify-content:flex-start;
  gap:24px;                   /* Abstand zwischen Titel & Bild */
}

.hero-copy{
  text-align:center;
  max-width:700px;
  margin:0 auto;
  padding-left:0;
}

.hero-tags{
  margin:0 0 12px 0;
  color:var(--muted);
  letter-spacing:0.12em;
  font-size:0.9rem;
  text-align:center;   /* wichtig: zentriert */
}

.hero-desc{
  margin:0;
  color:var(--muted);
  max-width:32rem;
  line-height:1.5;
}

/* rechte Seite: dein Art-Frame */

.hero-art{
  position:relative;
  display:inline-block;
  margin:0 auto 16px auto;    /* sauber mittig */
  padding:10px 16px 14px;
  border-radius:20px;
  background:radial-gradient(circle at 20% 0%,rgba(0,255,120,.09),transparent 60%);
  box-shadow:
    0 0 22px rgba(0,255,120,.30),
    0 0 60px rgba(0,255,120,.16);
  border:1px solid rgba(0,255,120,.22);
}

.hero-art::before{
  content:'';
  position:absolute;
  inset:-14px;
  border-radius:26px;
  border:1px dashed rgba(0,255,140,.16);
  opacity:.6;
  pointer-events:none;
}

.hero-art img{
  display:block;
  max-width:300px;
  height:auto;
  filter:
    drop-shadow(0 0 12px rgba(0,0,0,.7))
    drop-shadow(0 0 18px rgba(0,255,120,.25));
}

/* kleines Label oben links im Frame */
.hero-badge{
  position:absolute;
  top:8px;
  left:18px;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
  opacity:.9;
}

/* Submenu unter dem Hero */
.submenu{
  width:100%;
  max-width:720px;
  margin:40px auto 16px auto;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
}

/* ---------- Cards / Grid ---------- */

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px;
  max-width:960px;

  /* nach unten schieben */
  margin:40px auto 0 auto;  /* vorher: 0 auto */
}

@media (min-width:900px){
  .grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:24px;
  }
  .grid .card{
    width:100%;
    max-width:none;
    margin:1.2rem 0;
  }
}

/* Kontakt-Card unten: gleiche Breite wie Grid */
.card.contact-card{
  max-width:960px;
  margin:60px auto 0 auto;  /* vorher 40px */
  text-align:center;
}

/* Footer: gleiche Breite */
footer.footer-custom{
  max-width:960px;
  margin:48px auto 24px auto;
  text-align:center;
  color:var(--muted);
  font-size:0.9rem;
  opacity:0.8;
  padding:0;
}

.card{
  position:relative;
  margin:1.2rem;
  padding:1rem;
  border:1px solid var(--grid);
  border-radius:8px;
  background:rgba(0,255,0,0.02);
  overflow:hidden;
  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    transform .2s ease;
}

/* macht eine Card klickbar, wenn sie ein <a> ist */
a.card{
  display:block;          /* ganze Fläche klickbar */
  color:var(--fg);        /* Standard-Textfarbe */
  text-decoration:none;   /* keine Unterstreichung */
}

a.card:hover{
  filter:none;            /* kein Standard-Link-Hover */
}

/* Spezieller Pulse-Highlight für ausgewählte Projektkarten (z.B. Cars & Coffee) */
.card.project-card.highlight-pulse{
  animation:pulseGlow 2.2s ease-in-out infinite;
}

/* sanfter Neon-Puls */
@keyframes pulseGlow{
  0%{
    box-shadow:0 0 0px rgba(0,255,90,0.0);
  }
  50%{
    box-shadow:
      0 0 14px rgba(0,255,100,.45),
      0 0 28px rgba(0,255,100,.25);
  }
  100%{
    box-shadow:0 0 0px rgba(0,255,90,0.0);
  }
}

/* Textzentrum für COMING SOON + andere Hinweise */
/* Überschrift in jeder Projektkarte zentrieren + Unterstrich */
.project-card h3{
  text-align:center;
  width:100%;
  margin:0 0 12px 0;
  position: relative;
  padding-bottom: 8px;   /* Platz für die Linie */
}

.project-card h3::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 60%;             /* Länge der Linie */
  height: 1px;
  background: rgba(0,255,120,0.25);
  transform: translateX(-50%);
  box-shadow: 0 0 6px rgba(0,255,120,0.25);
}

/* Beschreibung bleibt linksbündig */
.project-card p{
  text-align:left;
  margin-top:4px;
}

/* Textzentrum für COMING SOON + andere Hinweise */
.soon {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;

  font-size: 1.05rem;
  letter-spacing: 0.04em;
  margin-top: 12px;
  opacity: 0.9;

  animation: soonPulse 2.8s ease-in-out infinite;
}

@keyframes soonPulse {
  0%   { opacity: 0.65; text-shadow: 0 0 2px rgba(0,255,120,.25); }
  50%  { opacity: 1;    text-shadow: 0 0 6px rgba(0,255,160,.45); }
  100% { opacity: 0.65; text-shadow: 0 0 2px rgba(0,255,120,.25); }
}

/* weicher, kreisförmiger Glow im Inneren */
.card::before{
  content:'';
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 20% 0%, rgba(0,255,150,.22), transparent 55%),
    radial-gradient(circle at 80% 100%, rgba(0,255,120,.18), transparent 55%);
  opacity:0;
  transform:scale(.8);
  pointer-events:none;
  mix-blend-mode:screen;
  transition:opacity .35s ease, transform .35s ease;
}

/* Hover-Effekt NUR auf Geräten mit echter Maus */
@media (hover: hover) and (pointer: fine){
  .card:hover{
    border-color:var(--accent);
    background:rgba(0,255,60,0.05);
    box-shadow:
      0 0 12px rgba(0,255,90,.35),
      0 0 32px rgba(0,255,120,.18);
    transform:translateY(-3px);
  }
  .card:hover::before{
    opacity:1;
    transform:scale(1);
  }
}

.card.touch-glow,
.submenu a.touch-glow{
  border-color:var(--accent);
  background:rgba(0,255,60,0.05);
  box-shadow:
    0 0 12px rgba(0,255,90,.35),
    0 0 32px rgba(0,255,120,.18);
  transform:translateY(-3px);
}

.card.touch-glow::before{
  opacity:1;
  transform:scale(1);
}
.submenu a.touch-glow::before{
  opacity:1;
}

/* ---------- Sonstiges ---------- */

.small{font-size:.9em;color:var(--muted)}
.btn{
  display:inline-block;
  padding:10px 14px;
  border:1px solid var(--grid);
  border-radius:10px;
  background:linear-gradient(180deg,#071207,#081808);
  color:var(--fg);
}
pre,code{
  background:#061206;
  border:1px solid var(--grid);
  padding:.4em .6em;
  border-radius:8px;
  white-space:pre-wrap;
  word-wrap:break-word;
  overflow-x:auto;
}

kbd{
  border:1px solid var(--grid);
  border-bottom-width:2px;
  background:#020902;
  padding:2px 6px;
  border-radius:6px;
}

/* Scanline / Glitch */
.scanlines::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0) 0 2px,
    rgba(0,255,140,.03) 2px 3px
  );
  mix-blend-mode:overlay;
  opacity:.35;
}
.glitch{position:relative;display:inline-block}
.glitch::after,
.glitch::before{
  content:attr(data-text);
  position:absolute;
  left:0;
  top:0;
  width:100%;
  overflow:hidden;
}
.glitch::before{
  left:1px;
  text-shadow:-1px 0 #00ffa0;
  clip-path:polygon(0 2%,100% 2%,100% 46%,0 46%);
}
.glitch::after{
  left:-1px;
  text-shadow:1px 0 #00ffea;
  clip-path:polygon(0 54%,100% 54%,100% 98%,0 98%);
}

/* ---------- Mobile-Fix ---------- */
@media (max-width:640px){

  /* Weniger Top-Abstand für Inhalte auf Mobile */
  .page,
  .project-page{
    padding-top:48px;        /* statt 80px */
  }

  /* Header + Brand + Menu-Button */
  .header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 16px;
    background:#020402ee;
    backdrop-filter:blur(8px);
    position:sticky;
    top:0;
    z-index:20;
  }

  .brand{
    position:static;
  }

  .menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--grid);
    background:rgba(0,0,0,0.4);
    padding:6px 12px;
    border-radius:10px;
    font-size:15px;
  }

  /* Dropdown-Navigation: schmaler & weiter rechts */
  .nav{
    display:none;
    position:absolute;
    top:60px;              /* direkt unter dem Header */
    right:8px;             /* näher an den Rand */
    min-width:155px;       /* SCHMALER */
    max-width:190px;
    width:auto;

    flex-direction:column;
    gap:8px;
    padding:8px 8px 10px;

    background:rgba(0, 8, 0, 0.9);
    border-radius:14px;
    border:1px solid rgba(0,255,120,.18);
    box-shadow:0 0 10px rgba(0,255,120,.18);
    backdrop-filter:blur(10px);
    z-index:25;
  }

  .nav.open{
    display:flex;
  }

  .nav a{
    width:100%;
    min-width:0 !important;       /* überschreibt Desktop */
    max-width:160px;              /* zwingt schmal */
    text-align:center;
    padding:6px 10px !important;  /* kompakt */
    background:#020902;
    border:1px solid var(--grid);
    border-radius:10px;
    box-shadow:none;
    font-size:14px;
    letter-spacing:0.06em;
    display:flex;
    justify-content:center;
  }

  .nav a + a{
    margin-top:6px;
  }

  .nav a:hover{
    background:#041504;
    border-color:var(--accent);
    box-shadow:0 0 8px rgba(0,255,120,.22);
    transform:translateY(-1px);
  }
}
  
  /* Hero + Layout auf Mobil untereinander */
  .hero{
    padding-top:8px;
  }

  .hero-inner{
    flex-direction:column;
    text-align:center;
    gap:24px;
    max-width:100%;
    padding:0 16px;
  }

  .hero-copy{
    max-width:100%;
    padding-left:0;
  }

  .hero-art img{
    max-width:260px;
  }

  .hero-art{
    margin-bottom:32px;
  }

  .hero-tags{
    text-align:center;
    padding:0 16px;
    font-size:0.8rem;
    line-height:1.4;
    letter-spacing:0.09em;
    white-space:normal;
  }

  .submenu{
    max-width:100%;
    margin-top:20px;
    gap:8px;
  }

  .submenu a{
    padding:0.45rem 0.9rem;
  }

  .grid{
    max-width:100%;
    padding:0 14px;
  }

  .card.contact-card{
    max-width:100%;
    margin:40px 14px 0 14px;
  }

  footer.footer-custom{
    max-width:100%;
    margin:60px auto 30px auto;
    padding:0 14px;
  }
}
/* ---------- Tap-Glow für Cards (Desktop + Mobile) ---------- */

.card:active{
  border-color:var(--accent);
  background:rgba(0,255,60,0.05);
  box-shadow:
    0 0 16px rgba(0,255,90,.45),
    0 0 40px rgba(0,255,140,.28);
  transform:translateY(-3px);
}

.card:active::before{
  opacity:1;
  transform:scale(1);
}

/* Submenu-Buttons dürfen auch kurz aufpoppen */
.submenu a:active{
  transform:scale(.97);
  box-shadow:0 0 16px rgba(0,255,140,.45);
}

/* ---------- Projekte-Seite: Grid mittig & responsiv ---------- */

/* Basis: Flex-Layout, alle Karten zentriert */
.projects-page .grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;      /* jede Reihe zentriert */
  gap:24px;                    /* Abstand zwischen den Karten */
  max-width:960px;
  margin:40px auto 0;
  padding:0;
}

/* Karten im Projects-Grid: keine extra Außen-Margins, Breite steuerbar über flex-basis */
.projects-page .card{
  margin:0;                    /* sonst doppelte Abstände (gap + margin) */
  flex:0 1 300px;              /* Zielbreite Desktop ≈ 3 Spalten */
}

/* Mobile: 1 Spalte, volle Breite */
@media (max-width:640px){
  .projects-page .grid{
    justify-content:center;
  }
  .projects-page .card{
    flex:1 1 100%;
  }
}

/* Tablet / Desktop: angenehme 2–3 Spalten, automatisch */
@media (min-width:900px){
  .projects-page .card{
    flex:0 1 310px;            /* ca. 3 Karten pro Reihe, zentriert */
  }
}


}

/* ---------- Center-Wrap für Login & andere Middle-Pages ---------- */
/* Container + Center-Wrap: Inhalt vertikal zentriert, aber ohne Extra-Höhe */
.container.center-wrap{
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin:0 auto;
  padding:24px 18px;
}

/* (falls du .center-wrap noch irgendwo ohne .container brauchst:) */
.center-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* Login-Titel zentrieren */
.login-title{
  margin:0 0 18px;
  text-align:center;
}

/* Login-Card sauber mittig */
.login-card{
  margin:0 auto;
  max-width:420px;
  text-align:left;
}
/* ---------- Mobile Tap-Glow Fix (iOS / Touch) ---------- */
/* NICHTS oben ändern – nur diesen Block ans Ende hängen */

@media (hover:none) and (pointer:coarse){

  /* Karten auf Touch als "interaktiv" markieren, damit :active sicher greift */
  .card{
    cursor:pointer;
  }

  /* Starker Glow für Touch: gilt sowohl für :active als auch für JS-touch-glow */
  .card:active,
  .card.touch-glow{
    border-color:var(--accent) !important;
    background:rgba(0,255,60,0.08) !important;
    box-shadow:
      0 0 16px rgba(0,255,90,.6) !important,
      0 0 40px rgba(0,255,140,.4) !important;
    transform:translateY(-3px) !important;
  }

  .card:active::before,
  .card.touch-glow::before{
    opacity:1 !important;
    transform:scale(1) !important;
  }
}

/* --- PROJECT CARDS: active vs. disabled ------------------- */

/* alle Projekt-Karten, die Links sind, sollen klickbar wirken */
.card.project-card{
  cursor:pointer;
}

/* aber wirklich "deaktivierte" Karten wieder entschärfen */
.card.project-card.disabled{
  cursor:default;
  opacity:0.45;
  pointer-events:none;   /* nicht anklickbar */
}