/* Standalone styles for the Pentesting landing page */

/* Basic Reset and Body Styles */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* CSS Variables for light and dark theme */
:root {
    --header-height: 90px;
    --snap-offset: var(--header-height, 140px);
    --page-header-padding-left-dynamic: 0px;
    --final-logo-top: 0px;
    --final-logo-left: 20px;
    --final-logo-width: 150px;
    --final-logo-height: 70px;
    --main-bg-color: #FFFFFF;
    --secondary-bg-color: #F9F9F9;
    --text-color-primary: #2D2D2D;
    --text-color-secondary: #707070;
    --text-color-headings: #2D2D2D;
    --text-color-headings-h3: #2D2D2D;
    --border-color: #C0C0C0;
    --border-color-light: #E0E0E0;
    --link-box-bg: #F9F9F9;
    --logo-wrapper-bg: #FFFFFF;
    --logo-segment-default-fill: black;
    --burger-menu-bg: #FFFFFF;
    --burger-menu-border: #E0E0E0;
    --burger-menu-item-hover-bg: #F0F0F0;
    --burger-menu-active-bg: #E0E0E0;
    --burger-submenu-bg: #F9F9F9;
    --burger-submenu-border-top: #E0E0E0;
    --burger-submenu-item-text: #2D2D2D;
    --burger-submenu-item-hover-bg: #E9E9E9;
    --submenu-demo-left-bg: #F9F9F9;
    --submenu-demo-right-bg: #F9F9F9;
    --submenu-sublink-text: #2D2D2D;
    --submenu-sublink-border: #C0C0C0;
    --submenu-sublink-hover-bg: #FFFFFF;
    --nav-label-text: #2D2D2D;
    --nav-label-hover-bg: #F0F0F0;
    --nav-label-hover-text: #2E88F1;
    --nav-label-active-text: #2E88F1;
    --footer-border-top: #C0C0C0;
    --footer-link-text: #707070;
    --footer-copyright-text: #AAAAAA;
    --button-bg: #2E88F1;
    --button-text: #FFFFFF;
    --button-border: transparent;
    --shadow-color-light: rgba(45,45,45,0.1);
    --shadow-color-dark: rgba(45,45,45,0.2);
    --grid-pattern-color: rgba(0, 0, 0, 0.04);
    --octagon-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M10 0 L30 0 L40 10 L40 30 L30 40 L10 40 L0 30 L0 10 Z' stroke-width='1' fill='none' stroke='black' stroke-opacity='0.04'/%3E%3C/svg%3E");
}

/* Dark Theme Variables */
.dark-theme {
    --main-bg-color: #000000;
    --secondary-bg-color: #3A3A3A;
    --text-color-primary: #F9F9F9;
    --text-color-secondary: #C0C0C0;
    --text-color-headings: #FFFFFF;
    --text-color-headings-h3: #F9F9F9;
    --border-color: #505050;
    --border-color-light: #454545;
    --link-box-bg: #3A3A3A;
    --logo-wrapper-bg: #2D2D2D;
    --logo-segment-default-fill: white;
    --burger-menu-bg: #3A3A3A;
    --burger-menu-border: #505050;
    --burger-menu-item-hover-bg: #4F4F4F;
    --burger-menu-active-bg: #5A5A5A;
    --burger-submenu-bg: #454545;
    --burger-submenu-border-top: #5A5A5A;
    --burger-submenu-item-text: #F9F9F9;
    --burger-submenu-item-hover-bg: #5F5F5F;
    --submenu-demo-left-bg: #3A3A3A;
    --submenu-demo-right-bg: #3A3A3A;
    --submenu-sublink-text: #F9F9F9;
    --submenu-sublink-border: #505050;
    --submenu-sublink-hover-bg: #4F4F4F;
    --nav-label-text: #F9F9F9;
    --nav-label-hover-bg: #454545;
    --nav-label-hover-text: #5AE29F;
    --nav-label-active-text: #5AE29F;
    --footer-border-top: #505050;
    --footer-link-text: #C0C0C0;
    --footer-copyright-text: #A0A0A0;
    --button-bg: #5AE29F;
    --button-text: #2D2D2D;
    --button-border: transparent;
    --shadow-color-light: rgba(0,0,0,0.3);
    --shadow-color-dark: rgba(0,0,0,0.5);
    --grid-pattern-color: rgba(255, 255, 255, 0.04);
    --octagon-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M10 0 L30 0 L40 10 L40 30 L30 40 L10 40 L0 30 L0 10 Z' stroke-width='1' fill='none' stroke='white' stroke-opacity='0.04'/%3E%3C/svg%3E");
}

