/*
Theme Name: Energiearbeit
Theme URI: https://www.energiearbeit.com/
Author: Patrick Feierabend
Description: Individuelles One-Page-Theme für die mediale Praxis energiearbeit.com – mediale Beratung, Healing, Reiki, Jenseitskontakte. Enthält Impressum & Datenschutz nach Schweizer Recht / DSGVO.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: energiearbeit
*/


  :root{
    --bg: #F6F1E7;
    --bg-alt: #EDE3D0;
    --ink: #241F1A;
    --ink-soft: #5C5043;
    --deep: #1F4C45;      /* kräftiges Tannen-Petrol */
    --teal: #2A6B5F;      /* gesättigtes Teal */
    --sage: #6FA07F;      /* kräftigeres Salbeigrün */
    --sky: #3D7285;       /* tiefes Bergseeblau */
    --gold: #CB5A3C;      /* klares Terrakotta – Wärme- und Kraft-Akzent */
    --line: rgba(36,31,26,0.14);
    --max: 1180px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Jost', sans-serif;
    font-weight:400;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Fraunces', serif;
    font-weight:500;
    letter-spacing:-0.01em;
    color:var(--deep);
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
  @media(max-width:640px){.wrap{padding:0 20px;}}

  /* ---------- Signature: fliessende Energie-Linie ---------- */
  .flow-bg{
    position:absolute; inset:0; width:100%; height:100%;
    pointer-events:none; z-index:0;
  }

  /* ---------- Header ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(238,242,237,0.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  header .wrap{
    display:flex; align-items:center; justify-content:space-between;
    height:76px;
  }
  .logo{
    font-family:'Fraunces', serif; font-size:1.25rem; font-weight:500;
    color:var(--deep); letter-spacing:0.01em;
  }
  .logo span{color:var(--sage); font-style:italic;}
  nav ul{list-style:none; display:flex; gap:36px;}
  nav a{
    font-size:0.92rem; color:var(--ink-soft); position:relative;
    padding:4px 0;
  }
  nav a::after{
    content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
    background:var(--gold); transition:width .3s ease;
  }
  nav a:hover::after{width:100%;}
  .nav-cta{
    background:var(--deep); color:#fff !important; padding:10px 22px;
    border-radius:2px; font-size:0.88rem; letter-spacing:0.02em;
  }
  .nav-cta::after{display:none;}
  .burger{display:none; background:none; border:none; cursor:pointer;}
  .burger span{display:block; width:24px; height:1.5px; background:var(--deep); margin:5px 0;}
  @media(max-width:860px){
    nav ul{
      position:fixed; top:76px; left:0; right:0; background:var(--bg);
      flex-direction:column; align-items:flex-start; gap:0;
      max-height:0; overflow:hidden; transition:max-height .35s ease;
      border-bottom:1px solid var(--line);
    }
    nav ul.open{max-height:400px;}
    nav ul li{width:100%;}
    nav a{display:block; padding:16px 20px; width:100%;}
    .burger{display:block;}
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative; overflow:hidden;
    min-height:100vh;
    display:flex; align-items:center;
    padding-top:76px;
    background:linear-gradient(160deg, #EEF2ED 0%, #E1E8E0 55%, #D5E0D8 100%);
  }
  .hero .wrap{position:relative; z-index:2;}
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--teal); margin-bottom:28px;
  }
  .eyebrow::before{content:''; width:28px; height:1px; background:var(--gold);}
  .hero h1{
    font-size:clamp(2.4rem, 5.4vw, 4.4rem);
    line-height:1.08;
    max-width:16ch;
    margin-bottom:28px;
  }
  .hero h1 em{color:var(--teal); font-style:italic;}
  .hero p.lead{
    font-size:1.15rem; color:var(--ink-soft); max-width:46ch; margin-bottom:40px;
  }
  .btn-row{display:flex; gap:18px; flex-wrap:wrap;}
  .btn{
    display:inline-block; padding:15px 30px; font-size:0.92rem;
    letter-spacing:0.02em; border-radius:2px; transition:all .25s ease;
  }
  .btn-primary{background:var(--deep); color:#fff; border:1px solid var(--deep);}
  .btn-primary:hover{background:var(--teal); border-color:var(--teal);}
  .btn-ghost{border:1px solid var(--line); color:var(--ink);}
  .btn-ghost:hover{border-color:var(--teal); color:var(--teal);}

  .hero-wave{
    position:absolute; right:-8%; top:0; width:60%; height:100%; z-index:1;
    opacity:0.9;
  }

  /* ---------- Section basics ---------- */
  section{padding:120px 0; position:relative;}
  @media(max-width:640px){section{padding:80px 0;}}
  .section-head{max-width:640px; margin-bottom:64px;}
  .section-head .eyebrow{margin-bottom:18px;}
  .section-head h2{font-size:clamp(1.9rem, 3.6vw, 2.7rem); line-height:1.15;}
  .section-head p{color:var(--ink-soft); margin-top:18px; font-size:1.02rem;}
  .alt{background:var(--bg-alt);}

  /* ---------- Über mich ---------- */
  .about-grid{
    display:grid; grid-template-columns:0.85fr 1.15fr; gap:72px; align-items:center;
  }
  @media(max-width:860px){.about-grid{grid-template-columns:1fr; gap:44px;}}
  .about-photo{
    aspect-ratio:4/5; border-radius:4px; overflow:hidden; position:relative;
    background:linear-gradient(150deg, var(--teal), var(--deep));
  }
  .about-photo .ph-label{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,0.55); font-family:'Fraunces',serif; font-style:italic; font-size:1rem;
    text-align:center; padding:24px;
  }
  .about-text p{color:var(--ink-soft); margin-bottom:20px; font-size:1.02rem;}
  .credentials{
    display:flex; flex-direction:column; gap:16px; margin-top:32px;
    border-top:1px solid var(--line); padding-top:28px;
  }
  .cred-item{display:flex; gap:16px; align-items:flex-start;}
  .cred-dot{
    width:8px; height:8px; border-radius:50%; background:var(--gold);
    margin-top:8px; flex-shrink:0;
  }
  .cred-item strong{display:block; color:var(--deep); font-family:'Fraunces',serif; font-weight:500;}
  .cred-item span{color:var(--ink-soft); font-size:0.94rem;}

  /* ---------- Angebote ---------- */
  .offer-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:2px;
    background:var(--line); border:1px solid var(--line);
  }
  .offer-card{
    background:var(--bg); padding:42px 36px; transition:background .3s ease;
    display:flex; flex-direction:column; gap:16px; text-decoration:none; color:inherit;
  }
  .offer-card:hover{background:var(--bg-alt);}
  .offer-more{
    font-size:0.86rem; color:var(--teal); margin-top:auto; padding-top:4px;
    transition:transform .25s ease;
  }
  .offer-card:hover .offer-more{transform:translateX(4px);}
  .offer-icon{width:34px; height:34px;}
  .offer-card h3{font-size:1.24rem;}
  .offer-card p{color:var(--ink-soft); font-size:0.95rem; flex-grow:1;}
  .offer-tag{
    font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--sage);
  }

  /* ---------- Ablauf ---------- */
  .steps{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:36px;
  }
  @media(max-width:860px){.steps{grid-template-columns:1fr 1fr;}}
  @media(max-width:520px){.steps{grid-template-columns:1fr;}}
  .step{position:relative; padding-top:28px; border-top:1px solid var(--line);}
  .step-num{
    font-family:'Fraunces',serif; font-style:italic; color:var(--sage);
    font-size:1.1rem; margin-bottom:14px; display:block;
  }
  .step h3{font-size:1.08rem; margin-bottom:10px;}
  .step p{color:var(--ink-soft); font-size:0.92rem;}

  /* ---------- Zitat ---------- */
  .quote-section{
    background:var(--deep); color:#fff; text-align:center;
  }
  .quote-section blockquote{
    font-family:'Fraunces',serif; font-style:italic; font-weight:400;
    font-size:clamp(1.4rem,3vw,2.1rem); max-width:820px; margin:0 auto;
    line-height:1.5; color:#EDF2ED;
  }
  .quote-section cite{
    display:block; margin-top:28px; font-style:normal; font-size:0.85rem;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--sage);
  }

  /* ---------- Kontakt ---------- */
  .contact-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:72px;
  }
  @media(max-width:860px){.contact-grid{grid-template-columns:1fr; gap:48px;}}
  .info-block{margin-bottom:28px;}
  .info-block h3{font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--sage); margin-bottom:10px; font-family:'Jost',sans-serif; font-weight:500;}
  .info-block p, .info-block a{color:var(--ink-soft); font-size:1rem;}
  form{display:flex; flex-direction:column; gap:18px;}
  .field label{display:block; font-size:0.82rem; color:var(--ink-soft); margin-bottom:8px;}
  .field input, .field select, .field textarea{
    width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:2px;
    background:var(--bg); font-family:'Jost',sans-serif; font-size:0.96rem; color:var(--ink);
  }
  .field textarea{min-height:120px; resize:vertical;}
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none; border-color:var(--teal);
  }
  .consent{display:flex; gap:10px; align-items:flex-start; font-size:0.84rem; color:var(--ink-soft);}
  .consent input{margin-top:4px;}
  .consent a{color:var(--teal); text-decoration:underline;}
  button[type="submit"]{
    align-self:flex-start; background:var(--deep); color:#fff; border:none;
    padding:15px 32px; font-size:0.92rem; cursor:pointer; border-radius:2px;
    transition:background .25s ease;
  }
  button[type="submit"]:hover{background:var(--teal);}
  .form-note{font-size:0.82rem; color:var(--ink-soft); margin-top:6px;}

  .social-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:4px;}
  .social-btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 16px; border:1px solid var(--line); border-radius:2px;
    font-size:0.86rem; color:var(--ink-soft); transition:all .25s ease;
  }
  .social-btn:hover{border-color:var(--teal); color:var(--teal); background:var(--bg);}

  .map-block{margin-top:64px;}
  .map-frame{
    border:1px solid var(--line); border-radius:4px; overflow:hidden;
    filter:saturate(0.85);
  }
  .route-btn{margin-top:20px;}

  .form-success{background:#E4EDE0; color:var(--deep); padding:14px 16px; border-radius:2px; font-size:0.92rem;}
  .form-error{background:#F3E1DA; color:#7A3A24; padding:14px 16px; border-radius:2px; font-size:0.92rem;}

  .werdegang-block{
    margin-top:64px; padding-top:56px; border-top:1px solid var(--line);
    max-width:760px;
  }
  .werdegang-block h3{font-size:1.5rem; margin:14px 0 20px;}
  .placeholder-text{
    background:#F0E3CC; color:#6B4E1E; padding:20px 22px; border-radius:4px;
    font-size:0.94rem; line-height:1.7; font-style:italic;
  }

  /* ---------- Angebots-Unterseiten ---------- */
  .service-hero{
    padding:160px 0 80px; background:linear-gradient(160deg, var(--bg) 0%, var(--bg-alt) 100%);
  }
  .service-hero h1{font-size:clamp(2.2rem, 4.6vw, 3.4rem); max-width:18ch; margin:20px 0 24px;}
  .service-hero .lead{font-size:1.1rem; color:var(--ink-soft); max-width:48ch; margin-bottom:32px;}
  .service-content{padding:80px 0 120px;}
  .service-block{max-width:720px; margin-bottom:48px;}
  .service-block h2{font-size:1.5rem; margin-bottom:16px;}
  .service-block p{color:var(--ink-soft); font-size:1.02rem; line-height:1.75;}
  .service-block.for-whom ul{padding-left:20px; color:var(--ink-soft);}
  .service-block.for-whom li{margin-bottom:8px; font-size:1rem;}

  /* Rich-Text aus dem WordPress-Editor (the_content) */
  .service-richtext h2{font-size:1.5rem; margin:36px 0 16px; color:var(--deep);}
  .service-richtext h2:first-child{margin-top:0;}
  .service-richtext h3{font-size:1.2rem; margin:28px 0 12px; color:var(--deep);}
  .service-richtext p{color:var(--ink-soft); font-size:1.02rem; line-height:1.75; margin-bottom:20px;}
  .service-richtext ul, .service-richtext ol{padding-left:22px; color:var(--ink-soft); margin-bottom:20px;}
  .service-richtext li{margin-bottom:8px; font-size:1rem;}
  .service-richtext a{color:var(--teal); text-decoration:underline;}
  .service-richtext strong{color:var(--ink);}
  .service-richtext img{border-radius:4px; margin:20px 0; max-width:100%;}
  .service-richtext blockquote{
    border-left:3px solid var(--gold); padding:4px 20px; margin:24px 0;
    font-style:italic; color:var(--ink-soft);
  }

  .service-disclaimer{
    max-width:720px; border-left:3px solid var(--gold); padding:16px 20px;
    background:var(--bg-alt); margin-bottom:56px;
  }
  .service-disclaimer p{color:var(--ink-soft); font-size:0.88rem; margin:0;}
  .service-cta{display:flex; gap:16px; flex-wrap:wrap;}

  /* ---------- Footer ---------- */
  footer{background:var(--bg-alt); border-top:1px solid var(--line); padding:56px 0 32px;}
  .footer-top{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:32px;
    padding-bottom:36px; border-bottom:1px solid var(--line); margin-bottom:24px;
  }
  .footer-links{display:flex; gap:28px; flex-wrap:wrap;}
  .footer-links a{font-size:0.88rem; color:var(--ink-soft);}
  .footer-links a:hover{color:var(--teal);}
  .footer-bottom{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
    font-size:0.8rem; color:var(--ink-soft);
  }

  /* ---------- Modal (Impressum / Datenschutz) ---------- */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(15,25,20,0.55);
    display:none; align-items:flex-start; justify-content:center;
    padding:60px 20px; z-index:1000; overflow-y:auto;
  }
  .modal-overlay.open{display:flex;}
  .modal{
    background:var(--bg); max-width:760px; width:100%; border-radius:4px;
    padding:48px; position:relative; max-height:85vh; overflow-y:auto;
  }
  @media(max-width:640px){.modal{padding:30px 22px;}}
  .modal h2{font-size:1.6rem; margin-bottom:24px;}
  .modal h3{font-size:1.05rem; margin:28px 0 10px; color:var(--teal);}
  .modal p, .modal li{color:var(--ink-soft); font-size:0.94rem; margin-bottom:10px;}
  .modal ul{padding-left:20px;}
  .modal-close{
    position:absolute; top:20px; right:20px; background:none; border:none;
    font-size:1.4rem; cursor:pointer; color:var(--ink-soft); line-height:1;
  }
  .placeholder{background:#F0E3CC; padding:1px 5px; border-radius:2px; color:#6B4E1E;}

  ::selection{background:var(--sage); color:#fff;}