:root{
    --navy:#00234D;
    --navy-deep:#001631;
    --petrol:#004176;
    --petrol-light:#3E7CAE;
    --bg:#FBFAF7;
    --card:#FFFFFF;
    --line:#DEE2E6;
    --ink:#14202B;
    --muted:#5B6470;
    --radius:2px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
    line-height:1.55;
  }
  h1,h2,h3{
    font-family:'Newsreader',serif;
    font-weight:500;
    color:var(--navy);
    margin:0;
  }
  a{color:inherit;}
  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--petrol);
    font-weight:500;
  }
  .wrap{
    max-width:1080px;
    margin:0 auto;
    padding:0 32px;
  }
  @media(max-width:640px){ .wrap{padding:0 20px;} }

  /* ---------- NAV ---------- */
  header.nav{
    position:sticky; top:0; z-index:50;
    background:rgba(251,250,247,.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 0;
  }
  .nav-inner img{ height:176px; width:auto; display:block; }
  .nav-links{ display:flex; gap:28px; align-items:center; }
  .nav-links a{
    font-size:14px; text-decoration:none; color:var(--ink); font-weight:500;
  }
  .nav-links a.active{ color:var(--petrol); }
  .nav-cta{
    background:var(--navy); color:#fff !important; padding:9px 18px;
    border-radius:var(--radius); font-size:14px; font-weight:600;
    text-decoration:none;
  }
  .nav-cta:hover{ background:var(--petrol); }
  @media(max-width:640px){
    .nav-links a:not(.nav-cta){ display:none; }
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    overflow:hidden;
    padding:112px 0 96px;
    border-bottom:1px solid var(--line);
  }
  .hero-inner{ position:relative; z-index:2; max-width:760px; }
  .hero .eyebrow{ margin-bottom:18px; display:block; }
  .hero h1{
    font-size:clamp(38px, 5.6vw, 60px);
    line-height:1.08;
    letter-spacing:-.01em;
  }
  .hero h1 em{ font-style:italic; color:var(--petrol); }
  .hero p.lead{
    margin-top:22px;
    font-size:18px;
    color:var(--muted);
    max-width:560px;
  }
  .hero-actions{ margin-top:36px; display:flex; gap:14px; flex-wrap:wrap; }
  .btn-primary{
    background:var(--navy); color:#fff; padding:14px 26px;
    border-radius:var(--radius); text-decoration:none; font-weight:600; font-size:15px;
    display:inline-flex; align-items:center; gap:8px;
    transition:background .15s ease;
  }
  .btn-primary:hover{ background:var(--petrol); }
  .btn-secondary{
    border:1px solid var(--navy); color:var(--navy); padding:13px 26px;
    border-radius:var(--radius); text-decoration:none; font-weight:600; font-size:15px;
    display:inline-flex; align-items:center; gap:8px;
  }
  .btn-secondary:hover{ background:var(--navy); color:#fff; }

  /* signature accent line above hero image */
  .hero-accent{
    width:64px; height:2px; background:var(--petrol); margin-bottom:18px;
  }

  /* ---------- IMAGE PLACEHOLDERS ---------- */
  .img-placeholder{
    position:relative; overflow:hidden; border-radius:2px;
    background:repeating-linear-gradient(135deg,#EEF1F4,#EEF1F4 11px,#E3E8ED 11px,#E3E8ED 22px);
    border:1.5px dashed #B7C1CC;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; gap:10px; padding:28px;
  }
  .img-placeholder svg{ width:34px; height:34px; stroke:#8894A2; flex-shrink:0; }
  .img-placeholder .ph-title{
    font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.09em;
    text-transform:uppercase; color:#5B6470; font-weight:500;
  }
  .img-placeholder .ph-sub{ font-size:12.5px; color:#8893A0; max-width:260px; line-height:1.5; }

  /* Hero banner image */
  .hero-media{ margin-top:56px; }
  .hero-media .img-placeholder{ aspect-ratio:21/8; width:100%; }
  .hero-photo{ width:100%; height:auto; display:block; aspect-ratio:21/8; object-fit:cover; border-radius:2px; }
  @media(max-width:800px){
    .hero-media .img-placeholder{ aspect-ratio:4/5; }
    .hero-photo{ aspect-ratio:4/5; }
  }

  /* Compact page header for subpages */
  .page-header{ padding:72px 0 56px; border-bottom:1px solid var(--line); }
  .page-header .eyebrow{ margin-bottom:16px; display:block; }
  .page-header h1{ font-size:clamp(32px, 4.6vw, 46px); line-height:1.12; letter-spacing:-.01em; max-width:760px; }
  .page-header p.lead{ margin-top:18px; font-size:17px; color:var(--muted); max-width:620px; }

  /* Person / Persönlich section */
  .person{ background:var(--card); border-bottom:1px solid var(--line); }
  .person-grid{
    display:grid; grid-template-columns:0.8fr 1.2fr; gap:64px; align-items:center;
  }
  .person-image .img-placeholder{ aspect-ratio:4/5; width:100%; }
  .portrait-photo{ width:100%; height:auto; display:block; aspect-ratio:4/5; object-fit:cover; border-radius:2px; }
  .person-text h2{ font-size:30px; margin-top:14px; }
  .person-text .role{
    font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.06em;
    color:var(--petrol); margin-top:6px;
  }
  .person-text .bio{ color:var(--muted); font-size:15.5px; margin-top:18px; max-width:480px; }
  .person-quote{
    margin:26px 0 0; padding-left:22px; border-left:2px solid var(--petrol);
    font-family:'Newsreader',serif; font-style:italic; font-size:20px; color:var(--navy);
    line-height:1.5; max-width:480px;
  }
  @media(max-width:800px){ .person-grid{ grid-template-columns:1fr; gap:32px; } }

  /* ---------- SECTION GENERIC ---------- */
  section{ padding:88px 0; }
  .section-head{ max-width:620px; margin-bottom:52px; }
  .section-head .eyebrow{ margin-bottom:14px; display:block; }
  .section-head h2{ font-size:32px; line-height:1.2; }
  .section-head p{ color:var(--muted); margin-top:14px; font-size:16px; }

  /* Positioning */
  .positioning{ border-bottom:1px solid var(--line); }
  .positioning .grid{
    display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;
  }
  .positioning blockquote{
    font-family:'Newsreader',serif; font-style:italic; font-size:24px;
    color:var(--navy); margin:0; line-height:1.4; border-left:2px solid var(--petrol);
    padding-left:24px;
  }
  .positioning .body p{ color:var(--muted); font-size:16px; margin:0 0 16px; }
  @media(max-width:800px){ .positioning .grid{ grid-template-columns:1fr; gap:36px; } }

  /* USP / Kernversprechen */
  .usp{ background:#EFF4F8; border-bottom:1px solid var(--line); }
  .usp-statement{ max-width:720px; }
  .usp-statement h2{ font-size:34px; line-height:1.22; }
  .usp-statement h2 .accent{ color:var(--petrol); font-style:italic; }
  .usp-statement p{ color:var(--muted); font-size:17px; margin-top:16px; max-width:600px; }
  .usp-proof{
    margin-top:48px; display:grid; grid-template-columns:repeat(3,1fr); gap:36px;
  }
  .usp-proof .item{ display:flex; flex-direction:column; gap:10px; }
  .usp-proof .icon{
    width:42px; height:42px; border-radius:50%; background:var(--navy);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .usp-proof .icon svg{ width:19px; height:19px; stroke:#fff; }
  .usp-proof h4{ font-family:'Newsreader',serif; font-weight:600; font-size:19px; color:var(--navy); margin:4px 0 0; }
  .usp-proof p{ font-size:14.5px; color:var(--muted); margin:0; }
  @media(max-width:800px){ .usp-proof{ grid-template-columns:1fr; gap:28px; } }

  /* Pillars */
  .pillars{ background:var(--card); border-bottom:1px solid var(--line); }
  .pillar-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line);
  }
  .pillar{
    background:var(--card); padding:36px 30px 30px; position:relative; display:flex; flex-direction:column;
  }
  .pillar .num{
    font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--petrol);
    letter-spacing:.1em;
  }
  .pillar h3{
    font-size:21px; margin-top:16px; margin-bottom:2px; color:var(--navy);
  }
  .pillar .hook{
    font-family:'Newsreader',serif; font-style:italic; font-size:16.5px; color:var(--petrol);
    margin:8px 0 14px; line-height:1.4;
  }
  .pillar p.desc{ color:var(--muted); font-size:14.5px; margin:0 0 16px; }
  .pillar .concrete{
    margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
    font-size:13.5px; color:var(--navy-deep);
  }
  .pillar .concrete b{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--petrol); display:block; margin-bottom:6px; font-weight:500; }
  .pillar .tag{
    display:inline-block; margin-top:18px; font-family:'IBM Plex Mono',monospace;
    font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--navy-deep);
    border:1px solid var(--line); padding:4px 9px; border-radius:var(--radius);
    align-self:flex-start;
  }
  .pillar a.pillar-link{ text-decoration:none; }
  @media(max-width:800px){ .pillar-grid{ grid-template-columns:1fr; } }

  /* Why */
  .why .grid{
    display:grid; grid-template-columns:1fr 1fr; gap:48px;
  }
  .why ul{ list-style:none; margin:0; padding:0; }
  .why li{
    display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); font-size:15px;
  }
  .why li:first-child{ border-top:1px solid var(--line); }
  .why li .mark{ color:var(--petrol); font-weight:700; }
  @media(max-width:800px){ .why .grid{ grid-template-columns:1fr; } }
  .why-figure{
    background:var(--navy); color:#fff; padding:40px; border-radius:var(--radius);
  }
  .why-figure .eyebrow{ color:#8FB8DA; }
  .why-figure p{ font-family:'Newsreader',serif; font-size:20px; font-style:italic; line-height:1.5; margin-top:16px; }

  /* ---------- COURSE / SCHULUNGEN ---------- */
  .course-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; display:grid; grid-template-columns:0.9fr 1.1fr;
  }
  .course-card + .course-card{ margin-top:32px; }
  .course-media{ position:relative; }
  .course-media img{ width:100%; height:100%; min-height:260px; object-fit:cover; display:block; }
  .course-body{ padding:40px; display:flex; flex-direction:column; }
  .course-body .eyebrow{ margin-bottom:12px; }
  .course-body h3{ font-size:26px; line-height:1.2; }
  .course-body .hook{ font-family:'Newsreader',serif; font-style:italic; color:var(--petrol); font-size:16.5px; margin:10px 0 4px; }
  .course-meta{ display:flex; gap:18px; flex-wrap:wrap; margin:18px 0; font-size:13px; color:var(--muted); font-family:'IBM Plex Mono',monospace; }
  .course-meta span{ display:flex; align-items:center; gap:6px; }
  .course-body p.desc{ color:var(--muted); font-size:15px; margin:0 0 20px; }
  .course-modules{ list-style:none; margin:0 0 24px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; }
  .course-modules li{ font-size:13.5px; color:var(--navy-deep); padding-left:16px; position:relative; }
  .course-modules li::before{ content:"—"; position:absolute; left:0; color:var(--petrol); }
  .course-actions{ margin-top:auto; display:flex; gap:14px; flex-wrap:wrap; }
  @media(max-width:800px){
    .course-card{ grid-template-columns:1fr; }
    .course-media img{ min-height:220px; }
    .course-modules{ grid-template-columns:1fr; }
  }

  .courses-note{
    margin-top:40px; padding:22px 26px; border:1px dashed var(--line); border-radius:var(--radius);
    color:var(--muted); font-size:14px; background:var(--card);
  }

  /* Compact contact CTA (used on Hauptseite, links through to kontakt.html) */
  .contact-cta{ background:var(--navy-deep); color:#fff; text-align:center; }
  .contact-cta .eyebrow{ color:#8FB8DA; }
  .contact-cta h2{ color:#fff; }
  .contact-cta .section-head{ margin:0 auto 32px; }
  .contact-cta .section-head p{ color:#B7C4D2; }
  .contact-cta .actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

  /* ---------- CONTACT ---------- */
  .contact{
    background:var(--navy-deep); color:#fff;
  }
  .contact .eyebrow{ color:#8FB8DA; }
  .contact h2{ color:#fff; }
  .contact .section-head p{ color:#B7C4D2; }
  .contact-grid{
    display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:start;
  }
  @media(max-width:860px){ .contact-grid{ grid-template-columns:1fr; gap:44px; } }

  .contact-methods{ display:flex; flex-direction:column; gap:22px; }
  .contact-method{
    display:flex; align-items:flex-start; gap:16px; padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,.14);
  }
  .contact-method .icon{
    width:38px; height:38px; border:1px solid rgba(255,255,255,.35); border-radius:50%;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .contact-method .icon svg{ width:16px; height:16px; stroke:#fff; }
  .contact-method .label{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#8FB8DA; }
  .contact-method a, .contact-method .value{
    display:block; font-size:18px; font-weight:600; text-decoration:none; color:#fff; margin-top:4px;
  }
  .contact-method a:hover{ color:#8FB8DA; }
  .contact-method .note{ font-size:13px; color:#94A4B4; margin-top:4px; }

  form.contact-form{ display:flex; flex-direction:column; gap:16px; }
  .field{ display:flex; flex-direction:column; gap:6px; }
  .field label{ font-size:12px; font-family:'IBM Plex Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:#B7C4D2; }
  .field input, .field select, .field textarea{
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.25);
    color:#fff; padding:12px 14px; border-radius:var(--radius); font-family:'Inter',sans-serif; font-size:15px;
  }
  .field select option{ color:var(--ink); background:#fff; }
  .field input::placeholder, .field textarea::placeholder{ color:#7C8BA0; }
  .field textarea{ resize:vertical; min-height:110px; }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:2px solid var(--petrol-light); outline-offset:1px; border-color:transparent;
  }
  .contact-form .btn-primary{ align-self:flex-start; background:var(--petrol); margin-top:4px; border:none; cursor:pointer; }
  .contact-form .btn-primary:hover{ background:#5798c9; }
  .form-hint{ font-size:12px; color:#7C8BA0; margin-top:-6px; }

  /* ---------- LEGAL PAGES (Impressum / Datenschutz) ---------- */
  .legal{ padding:72px 0 96px; }
  .legal h2{ font-size:22px; margin-top:44px; margin-bottom:14px; }
  .legal h2:first-child{ margin-top:0; }
  .legal p, .legal li{ color:var(--muted); font-size:15px; line-height:1.7; }
  .legal ul{ padding-left:20px; margin:10px 0; }
  .legal .todo{
    display:block; margin:10px 0; padding:14px 18px; border:1px dashed #C9853B;
    background:#FBF3E8; color:#8A5A1E; border-radius:var(--radius); font-size:13.5px;
  }
  .legal .todo b{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; display:block; margin-bottom:4px; }

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--navy-deep); border-top:1px solid rgba(255,255,255,.12);
    padding:28px 0; color:#8493A4; font-size:13px;
  }
  .footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
  .footer-inner img{ height:20px; opacity:.85; }
  .footer-links{ display:flex; gap:20px; }
  .footer-links a{ color:#8493A4; text-decoration:none; }
  .footer-links a:hover{ color:#fff; }

  ::selection{ background:var(--petrol); color:#fff; }
  a{ outline-offset:2px; }
  a:focus-visible, button:focus-visible{ outline:2px solid var(--petrol); outline-offset:2px; }