/* ---------- Grundlayout / Sticky Footer ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  background: #0f1115;
  color: #e0e0e0;
  line-height: 1.6;
  margin: 0;
}
main { flex: 1; }
footer { margin-top: auto; }

/* ---------- Sections (100vh) ---------- */
.section {
  min-height: 100vh;
  display: flex;
  align-items: center;      /* vertikal mittig */
  justify-content: center;  /* horizontal mittig */
  padding: 4rem 1rem;
  position: relative;
}
.section-inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

/* Trenner */
.divider {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: min(1100px, 90%);
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #ff5c5c, transparent);
  opacity: .5;
}

/* ---------- Navigation (Logo links, Links rechts) ---------- */
.top-nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(30,30,30,.6);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition: transform 0.3s ease;
}
.top-nav.hidden { transform: translateY(-100%); }

.top-nav .nav-inner{
  max-width:1100px; margin:0 auto; padding:.55rem 1rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.nav-logo img{ display:block; height: 45px; width:auto; }

/* Links (Desktop) */
.nav-links{ display:flex; gap:.6rem; align-items:center; }
.nav-links a{
  color:#e0e0e0; text-decoration:none; padding:.4rem .7rem;
  border-radius:999px; font-size:.95rem; white-space:nowrap;
}
.nav-links a:hover{ background:rgba(255,255,255,.08); }

/* Burger (nur mobil sichtbar) */
.nav-toggle{
  display:none; position:relative; width:36px; height:28px;
  background:transparent; border:0; padding:0; cursor:pointer;
}
.nav-toggle span{
  position:absolute; left:0; right:0; height:2px; background:#e0e0e0;
  transform-origin:center; transition:transform .25s, opacity .25s, top .25s, bottom .25s;
}
.nav-toggle span:nth-child(1){ top:4px; }
.nav-toggle span:nth-child(2){ top:13px; }
.nav-toggle span:nth-child(3){ bottom:4px; }

/* Light-Mode Varianten */
body.light .top-nav{ background:rgba(255,255,255,.7); border-bottom-color:#e5e7eb; }
body.light .nav-links a{ color:#1a1a1a; }
body.light .nav-links a:hover{ background:rgba(0,0,0,.06); }

/* Platz für fixen Header */
.section:first-of-type .section-inner{ padding-top:calc(var(--nav-h, 52px) + 1rem); }

/* ---------- Mobile: Menü einklappen ---------- */
@media (max-width: 760px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:absolute; top:100%; right:0; left:0;
    display:flex; flex-direction:column; align-items:center; gap:.3rem;
    background:inherit; border-bottom:1px solid rgba(255,255,255,.08);
    padding:.6rem .5rem .8rem; transform-origin:top;
    transform:scaleY(0); opacity:0; pointer-events:none; transition:transform .2s, opacity .2s;
    backdrop-filter:inherit; z-index:9999;
  }
  .top-nav.open .nav-links{ transform:scaleY(1); opacity:1; pointer-events:auto; }
  .top-nav.open .nav-toggle span:nth-child(1){ top:13px; transform:rotate(45deg); }
  .top-nav.open .nav-toggle span:nth-child(2){ opacity:0; }
  .top-nav.open .nav-toggle span:nth-child(3){ bottom:auto; top:13px; transform:rotate(-45deg); }
  .top-nav.open .nav-links{
    background: rgba(0,0,0,0.85);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px; padding: 1rem;
  }
  .top-nav.open .nav-links a{
    display:block; width:100%; background: rgba(255,255,255,0.06);
    border-radius: 8px; padding: .75rem 1rem; color:#e0e0e0;
  }
  .top-nav.open .nav-links a:hover{ background: rgba(255,255,255,0.12); }
  body.light .top-nav.open .nav-links{ background: rgba(255,255,255,0.95); border-color:#e5e7eb; }
  body.light .top-nav.open .nav-links a{ color:#1a1a1a; }
}

/* ---------- Hero (Home Kopf) ---------- */
.hero .logo {
  width: 200px;
  display: block;
  margin: 0 auto .5rem auto;
}
.hero p { margin: 0; color: #ccc; }

/* ---------- Projekte (optional, falls genutzt) ---------- */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 1.2rem;
  margin-top: 1.5rem;
}
.project-card {
  background: #1e1e1e;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 1.2rem;
  text-align: left;
}
.project-card h3 { margin: 0 0 .4rem 0; color: #ff5c5c; }
.project-card p { margin: 0; color: #ccc; }

/* ---------- Footer ---------- */
footer {
  background: #0f141d;
  text-align: center;
  padding: 1rem;
  font-size: .9rem;
  color: #999;
}

/* ---------- Dark/Light Variants ---------- */
body.light { background:#f5f7fb; color:#0f141d; }
body.light footer { background:#ffffff; color:#555; }
body.light .top-nav { background: rgba(255,255,255,.7); border-color:#e5e7eb; }
body.light .project-card { background:#ffffff; border-color:#e5e7eb; }

/* ---------- Reveal / Fade ---------- */
.fade-on-scroll { transition: opacity .2s linear; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Fixed Theme Switch unten links ---------- */
.switch {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 10000;
  font-size: 10px;
  display: inline-block;
  width: 4em;
  height: 2.2em;
  border-radius: 30px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; inset: 0; cursor: pointer;
  background-color: #2a2a2a;
  transition: 0.4s; border-radius: 30px; overflow: hidden;
}
.slider:before {
  position: absolute; content: ""; height: 1.2em; width: 1.2em; border-radius: 20px;
  left: 0.5em; bottom: 0.5em; transition: 0.4s;
  transition-timing-function: cubic-bezier(0.81, -0.04, 0.38, 1.5);
  box-shadow: inset 8px -4px 0px 0px #fff;
}
.star{ background:#fff; border-radius:50%; position:absolute; width:5px; height:5px; transition: all 0.4s; }
.star_1{ left:2.5em; top:.5em; } .star_2{ left:2.2em; top:1.2em; } .star_3{ left:3em; top:.9em; }
.cloud{ width:3.5em; position:absolute; bottom:-1.4em; left:-1.1em; opacity:0; transition: all 0.4s; }
.switch input:checked + .slider { background-color: #00a6ff; }
.switch input:checked + .slider:before { transform: translateX(1.8em); box-shadow: inset 15px -4px 0px 15px #ffcf48; }
.switch input:checked + .slider .star { opacity: 0; }
.switch input:checked + .slider .cloud { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .slider, .slider:before, .star, .cloud { transition: none !important; }
}

/* ---------- Responsive Basics ---------- */
@media (max-width: 900px) {
  .projects-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 600px) {
  .hero .logo { width: 150px; }
  .projects-grid { grid-template-columns: 1fr; }
}

/* Nutzer, die weniger Bewegung wünschen */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Map ---------- */
.map {
  display: flex;
  justify-content: center;
  margin-top: 5rem;
}
.map iframe { max-width: 100%; height: 300px; }

/* ---------- To Top Button ---------- */
#toTopBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  background-color: #ff5c5c;
  color: white;
  border: none;
  outline: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
#toTopBtn:hover { background-color: #ff1e1e; }
#toTopBtn.show { opacity: 1; visibility: visible; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #1a1a1a; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff5c5c, #ff4fd8); border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ff5c5c, #e13fc1); }
html { scrollbar-width: thin; scrollbar-color: #ff5c5c #1a1a1a; }

/* ===== Skills – Performance ===== */
.globe-wrap { position: relative; width: 100%; max-width: 820px; margin: 0 auto; aspect-ratio: 1/1; perspective: 1100px; contain: layout paint size style; }
.globe { position: absolute; inset: 0; margin: auto; width: min(80vmin, 560px); height: min(80vmin, 560px); transform-style: preserve-3d; }
.globe.css-spin { animation: globe-autospin 30s linear infinite; }   /* nur im Idle */
@keyframes globe-autospin { from { transform: rotateX(-8deg) rotateY(0deg);} to { transform: rotateX(-8deg) rotateY(360deg);} }

.globe-glow, .glow-orbit { display: none !important; } /* Deko aus für Performance */

.skill-node { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 14px;
  background: #151923; border: 1px solid #222838; display: grid; place-items: center;
  will-change: transform; backface-visibility: hidden; transition: transform .18s ease, box-shadow .22s ease, border-color .2s ease;
}
.skill-node img, .skill-node i { width: 36px; height: 36px; object-fit: contain; display: block; pointer-events: none; }
.skill-node:hover { transform: translateZ(8px) scale(1.06); border-color: #2a3142; box-shadow: 0 10px 20px rgba(0,0,0,.28); }
.skill-node::after { content: attr(data-label); position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #bdbdbd; white-space: nowrap; }

@media (max-width: 600px){
  .skill-node { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 12px; }
  .skill-node img, .skill-node i { width: 30px; height: 30px; }}


/* ==== Portal56 Kontaktkarte ==== */
.contact-card {
  width: 100%; max-width: 520px; margin: 1.5rem auto 0;
  background:
    linear-gradient(#0f141d, #0f141d) padding-box,
    linear-gradient(145deg, transparent 35%, #ff4fd8, #ff5c5c) border-box;
  border: 2px solid transparent; border-radius: 16px; padding: 28px 22px;
  color: #fff; display: flex; flex-direction: column; gap: 18px; box-sizing: border-box;
  background-size: 200% 100%; animation: p56-gradient 6s ease infinite;
}
@keyframes p56-gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

.contact-card .p56-form { display: flex; flex-direction: column; gap: 16px; }
.p56-group { display: flex; flex-direction: column; gap: 6px; }
.p56-group label { color: #bdbdbd; font-weight: 600; font-size: 12px; }

.p56-input, .p56-textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px; color: #fff; font: inherit;
  background-color: transparent; border: 1px solid #3a3a3a; box-sizing: border-box;
}
.p56-input::placeholder, .p56-textarea::placeholder { color: #bdbdbd; opacity: .6; }
.p56-input:focus, .p56-textarea:focus { outline: none; border-color: #ff4fd8; box-shadow: 0 0 0 3px rgba(255,79,216,0.15); }
.p56-textarea { height: 120px; resize: vertical; overflow: auto; }

.p56-submit {
  align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; font: inherit; font-weight: 700; color: #ffffff;
  background: linear-gradient(145deg, #ff5c5c, #ff5c5c); border: 1px solid #ff5c5c;
  border-radius: 10px; cursor: pointer; transition: transform .05s ease, filter .2s ease, box-shadow .2s ease;
}
.p56-submit:hover { box-shadow: 0 6px 16px rgba(255,79,216,0.25); }
.p56-submit:active { transform: translateY(1px); }

/* Light-Mode Kontaktkarte */
body.light .contact-card {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(145deg, transparent 35%, #ff4c2c, #21cbf3) border-box;
  color: #1a1a1a;
}
body.light .p56-group label { color: #555; }
body.light .p56-input, body.light .p56-textarea { color: #111; border-color: #d9dbe0; }
body.light .p56-input::placeholder, body.light .p56-textarea::placeholder { color: #666; }
body.light .p56-input:focus, body.light .p56-textarea:focus { border-color: #21cbf3; box-shadow: 0 0 0 3px rgba(33,203,243,0.18); }

@media (prefers-reduced-motion: reduce) { .contact-card { animation: none; } .p56-submit { transition: none; } }

/* ---------- Footer-Links & Social ---------- */
footer a[href*="impressum"], footer a[href*="datenschutz"] { color: #ef4444; }

.footer-social {
  margin-top: 12px; display: flex; justify-content: center; gap: 14px;
}
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: #1b1b1b; color: #fff; font-size: 1.1rem;
  transition: transform 0.2s ease, background 0.2s ease;
}
.footer-social a:hover { transform: scale(1.1); }
.footer-social a[href*="wa.me"]:hover    { background: #25D366; }
.footer-social a[href*="instagram"]:hover{ background: #E1306C; }
.footer-social a[href*="twitter"]:hover  { background: #1DA1F2; }
body.light .footer-social a { background: #f3f3f3; color: #111; }

/* ===== HOME – Profi-Layout wie große Anbieter ===== */
.home-wrap { text-align: center; }

/* Lead-Text etwas größer, bessere Lesbarkeit */
.home-lead {
  margin: 0.2rem auto 0.8rem;
  max-width: 820px;
  color: #cfd5df;
  font-size: 1.05rem;
  
}
.nowrap { white-space: nowrap; }

/* Trust-Bar */
.trust-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  list-style: none;
  margin: 0.6rem auto 1.2rem;
  padding: 0;
  max-width: 980px;
}
.trust-bar li {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 10px 12px;
  background: #0f141d; border: 1px solid #2a3142; border-radius: 12px;
  color: #e0e0e0; font-size: .98rem;
}
.trust-bar i { opacity: .9; }
@media (max-width: 900px){ .trust-bar{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .trust-bar{ grid-template-columns: 1fr; } }

/* Services Grid – sichtbares Panel + 3er Grid */
.svc-grid {
  background: #0f141d; border: 1px solid #2a3142; border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  padding: 18px;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px; align-items: stretch; text-align: left;
  margin-bottom: 50px;
}
@media (max-width: 1024px){ .svc-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .svc-grid{ grid-template-columns: 1fr; } }

/* Karte */
.svc-item{
  background: #151923; border: 1px solid #222838; border-radius: 14px;
  padding: 18px; display: flex; flex-direction: column;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.svc-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.32);
  border-color: #2a3142;
}

/* Inhalt – nur eine .svc-icon Definition, gescope’t */
.svc-item .svc-icon{
  width: 52px; height: 52px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(230, 32, 32, 0.06);
  margin-bottom: 10px;
  font-size: 30px;
}
.svc-title{ margin: 4px 0 6px; font-size: 1.08rem; }
.svc-text{ margin: 0 0 8px; color: #cfd5df; }
.svc-list{ margin: 0 0 12px; padding-left: 18px; color: #b7bfcc; }
.svc-list li{ margin: 2px 0; }

/* CTA */
.svc-cta{
  background-color: #ff5c5c;
  margin-top: auto; align-self: flex-start; text-decoration: none; color: #e0e0e0;
  padding: 8px 12px; border-radius: 10px; border: 1px solid #2a3142;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
  
}
.svc-cta:hover{ background: #ef4444; border-color:#2e3850; }
.svc-cta:active{ transform: translateY(1px); }

/* Sekundäre Aktionen (unter dem Grid) */
.svc-actions{
  display: flex; gap: 10px; justify-content: center; margin-top: 14px;
}
.svc-primary, .svc-secondary{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px; border-radius: 10px; text-decoration: none;
  border: 1px solid #2a3142; transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.svc-primary{ color: #ffffff; background: linear-gradient(145deg, #ff5c5c, #ff5c5c); border-color:#ff5c5c; }
.svc-primary:hover{ box-shadow: 0 6px 16px rgba(255,79,216,0.25); }
.svc-secondary{ color: #e0e0e0; background: #151923; }
.svc-secondary:hover{ background:#1b2230; border-color:#2e3850; }
.svc-primary:active, .svc-secondary:active{ transform: translateY(1px); }

/* Light-Mode Anpassungen */
body.light .home-lead{ color:#4a5568; }
body.light .trust-bar li{ background:#ffffff; border-color:#d9dbe0; color:#1a1a1a; }
body.light .svc-grid{ background:#ffffff; border-color:#d9dbe0; box-shadow: 0 10px 24px rgba(0,0,0,.08); }
body.light .svc-item{ background:#ffffff; border-color:#e5e7eb; }
body.light .svc-item:hover{ border-color:#d9dbe0; box-shadow: 0 10px 24px rgba(0,0,0,.10); }
body.light .svc-item .svc-icon{ background: rgba(0,0,0,0.06); }
body.light .svc-text{ color:#4a5568; }
body.light .svc-list{ color:#5a6575; }
body.light .svc-cta{ color:#1a1a1a; border-color:#d9dbe0; }
body.light .svc-cta:hover{ background: rgba(0,0,0,0.05); border-color:#c9d1e0; }
body.light .svc-secondary{ color:#1a1a1a; border-color:#d9dbe0; background:#ffffff; }
body.light .svc-secondary:hover{ background:#f5f7fb; border-color:#c9d1e0; }

/* ===== Loader (Kontakt) ===== */
.p56-loader { display:none; justify-content:center; margin-top:10px; }
.p56-loader.show { display:flex; }
.p56-loader .wheel-and-hamster { font-size: 10px; }
@media (prefers-reduced-motion: reduce){ .p56-loader .wheel-and-hamster * { animation: none !important; } }

/* Hero-Lead wirklich mittig + gut lesbar */
#home .home-lead{
  text-align:center;
  margin: .25rem auto 1.2rem;
  max-width: 880px;
  color:#cfd5df;
  font-size:1.06rem;
}

/* Mehr Abstand nach oben vor dem Grid */
#home .home-services{ 
  margin-top: 2.2rem;            /* ↑ größerer Abstand */
}

#home h2 {
margin-top:6%;

}

/* svc-grid existiert schon – hier nur Feinschliff für diesen Abschnitt */
#home .svc-grid{
  text-align:left;
  background:#0f141d;
  border:1px solid #2a3142;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  padding:18px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
@media (max-width:1024px){ #home .svc-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){  #home .svc-grid{ grid-template-columns:1fr; } }

/* Karten: Buttons IN der Karte, mittig unten */
#home .svc-item{
  background:#151923;
  border:1px solid #222838;
  border-radius:14px;
  padding:18px;
  display:flex;
  flex-direction:column;
  transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
#home .svc-item:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.32);
  border-color:#2a3142;
}

/* Icon */
#home .svc-icon{
  width:52px; height:52px; border-radius:12px;
  display:grid; place-items:center;
  background:rgba(255,255,255,0.06);
  margin-bottom:10px;
}

/* Typo */
#home .svc-title{ margin:4px 0 6px; font-size:1.08rem; }
#home .svc-text { margin:0 0 8px; color:#cfd5df; }
#home .svc-list { margin:0 0 12px; padding-left:18px; color:#b7bfcc; }
#home .svc-list li{ margin:2px 0; }

/* CTA zentriert innerhalb der Karte (mittig unten) */
#home .svc-cta{
  margin-top:auto;
  align-self:center;                 /* mittig */
  text-decoration:none;
  color:#e0e0e0;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid #2a3142;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
#home .svc-cta:hover{ background:rgba(255,255,255,0.06); border-color:#2e3850; }
#home .svc-cta:active{ transform:translateY(1px); }

/* Light-Mode Anpassungen */
body.light #home .home-lead{ color:#4a5568; }
body.light #home .svc-grid{
  background:#ffffff; border-color:#d9dbe0; box-shadow:0 10px 24px rgba(0,0,0,.08);
}
body.light #home .svc-item{ background:#ffffff; border-color:#e5e7eb; }
body.light #home .svc-item:hover{ border-color:#d9dbe0; box-shadow:0 10px 24px rgba(0,0,0,.10); }
body.light #home .svc-icon{ background:rgba(0,0,0,0.06); }
body.light #home .svc-text{ color:#4a5568; }
body.light #home .svc-list{ color:#5a6575; }
body.light #home .svc-cta{ color:#1a1a1a; border-color:#d9dbe0; }
body.light #home .svc-cta:hover{ background:rgba(0,0,0,0.05); border-color:#c9d1e0; }

/* === ABOUT Layout === */
#about .section-inner { text-align: left; }

.about-grid{
  display: grid;
  grid-template-columns: 1.15fr 1fr; /* Text etwas breiter als die Karte */
  gap: 2rem;
  align-items: start; /* Inhalt oben ausrichten */
}

.about-text h2{ margin: 0 0 .6rem 0; line-height: 1.2; }
.about-text p{
  margin: .35rem 0 .6rem 0;
  text-align: justify;              /* Block-/Blocksatz */
  text-justify: inter-word;
  hyphens: auto;                     /* schöne Silbentrennung */
  max-width: 68ch;                   /* gute Zeilenlänge */
}
 

 
.about-map{
  margin-top: 50%;                 /* Karte wirkt „rechts darunter“ */
  border: 1px solid #2a3142;
  border-radius: 14px;
  overflow: hidden;
  background: #0f141d;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.about-map iframe{
  display: block;
  width: 100%;
  height: clamp(260px, 36vmin, 360px); /* flexible Höhe */
  border: 0;
}

/* Light-Mode Feintuning */
body.light .about-map{ background:#ffffff; border-color:#d9dbe0; box-shadow: 0 10px 20px rgba(0,0,0,.08); }
body.light #about .section-inner{ color:#1a1a1a; }

/* Responsive: unter 900px gestapelt, Karte unten */
@media (max-width: 900px){
  .about-grid{ grid-template-columns: 1fr; }
  .about-map{ margin-top: .8rem; }
}

/* ===== Globe – Light Mode ===== */
body.light .globe-wrap::before{
  /* Nebel dezenter im Hellmodus */
  opacity: .75;
  filter: blur(22px) saturate(1.05);
}

body.light .skill-node{
  background: #ffffff;
  border: 1px solid #d9dbe0;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}

body.light .skill-node:hover{
  border-color: #c9d1e0;
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
}

body.light .skill-node::after{
  color: #616a78; /* Label-Farbe im Lightmode */
}

/* Icon-Shadow im Hellmodus zurücknehmen, sonst wirkt es “schmutzig” */
body.light .skill-node img,
body.light .skill-node i{
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}

/* ===== Skills: Globus unten links, Text rechts oben ===== */
.skills-layout{
  display: grid;
  grid-template-columns: 1.1fr 1fr; /* links etwas breiter für den Globus */
  grid-template-rows: auto 1fr;
  gap: 1.2rem 1.6rem;
  align-items: start;
}

/* Globus unten links “andocken” */
.skills-layout .globe-wrap{
  grid-column: 1;
  grid-row: 2;               /* untere Zeile */
  justify-self: start;       /* nach links */
  align-self: end;           /* nach unten */
  max-width: 560px;          /* Sicherheit */
  width: 100%;
}

/* Textbereich rechts oben */
.skills-text{
  grid-column: 2;
  grid-row: 1;               /* obere Zeile */
  text-align: left;
}

/* kleine Karten rechts oben */
.skills-cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: .6rem;
}
.skill-card{
  background: #151923;
  border: 1px solid #2a3142;
  border-radius: 12px;
  padding: 14px;
  transition: box-shadow .15s ease, transform .1s ease, border-color .15s ease;
}
.skill-card:hover{
  transform: translateY(-2px);
  border-color: #2e3850;
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
}
.skill-card h3{ margin: 0 0 4px; font-size: 1rem; }
.skill-card p{ margin: 0; color: #cfd5df; }

/* Light Mode */
body.light .skill-card{
  background: #ffffff;
  border-color: #d9dbe0;
}
body.light .skill-card:hover{
  border-color: #c9d1e0;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
body.light .skill-card p{ color:#4a5568; }

/* Responsiv: auf schmalen Screens wieder untereinander, Globus nach unten */
@media (max-width: 980px){
  .skills-layout{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .skills-text{
    grid-column: 1; grid-row: 1;
  }
  .skills-layout .globe-wrap{
    grid-column: 1; grid-row: 2;
    justify-self: center;    /* mittig */
    align-self: start;
    max-width: 520px;
  }
  .skills-cards{
    grid-template-columns: 1fr 1fr; /* zwei Spalten, wenn Platz */
  }
}
@media (max-width: 560px){
  .skills-cards{ grid-template-columns: 1fr; }
}

/* ===== Skills Feintuning: Globus höher + Karten ohne Hintergrund ===== */

/* Layout: Text oben rechts, Globus unten links – aber etwas höher ziehen */
.skills-layout{
  grid-template-rows: auto 1fr;
  align-items: start;
}

/* Globus etwas nach oben: kleiner + negativer margin-top */
.skills-layout .globe-wrap{
  align-self: start;         /* statt end -> höher */
  justify-self: start;
  margin-top: -20vh;          /* zieht den Globus sichtbar nach oben */
  max-width: 520px;          /* etwas kleiner, damit alles auf 1 Screen passt */
  width: 100%;
}

/* Globus selbst minimal schrumpfen (überschreibt globale .globe Maße) */
.skills-layout .globe{
  width: min(70vmin, 520px);
  height: min(70vmin, 520px);
}

/* Textbereich oben rechts bündig */
.skills-text{
  align-self: start;
  text-align: left;
  margin-top: .2rem;
}

/* Text-"Karten" ohne Panel/Border/Hover – nur typografisch */
.skills-cards{
  gap: 10px;
  margin-top: .4rem;
}
.skill-card{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
.skill-card:hover{ transform: none; }
.skill-card h3{ margin: 0 0 4px; font-size: 1rem; }
.skill-card p{ margin: 0; color: #cfd5df; }

/* Light Mode: reine Typo bleibt, ggf. etwas dunklerer Text */
body.light .skill-card p{ color: #4a5568; }

/* Mobile: negativen Versatz zurücknehmen + mittig darstellen */
@media (max-width: 980px){
  .skills-layout{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .skills-layout .globe-wrap{
    margin-top: 0;           /* kein Negativ-Versatz auf kleinen Screens */
    justify-self: center;
    align-self: start;
    max-width: 480px;
  }
  .skills-layout .globe{
    width: min(72vmin, 480px);
    height: min(72vmin, 480px);
  }
}
@media (max-width: 560px){
  .skills-layout .globe-wrap{ max-width: 420px; }
  .skills-layout .globe{
    width: min(78vmin, 420px);
    height: min(78vmin, 420px);
  }
}

/* ===== Cookie Banner & Map Consent ===== */
.cookie-banner {
  position: fixed; inset: auto 0 0 0; z-index: 99999;
  background: #0f141d; border-top: 1px solid #2a3142;
  box-shadow: 0 -8px 24px rgba(0,0,0,.35);
}
.cookie-banner[hidden]{ display:none !important; }
.cookie-banner .cb-inner{
  max-width:1100px; margin:0 auto; padding:16px 16px;
  display:grid; gap:10px; align-items:center;
}
.cookie-banner h3{ margin:0; font-size:1rem; }
.cookie-banner p{ margin:0; color:#cfd5df; }
.cookie-banner .cb-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:10px; border:1px solid #2a3142;
  background:#151923; color:#e0e0e0; cursor:pointer;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.btn:hover{ background:#1b2230; border-color:#2e3850; }
.btn:active{ transform: translateY(1px); }
.btn-primary{
  background: linear-gradient(145deg, #ff5c5c, #ff5c5c);
  border-color:#ff5c5c; color:#fff;
}
.btn-primary:hover{ box-shadow:0 6px 16px rgba(255,79,216,.25); }

/* Map-Overlay (bis Zustimmung) */
.map .map-frame{
  position: relative; width:100%; max-width: 100%;
  min-height: 300px; background:#0f141d; border:1px solid #2a3142; border-radius:12px;
  overflow:hidden;
}
.map-consent{
  position:absolute; inset:0; display:grid; place-content:center; gap:12px;
  padding:18px; text-align:center; background:
    linear-gradient(0deg, rgba(21,25,35,.9), rgba(21,25,35,.9));
}
.map-consent p{ margin:0 auto 4px; max-width:560px; color:#cfd5df; }
.map-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* Wenn iframe geladen wird, Overlay ausblenden */
.map-frame.has-iframe .map-consent{ display:none; }

/* Light Mode */
body.light .cookie-banner{ background:#ffffff; border-top-color:#d9dbe0; box-shadow:0 -8px 24px rgba(0,0,0,.08); }
body.light .cookie-banner p{ color:#4a5568; }
body.light .btn{ background:#ffffff; color:#1a1a1a; border-color:#d9dbe0; }
body.light .btn:hover{ background:#f5f7fb; border-color:#c9d1e0; }
body.light .map .map-frame{ background:#ffffff; border-color:#d9dbe0; }
body.light .map-consent{ background:linear-gradient(0deg, rgba(255,255,255,.92), rgba(255,255,255,.92)); }
body.light .map-consent p{ color:#4a5568; }

/* ===== Cookie-Einstellungen Modal ===== */
.cookie-link{
  position: fixed; right: 20px; bottom: 80px; z-index: 99998;
  padding: 8px 12px; border-radius: 10px; border: 1px solid #2a3142;
  background:#151923; color:#e0e0e0; font-size:.9rem; cursor:pointer;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.cookie-link:hover{ background:#1b2230; border-color:#2e3850; }
.cookie-link:active{ transform: translateY(1px); }
body.light .cookie-link{ background:#ffffff; color:#1a1a1a; border-color:#d9dbe0; }
body.light .cookie-link:hover{ background:#f5f7fb; border-color:#c9d1e0; }

/* Modal-Layer */
.cookie-modal[hidden]{ display:none !important; }
.cookie-modal{ position: fixed; inset:0; z-index: 99999; }
.cm-backdrop{
  position:absolute; inset:0; background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}
.cm-dialog{
  position: relative; margin: 8vh auto 0; width: min(680px, 92vw);
  background:#0f141d; color:#e0e0e0; border:1px solid #2a3142; border-radius:16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  display: grid; grid-template-rows: auto 1fr auto;
}
.cm-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #2a3142; }
.cm-header h3{ margin:0; font-size:1.05rem; }
.cm-close{
  width:36px; height:36px; border-radius:8px; border:1px solid #2a3142; background:#151923; color:#e0e0e0; cursor:pointer;
}
.cm-close:hover{ background:#1b2230; border-color:#2e3850; }

.cm-body{ padding:14px 16px; display:grid; gap:14px; }
.cm-row{ padding:10px 12px; border:1px solid #222838; border-radius:12px; background:#151923; }
.cm-note{ margin:.35rem 0 0; color:#b7bfcc; font-size:.92rem; }

.cm-footer{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 16px; border-top:1px solid #2a3142;
}
.cm-actions{ display:flex; gap:10px; }

/* Switch */
.cm-switch{ display:inline-grid; grid-template-columns: auto 1fr; align-items:center; gap:10px; cursor:pointer; }
.cm-switch input{ position:absolute; opacity:0; pointer-events:none; }
.cm-slider{
  width:44px; height:26px; border-radius:999px; background:#2a3142; position:relative; transition: background .2s ease;
}
.cm-slider::after{
  content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; transition: transform .2s ease;
}
.cm-switch input:checked + .cm-slider{ background:#28a745; }
.cm-switch input:checked + .cm-slider::after{ transform: translateX(18px); }
.cm-label{ font-size: .98rem; }

/* Buttons wie zuvor */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:10px; border:1px solid #2a3142;
  background:#151923; color:#e0e0e0; cursor:pointer;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.btn:hover{ background:#1b2230; border-color:#2e3850; }
.btn:active{ transform: translateY(1px); }
.btn-primary{
  background: linear-gradient(145deg, #ff5c5c, #ff5c5c);
  border-color:#ff5c5c; color:#fff;
}
.btn-primary:hover{ box-shadow:0 6px 16px rgba(255,79,216,.25); }

/* Light Mode */
body.light .cm-dialog{ background:#ffffff; color:#1a1a1a; border-color:#d9dbe0; }
body.light .cm-header{ border-bottom-color:#d9dbe0; }
body.light .cm-footer{ border-top-color:#d9dbe0; }
body.light .cm-row{ background:#ffffff; border-color:#e5e7eb; }
body.light .cm-note{ color:#5a6575; }
body.light .cm-close{ background:#ffffff; color:#1a1a1a; border-color:#d9dbe0; }
body.light .cm-close:hover{ background:#f5f7fb; border-color:#c9d1e0; }

/* Map-Container begrenzen */
.about-grid .map { position: relative; }

/* Blur nur auf den iFrame-Platzhalter anwenden */
.map .map-frame {
  min-height: 300px;
  filter: blur(6px);
  transition: filter .2s ease;
}

/* Overlay nur über der Karte, nicht über der ganzen Section */
.map .map-consent {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 14px;
  text-align: center;
  background: rgba(15,17,21,.35); /* optionaler Abdunkler */
  /* kein globaler Blur nötig: der Blur liegt auf .map-frame */
}

/* Nach Einwilligung: Blur weg + Overlay aus */
.map.is-consented .map-frame { filter: none; }
.map.is-consented .map-consent { display: none; }


:root { --accent:#ff5c5c; }
mark { background: color-mix(in oklab, var(--accent) 22%, transparent); padding:.05em .25em; border-radius:.35em; }


:root { --accent: #ff5c5c; }
.hl { color: var(--accent); font-weight: 700; }

:root{
  --p56-accent1:#ff5c5c;   /* Orange/Rosa */
  --p56-accent2:#ff4fd8;   /* Lila/Pink  */
}

.p56-loader{ display:none; justify-content:center; margin-top:px; }
.p56-loader.show{ display:flex; }

.dotwrap{
  width:200px; height:60px; position:relative; z-index:1;
}

.dot{
  width:20px; height:20px; position:absolute; border-radius:50%;
  left:15%; transform-origin:50%;
  background: linear-gradient(145deg, var(--p56-accent1), var(--p56-accent2));
  animation: dot-bounce .5s alternate infinite ease;
}
.dot:nth-child(2){ left:45%; animation-delay:.2s; }
.dot:nth-child(3){ left:auto; right:15%; animation-delay:.3s; }

@keyframes dot-bounce{
  0%{ top:60px; height:5px; border-radius:50px 50px 25px 25px; transform:scaleX(1.7); }
  40%{ height:20px; border-radius:50%; transform:scaleX(1); }
  100%{ top:0; }
}

.dotshadow{
  width:20px; height:4px; border-radius:50%;
  position:absolute; top:62px; left:15%; z-index:-1;
  background: rgba(0,0,0,.85); filter: blur(1px); transform-origin:50%;
  animation: dotshadow-a .5s alternate infinite ease;
}
.dotshadow:nth-child(4){ left:45%; animation-delay:.2s; }
.dotshadow:nth-child(5){ left:auto; right:15%; animation-delay:.3s; }

@keyframes dotshadow-a{
  0%{ transform:scaleX(1.5); }
  40%{ transform:scaleX(1); opacity:.7; }
  100%{ transform:scaleX(.2); opacity:.4; }
}

/* Light-Mode: Schatten etwas heller */
body.light .dotshadow{ background: rgba(0,0,0,.5); }

/* === Hero (Dark/Light via body.dark / body.light) === */
:root{
  --p56-bg:#0d1016;
  --p56-bg2:#0f1115;
  --p56-text:#e9edf5;
  --p56-muted:#b9c2d3;
  --p56-grid:rgba(255,255,255,.04);
  --p56-shape:rgba(255,255,255,.03);
  --p56-accent1:#ff7a00; /* orange */
  --p56-accent2:#7b2fff; /* violett */
  --p56-hero-h:800px;    /* Zielhöhe wie Vorlage */
}
body.light{
  --p56-bg:#f7f8fb;
  --p56-bg2:#eef2f7;
  --p56-text:#111318;
  --p56-muted:#4b5563;
  --p56-grid:rgba(17,19,24,.06);
  --p56-shape:rgba(17,19,24,.05);
}

.hero-portal{
  position:relative;
  min-height:var(--p56-hero-h);
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(1200px 800px at 80% 10%, color-mix(in oklab, var(--p56-bg2) 80%, black 10%) 0%, transparent 60%),
    radial-gradient(800px 600px at 10% 90%, color-mix(in oklab, var(--p56-bg) 85%, black 7%) 0%, transparent 65%),
    linear-gradient(160deg, var(--p56-bg) 0%, var(--p56-bg2) 100%);
  color:var(--p56-text);
  padding-top:calc(var(--nav-h,72px) + 24px); /* Abstand zur Navbar */
}
.hero-portal::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(transparent 95%, var(--p56-grid) 96%, transparent 97%) 0 0/100% 28px,
    linear-gradient(90deg, transparent 95%, var(--p56-grid) 96%, transparent 97%) 0 0/28px 100%,
    radial-gradient(180px 140px at 90% 20%, var(--p56-shape), transparent 70%),
    radial-gradient(220px 160px at 85% 55%, color-mix(in oklab, var(--p56-shape), transparent 40%), transparent 70%),
    radial-gradient(200px 140px at 92% 82%, color-mix(in oklab, var(--p56-shape), transparent 20%), transparent 70%);
  opacity:.6; pointer-events:none; z-index:0;
}

.p56-hero-inner{
  position:relative; z-index:2;
  width:100%; max-width:1280px; margin:0 auto;
  padding:64px 24px 96px;
}
.p56-brand{ display:flex; align-items:center; gap:16px; margin-bottom:28px; }
.p56-logo{
  width:64px; height:64px; border-radius:14px; flex:0 0 auto;
  background:linear-gradient(135deg, var(--p56-accent1), var(--p56-accent2));
  box-shadow:0 10px 28px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.08);
}
body.light .p56-logo{
  box-shadow:0 8px 20px rgba(0,0,0,.15), inset 0 0 0 1px rgba(0,0,0,.05);
}
.p56-brand-title{ font-weight:800; letter-spacing:.4px; line-height:1; font-size:clamp(22px,2.4vw,28px); }
.p56-brand-sub{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--p56-muted); margin-top:4px; }

.p56-hero-h1{
  margin:28px 0 0;
  font-size:clamp(32px,6vw,72px);
  font-weight:800; line-height:1.07; letter-spacing:.2px;
  max-width:12ch; text-wrap:balance;
}
.p56-hero-h1 .br{ display:block; }

.p56-cta{
  display:inline-block; margin-top:28px; padding:14px 22px;
  font-weight:700; border-radius:12px; border:0; text-decoration:none;
  color:#0d0f14; background:linear-gradient(90deg, var(--p56-accent1), var(--p56-accent2));
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
body.light .p56-cta{ color:#0b0d12; }
.p56-cta:active{ transform:translateY(1px); }

.p56-swoosh{
  position:absolute; inset:auto -10% 0 -10%;
  height:320px; z-index:1; opacity:.9;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.35));
}

@media (max-width:900px){
  .hero-portal{ min-height:640px; }
  .p56-swoosh{ height:260px; }
}
@media (max-width:560px){
  .p56-brand{ gap:12px; }
  .p56-logo{ width:52px; height:52px; border-radius:12px; }
  .p56-hero-h1{ max-width:16ch; }
}

/* === HERO-Fixes (Abstand, Schriftgröße, Full-Bleed) === */

/* 1) Full-Bleed: Hero trotz Wrapper bis an den Bildschirmrand ziehen */
#home .hero-portal{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* 2) Weniger Abstand zur Navbar (vorher +24px) */
#home .hero-portal{
  padding-top: calc(var(--nav-h, 72px) + 8px);
  padding-bottom: 72px; /* kannst du bei Bedarf weiter reduzieren */
}

/* 3) Schrift etwas kleiner */
#home .p56-hero-h1{
  font-size: clamp(26px, 5vw, 60px);   /* vorher clamp(32px, 6vw, 72px) */
  max-width: 14ch;                     /* etwas mehr Breite erlaubt */
  margin-top: 20px;
}
#home .p56-brand-title{
  font-size: clamp(20px, 2vw, 26px);
}
#home .p56-brand{ gap: 12px; margin-bottom: 22px; }

/* 4) Innenabstände links/rechts enger, aber nicht zentriert begrenzen */
#home .p56-hero-inner{
  max-width: none;          /* Containerbegrenzung aufheben */
  padding-left: 5vw;        /* sanfter Seitenabstand für Inhalt */
  padding-right: 5vw;
}

/* 5) Swoosh etwas flacher, damit er nicht dominiert */
#home .p56-swoosh{ height: 280px; }
@media (max-width: 900px){
  #home .p56-swoosh{ height: 220px; }
}

/* Optional: auf sehr kleinen Screens Headline noch kompakter */
@media (max-width: 520px){
  #home .p56-hero-h1{ font-size: clamp(22px, 6vw, 42px); max-width: 18ch; }
  #home .p56-logo{ width:48px; height:48px; }
}

/* Swoosh wirklich full-bleed zentriert, ohne seitliches „Halten“ */
#home .p56-swoosh{
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100vw;      /* volle Bildschirmbreite */
  height: 280px;     /* wie gehabt, anpassen wenn du willst */
  opacity: .9;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.35));
  pointer-events: none;
}

/* Falls vorher gesetzt: sicherstellen, dass keine alten insets greifen */
#home .p56-swoosh{ top: auto; right: auto; }
@media (max-width: 900px){ #home .p56-swoosh{ height: 220px; } }

/* Hero direkt an Navbar anschließen */
#home .hero-portal{
  padding-top: 0;       /* kein extra Abstand oben */
  margin-top: 0;        /* sicherstellen, dass nichts verschoben wird */
}


/* --- HOME/HERO: ganz oben anliegen + full-bleed + links eingerückt --- */

/* Hero soll NICHT vertikal zentriert sein und kein Section-Padding oben haben */
#home.section{
  align-items: flex-start;   /* statt center */
  justify-content: stretch;  /* statt center */
  padding: 0;                /* kein globales Section-Padding für den Hero */
}

/* die globale "Platz für fixen Header"-Regel hier überschreiben */
#home .section-inner{
  padding-top: 0 !important;
}

/* Hero selbst: direkt unter Navbar, etwas kompakter */
#home .hero-portal{
  /* direkt an die Navbar */
  margin-top: 0;
  padding-top: 0;

  /* insgesamt etwas flacher als 800px */
  min-height: min(100vh, 800px);
}

/* Inhalt links sauber eingerückt und full-bleed */
#home .p56-hero-inner{
  max-width: none;
  padding-left: clamp(28px, 7vw, 120px);   /* mehr Abstand links */
  padding-right: clamp(20px, 7vw, 120px);
  padding-top: 18px;                       /* minimal Luft unter der Navbar */
}

/* Brand (Logo + Unterzeile) UNTEREINANDER und linksbündig */
#home .p56-brand{
  flex-direction: column;      /* statt row */
  align-items: flex-start;     /* linksbündig */
  gap: 10px;
  margin-bottom: 16px;         /* etwas kompakter */
}

/* Headline kleiner + linksbündig, bündig mit Brand */
#home .p56-hero-h1{
  font-size: clamp(24px, 4.8vw, 52px);     /* kleiner als zuvor */
  max-width: 18ch;
  margin-top: 8px;
  text-align: left;                         /* falls global center greift */
}

/* Brand-Typo etwas kleiner */
#home .p56-brand-title{ font-size: clamp(18px, 1.9vw, 24px); }
#home .p56-brand-sub  { font-size: 11px; }

/* Swoosh bleibt full-bleed – leicht flacher damit weniger „zieht“ */
#home .p56-swoosh{ height: 240px; }
@media (max-width: 900px){ #home .p56-swoosh{ height: 200px; } }

/* Falls irgendwo center vererbt: nur den Hero-Block selbst links ausrichten */
#home .hero-portal,
#home .p56-hero-inner{
  text-align: left;
}

/* Kompetenzen: Globus höher ziehen (nur Desktop) */
#skills .globe-wrap{
  margin-top: -42vh;   /* vorher -20vh */
}

/* Optional: etwas weniger Top-Padding in der Section */
#skills.section{
  padding-top: 2rem;   /* vorher 4rem */
}

/* Mobile unverändert lassen */
@media (max-width: 980px){
  #skills .globe-wrap{ margin-top: 0; }
}

.p56-consent-label input[type="checkbox"] { margin-top:.2rem; }
.p56-submit[disabled] { opacity:.6; cursor:not-allowed; }

.city {
  color: #ff5c5c; /* oder deine Brandfarbe */
}

/* --- Services-Grid: Hintergrund der Gesamtbox entfernen --- */
.svc-grid.home-services {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0;              /* ggf. anpassen, falls du Außenabstand brauchst */
}
/* Falls es dort Deko-Pseudoelemente gibt, killen: */
.svc-grid.home-services::before,
.svc-grid.home-services::after {
  content: none !important;
}

/* --- Layout der Kacheln (bleibt) --- */
.svc-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.svc-item {
  background: var(--card);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 18px;
}
body.light .svc-item {
  background: #fff;
  border-color: #e5e7eb;
}

/* --- Grüne Häkchen anstelle von Standard-Bullets --- */
.svc-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.svc-list li {
  position: relative;
  margin: 8px 0;
  padding-left: 26px;             /* Platz für das Häkchen */
}
.svc-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0.15em;                    /* optisch mittig zur Textzeile */
  font-weight: 800;
  color: var(--ok, #10b981);      /* nutzt deine OK-Farbe */
  line-height: 1;
}

/* Optional: Icon/CTA-Feinschliff (kannst du lassen, wenn du willst) */
.svc-icon { margin-bottom: 8px; font-size: 28px; }
.svc-title { margin: 0 0 6px; }
.svc-text  { margin: 0 0 8px; color: #b5b5b5; }
body.light .svc-text { color: #515761; }
.svc-cta {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  text-decoration: none;
  background: linear-gradient(90deg, var(--brand, #FF4D6D), var(--brand2, #D62828));
  color: #fff;
  font-weight: 700;
}
.svc-cta:hover { opacity: .9; text-decoration: none; }

/* Logo-Container: keine Placeholder-Optik, wenn ein Bild drin ist */
.p56-logo {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  flex: 0 0 auto;
  overflow: hidden;           /* schneidet sauber zu */
  background: none;           /* Placeholder aus */
  box-shadow: none;           /* Placeholder-Rand aus */
}

/* Bild füllt die Box sauber */
.p56-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;        /* nichts verzerren */
  background: transparent;    /* kein Weiß hinter transparenten Logos */
  border-radius: inherit;
}


/* === Zick-Zack clean: keine Boxen, kein Rahmen === */
.zz-box{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
body.light .zz-box{
  background: transparent !important;
  border: 0 !important;
}

/* Überschrift der Sektion mittig lassen */
.section.section--auto .section-inner > h2{
  text-align: center;
  margin-bottom: 1.2rem;
}

/* Text unter der Überschrift linksbündig */
.zz-copy{
  text-align: left;
  max-width: 60ch;           /* angenehme Zeilenlänge */
}
.zz-copy h3{
  margin: 0 0 6px;
  text-align: left;
  margin-top: 30px;
}
.zz-copy p{ margin: .35rem 0 .6rem; }

/* Bilder „clean“ auf dem Hintergrund (keine Box), nur sanft gerundet */
.zz-media img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;       /* optional: auf 0 setzen, falls komplett kantig gewünscht */
}

/* Zick-Zack-Grid bleibt wie gehabt, aber oben bündig für sauberes Layout */
.zz{ display: grid; gap: 1.6rem; }
.zz-item{
  display: grid;
  gap: 1.2rem;
  align-items: start;        /* statt center -> Copy startet oben */
  grid-template-columns: 1.15fr 1fr;
}
.zz-item:nth-child(even) .zz-copy{ order: 2; }
.zz-item:nth-child(even) .zz-media{ order: 1; }

@media (max-width: 980px){
  .zz-item{ grid-template-columns: 1fr; }
  .zz-item:nth-child(even) .zz-copy,
  .zz-item:nth-child(even) .zz-media{ order: initial; }
}

/* Liste mit grünen Häkchen bleibt */
.list-check{ list-style: none; margin: 10px 0 0; padding: 0; }
.list-check li{ position: relative; margin: 8px 0; padding-left: 26px; }
.list-check li::before{
  content: "✔";
  position: absolute;
  left: 0; top: .15em;
  font-weight: 800;
  color: var(--ok, #10b981);
  line-height: 1;
}

/* 1) SPEED-Bild (Block 1): unten etwas Luft auf Mobile/Tablet (gestapelt) */
@media (max-width: 980px){
  .zz-item:first-child .zz-media{
    margin-bottom: 12px;   /* Feintuning: 8–16px nach Geschmack */
  }
}

/* 2) Karten-Bild (Block 2): mehr Abstand zum rechts stehenden Text (nur Desktop) */
/* Sauberste Lösung: nur für diesen Block die Spalten-Lücke erhöhen */
@media (min-width: 981px){
  .zz-item:nth-child(2){
    column-gap: 6rem;      /* vorher ~1.2rem; gern 1.6–2.4rem testen */
  }
}

/* Optional: statt column-gap gezielt am Bild rechts Luft geben */
@media (min-width: 981px){
  .zz-item:nth-child(2) .zz-media{
    margin-right: 12px;    /* falls du die Lücke noch weiter betonen willst */
  }
}

/* --- ABOUT: Text links oben, Map rechts --- */
#about .about-grid{
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-areas: "copy map";
  gap: 2rem;
  align-items: start;           /* oben bündig */
}

#about .mission-text{ 
  grid-area: copy; 
  text-align: left; 
  justify-self: start;
}

/* Überschrift + Absätze sauber setzen (H2 oder H3, beides abgedeckt) */
#about .mission-text h2,
#about .mission-text h3{
  margin: 0 0 .6rem 0;
  line-height: 1.2;
}
#about .mission-text p{
  margin: .35rem 0 .6rem 0;
  text-align: justify;          /* Blocksatz */
  text-justify: inter-word;
  hyphens: auto;                 /* Silbentrennung */
  max-width: 68ch;               /* angenehme Zeilenlänge */
}

#about .about-map{
  grid-area: map;
  justify-self: stretch;
}
#about .about-map .map-frame{
  border-radius: 14px;
  overflow: hidden;
}

/* Mobil: stapeln (Text vor Map) */
@media (max-width: 900px){
  #about .about-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "map";
  }
}

#about .mission-text #mission-title{
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  line-height: 1.15;
  color: #ff5c5c
}

/* Kontakt + FAQ nebeneinander */
.contact-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  align-items:start;
}

/* FAQ-Karte */
.faq-card{
  margin-top: 27px;
  background:#151923;
  border:1px solid #2a3142;
  border-radius:16px;
  padding:18px;
  color:#e0e0e0;
}
body.light .faq-card{
  background:#ffffff;
  border-color:#e5e7eb;
  color:#1a1a1a;
}

.faq-card h3{
  margin:0 0 .6rem 0;
  font-size:clamp(1.05rem, 2.2vw, 1.25rem);
  line-height:1.2;
}

.faq-list details{
  border-top:1px solid rgba(255,255,255,.08);
  padding:.6rem 0;
}
.faq-list details:first-of-type{ border-top:0; }
body.light .faq-list details{ border-top-color:#e5e7eb; }

.faq-list summary{
  cursor:pointer;
  list-style:none;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{
  content:"▾";
  margin-left:auto;
  transition:transform .2s ease;
  color:var(--p56-accent1, #ff5c5c);
}
.faq-list details[open] summary::after{ transform:rotate(180deg); }

.faq-a{ margin-top:.35rem; color:#cfd5df; }
body.light .faq-a{ color:#4a5568; }

/* Mobil: untereinander */
@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; gap:14px; }
}

.p56-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 999px;
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  background: linear-gradient(135deg, #ff5c5c, #ff4fd8);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  text-decoration: none; /* falls als <a> */
}
.p56-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}
.p56-submit:active {
  transform: translateY(0);
  box-shadow: 0 8px 20px rgba(0,0,0,.20);
}

#toTopBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 999px;
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  background: linear-gradient(135deg, #ff5c5c, #ff4fd8);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  text-decoration: none; /* falls als <a> */
}
#toTopBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}
#toTopBtn:active {
  transform: translateY(0);
  box-shadow: 0 8px 20px rgba(0,0,0,.20);
}