/* ==========================================================================
   Helge Kletti — style.css
   Mobile-First Architektur:
   - Unpräfixierte Regeln = Basis-Styling für Smartphones (Standard).
   - @media (min-width: 768px)  -> Tablet-Anpassungen.
   - @media (min-width: 1024px) -> Desktop-Anpassungen.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
  --paper: #FBF7EF;
  --paper-alt: #F1EADA;
  --ink: #241F1B;
  --ink-soft: #4A4339;
  --roast: #D2703C;
  --coolness: #2F8FA0;
  --sprout: #5F9A4A;
  --sun: #E0A22C;
  /* Textsichere, abgedunkelte Varianten (WCAG-AA, >=4.5:1 auf Weiß/Paper).
     Die hellen Originalfarben oben bleiben für Ränder/Hintergründe/Buttons,
     wo kein Fließtext direkt auf der Farbe steht. */
  --roast-text: #B85C2A;
  --coolness-text: #2A8190;
  --sprout-text: #50823E;
  --sun-text: #9C6E17;
  --line: rgba(36,31,27,.12);
  --radius: 10px;
}

/* ------------------------------------------------------------------------
   1. Reset & Basiselemente (mobile default)
   ------------------------------------------------------------------------ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:84px;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans',sans-serif;
  font-size:16px;           /* mobile: etwas kompakter */
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Fraunces',serif;
  font-weight:600;
  line-height:1.15;
  margin:0 0 .4em;
  letter-spacing:-0.01em;
}
a{color:inherit;text-decoration:none;}

/* Globaler, responsiver Image-Reset */
img{max-width:100%;height:auto;display:block;}

/* iOS: grauen Tap-Highlight-Schleier entfernen */
a, button, .btn, .navtoggle, .navclose{
  -webkit-tap-highlight-color: transparent;
}

/* "Zum Inhalt springen": unsichtbar, bis per Tab fokussiert */
.skip-link{
  position:absolute;left:-999px;top:auto;
  background:var(--ink);color:var(--paper);
  padding:12px 18px;border-radius:0 0 8px 0;
  z-index:50;font-size:14px;font-weight:600;
}
.skip-link:focus{left:0;top:0;}

.wrap{max-width:1080px;margin:0 auto;padding:0 20px;}

/* Nur für Screenreader hörbar, visuell unsichtbar */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.eyebrow{
  font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  display:inline-block;margin-bottom:10px;
}

/* ------------------------------------------------------------------------
   2. Header / Logo (mobile default: kompakte Leiste)
   ------------------------------------------------------------------------ */
header.site{
  position:sticky;top:0;z-index:20;
  background:rgba(251,247,239,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
header.site .bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;max-width:1080px;margin:0 auto;
}
.brand{font-family:'Fraunces',serif;font-weight:600;font-size:18px;}
.brand span{color:var(--roast-text);}

/* ------------------------------------------------------------------------
   3. Off-Canvas-Navigation (mobile default = Ausgangszustand)
   Ausschließlich transform wird animiert (GPU-beschleunigt).
   Kein "left"/"width" wird verändert -> ruckelfreie Performance auf iPhones.
   ------------------------------------------------------------------------ */
.navtoggle{
  display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line);color:var(--ink);
  font-size:19px;width:44px;height:44px;border-radius:8px;cursor:pointer;
}

nav.main{
  /* Off-Canvas-Panel, standardmäßig rechts außerhalb des Screens */
  position:fixed;
  top:0; right:0;
  width:min(320px, 82vw);
  height:100dvh;               /* dynamic viewport height: iOS-Adressleiste sicher */
  background:var(--paper);
  z-index:30;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:88px 28px 28px;
  gap:22px;
  font-size:18px;font-weight:500;
  box-shadow:-8px 0 30px rgba(0,0,0,.15);
  transform:translateX(100%);  /* ausgeblendet */
  visibility:hidden;           /* aus Tab-Reihenfolge & AT-Baum, solange geschlossen */
  transition:transform 0.3s ease-in-out, visibility 0s linear 0.3s;
  overflow-y:auto;
}
nav.main.is-open{
  transform:translateX(0);     /* eingeblendet */
  visibility:visible;
  transition:transform 0.3s ease-in-out; /* visibility sofort, kein Delay beim Öffnen */
}
nav.main a{padding:6px 0;opacity:.85;}
nav.main a:hover, nav.main a.active{opacity:1;color:var(--roast-text);}

