/*
Theme Name: Reinheitskunst
Theme URI: https://reinheitskunst.de/
Author: Reinheitskunst
Description: Individuelles WordPress-Theme für Reinheitskunst – Reinigung & Hygiene.
Version: 1.4.0
Text Domain: reinheitskunst
*/
:root{
      --black:#211D1E;
      --green:#9B4059;
      --green-dark:#743748;
      --taupe:#D8AEB8;
      --taupe-light:#F3E4E8;
      --green-light:#EBCFD5;
      --white:#FFFFFF;
      --off:#FBFAFA;
      --line:#CECECE;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth;overflow-x:hidden}
    body{
      margin:0;
      font-family:Arial, Helvetica, sans-serif;
      color:var(--black);
      background:var(--white);
      line-height:1.6;
      overflow-x:hidden;
      width:100%;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%}
    .wrap{width:min(1180px,92%);margin:0 auto;min-width:0}
    .hero > *, .split > *, .contactbox > *, .practice-grid > *,
    .services > *, .practice-content > *{min-width:0}


    header{
      position:sticky;top:0;z-index:50;
      background:rgba(255,255,255,.94);
      backdrop-filter:blur(12px);
      border-bottom:1px solid rgba(0,0,0,.06);
    }
    .nav{
      min-height:82px;
      display:flex;align-items:center;justify-content:space-between;gap:30px;
    }
    .brand{display:flex;align-items:center;gap:18px}
    .monogram{
      font-family:Georgia,serif;
      font-size:31px;
      font-weight:700;
      letter-spacing:-4px;
      color:var(--black);
      line-height:1;
    }
    .monogram span{color:var(--green-dark)}
    .brand-divider{
      width:1px;height:34px;background:var(--taupe);
    }
    .brandtext strong{
      font-family:Georgia,serif;font-size:22px;letter-spacing:.5px;
      display:block;line-height:1
    }
    .brandtext strong .accent{color:var(--green-dark)}
    .brandtext span{font-size:10px;letter-spacing:2.3px;color:#6E716F}
    nav{display:flex;gap:28px;font-size:14px}
    nav a:hover{color:var(--green-dark)}
    .nav-cta{
      padding:11px 18px;
      border:1px solid var(--green-dark);
      border-radius:999px;
      color:var(--green-dark);
      font-weight:700;
      white-space:nowrap;
    }
    .nav-cta:hover{
      background:var(--green-dark);
      color:white;
    }
    a[href^="tel:"]{white-space:nowrap}

    .hero{
      min-height:82vh;
      display:grid;
      grid-template-columns:1.08fr .92fr;
      align-items:center;
      gap:60px;
      padding:80px 0 60px;
    }
    .eyebrow{
      color:var(--green-dark);
      letter-spacing:3px;font-size:12px;font-weight:700;text-transform:uppercase
    }
    h1{
      font-family:Georgia,serif;
      font-weight:500;
      font-size:clamp(58px,8vw,108px);
      line-height:.93;
      margin:16px 0 22px;
      letter-spacing:-3px;
    }
    h1 .accent{color:var(--green-dark)}
    .hero p{
      font-size:20px;max-width:650px;color:#4D4F4E
    }
    .buttons{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;
      padding:14px 22px;border-radius:999px;font-weight:700;
      border:1px solid var(--black);transition:.2s ease
    }
    .btn.primary{background:var(--green-dark);color:white;border-color:var(--green-dark)}
    .btn.primary:hover{background:var(--green-dark);border-color:var(--green-dark)}
    .btn.secondary:hover{background:var(--taupe-light)}

    .hero-card{
      background:linear-gradient(145deg,#EBCFD5,#F5E8EB);
      min-height:560px;border-radius:40px;
      position:relative;overflow:hidden;padding:44px;
      box-shadow:0 30px 80px rgba(30,35,32,.09);
    }
    .hero-card:before{
      content:"RK";
      position:absolute;right:-5px;bottom:-110px;
      font-family:Georgia,serif;font-size:360px;font-weight:700;
      color:rgba(255,255,255,.64);letter-spacing:-35px
    }
    .hero-card .statement{
      position:relative;z-index:2;
      font-family:Georgia,serif;font-size:38px;line-height:1.15;
      max-width:430px
    }
    .hero-card .mini{
      position:absolute;left:44px;bottom:42px;z-index:2;
      font-size:13px;letter-spacing:2px;text-transform:uppercase;
    }

    section{padding:90px 0}
    .section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:38px}
    .section-head h2{
      font-family:Georgia,serif;font-size:48px;font-weight:500;margin:0;
    }
    .section-head p{max-width:560px;margin:0;color:#666}
    .services{
      display:grid;grid-template-columns:repeat(4,1fr);gap:18px
    }
    .card{
      border:1px solid var(--line);border-radius:24px;padding:28px;
      background:white;transition:.2s ease;min-height:290px;
    }
    .card:hover{transform:translateY(-4px);box-shadow:0 18px 45px rgba(0,0,0,.06)}
    .icon{
      width:58px;height:58px;border-radius:50%;
      background:var(--green-light);display:grid;place-items:center;
      font-size:26px;margin-bottom:26px;
    }
    .card:nth-child(2) .icon{background:#EBCFD5}
    .card:nth-child(3) .icon{background:#CFCFCF}
    .card:nth-child(4) .icon{background:var(--green-dark);color:white}
    .card h3{font-size:20px;margin:0 0 12px}
    .card p{color:#666;font-size:15px}
    .card .line{width:48px;height:4px;background:var(--green-dark);margin-top:24px;border-radius:99px}
    .card:nth-child(even) .line{background:var(--taupe)}


    .split{
      display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center
    }
    .panel{
      background:linear-gradient(160deg,var(--green-dark),#53303A);
      color:white;border-radius:32px;padding:52px
    }
    .panel h2{font-family:Georgia,serif;font-size:48px;font-weight:500;margin-top:0}
    .checks{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
    .check{
      border-top:1px solid rgba(255,255,255,.18);
      padding-top:16px;font-size:14px;color:#E9E9E8
    }
    .check strong{display:block;color:white;font-size:16px;margin-bottom:4px}
    .quote{
      background:var(--off);border-radius:32px;padding:52px
    }
    .quote p{
      font-family:Georgia,serif;font-size:35px;line-height:1.25;margin:0 0 18px
    }
    .quote small{color:#777}

    .contact{
      background:linear-gradient(135deg,#EBCFD5,#F3E4E8);
    }
    .contactbox{
      display:grid;grid-template-columns:1fr .9fr;gap:40px;
      background:white;border-radius:32px;padding:50px;
      box-shadow:0 20px 70px rgba(0,0,0,.06)
    }
    .contact h2{font-family:Georgia,serif;font-size:50px;font-weight:500;margin:0 0 15px}
    .contact-details{
      display:grid;
      gap:10px;
      margin-top:25px;
    }
    .contact-row{
      display:grid;
      grid-template-columns:88px minmax(0,1fr);
      column-gap:14px;
      align-items:baseline;
      min-width:0;
    }
    .contact-row a,.contact-row span{
      overflow-wrap:anywhere;
      word-break:break-word;
      min-width:0;
    }
    .contact-row b{
      min-width:0;
      white-space:nowrap;
    }
    form{display:grid;gap:13px}
    input, textarea{
      width:100%;padding:14px 15px;border:1px solid #D7D7D4;
      border-radius:14px;font:inherit;background:#FCFCFB
    }
    textarea{min-height:130px;resize:vertical}
    form button{cursor:pointer}

    footer{
      background:var(--green-dark);color:white;padding:32px 0;
      font-size:13px
    }
    .footer{
      display:flex;justify-content:space-between;gap:25px;align-items:center;flex-wrap:wrap
    }
    .footer-links{display:flex;gap:18px;color:#D7D7D7}


    .practice-focus{
      background:var(--off);
    }
    .practice-grid{
      display:grid;
      grid-template-columns:.88fr 1.12fr;
      gap:40px;
      align-items:stretch;
    }
    .practice-intro{
      background:var(--green-dark);
      color:white;
      border-radius:30px;
      padding:46px;
      position:relative;
      overflow:hidden;
    }
    .practice-intro:after{
      content:"✚";
      position:absolute;
      right:18px;
      bottom:-28px;
      font-size:190px;
      color:rgba(255,255,255,.08);
      line-height:1;
    }
    .practice-intro .eyebrow{color:var(--taupe-light)}
    .practice-intro h2{
      font-family:Georgia,serif;
      font-size:46px;
      font-weight:500;
      line-height:1.08;
      margin:14px 0 20px;
    }
    .practice-intro p{
      color:#F0F3F0;
      position:relative;
      z-index:2;
    }

    .qualifications{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:26px;
      position:relative;
      z-index:2;
    }
    .qualification{
      border:1px solid rgba(255,255,255,.35);
      background:rgba(255,255,255,.08);
      border-radius:999px;
      padding:9px 13px;
      font-size:12px;
      letter-spacing:.2px;
      color:white;
    }
    .qualification strong{font-weight:700}

    .practice-content{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
    }
    .practice-card{
      background:white;
      border:1px solid var(--line);
      border-radius:22px;
      padding:26px;
    }
    .practice-card h3{
      margin:0 0 10px;
      font-size:18px;
    }
    .practice-card p{
      margin:0;
      color:#666;
      font-size:14px;
    }
    .practice-note{
      grid-column:1 / -1;
      background:var(--taupe-light);
      border-radius:22px;
      padding:25px 28px;
      font-size:14px;
    }
    .practice-note strong{display:block;margin-bottom:5px}

    @media(max-width:900px){
      nav{display:none}
      .hero,.split,.contactbox,.practice-grid{grid-template-columns:1fr}
      .hero{padding-top:55px}
      .hero-card{min-height:420px}
      .services{grid-template-columns:1fr 1fr}
  
    .qualifications{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:26px;
      position:relative;
      z-index:2;
    }
    .qualification{
      border:1px solid rgba(255,255,255,.35);
      background:rgba(255,255,255,.08);
      border-radius:999px;
      padding:9px 13px;
      font-size:12px;
      letter-spacing:.2px;
      color:white;
    }
    .qualification strong{font-weight:700}

    .practice-content{grid-template-columns:1fr}
      .section-head{display:block}
      .section-head p{margin-top:15px}
    }
    @media(max-width:560px){
      .wrap{width:calc(100% - 32px)}
      .nav{min-height:72px;gap:12px}
      .brand{gap:10px;min-width:0}
      .monogram{font-size:26px;letter-spacing:-3px;flex:0 0 auto}
      .brand-divider{height:26px;flex:0 0 auto}
      .brandtext{min-width:0}
      .brandtext strong{font-size:17px;white-space:nowrap}
      .brandtext span{display:none}
      .nav-cta{padding:8px 11px;font-size:12px;flex:0 0 auto}
      .services{grid-template-columns:1fr}
      .hero{gap:34px;padding-top:42px}
      h1{
        font-size:clamp(38px,12.2vw,58px);
        letter-spacing:-2px;
        white-space:nowrap;
        overflow-wrap:normal;
        word-break:normal;
        max-width:100%;
      }
      .hero p{font-size:17px}
      .hero-card{padding:28px;min-height:350px;border-radius:28px}
      .hero-card .statement{font-size:28px}
      .hero-card:before{font-size:260px;right:-15px;bottom:-80px}
      .panel,.quote,.contactbox,.practice-intro{padding:28px}
      .panel h2,.practice-intro h2{font-size:38px}
      .quote p{font-size:29px}
      .contact h2{font-size:40px}
      .checks{grid-template-columns:1fr}
      .practice-content{grid-template-columns:1fr}
      .practice-note{grid-column:auto}
      .buttons{width:100%}
      .btn{max-width:100%}
      input,textarea{min-width:0}
      .contact-row{
        grid-template-columns:76px minmax(0,1fr);
        column-gap:10px;
        align-items:baseline;
      }
      .contact-row b{min-width:0}
    }
    @media(max-width:390px){
      .wrap{width:calc(100% - 24px)}
      .brandtext strong{font-size:15px}
      .nav-cta{font-size:11px;padding:7px 9px}
      h1{font-size:11.8vw;white-space:nowrap}
    }

/* WordPress admin-bar compatibility */
.admin-bar header{top:32px}
@media(max-width:782px){.admin-bar header{top:46px}}

.legal-content{font-size:17px;max-width:850px}.legal-content h2{font-family:Georgia,serif;font-size:32px;font-weight:500;margin-top:40px}.legal-content a{text-decoration:underline;color:var(--green-dark)}




/* v1.3 – mobile Abstände korrigiert
   Entscheidend: die globalen section-Abstände werden mobil überschrieben. */
@media (max-width:560px){
  /* Der globale Desktop-Wert section{padding:90px 0} war die Hauptursache
     für die sehr großen Leerflächen auf dem Smartphone. */
  main > section{
    padding:64px 0;
  }

  /* Hero beginnt nach dem Header luftig, aber nicht mit doppeltem Abstand. */
  main > section:first-child{
    padding-top:0;
    padding-bottom:0;
  }

  .hero{
    min-height:0;
    padding-top:72px;
    padding-bottom:0;
    gap:58px;
    align-items:start;
  }

  /* Keine künstlichen Außenabstände am Text innerhalb der rosa Karte. */
  .hero-card .statement{
    margin:0;
  }

  /* Abstand nach der rosa RK-Karte bis "Unsere Leistungen". */
  #leistungen{
    padding-top:72px;
    padding-bottom:64px;
  }

  /* Kein zusätzliches Padding auf dem Kartenraster selbst. */
  .services{
    padding-top:0;
  }
}