/* =========================================
   Pfemeter – Style.css (clean v4.2)
   ========================================= */

/* ---------- Design-Variablen ---------- */
:root {
  --bg:#ffffff;
  --fg:#0b0c0f;
  --muted:#6b7280;
  --line:#e5e7eb;
  --shadow:0 6px 18px rgba(0,0,0,.08);

  --font-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --container:1100px;
  --content:980px;
  --radius:12px;
  --gap:1.0rem;

  --gutter-gap:24px;
  --header-height:72px;
}





/* ---------- Base ---------- */
*{box-sizing:border-box;}
html{font-size:16.2px; scroll-behavior:smooth;}
body{
  margin:0; padding:0;
  background:var(--bg); color:var(--fg);
  font-family:var(--font-sans); line-height:1.6;
}
a{color:inherit; text-decoration:none;}
.site-main{
  max-width:var(--container);
  margin:0 auto;
  padding:1.5rem 1rem;
}

/* ---------- Header & Navigation ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#fff; backdrop-filter:saturate(130%) blur(4px);
  border-bottom:1px solid #eee;

  display:flex; align-items:center; justify-content:center;
}
.header-left{
  position:absolute; left:1rem;
  display:flex; gap:.4rem; align-items:center;
}
.header-left .flag{padding:.25rem .3rem; border-radius:4px;}
.header-left .flag img{
  display:block; width:24px; height:16px;
  border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.06);
}
.header-left .flag:hover{opacity:.9;}

/* Menü */
.menu{
  display:flex; gap:18px; align-items:center; justify-content:center;
  list-style:none; margin:0; padding:0;
}
.menu > li::marker{content:none;}
.menu-link{
  display:inline-block; padding:.4rem .6rem; border-radius:.6rem;
  color:var(--fg); font-weight:500;
  transition:color .15s ease, background .15s ease;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px;
}
.menu-link:hover{color:#5e5e5e;}
.menu-item.has-children{position:relative;}
.menu-item.has-children > .menu-link::after{
  content:"▾"; margin-left:.25rem; font-size:1.1em; color:#000; vertical-align:baseline;
}

/* Dropdown */
.submenu{
  position:absolute; top:100%; left:0;
  min-width:220px; margin:-0.5rem 0 0 0; padding:6px 0;
  border:1px solid var(--line); border-radius:10px; background:#fff;
  box-shadow:var(--shadow); list-style:none; display:none; z-index:50;
}
.menu-item.has-children:hover > .submenu,
.menu-item.has-children.open > .submenu{display:block;}
.submenu-link{
  display:block; padding:8px 12px; border-radius:.4rem; color:var(--fg);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px;
}
.submenu-link:hover{background:#f6f6f6;}

/* ---------- Hero ---------- */
.hero{text-align:center; margin:2.6rem 0 2rem; padding:0 1rem;}
.hero h1{
  font-weight:800; letter-spacing:.2px;
  font-size:clamp(2rem,4.5vw,3.4rem);
  margin:0 0 .6rem 0;
}
.hero .subtitle{
  font-family:var(--font-mono);
  color:var(--muted);
  font-weight:400; font-size:1rem;
}

/* ---------- Tiles ---------- */
.tiles{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(3,1fr);
  max-width:var(--content); margin:0 auto;
}
@media(max-width:1100px){.tiles{grid-template-columns:repeat(2,1fr);}}
@media(max-width:720px){.tiles{grid-template-columns:1fr;}}

.tile--plain{
  position:relative; min-height:170px;
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); background:#fff;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tile--plain:hover{
  transform:translateY(-2px);
  border-color:#e5e5e5;
  box-shadow:var(--shadow);
}
.tile-inner{padding:1.2rem;}
.tile h2{margin:0 0 .35rem; font-size:1.08rem; font-weight:700; letter-spacing:.2px;}
.tile p{
  margin:0; color:var(--muted);
  font-family:var(--font-mono);
  font-size:.98rem; line-height:1.45;
}
.tile-caret{display:none !important;}

/* ---------- CTA ---------- */
.about-cta{margin-top:2.6rem;}
.cta{
  max-width:var(--content); margin:0 auto 4.5rem;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;
}
.btn{
  display:block; width:100%; text-align:center;
  padding:.78rem 1rem; border-radius:var(--radius);
  border:1px solid var(--line); background:#000; color:#fff;
  font-weight:600; letter-spacing:.2px;
  transition:filter .15s ease, transform .15s ease;
}
.btn:hover{filter:brightness(1.08); transform:translateY(-1px);}
@media(max-width:800px){.cta{grid-template-columns:1fr; gap:.9rem;}}

/* ---------- Content ---------- */
.content{
  max-width:var(--content);
  margin:0 auto;
  padding:0 0 3rem;
}
.content h1{font-size:clamp(1.9rem,3vw,2.4rem); margin:.2rem 0 1rem;}
.content .lead{color:var(--muted); font-family:var(--font-mono); font-size:1.06rem;}
.content p{line-height:1.75;}
.content img{display:block; width:100%; height:auto;}
.content img.portrait{max-width:420px; margin:1rem auto;}

/* ---- Über mich Layout (2 Spalten via Grid) ---- */
.content-wrap.about-layout{
  display: grid;
  grid-template-columns: 200px 1fr;   /* links: Bild/Links, rechts: Inhalt */
  gap: var(--gutter-gap);
  align-items: start;
  max-width: var(--content);
  margin: 0 auto;
  padding-bottom: 2rem;
}

/* WICHTIG: Sticky direkt auf dem Grid-Item */
.gutter-left{
  position: sticky;
  top: calc(var(--header-height) + 12px); /* + fixer Abstand */
  align-self: start;
  z-index: 20;
  margin: 0;           /* wichtig gegen Springen */

}

/* Der innere Wrapper braucht KEIN sticky mehr */
.about-sticky{
  display: grid;
  grid-auto-rows: max-content;
  gap: 10px;
  padding: 8px 0;
  background: var(--bg);
}

/* Bild & Nav wie gehabt */
.about-photo{
  width: 120px; height: 120px;
  object-fit: cover; border-radius: 12px;
  box-shadow: var(--shadow); cursor: zoom-in;
}
.about-nav{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.about-nav a{
  display:block;
  padding:4px 0;
  color:var(--fg);
  text-decoration:none;
  font-family:var(--font-sans);
  font-size:1rem;
  font-weight:500;
  transition:color .15s ease;
}

.about-nav a:hover{
  color:#5e5e5e;
}

.about-nav a.is-active{
  color:var(--muted);
  text-decoration:underline;
}

/* sanftes Scrollen & Anker-Offset */
html{ scroll-behavior: smooth; }
[id]{ scroll-margin-top: calc(var(--header-height) + 12px); }

/* harte Garantien: kein overflow, der sticky killt */
html, body, .site-main, .content-wrap { overflow: visible !important; }

/* mobil einspaltig */
@media (max-width: 900px){
  .content-wrap.about-layout{ grid-template-columns: 1fr; }
  .gutter-left{ position: static; } /* auf Mobil nicht kleben lassen */
}


/* mobil: einspaltig */
@media(max-width:900px){
  .gutter-left{float:none; margin:0 auto 1rem auto; display:flex; justify-content:center;}
  .about-sticky{top:calc(var(--header-height) + 8px); align-items:center;}
}

/* ---------- Bildzoom ---------- */
.zoom-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  z-index:9999;
}
.zoom-modal{
  position:fixed; top:50%; left:50%;
  transform:translate(-50%,-50%);
  max-width:90vw; max-height:90vh;
  z-index:10000;
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  cursor:zoom-out;
}
body.zoom-open{overflow:hidden;}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid #e0e0e0;
  padding:1rem; color:var(--muted);
  text-align:center; font-size:.95rem;
  font-family:var(--font-mono);
}
.site-footer nav{margin-top:.3rem;}
.site-footer nav a{color:var(--muted);}
.site-footer nav a+a::before{
  content:" · "; color:#b6b6b6; margin:0 .25rem;
}

