/* ===============================
   Farb- & Typo-Variablen
   =============================== */
:root{
  --brand:#0b2a3a;        /* Markenblau */
  --accent:#0077b6;       /* Primär-CTA */
  --accent-dark:#005a85;  /* Hover-CTA */
  --bg:#f7f8fa;           /* Seitenhintergrund */
  --text:#222;            /* Standardtext */
}

/* ===============================
   Basis / Reset
   =============================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
a.link{color:var(--accent)}
a.link:hover{text-decoration:underline}

/* Layout-Helfer */
.container{max-width:960px;margin:0 auto;padding:24px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:880px){.grid-2{grid-template-columns:1fr}}

/* ===============================
   Markenbalken (optional)
   =============================== */
.brandbar{background:var(--brand);color:#fff;font-size:.95rem}
.brandbar .container{display:flex;align-items:center;gap:12px;padding:8px 24px}
.brandbar img{border-radius:50%}
.brandbar a{color:#fff}
.brandbar a:hover{text-decoration:underline}

/* ===============================
   HERO der Unterseite
   =============================== */
header.hero{
  position:relative;
  color:#fff;
  text-align:center;
  min-height:48vh;              /* schön hoch */
  padding:80px 24px;
  background:var(--brand) url("/src/img/java-schulung.jpg") center/cover no-repeat;
}
header.hero::after{
  content:"";
  position:absolute;inset:0;
  background:rgba(0,0,0,.45);   /* abdunkeln */
}
.hero-text{position:relative;z-index:1;max-width:820px;margin:0 auto}
.hero h1{font-size:2.4rem;margin:0 0 12px}
.hero p{font-size:1.1rem;margin:0 0 14px}
.hero .meta{opacity:.9;font-size:.95rem}

/* ===============================
   CTA-Buttons
   =============================== */
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.btn{
  display:inline-block;padding:12px 20px;border-radius:6px;
  font-weight:700;line-height:1;transition:background .2s ease
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark)}

/* ===============================
   Sektionen / Scroll-Reveal
   =============================== */
section{
  background:#fff;margin:28px auto;padding:28px;border-radius:10px;
  box-shadow:0 3px 8px rgba(0,0,0,.05);
  opacity:0;transform:translateY(28px);
  transition:opacity .6s ease-out, transform .6s ease-out;
}
section.visible{opacity:1;transform:translateY(0)}
h2{margin:0 0 10px;color:var(--brand)}
h3{margin:14px 0 8px}

/* Karten */
.card{
  background:#fff;border:1px solid #e8edf2;border-radius:10px;padding:16px;
  transition:transform .15s ease, box-shadow .15s ease
}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.06)}

