/*
Theme Name: Nachhilfe-Werk
Theme URI: https://example.com
Author: Nachhilfe-Werk
Description: WordPress-Theme fuer die Online-Nachhilfe-Vermittlung "Nachhilfe-Werk" (verstehen. vertrauen. weiterkommen.). Mehrseitige Navigation, Anfrage- und Bewerbungsformulare per E-Mail, Preise & Guthaben inkl. Einzel- und Gruppenunterricht, sowie ein Konto-Bereich mit echtem WordPress-Login.
Version: 1.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: nachhilfewerk
*/

:root{
  --bg:#FFFFFF;
  --bg-soft:#F3F6F9;
  --ink:#132A4A;
  --ink-soft:#5B6676;
  --navy:#123A63;
  --navy-dark:#0C2748;
  --teal:#159089;
  --teal-light:#3FC1B8;
  --yellow:#F2C94C;
  --yellow-dark:#D9A916;
  --line:#E2E7EE;
  --radius:14px;
  --shadow: 0 14px 32px -20px rgba(12,39,72,0.45);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
h1,h2,h3,.display{
  font-family:'Fraunces', serif;
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0;
  color:var(--ink);
}
a{color:inherit;}
img,svg{display:block;max-width:100%;}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
section{scroll-margin-top:96px;}
.eyebrow{
  font-size:13px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--teal);display:flex;align-items:center;gap:8px;
}
.eyebrow::before{content:"";width:18px;height:1.5px;background:var(--yellow-dark);display:inline-block;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:15px;
  padding:14px 26px;border-radius:10px;border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--navy);color:#fff;box-shadow:var(--shadow);}
.btn-primary:hover{background:var(--navy-dark);}
.btn-ghost{background:#fff;color:var(--navy);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--navy);}
.btn-yellow{background:var(--yellow);color:var(--navy-dark);box-shadow:var(--shadow);}
.btn-yellow:hover{background:var(--yellow-dark);}
.btn-block{width:100%;}
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2.5px solid var(--teal); outline-offset:2px;
}

/* NAV */
header.site-header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
nav{max-width:1180px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none;}
.logo img{height:56px;width:auto;}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
.nav-links li{position:relative;}
.nav-links > li > a{
  text-decoration:none;font-size:14.5px;font-weight:500;color:var(--ink-soft);
  padding:8px 2px;display:inline-block;
}
.nav-links > li > a:hover, .nav-links > li.current-menu-item > a{color:var(--navy);}
.nav-links .sub-menu{
  list-style:none;margin:0;padding:8px;position:absolute;top:100%;left:0;
  background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);
  min-width:200px;display:none;z-index:60;
}
.nav-links li:hover > .sub-menu, .nav-links li:focus-within > .sub-menu{display:block;}
.nav-links .sub-menu a{display:block;padding:9px 12px;border-radius:7px;font-size:14px;color:var(--ink-soft);text-decoration:none;}
.nav-links .sub-menu a:hover{background:var(--bg-soft);color:var(--navy);}
.menu-item-has-children > a::after{content:" ▾";font-size:11px;}
.nav-actions{display:flex;align-items:center;gap:14px;flex:none;}
.account-link{
  width:38px;height:38px;border-radius:50%;background:var(--bg-soft);
  display:flex;align-items:center;justify-content:center;color:var(--navy);
  text-decoration:none;border:1px solid var(--line);
}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;}
@media (max-width:960px){
  .nav-links{
    position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
    align-items:flex-start;gap:0;border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .25s ease;
  }
  .nav-links.open{max-height:520px;overflow-y:auto;}
  .nav-links > li{width:100%;}
  .nav-links > li > a{width:100%;padding:14px 28px;border-bottom:1px solid var(--line);}
  .nav-links .sub-menu{position:static;box-shadow:none;border:none;border-top:1px dashed var(--line);border-radius:0;display:block;padding-left:14px;}
  .nav-links li:hover > .sub-menu, .nav-links li.open > .sub-menu{display:block;}
  .nav-toggle{display:block;}
}