/* ---------- Responsive Tweaks ---------- */
@media(max-width:720px){
  .header-left{position:static; margin-right:auto;}
  .site-header{justify-content:space-between;}
  .submenu{left:0;}
  .content img{max-width:100%;}
  .header-left .flag img{width:28px; height:20px;}
}






/* ===== Header Responsive Fix ===== */
.site-header {
  position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: .6rem 1rem;
  flex-wrap: wrap;           /* <— erlaubt Umbrechen statt Zoomen */
  max-width: 1200px;
  margin: 0 auto;
}

/* Sprachumschalter (Flags) */
.lang-switch {
  display: flex; align-items: center; gap: 8px;
  flex: 0 0 auto;
}
.lang-switch img,
.lang-switch svg {
  width: 28px; height: 20px; display: block; border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}

/* Navigation */
.main-nav {
  display: flex; align-items: center; gap: 18px;
  flex: 1 1 auto; min-width: 0;          /* <— verhindert Überlauf/Zoom */
}
.main-nav a { white-space: nowrap; }

/* Kleine Screens (Portrait) */
@media (max-width: 640px) {
  .header-inner { gap: 8px; padding: 8px 12px; }
  .lang-switch { order: -1; width: 100%; justify-content: flex-start; } /* Flags ganz oben in eigener Zeile */
  .main-nav { width: 100%; flex-wrap: wrap; row-gap: 8px; }
  .main-nav a { font-size: 0.98rem; }
}