/* Breadcrumb nur auf Unterseiten */
.breadcrumb{margin:8px auto 0;font-size:.95rem;opacity:.85}
.breadcrumb ol{list-style:none;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.breadcrumb a{color:var(--accent)}
.breadcrumb a:hover{text-decoration:underline}

/* ===============================
   Checkliste (mit Font Awesome)
   =============================== */
ul.check{list-style:none;padding:0;margin:0}
ul.check li{position:relative;margin:0 0 10px;padding-left:24px}
ul.check li::before{
  content:"\f00c";               /* fa-check */
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;left:0;top:0;
  color:var(--accent);
}

/* ===============================
   Codeblöcke (Java)
   =============================== */
pre,code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
pre{
  background:#0f172a; color:#e2e8f0;
  padding:14px; border-radius:8px; overflow:auto; font-size:.95rem
}
code{
  background:#eef2f5; color:#c7254e;
  padding:2px 5px; border-radius:3px; font-size:.95rem
}

/* ===============================
   Quiz-Elemente
   =============================== */
.quiz{border:1px solid #e8edf2;border-radius:10px;padding:20px;margin-top:20px}
.quiz .quiz-item{margin:14px 0}
.quiz label{display:block;margin:6px 0;cursor:pointer}
.quiz input[type="radio"]{margin-right:8px}
.quiz button{margin-top:12px}

/* ===============================
   Footer
   =============================== */
footer{
  background:#2c3e50;color:#fff;padding:20px;text-align:center;margin-top:32px;font-size:.95rem
}
footer a{color:#fff}
footer a:hover{text-decoration:underline}


/* ===============================
   Codeblöcke innerhalb Karten
   =============================== */
.card pre {
  margin: 0;                 /* verhindert doppelten Außenabstand */
  max-width: 100%;           /* nicht über die Card hinauslaufen */
  box-sizing: border-box;    /* Padding mit einberechnen */
}

.card code {
  white-space: pre-wrap;     /* Zeilen umbrechen, falls nötig */
  word-break: break-word;    /* lange Tokens umbrechen */
}

pre {
  padding: 14px 18px;   /* links/rechts mehr Luft */
  border-radius: 8px;
}

    /* Brandfarben */
    :root{
      --brand:#0b2a3a;            /* Sematrain Dunkelblau */
      --accent:#0077b6;           /* Sematrain Blau (CTA) */
      --accent-2:#2aa9e0;         /* helleres Blau für Syntax */
      --code-bg:#0b1520;          /* dunkles Technik-Blue-Black */
      --code-fg:#e6f1ff;          /* sehr helles Blau/Weiß */
      --code-muted:#b8c7e0;       /* dezente Kommentare */
      --code-key:#76c4ff;         /* Keywords */
      --code-type:#9ad5ff;        /* Typen */
      --code-str:#ffd28a;         /* Strings */
      --code-num:#a6e3a1;         /* Zahlen */
      --code-fn:#7bdff6;          /* Funktions-/Methodennamen */
      --ring:rgba(0,119,182,.35); /* Fokus-Ring */
    }

    /* Hero (Unterseite) – technisches Bild optional per CSS setzen */
    header.hero{
      min-height:44vh;
      background: var(--brand) url("/src/img/java-schulung.jpg") center/cover no-repeat;
      color:#fff; position:relative; text-align:center; padding:72px 24px;
    }
    header.hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.42)}
    .hero-text{position:relative;z-index:1;max-width:860px;margin:0 auto}
    .hero-text h1{font-size:2.2rem;margin:0 0 10px}
    .hero-text p{opacity:.95}

    /* Breadcrumb */
    .breadcrumb{margin:8px auto 0;font-size:.95rem;opacity:.9}
    .breadcrumb ol{list-style:none;padding:0;display:flex;gap:8px;flex-wrap:wrap}
    .breadcrumb a{color:var(--accent);text-decoration:none}
    .breadcrumb a:hover{text-decoration:underline}

    /* Codeblock – sematrain Farbschema + Kopieren + Speichern */
    .codeblock{
      position:relative;border:1px solid #0e2436;border-radius:10px;overflow:hidden;background:linear-gradient(180deg,#0c1826 0%, #0b1520 100%);
      box-shadow:0 6px 18px rgba(0,0,0,.18);
    }
    .codeblock .toolbar{
      display:flex;justify-content:flex-end;gap:8px;align-items:center;
      background:#0e2233;color:#cfe7ff;padding:8px 10px;border-bottom:1px solid #0e2436
    }
    .toolbar .tool-btn{
      appearance:none;border:1px solid #1b3b55;background:#123049;color:#e6f1ff;
      border-radius:6px;padding:6px 10px;font-size:.85rem;cursor:pointer;line-height:1;
      transition:all .15s ease
    }
    .toolbar .tool-btn:hover{background:#184265;border-color:#225377}
    .toolbar .tool-btn:focus{outline:2px solid var(--ring);outline-offset:2px}

    pre{margin:0;max-width:100%;overflow:auto}
    pre code{
      display:block;padding:14px 16px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Fira Code", monospace;
      font-size:.95rem; line-height:1.55; color:var(--code-fg); background:transparent; tab-size:2; white-space:pre
    }
    /* Primitive „Syntaxhighlighting“ ohne Lib (Regex-freundlich via Klassen) */
    .token.comment{color:var(--code-muted)}
    .token.keyword{color:var(--code-key);font-weight:600}
    .token.type{color:var(--code-type)}
    .token.string{color:var(--code-str)}
    .token.number{color:var(--code-num)}
    .token.func{color:var(--code-fn)}

    /* Cards & Layout ergänzen (falls substyles.css nicht alles abdeckt) */
    .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
    @media (max-width:880px){.grid-2{grid-template-columns:1fr}}
    .card{background:#fff;border:1px solid #e8edf2;border-radius:10px;padding:16px;transition:.15s ease}
    .card:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.06)}

    /* Reveal */
    [data-reveal]{opacity:0;transform:translateY(28px);transition:all .6s ease-out}
    .is-visible{opacity:1;transform:translateY(0)}

    /* CTA-Fokus */
    .btn:focus{outline:2px solid var(--ring);outline-offset:2px}


/* ===============================
   Hero für Städte-Seiten
   =============================== */
header.hero {
  position: relative;
  color: #fff;
  text-align: center;
  min-height: 52vh; /* etwas höher, damit Bild nicht gequetscht wird */
  padding: 100px 24px 80px; /* oben mehr Luft */
  background: var(--brand) center center/cover no-repeat;
}

header.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45); /* Abdunkeln */
}