/* HERO (front page) */
.hero{padding:64px 0 56px;display:grid;grid-template-columns:1.05fr 0.95fr;gap:48px;align-items:center;}
.hero h1{font-size:clamp(36px,4.6vw,54px);line-height:1.08;}
.hero h1 em{font-style:normal;color:var(--teal);}
.hero p.lead{font-size:17.5px;color:var(--ink-soft);max-width:46ch;margin:18px 0 28px;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;}
.hero-art{position:relative;}
@media (max-width:900px){.hero{grid-template-columns:1fr;padding-top:36px;}}

/* VORTEILE */
.section{padding:88px 0;}
.section-alt{background:var(--bg-soft);}
.section-head{max-width:640px;margin-bottom:44px;}
.section-head h2{font-size:clamp(26px,3.2vw,36px);margin-top:10px;}
.section-head p{color:var(--ink-soft);font-size:15.5px;margin-top:12px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;}
.benefit-card .icon-wrap{
  width:46px;height:46px;border-radius:10px;background:var(--bg-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--navy);
}
.benefit-card .icon-wrap svg{width:24px;height:24px;}
.benefit-card h3{font-size:17px;margin-bottom:8px;}
.benefit-card p{font-size:14.5px;color:var(--ink-soft);margin:0;}
@media (max-width:900px){.grid-3{grid-template-columns:1fr;}.grid-2{grid-template-columns:1fr;}}