.navclose{
  display:flex;align-items:center;justify-content:center;
  position:absolute;top:20px;right:20px;
  background:none;border:1px solid var(--line);color:var(--ink);
  width:44px;height:44px;font-size:17px;border-radius:8px;cursor:pointer;
}

/* Abgedunkelter Hintergrund hinter dem Off-Canvas-Menü */
.navoverlay{
  position:fixed;inset:0;background:rgba(36,31,27,.45);
  opacity:0;pointer-events:none;
  transition:opacity 0.3s ease-in-out;
  z-index:29;
}
.navoverlay.is-open{opacity:1;pointer-events:auto;}

/* ------------------------------------------------------------------------
   4. Layout-Grids (mobile default: einspaltig)
   ------------------------------------------------------------------------ */
section{padding:52px 0;}
.sectionhead{max-width:620px;margin-bottom:28px;}
.sectionhead h2{font-size:clamp(24px,6vw,36px);}
.sub{color:var(--ink-soft);font-size:16px;}

.hero{padding:52px 0 40px;}
.hero .triad{font-size:clamp(28px,8vw,54px);margin-bottom:16px;}
.hero .triad .accent{color:var(--roast);}
.hero .lede{color:var(--ink-soft);font-size:17px;}
.hero .role{font-size:14px;font-weight:600;color:var(--coolness-text);margin-top:18px;}