.hero-text {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
}

.hero-text h1 {
  font-size: 2.4rem;
  margin: 0 0 14px;
}

.hero-text p {
  font-size: 1.1rem;
  opacity: .95;
}

/* ===============================
   FAQ Sektion – Cities
   =============================== */
#faq {
  margin-top: 32px;
}

#faq h2 {
  margin-bottom: 18px;
}

/* Details Wrapper */
#faq details {
  border: 1px solid #e1e6ec;
  border-radius: 8px;
  margin: 10px 0;
  padding: 14px 16px;
  background: #fff;
  transition: box-shadow .2s ease;
}

#faq details:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
}

/* Summary (Fragen) */
#faq summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;       /* Standard-Pfeil entfernen */
  position: relative;
  padding-left: 26px;     /* Platz für eigenes Icon */
}

#faq summary::-webkit-details-marker {
  display: none;          /* Safari/Chrome Marker ausblenden */
}

/* Eigenes Icon für FAQ */
#faq summary::before {
  content: "\f059"; /* fa-question-circle (Font Awesome) */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
}

/* Antworttext */
#faq details p {
  margin: 10px 0 0;
  font-size: .95rem;
  line-height: 1.5;
  color: #444;
}

/* ===============================
   FAQ Sektion – Cities
   =============================== */
#faq {
  margin-top: 32px;
}

#faq h2 {
  margin-bottom: 18px;
}

/* Details Wrapper */
#faq details {
  border: 1px solid #e1e6ec;
  border-radius: 8px;
  margin: 10px 0;
  padding: 14px 16px;
  background: #fff;
  transition: box-shadow .2s ease;
}

#faq details:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
}

/* Summary (Fragen) */
#faq summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;       /* Standard-Pfeil entfernen */
  position: relative;
  padding-left: 26px;     /* Platz für eigenes Icon */
}

#faq summary::-webkit-details-marker {
  display: none;          /* Safari/Chrome Marker ausblenden */
}

/* Eigenes Icon für FAQ */
#faq summary::before {
  content: "\f059"; /* fa-question-circle (Font Awesome) */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
}

/* Antworttext */
#faq details p {
  margin: 10px 0 0;
  font-size: .95rem;
  line-height: 1.5;
  color: #444;
}

/* FAQ – Layout & Icons (Font Awesome) */
#faq .faq-item{
  border:1px solid #e1e6ec;border-radius:10px;margin:12px 0;padding:14px 16px;background:#fff;
  transition:box-shadow .2s ease,border-color .2s ease
}
#faq .faq-item:hover{box-shadow:0 6px 16px rgba(0,0,0,.06);border-color:#d8e1ea}

#faq summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}
#faq summary::-webkit-details-marker{display:none}

#faq summary i{
  width:1.2em; min-width:1.2em; text-align:center;
  color:var(--accent);
}
#faq details[open] summary i{transform:rotate(0)} /* Platzhalter; optional Animationen */