/* SO FUNKTIONIERT ES – numbered yellow cards */
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.process-card{background:var(--yellow);border-radius:var(--radius);padding:30px;}
.process-card .num{font-family:'Fraunces',serif;font-size:34px;color:var(--navy-dark);margin-bottom:14px;}
.process-card h3{font-size:18px;margin-bottom:10px;color:var(--navy-dark);}
.process-card p{font-size:14.5px;color:#4A3B0F;margin:0;}
@media (max-width:900px){.process-grid{grid-template-columns:1fr;}}

/* CTA band (Jetzt starten) */
.cta-band{background:var(--navy);border-radius:24px;padding:52px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;color:#fff;}
.cta-band .eyebrow{color:var(--yellow);}
.cta-band .eyebrow::before{background:var(--yellow);}
.cta-band h2{color:#fff;font-size:clamp(26px,3vw,34px);margin-top:10px;}
.cta-band p{color:#C9D6E4;font-size:15.5px;margin-top:12px;max-width:44ch;}
.cta-band .hero-ctas{margin-top:22px;}
.cta-band .btn-ghost{background:transparent;border-color:rgba(255,255,255,0.4);color:#fff;}
.cta-band .btn-ghost:hover{border-color:#fff;}
@media (max-width:900px){.cta-band{grid-template-columns:1fr;padding:34px;}}

/* FORM PAGES */
.form-wrap{display:grid;grid-template-columns:0.9fr 1.1fr;gap:56px;align-items:start;}
.form-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:36px;box-shadow:var(--shadow);}
.field{margin-bottom:18px;}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;color:var(--ink);}
.field .hint{font-weight:400;color:var(--ink-soft);font-size:12.5px;}
.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=password], .field select, .field textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;
  font-family:inherit;font-size:14.5px;background:var(--bg-soft);color:var(--ink);
}
.field textarea{resize:vertical;min-height:88px;}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.chip-group{display:flex;flex-wrap:wrap;gap:8px;}
.chip{padding:8px 14px;border:1.5px solid var(--line);border-radius:999px;font-size:13px;cursor:pointer;user-select:none;background:var(--bg-soft);color:var(--ink-soft);}
.chip input{display:none;}
.chip.checked{background:var(--navy);border-color:var(--navy);color:#fff;}
.checkbox-row{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--ink-soft);margin:20px 0;}
.checkbox-row input{margin-top:3px;}
.form-note{font-size:12.5px;color:var(--ink-soft);margin-top:14px;}
.success-box{display:none;margin-top:18px;padding:16px 18px;border-radius:12px;background:var(--bg-soft);border:1px solid var(--teal);color:var(--navy-dark);font-size:14px;}
.success-box.show{display:block;}
.error-box{display:none;margin-top:18px;padding:16px 18px;border-radius:12px;background:#FBEAE6;border:1px solid #c0503f;color:#a4402f;font-size:14px;}
.error-box.show{display:block;}
.page-intro-list{list-style:none;padding:0;margin-top:26px;font-size:14.5px;color:var(--ink-soft);}
.page-intro-list li{margin-bottom:14px;display:flex;gap:10px;}
.page-intro-list .tick{width:18px;height:18px;flex:none;margin-top:2px;}
@media (max-width:940px){.form-wrap{grid-template-columns:1fr;}.row-2{grid-template-columns:1fr;}}

/* PREISE */
.format-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:52px;}
.format-card{background:var(--bg-soft);border:1px solid var(--line);border-radius:20px;padding:32px;}
.format-card h3{font-size:19px;margin-bottom:6px;}
.format-card .amount{font-family:'Fraunces',serif;font-size:36px;margin:12px 0 4px;color:var(--navy);}
.format-card .per{color:var(--ink-soft);font-size:13.5px;margin-bottom:18px;}
.format-card ul{list-style:none;padding:0;margin:0 0 22px;font-size:14px;color:var(--ink-soft);}
.format-card li{display:flex;gap:8px;margin-bottom:9px;}
.format-card li .icon{width:16px;height:16px;color:var(--teal);flex:none;margin-top:2px;}
@media (max-width:820px){.format-grid{grid-template-columns:1fr;}}

.guthaben-panel{background:var(--bg-soft);border-radius:24px;padding:44px;border:1px solid var(--line);}
.guthaben-panel .section-head{margin-bottom:32px;}
.price-card{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:28px;text-align:left;position:relative;display:flex;flex-direction:column;}
.price-card.popular{border-color:var(--navy);box-shadow:var(--shadow);}
.price-card .tag{position:absolute;top:-13px;right:22px;background:var(--yellow);color:var(--navy-dark);font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;}
.price-card .hours{font-size:13.5px;font-weight:600;color:var(--teal);text-transform:uppercase;letter-spacing:.06em;}
.price-card .amount{font-family:'Fraunces',serif;font-size:38px;margin:8px 0 2px;color:var(--ink);}
.price-card .per{color:var(--ink-soft);font-size:13px;margin-bottom:4px;}
.price-card .save{color:var(--yellow-dark);font-weight:700;font-size:13px;margin-bottom:18px;}
.price-card .btn{margin-top:auto;}
.transparency-strip{display:flex;gap:14px;align-items:flex-start;margin-top:36px;padding:20px 22px;border-radius:14px;background:#fff;border:1px solid var(--line);}
.transparency-strip .icon{width:26px;height:26px;color:var(--yellow-dark);flex:none;}
.transparency-strip p{margin:0;font-size:14px;color:var(--ink-soft);}
.transparency-strip strong{color:var(--ink);}

/* UEBER UNS */
.mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:80px;}
.team-grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:48px;align-items:center;}
.avatar-row{display:flex;gap:16px;}
.avatar{
  width:88px;height:88px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-size:26px;color:#fff;font-weight:600;
}
@media (max-width:900px){.mission-grid,.team-grid{grid-template-columns:1fr;}}

/* KONTO (unchanged pattern, recolored) */
.konto-wrap{display:grid;grid-template-columns:0.85fr 1.15fr;gap:56px;align-items:start;}
.tabbtn-group{display:flex;gap:6px;background:var(--bg-soft);padding:5px;border-radius:12px;margin-bottom:22px;}
.tabbtn{flex:1;border:none;background:transparent;padding:10px;border-radius:8px;font-family:inherit;font-weight:600;font-size:14px;cursor:pointer;color:var(--ink-soft);}
.tabbtn.active{background:#fff;color:var(--navy);box-shadow:0 2px 6px rgba(0,0,0,0.06);}
.auth-pane{display:none;}
.auth-pane.active{display:block;}
.dash{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;}
.dash-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:26px;flex-wrap:wrap;gap:14px;}
.balance-pill{background:var(--navy);color:#fff;padding:14px 20px;border-radius:14px;}
.balance-pill .num{font-family:'Fraunces',serif;font-size:26px;}
.balance-pill .label{font-size:12px;opacity:.85;}
.calendar-row{display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:12px;}
.cal-date{width:52px;height:52px;border-radius:10px;background:var(--bg-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;}
.cal-date .d{font-family:'Fraunces',serif;font-size:19px;line-height:1;}
.cal-date .m{font-size:10px;text-transform:uppercase;color:var(--ink-soft);}
.demo-note{font-size:12px;color:var(--ink-soft);background:var(--bg-soft);border:1px dashed var(--line);padding:10px 14px;border-radius:10px;margin-top:18px;}
@media (max-width:940px){.konto-wrap{grid-template-columns:1fr;}}

/* FOOTER */
footer.site-footer{border-top:1px solid var(--line);padding:52px 0 32px;background:var(--bg-soft);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;margin-bottom:36px;}
.footer-grid h4{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:14px;}
.footer-grid ul{list-style:none;margin:0;padding:0;}
.footer-grid li{margin-bottom:9px;}
.footer-grid a{text-decoration:none;font-size:14px;color:var(--ink);}
.footer-grid a:hover{color:var(--navy);}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.footer-logo img{height:46px;width:auto;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);padding-top:22px;font-size:12.5px;color:var(--ink-soft);}
@media (max-width:880px){.footer-grid{grid-template-columns:1fr;}}

/* Generic page content fallback */
.page-content{padding:88px 0;max-width:760px;margin:0 auto;}
.page-content h1{font-size:32px;margin-bottom:22px;}
.page-content p, .page-content li{color:var(--ink-soft);font-size:15.5px;}

/* ═══════════════════════════════════════════════════
   MOBILE FIXES – 480px und kleiner (Smartphones)
   ═══════════════════════════════════════════════════ */
@media (max-width: 520px) {

  /* Globales Padding auf kleinen Screens */
  .wrap { padding: 0 16px; }

  /* HERO */
  .hero { padding: 28px 0 32px; gap: 28px; }
  .hero h1 { font-size: 28px; line-height: 1.15; }
  .hero p.lead { font-size: 15px; margin: 12px 0 20px; }
  .hero-ctas { flex-direction: column; gap: 10px; }
  .hero-ctas .btn { width: 100%; text-align: center; justify-content: center; }

  /* Sections */
  .section { padding: 52px 0; }
  .section-head { margin-bottom: 28px; }
  .section-head h2 { font-size: 22px; }

  /* Karten-Grids – alle auf 1 Spalte */
  .grid-3,
  .grid-2,
  .process-grid { grid-template-columns: 1fr; gap: 14px; }

  /* CTA-Band */
  .cta-band { padding: 28px 20px; grid-template-columns: 1fr; gap: 20px; border-radius: 14px; }
  .cta-band h2 { font-size: 22px; }

  /* Formulare */
  .form-wrap { grid-template-columns: 1fr; gap: 24px; }
  .form-card { padding: 22px 16px; border-radius: 14px; }
  .row-2 { grid-template-columns: 1fr; gap: 0; }

  /* Chip-Buttons (Fächer, Tage) */
  .chip { padding: 7px 11px; font-size: 12px; }

  /* Über uns */
  .mission-grid,
  .team-grid { grid-template-columns: 1fr; gap: 28px; }
  .avatar-row { flex-direction: row !important; justify-content: flex-start; }

  /* Preise */
  .guthaben-panel { padding: 22px 16px; border-radius: 16px; }
  .price-card { padding: 22px 18px; }
  .price-card .amount { font-size: 30px; }

  /* Konto */
  .konto-wrap { grid-template-columns: 1fr; gap: 20px; }
  .tabbtn-group { flex-direction: row; }
  .dash { padding: 20px 16px; border-radius: 14px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 20px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* Widerrufsbutton Box */
  div[style*="f59e0b"] a[style*="0C2748"] { width: 100% !important; text-align: center; }

  /* Navigation */
  .nav-inner { padding: 0 16px; height: 58px; }
  .site-logo img { height: 32px; }

  /* Hero-Art SVG auf Mobile ausblenden – spart Platz */
  .hero-art { display: none; }
}

/* Mittelgroße Screens – Tablets */
@media (max-width: 768px) and (min-width: 521px) {
  .hero h1 { font-size: 32px; }
  .cta-band { padding: 36px 28px; }
  .form-card { padding: 28px 22px; }
}