/* Body styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--main-bg-color);
    color: var(--text-color-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Page container */
#page-container {
    width: 100%;
    height: 100%;
    position: relative;
    opacity: 0;
    animation: fadeInPage 0.5s ease forwards;
}

@keyframes fadeInPage {
    to { opacity: 1; }
}

canvas { display: block; width: 100vw; height: 100vh; }

.canvas-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}

/* Header styles */
#main-header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background: transparent;
    z-index: 100;
}

.dark-theme #main-header {
    background: transparent;
}

/* Logo container */
#logo-container {
    width: 50%;
    max-width: 1000px;
    height: auto;
    margin: auto;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50vh;
    display: block;
}

#logo-container.logo-top {
    top: 20px;
    transform: translateX(-50%);
    width: 50%;
}

@media (max-width: 768px) {
    #logo-container.logo-top {
        width: 45%;
    }
}

.logo-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.logo-svg .segment {
    fill: var(--logo-segment-default-fill);
    cursor: pointer;
    pointer-events: auto;
}

/* Main content */
#main-content {
    margin-top: var(--header-height, 90px);
    padding: 0;
    opacity: 0;
    position: relative;
    width: 50%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

#main-content.visible {
    opacity: 1;
}

/* Heading styles - Center all main headings */
#main-content h1,
#main-content h2 {
    text-align: center;
    color: var(--text-color-headings);
    margin: 30px 0 20px 0;
}

#main-content h1 {
    font-size: 2.2em;
    font-weight: 700;
}

#main-content h2 {
    font-size: 1.8em;
    font-weight: 600;
}

/* Infobox styles */
.infobox-1 {
    border-left: 3px solid var(--border-color);
    padding: 20px;
    margin: 25px 0;
    color: var(--text-color-primary);
}

.infobox-1 h2 {
    color: var(--text-color-headings);
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.2em;
}

.infobox-1 h3 {
    text-align: center;
    color: var(--text-color-headings);
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.6em;
}

.infobox-1 p {
    margin: 0;
    margin-top: 10px;
    line-height: 1.6;
}

/* Grid container for infoboxes */
.infobox-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin: 25px 0;
}

/* Footer styles */
.footer-links {
    position: fixed;
    bottom: 15px;
    right: 15px;
    display: flex;
    gap: 20px;
    z-index: 50;
}

.footer-link {
    color: var(--footer-link-text);
    text-decoration: none;
    font-size: 14px;
}

.footer-link:hover {
    text-decoration: underline;
}

/* === lp-burger: eigenständiges Burger-Menü (nur bei kleinen Viewports) === */
:root {
  --lp-burger-bg: rgba(12,12,12,0.98);
  --lp-burger-text: #F7F7F7;
  --lp-burger-accent: #5AE29F;
  --lp-burger-width: 360px;
  --lp-burger-gap: 10px;
  --lp-burger-radius: 10px;
}

/* Button oben rechts, unterhalb des Logos */
.lp-burger-btn {
  position: fixed;
  right: 12px;
  top: calc(var(--header-height, 88px) - 40px); /* sitzt unter dem Logo; nutzt --header-height wenn gesetzt */
  z-index: 1300;
  display: none; /* nur sichtbar in Media-Query */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--lp-burger-bg);
  color: var(--lp-burger-text);
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  padding: 6px;
}

/* Panel unter dem Logo, rechts ausgerichtet; eigenes Styling */
.lp-burger-panel {
  position: fixed;
  right: 12px;
  top: calc(var(--header-height, 88px) + 8px);
  z-index: 1290;
  width: var(--lp-burger-width);
  max-width: calc(100% - 32px);
  background: var(--lp-burger-bg);
  color: var(--lp-burger-text);
  border-radius: var(--lp-burger-radius);
  box-shadow: 0 14px 44px rgba(0,0,0,0.55);
  padding: 12px;
  display: none;
  transform-origin: top right;
  transform: scaleY(0);
  transition: transform 200ms cubic-bezier(.2,.9,.3,1), opacity 160ms ease;
  opacity: 0;
  overflow: auto;
}

/* sichtbar */
.lp-burger-panel.open {
  display: block;
  transform: scaleY(1);
  opacity: 1;
}

/* Panel header */
.lp-burger-panel .panel-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}

