/* ===== Farben laut Vorgabe (werden für Footer etc. genutzt) ===== */
:root{
    --grey-purple: #594474;
    --headline: #231e54; /* Standard (auf hellen Seiten) */
    --text: #b19fc3;
    --text-on-light: #594474;
    --footer-bg: #231e54;
    --footer-text: #f7f5f0;
    }
    
    
    /* Grundtypografie */
    html,body{height:100%}
    body{margin:0;font-family:"Lora",serif;color:#fff}
    h1,h2,h3{font-family:"Raleway",sans-serif}
    
    
    /* Hintergrundbild + Abdunkelung */
    .splash .bg{position:fixed;inset:0;background:url('./Steg.jpg') center/cover no-repeat;z-index:-2}
    .splash .bg-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter: blur(2px);z-index:-1}
    
    
    /* Zentriertes Logo */
    .center-logo {
        position: fixed;
        left: 50%;
        top: 15%;                 /* ein Stück höher */
        transform: translateX(-50%);
        max-width: min(400px, 55vw);  
        opacity: .95;
      }
      
    
    /* Rahmen mit zwei Panels */
    .frame{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;justify-items:center;padding:3rem}
    
    
    .panel{width:min(560px,92%);padding:1.5rem 2rem;border-radius:14px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.35);box-shadow:0 12px 36px rgba(0,0,0,.35)}
    
    
    /* Linkes Panel */
    .hero-name{font-weight:800;line-height:1.05;font-size:clamp(2.4rem,6vw,4rem);margin:0 0 .25rem;color:#fff}
    .hero-sub{margin:.25rem 0 1rem;font-weight:600;color:#fff}
    .socials{display:flex;gap:1rem}
    .social-icon{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;border:1.6px solid rgba(255,255,255,.6);color:#fff;text-decoration:none}
    .social-icon:hover{background:rgba(255,255,255,.15)}
    
    
    /* Rechtes Panel – Menü mit Trennern */
    .panel-right {
        display: flex;
        flex-direction: column;
        padding: 0;
      }
      
      .panel-right a.menu-item {
        display: block;
        width: 100%;              /* nimmt ganze Panel-Breite */
        padding: 1rem 1.5rem;
        color: #fff;
        text-decoration: none;
        font-weight: 700;
        box-sizing: border-box;
      }
      
      .panel-right a.menu-item + a.menu-item {
        border-top: 1px solid rgba(255,255,255,.55);
      }
      
      .panel-right a.menu-item:hover {
        background: rgba(255,255,255,.12);
      }
      
    
    
    /* Footer */
    .site-footer {
        background: #231e54 ;  /* Logo-Grün/Türkis */
        color: #f7f5f0;       /* sehr dunkler Text, für Kontrast */
        text-align: center;
        padding: 1rem;
      }
      
      .site-footer a {
        color: #f7f5f0;
        text-decoration: none;
        font-weight: 600;
      }
      .site-footer a:hover {
        text-decoration: underline;
      }
      
    
    /* Responsiv */
    @media (max-width:980px){
    .frame{grid-template-columns:1fr;gap:1.5rem;padding:2rem}
    .center-logo{top:6%;max-width:min(220px,46vw)}
    }

    /* Bio-Seite Panel */
    .bio-frame {
        min-height: 100vh;
        display: flex;
        flex-direction: column;   /* Logo + Panel untereinander */
        align-items: center;
        justify-content: flex-start;
        padding: 3rem 1rem;
        gap: 1.5rem;              /* Abstand zwischen Logo und Panel */
      }
    
    
    .bio-panel {
    width: min(760px, 95%);
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 12px 36px rgba(0,0,0,.35);
    color: #b19fc3;
    }
    
    
    .bio-panel h1 { color: #fff; font-family: "Raleway", sans-serif; margin-top: 0; }
    .bio-panel p { margin-bottom: 1rem; }
    .bio-panel a { color: #f7f5f0; text-decoration: underline; }
    .bio-panel .quote { margin-top: 1.5rem; font-style: italic; border-left: 4px solid #594474; padding-left: .75rem; }
    
    
    .back { display:inline-block; margin-bottom:1rem; color:#f7f5f0; text-decoration:none; font-weight:600; }
    .back:hover { text-decoration:underline; }
    
    
    @media (max-width: 640px){
    .bio-panel { padding: 1.5rem; }
    }

    /* Fixiertes Logo auch auf der Bio-Seite */
    .bio-logo {
        display: block;
        margin: 0 auto;
        max-width: min(300px, 55vw);
        opacity: .95;
      }