#faq details p{margin:10px 0 0;font-size:.95rem;line-height:1.55;color:#444}


/* FAQ: nur EIN Icon (kein Pseudo-Marker) */
#faq summary::-webkit-details-marker{ display:none; }
#faq summary::before{ content:none !important; }  /* schaltet evtl. vorhandene ::before-Icons ab */

/* Layout & Farbe im "schönen Blau" */
#faq .faq-item{
  border:1px solid #e1e6ec;border-radius:10px;margin:12px 0;padding:14px 16px;background:#fff;
  transition:box-shadow .2s ease,border-color .2s ease
}
#faq .faq-item:hover{box-shadow:0 6px 16px rgba(0,0,0,.06);border-color:#d8e1ea}

#faq .faq-q{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:600}
#faq .faq-q i{
  color:var(--accent);           /* SemaTrain-Blau */
  width:1.25em;min-width:1.25em; /* saubere Ausrichtung */
  text-align:center;
  line-height:1;
}
#faq details p{margin:10px 0 0;font-size:.95rem;line-height:1.55;color:#444}

/* optional: blauer Akzent beim Öffnen */
#faq details[open]{border-color:rgba(0,119,182,.4);box-shadow:0 0 0 3px rgba(0,119,182,.06);}

/* === FAQ Hotfix: keine Pseudo-Icons, bündig links, FA-Icon in Blau === */
#faq summary::-webkit-details-marker{ display:none; }
#faq summary::before{ content:none !important; }          /* entfernt das zusätzliche Fragezeichen-Icon */
#faq summary{
  display:flex; align-items:center; gap:10px;
  padding-left:0 !important;                               /* beseitigt den links reservierten Platz */
}
#faq .faq-q i{
  color:var(--accent); width:1.25em; min-width:1.25em; 
  text-align:center; line-height:1;                        /* saubere Ausrichtung */
}

/* PARALLAX – stadtspezifisch via CSS-Variable */
.parallax{
  /* Bild aus Inline-Style (Fallback global) */
  background-image: var(--parallax-bg, url('/src/img/java-schulung.jpg'));
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;          /* Desktop Parallax */

  /* Layout */
  height:300px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  position:relative;

  /* Overrides gegen globale section-Defaults */
  margin:0; padding:0; border-radius:0; box-shadow:none; background-color:transparent;
  opacity:1; transform:none;
}