/* nav: zwingend horizontal ausgerichtet; Zeilenumbruch erlaubt */
.lp-burger-panel nav {
  display:flex;
  gap: var(--lp-burger-gap);
  align-items:center;
  flex-wrap:wrap; /* erlaubt Umbruch, ansonsten bleibt horizontal */
  flex-direction:row;
}

/* eigene Link-Optik (keine Kopie der left-rail) */
.lp-burger-panel nav a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--lp-burger-text);
  text-decoration: none;
  font-weight: 600;
  background: transparent;
  transition: background 140ms ease, color 140ms ease, transform 120ms ease;
  white-space: nowrap;
  writing-mode: horizontal-tb !important; /* zwingt horizontale Schriftrichtung */
  transform: none !important;
}
.lp-burger-panel nav a:hover,
.lp-burger-panel nav a:focus {
  background: rgba(255,255,255,0.04);
  color: var(--lp-burger-accent);
  transform: translateY(-2px);
}

/* Close button */
.lp-burger-panel .lp-burger-close {
  background: transparent;
  color: var(--lp-burger-text);
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 6px;
  line-height: 1;
}

/* Nur ein Menü sichtbar: linke Rail ausblenden bei kleinen Viewports */
@media (max-width: 768px), (max-height: 640px) {
  .left-cta-rail { display: none !important; } /* bleibt im DOM für JS-Kompatibilität */
  .lp-burger-btn { display: flex; }
}

/* Größere Viewports: Burger komplett unsichtbar */
@media (min-width: 769px) and (min-height: 641px) {
  .lp-burger-panel { display: none !important; transform: none !important; opacity: 0 !important; }
}

/* Fokus-Ring */
.lp-burger-btn:focus,
.lp-burger-panel a:focus,
.lp-burger-panel .lp-burger-close:focus {
  outline: 2px solid rgba(90,226,159,0.22);
  outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #main-content {
        width: 90%;
        margin-top: var(--header-height, 90px);
    }
    
    .infobox-grid-container {
        grid-template-columns: 1fr;
    }
}

/* Accent: align infobox borders with brand/button color from main theme */
.infobox-1 {
  border-left-width: 4px;
  border-left-style: solid;
  border-left-color: var(--button-bg);
}

/* Ensure immediate header/logo response without smoothing */
#logo-container {
  transition: width 0.35s ease;
  will-change: width;
}

/* Fullpage sections: viewport-centered with scroll snapping */
/* Enable snapping statisch ohne Layout-Änderung (keine separate Scroll-Box) */
html {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

html.snap-enabled {
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--header-height, 0px);
}

.lp-section {
  margin: 0;
  min-height: calc(100vh - var(--header-height, 0px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding: 24px 0;
}
.lp-section > * {
  transform: translateY(var(--section-rise, -40px));
}

/* First section starts at top to avoid initial auto-scroll */
.lp-section:first-of-type {
  scroll-snap-align: start;
}

#hero {
  text-align: center;
}

#hero .subline {
  color: var(--text-color-secondary);
  margin-top: 10px;
}

.cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* Minimal buttons aligned with existing variables */
.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 8px;
  transition: filter 0.2s ease;
  cursor: pointer;
}

.btn:hover { filter: brightness(1.05); }

.btn-primary {
  background: var(--button-bg);
  color: var(--button-text);
  border: 1px solid var(--button-border);
}

.btn-secondary {
  background: transparent;
  color: var(--button-bg);
  border: 1px solid var(--button-bg);
}

/* Farbangleich: Erstes Logo-Segment nutzt aktuelle Akzentfarbe */
.logo-svg .segment[data-color="1"] {
  fill: var(--button-bg);
}

/* Make lists and text blocks readable within sections */
.lp-section ul { margin-left: 1.2rem; }
.lp-section li { margin: 6px 0; }

/* Ensure footer aligns with main style position */
.footer-links { position: fixed; right: 15px; bottom: 15px; }

/* Responsive refinements consistent with main page */
@media (max-width: 768px) {
  .cta-row { gap: 10px; }
  .btn { padding: 10px 16px; }
}

/* Left vertical CTA rail (matching theme toggle edge, keep button variants) */
.left-cta-rail {
  position: fixed;
  left: 0;
  top: 140px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  /* Slide mechanics */
  transform: translateX(0);
  transition: transform 0.25s ease;
  will-change: transform;
}