.btn{
  display:inline-block;font-size:14px;font-weight:600;
  padding:13px 20px;border:2px solid var(--ink);border-radius:8px;
  transition:background .15s,color .15s;
}
.btn:hover{background:var(--ink);color:var(--paper);}
.btn.solid{background:var(--roast-text);border-color:var(--roast-text);color:#fff;}
.btn.solid:hover{background:#B95A2C;border-color:#B95A2C;}

.grid2{display:grid;grid-template-columns:1fr;gap:18px;}     /* mobile: 1 Spalte */
.grid4{display:grid;grid-template-columns:1fr;gap:18px;}     /* mobile: 1 Spalte */

.card{
  background:#fff;border-radius:var(--radius);padding:24px 20px;
  border-top:4px solid var(--roast);
  box-shadow:0 6px 20px -12px rgba(36,31,27,.25);
}
.card h3{font-size:20px;}
.card-question{font-family:'Fraunces',serif;font-style:italic;font-size:15px;color:var(--ink-soft);margin:0 0 4px;}
.card p{color:var(--ink-soft);font-size:15px;margin:.5em 0 0;}
.card .buchbar{margin-top:14px;font-size:13.5px;color:var(--ink-soft);}

.tint{background:var(--paper-alt);}

.tag{
  display:inline-block;font-size:12px;font-weight:600;letter-spacing:.03em;
  padding:4px 10px;border-radius:999px;background:var(--paper-alt);color:var(--ink-soft);
  margin-right:6px;margin-bottom:6px;
}

.portrait{width:100%;max-width:320px;margin:0 auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);}
.portrait-note{font-size:12px;color:var(--ink-soft);margin:8px auto 0;max-width:320px;text-align:left;}

.pull{
  font-family:'Fraunces',serif;font-size:clamp(24px,7vw,40px);font-weight:600;
  text-align:center;max-width:780px;margin:0 auto;color:var(--ink);
}
.pull-sub{text-align:center;color:var(--ink-soft);margin-top:14px;font-size:14px;}

.timeline{border-left:2px solid var(--line);margin-left:6px;}
.timeline .row{position:relative;padding:0 0 22px 22px;}
.timeline .row::before{content:"";position:absolute;left:-7px;top:5px;width:11px;height:11px;border-radius:50%;background:var(--roast);}
.timeline .row .yr{font-size:12px;font-weight:700;color:var(--roast-text);}
.timeline .row h3{font-family:'Fraunces',serif;font-size:16px;margin:.2em 0 .1em;font-weight:600;}
.timeline .row p{margin:0;color:var(--ink-soft);font-size:14px;}

footer.site{border-top:1px solid var(--line);padding:32px 0;background:var(--paper-alt);}
footer.site .wrap{display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
footer.site .flinks{display:flex;flex-wrap:wrap;gap:6px;font-size:14px;color:var(--ink-soft);}
footer.site .flinks a{padding:8px 6px;margin:-8px -6px;display:inline-block;}
footer.site .flinks a:hover{color:var(--ink);}
.copy{font-size:12.5px;color:var(--ink-soft);}


/* ==========================================================================
   TABLET  (>= 768px)
   ========================================================================== */
@media (min-width: 768px){
  body{font-size:17px;}
  .wrap{padding:0 24px;}
  section{padding:64px 0;}
  .hero{padding:64px 0 48px;}
  .hero .lede{font-size:18px;max-width:600px;}

  .grid2{grid-template-columns:repeat(2,1fr);gap:20px;}
  .grid4{grid-template-columns:repeat(2,1fr);gap:18px;}

  footer.site .wrap{flex-direction:row;justify-content:space-between;align-items:center;}
}

/* ==========================================================================
   DESKTOP  (>= 1024px)
   Navigation verwandelt sich zurück in eine horizontale Leiste,
   Hamburger-Button verschwindet, Off-Canvas-Verhalten wird deaktiviert.
   ========================================================================== */
@media (min-width: 1024px){
  .navtoggle{display:none;}
  .navclose{display:none;}
  .navoverlay{display:none;}

  nav.main{
    position:static;             /* zurück in den normalen Textfluss */
    width:auto; height:auto;
    flex-direction:row;
    align-items:center;
    gap:26px;
    padding:0;
    background:transparent;
    box-shadow:none;
    transform:none;              /* kein Off-Canvas mehr nötig */
    visibility:visible;          /* Desktop: immer sichtbar & fokussierbar */
    transition:none;
    overflow:visible;
    font-size:15px;
  }
  nav.main a{padding:4px 0;border-bottom:2px solid transparent;}
  nav.main a:hover, nav.main a.active{border-color:var(--roast);color:inherit;}

  .grid4{grid-template-columns:repeat(4,1fr);}

  /* Über mich: Text nimmt mehr Raum ein als das Portrait, damit das
     Bild auf breiten Screens nicht das Layout dominiert. Quadratischeres
     Format statt 4:5, damit die Bildhöhe besser zur Texthöhe passt. */
  #ueber-mich .grid2{grid-template-columns:3fr 2fr;}
  #ueber-mich .portrait{aspect-ratio:1/1;max-width:360px;}
  #ueber-mich .portrait-note{max-width:360px;}

  .sectionhead h2{font-size:clamp(26px,4vw,36px);}
  .pull{font-size:clamp(26px,4vw,40px);}
}


/* ==========================================================================
   BARRIEREFREIHEIT: Sichtbarer Tastatur-Fokus
   Erscheint nur bei Tastaturbedienung (nicht bei Maus-/Touch-Klicks),
   dank :focus-visible. Kein Element verliert dadurch seinen Fokusring.
   ========================================================================== */
*:focus-visible{
  outline:3px solid var(--coolness);
  outline-offset:3px;
}
*:focus:not(:focus-visible){
  outline:none;
}

/* ==========================================================================
   BARRIEREFREIHEIT: Reduzierte Bewegung
   Für Nutzer:innen, die unter Systemeinstellungen Animationen deaktiviert
   haben (motorische/neurologische Einschränkungen, Reisekrankheit etc.).
   Entfernt/verkürzt praktisch alle Animationen, Übergänge und Smooth-Scroll.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, ::before, ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: scroll !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}