.parallax__overlay{
  background:rgba(0,0,0,.4);
  padding:20px 30px; border-radius:6px; color:#fff;
}
.parallax__overlay h2, .parallax__overlay p{ color:#fff !important; }
.parallax h2{ margin:0 0 10px; font-size:2rem; font-weight:700; }
.parallax p{ margin:0; font-size:1.2rem; }

/* Mobile/Tablet: iOS mag kein fixed */
@media (max-width:1024px){
  .parallax{ background-attachment:scroll; height:180px; padding:0 10px; }
  .parallax h2{ font-size:1.4rem; }
  .parallax p{ font-size:1rem; }
}

/* Bewegungen reduzieren */
@media (prefers-reduced-motion: reduce){
  .parallax{ background-attachment:scroll; }
}


/* Default */
.parallax{ background-image:url('/src/img/java-schulung.jpg'); }

/* Stadt-spezifische Overrides */
.city-hamburg   .parallax{ background-image:url('/src/img/standorte/java-schulung-hamburg.jpg'); }
.city-berlin    .parallax{ background-image:url('/src/img/standorte/java-schulung-berlin.jpg'); }
.city-muenchen  .parallax{ background-image:url('/src/img/standorte/java-schulung-muenchen.jpg'); }
.city-koeln     .parallax{ background-image:url('/src/img/standorte/java-schulung-koeln.jpg'); }
.city-frankfurt .parallax{ background-image:url('/src/img/standorte/java-schulung-frankfurt.jpg'); }
.city-stuttgart .parallax{ background-image:url('/src/img/standorte/java-schulung-stuttgart.jpg'); }
.city-duesseldorf .parallax{ background-image:url('/src/img/standorte/java-schulung-duesseldorf.jpg'); }
.city-leipzig   .parallax{ background-image:url('/src/img/standorte/java-schulung-leipzig.jpg'); }
.city-dortmund  .parallax{ background-image:url('/src/img/standorte/java-schulung-dortmund.jpg'); }
.city-bremen    .parallax{ background-image:url('/src/img/standorte/java-schulung-bremen.jpg'); }
.city-hannover  .parallax{ background-image:url('/src/img/standorte/java-schulung-hannover.jpg'); }
.city-nuernberg .parallax{ background-image:url('/src/img/standorte/java-schulung-nuernberg.jpg'); }

.parallax{
  background-image: var(--parallax-bg, url('/src/img/java-schulung.jpg'));
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  position: relative;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* Overrides gg. globale section-Styles, falls nötig: */
  margin: 0; padding: 0; border-radius: 0; box-shadow: none; opacity: 1; transform: none;
}
.parallax__overlay{ background: rgba(0,0,0,.4); padding: 20px 30px; border-radius: 6px; color:#fff; }
.parallax__overlay h2, .parallax__overlay p{ color:#fff !important; }
@media (max-width:1024px){ .parallax{ background-attachment: scroll; height:180px; padding:0 10px; } }
@media (prefers-reduced-motion: reduce){ .parallax{ background-attachment: scroll; } }
.parallax__overlay {
  background: rgba(0,0,0,.4);
  padding: 20px 30px;
  border-radius: 0; /* Keine Rundungen */
  color: #fff;
}

/* Schluss-CTA */
.cta-final { text-align:center }
.cta-final h2 { margin-bottom:8px }
.cta-final .meta { opacity:.9; margin-bottom:8px }
/* Parallax Container */
.parallax {
  position: relative;
  min-height: 40vh; /* Höhe anpassbar */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

/* Bild-Layer */
.parallax::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--parallax-bg, url('/src/img/java-schulung.jpg'));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  transform: translateZ(0); /* iOS Fix */
}

/* Overlay/Text */
.parallax__overlay {
  position: relative; /* NICHT absolute → damit Text nicht Hintergrund überdeckt */
  z-index: 1;
  background: rgba(0,0,0,.35);
  padding: 20px 30px;
  color: #fff;
}
.parallax__overlay h2,
.parallax__overlay p {
  color: #fff !important;
}

/* Höhe für kleinere Screens */
@media (max-width: 1024px) {
  .parallax { min-height: 30vh; }
}

/* Stadt-spezifische Variablen */
.city-hamburg   .parallax { --parallax-bg: url('/src/img/standorte/java-schulung-hamburg.jpg'); }
.city-berlin    .parallax { --parallax-bg: url('/src/img/standorte/java-schulung-berlin.jpg'); }
.city-muenchen  .parallax { --parallax-bg: url('/src/img/standorte/java-schulung-muenchen.jpg'); }
.city-koeln     .parallax { --parallax-bg: url('/src/img/standorte/java-schulung-koeln.jpg'); }
.city-frankfurt .parallax { --parallax-bg: url('/src/img/standorte/java-schulung-frankfurt.jpg'); }
.city-stuttgart .parallax { --parallax-bg: url('/src/img/standorte/java-schulung-stuttgart.jpg'); }
.city-duesseldorf .parallax { --parallax-bg: url('/src/img/standorte/java-schulung-duesseldorf.jpg'); }
.city-leipzig   .parallax { --parallax-bg: url('/src/img/standorte/java-schulung-leipzig.jpg'); }
.city-dortmund  .parallax { --parallax-bg: url('/src/img/standorte/java-schulung-dortmund.jpg'); }
.city-bremen    .parallax { --parallax-bg: url('/src/img/standorte/java-schulung-bremen.jpg'); }
.city-hannover  .parallax { --parallax-bg: url('/src/img/standorte/java-schulung-hannover.jpg'); }
.city-nuernberg .parallax { --parallax-bg: url('/src/img/standorte/java-schulung-nuernberg.jpg'); }