.left-cta-rail .btn,
.left-cta-rail button.btn {
  /* Edge like the theme toggle */
  border-radius: 0 6px 6px 0;
  border-left: none;
  border-top-width: 2px;
  border-right-width: 2px;
  border-bottom-width: 2px;
  /* Vertical label thickness */
  width: 46px;
  padding: 8px 6px;
  /* Center content precisely */
  display: flex;
  align-items: center;
  justify-content: center;
}

.left-cta-rail .btn-primary {
  background: var(--button-bg);
  color: var(--button-text);
  border-color: var(--button-border);
}

.left-cta-rail .btn-secondary {
  background: transparent;
  color: var(--button-bg);
  border-color: var(--button-bg);
}

.left-cta-rail .btn:hover { filter: brightness(1.1); }

/* Rotate only the label, not the button box/border */
.vertical-label {
  display: inline-block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  line-height: 1;
  transform-origin: center;
}

@media (max-width: 768px) {
  .left-cta-rail { top: 110px; gap: 8px; }
  .left-cta-rail .btn { width: 40px; padding: 6px 4px; }
}

/* Collapsed state: partially hide rail (keeps a grab area visible) */
.left-cta-rail.collapsed { transform: translateX(calc(-100% + 6px)); }

/* Hover expands the entire rail together */
.left-cta-rail:hover { transform: translateX(0); }

/* Pentesting page: tighter spacing between infoboxes */
.infobox-grid-container { gap: 16px; margin: 16px 0; }
.infobox-1 { margin: 10px 0; }

/* Section fade-in/fade-out styles */
.lp-section {
  transition: opacity 0.4s ease-in-out, visibility 0.4s;
  opacity: 0;
  visibility: hidden;
  /* Beibehaltung der ursprünglichen, wichtigen Layout-Regeln */
  min-height: calc(100vh - var(--snap-offset, 0px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding: 24px 0;
  position: absolute; /* Absolut positionieren, um Überlappung zu ermöglichen */
  width: 100%;
  left: 0;
}

.lp-section.is-active {
    opacity: 1;
    visibility: visible;
    position: relative; /* Relative Position für die aktive Sektion, um den Fluss beizubehalten */
}
.lp-section.is-exiting {
    position: relative; /* Während Fade-out im Fluss halten, verhindert Sprung */
}

body.no-scroll {
    overflow: hidden;
}
html.no-scroll {
    overflow: hidden;
}

/* PDF Overlay */
#pdf-overlay.hidden {
  display: none !important;
}

#pdf-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

#pdf-iframe {
  width: 80%;
  height: 90%;
  border: 2px solid var(--accent-color);
}

.close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: white;
  background: none;
  border: none;
  cursor: pointer;
}

/* Innerer Scroll-Wrapper für Sektionen (Option A) */
.lp-section__inner {
    box-sizing: border-box;

    /* Abstand vom unteren Viewportrand, so wird das untere Ende "nach oben gesetzt" */
    --section-bottom-offset: 20px; /* anpassen: größer = mehr Abstand */

    /* Max-Höhe so berechnen, dass Header + bottom‑offset abgezogen werden */
    max-height: calc(100vh - var(--header-height, 90px) - var(--section-bottom-offset));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /* behalte vorhandene innere Abstände, wenn nötig anpassen */
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Centering helper: wenn Inhalt kleiner ist, wird .lp-section__content vertikal zentriert.
   Bei größerem Inhalt wirken die auto-Margen nicht und der Container wird scrollbar. */
.lp-section__inner {
    /* bestehende Regeln behalten (height / overflow-y bereits gesetzt) */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start; /* behalten: child margin auto übernimmt Centering */
    box-sizing: border-box;
}

/* Neuer innerer Wrapper (wird per JS erzeugt) */
.lp-section__content {
    width: 100%;
    /* Diese auto-Margen zentrieren vertikal nur wenn Platz vorhanden */
    margin-top: auto;
    margin-bottom: auto;
}

/* kleinere optische Feinjustierung: falls Inhalt gerade zentriert ist, leichtes padding oben */
.lp-section__content:only-child { padding-top: 6px; }

/* Unsichtbare/kleine Anker, beeinflussen Layout nicht */
.anchor-target { display:block; height:0; width:0; overflow:hidden; }

/* Sicherstellen: nur aktive Sektionen nehmen pointer-events (verhindert Click-through) */
.lp-section:not(.is-active) { pointer-events: none; }
.lp-section.is-active { pointer-events: auto; }

/* Falls bestimmte Sektionen länger sind: opt-in Klasse für visuelle Hinweise */
.lp-section.has-inner-scroll .lp-section__inner {
    /* optional: visual hint or scrollbar style adjustments */
}