/* Sehr kleine / enge Breite */
@media (max-width: 420px) {
  .main-nav { gap: 12px; }
  .lang-switch img,
  .lang-switch svg { width: 24px; height: 18px; }
}


/* Allgemein: horizontales Überlaufen verhindern */
html, body { max-width: 100%; overflow-x: hidden; }



/* --- HEADER WRAP FIX (Overrides) --- */

/* 1) Flags nicht absolut positionieren */
.header-left{
  position: static !important;      /* war: absolute */
  left: auto !important;
  display: flex;
  gap: .4rem;
  align-items: center;
  margin-right: auto;               /* schiebt Menü nach rechts */
}

/* 2) Header-Container darf umbrechen */
.site-header{
  display: block;                   /* statt: display:flex zentriert */
}
.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding:.6rem 1rem;
  flex-wrap: wrap;                  /* ERZWINGT Umbruch */
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap:wrap;
}

/* 3) Menü ist Flex und darf ebenfalls umbrechen */
.main-nav, .menu{
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1 1 auto;
  min-width: 0;                     /* verhindert Überlauf */
  flex-wrap: wrap;                  /* Menü selbst darf umbrechen */
}

/* 4) Links dürfen auf kleinen Screens umbrechen */
@media (max-width: 640px){
  .header-left{
    order: -1;                      /* Flags ganz oben */
    width: 100%;
    justify-content: flex-start;
  }
  .main-nav, .menu{
    width: 100%;
    row-gap: 8px;
  }
  .menu-link{
    white-space: normal !important; /* war: nowrap */
    max-width: none;                 /* kein Ellipsis nötig */
  }
}

/* Querformat kompakter */
@media (max-height: 420px) and (orientation: landscape){
  .header-inner{ padding: .6rem 1rem; }
  .menu-link{ font-size: 0.95rem; }
}

/* Sicherheit: keine horizontale Scrollbar */
html, body { max-width: 100%; overflow-x: hidden; }


.site-header{ box-sizing:border-box; min-height: var(--header-height, 72px); }

@media (min-width: 901px){
  .header-inner{ flex-wrap: nowrap; }
  .menu{ flex-wrap: nowrap; }
}