/* TVG Verlag -- Startseite: zusammengefuehrte Styles */

:root{
    --blue:#3E8FDB;
    --blue-dark:#2C6FB0;
    --blue-deep:#1F5590;
    --blue-50:#F3F8FE;
    --blue-100:#E6F1FC;
    --blue-200:#9FC3E8;
    --ink:#161B24;
    --ink-dim:#5C6577;
    --dim:#8992A3;
    --border:#D2DCE9;
    --line-strong:#AEBDD1;
    --white:#FFFFFF;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{background:var(--white); color:var(--ink); font-family:'Inter',sans-serif; font-size:16px; line-height:1.6;}
  h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif; font-weight:500; letter-spacing:-0.01em;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block; width:100%; height:100%; object-fit:cover;}
  .mono{font-family:'IBM Plex Mono',monospace;}
  .wrap{max-width:1320px; margin:0 auto; padding:0 40px;}

  /* Header — transparent over hero, solidifies on scroll */
  /* Under-construction ribbon */
  .uc-banner{position:relative; z-index:20; height:58px; overflow:hidden; background:repeating-linear-gradient(135deg, #FFC72C 0 26px, #161B24 26px 52px); box-shadow:0 -2px 10px rgba(0,0,0,0.2);}
  .uc-track{display:none;}
  .uc-badge{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; background:#ffffff; color:#161B24; font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:13px; letter-spacing:0.14em; text-transform:uppercase; padding:9px 26px; border-radius:7px; box-shadow:0 3px 14px rgba(0,0,0,0.3); white-space:nowrap; pointer-events:none;}
  .uc-item{display:inline-flex; align-items:center; padding:0 22px; white-space:nowrap; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:0.07em; color:#9ca3ad; text-transform:uppercase;}
  .uc-sep{display:inline-flex; align-items:center; flex-shrink:0;}
  .uc-sep svg{width:15px; height:15px; color:#9ca3ad; animation:uc-spin 2.6s linear infinite;}
  @keyframes uc-scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
  @keyframes uc-spin{to{transform:rotate(360deg);}}

  header{position:fixed; top:0; left:0; right:0; z-index:100; padding:26px 0; display:flex; align-items:center; transition:background .3s ease, padding .3s ease, border-color .3s ease;}
  .header-inner{width:100%; max-width:1320px; margin:0 auto; padding:0 40px; display:flex; align-items:center;}
  header.solid{background:rgba(255,255,255,0.8); backdrop-filter:blur(8px); padding:16px 40px; border-bottom:1px solid var(--border); box-shadow:0 4px 18px rgba(15,30,50,0.06);}
  .logo{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:20px; color:var(--white); transition:color .3s ease;}
  header.solid .logo{color:var(--ink);}
  .logo-img{display:inline-flex; align-items:center; background:var(--white); padding:9px 14px; border-radius:4px; box-shadow:0 2px 10px rgba(10,15,26,0.12); transition:box-shadow .3s ease;}
  header.solid .logo-img{box-shadow:none; padding:7px 12px;}
  .logo-img img{width:140px; height:auto; display:block;}
  .footer-logo img{width:160px; height:auto; display:block;}
  .logo .plus{color:var(--blue);}
  nav.links{display:flex; gap:34px; font-size:14px;}
  nav.links a{color:rgba(255,255,255,0.88); transition:color .3s ease;}
  header.solid nav.links a{color:var(--ink-dim);}
  header.solid nav.links a:hover{color:var(--ink);}
  .nav-cta{border:1px solid rgba(255,255,255,0.5); color:var(--white); padding:9px 18px; font-size:13.5px; transition:all .3s ease;}
  header.solid .nav-cta{border-color:var(--blue); color:var(--blue-dark);}
  header.solid .nav-cta:hover{background:var(--blue); color:var(--white);}
  .menu-btn{display:none; background:none; border:none; cursor:pointer; color:var(--white);}
  header.solid .menu-btn{color:var(--ink);}
  .menu-btn svg{width:22px; height:22px;}

  /* Hero slideshow */
  .hero{position:relative; height:64vh; min-height:440px; overflow:hidden; background:var(--ink);}
  .hero-image{position:absolute; inset:0; overflow:hidden;}
  .hero-image::after{content:''; position:absolute; inset:0; background:linear-gradient(195deg, rgba(10,22,38,0.1) 10%, rgba(10,22,38,0.62) 100%);}
  .hero-image img{width:100%; height:100%; object-fit:cover; object-position:50% 30%; filter:saturate(0.82) brightness(1.03) contrast(0.95); animation:kenburns-soft 16s ease-out forwards;}
  @keyframes kenburns-soft{from{transform:scale(1);} to{transform:scale(1.045);}}
  .hero-content{position:absolute; left:0; right:0; bottom:0; padding:0 40px 56px; max-width:1320px; margin:0 auto; z-index:2;}
  .hero-content .eyebrow{color:var(--white); justify-content:flex-start;}
  .hero-content h1{font-size:clamp(32px,4.6vw,56px); line-height:1.08; color:var(--white); max-width:16ch;}
  .hero-content p{margin-top:18px; font-size:16px; color:rgba(255,255,255,0.85); max-width:46ch; line-height:1.6;}
  .scroll-hint{position:absolute; left:40px; bottom:28px; display:flex; align-items:center; gap:10px; color:rgba(255,255,255,0.7); font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.06em; z-index:2;}
  .scroll-hint svg{width:14px; height:14px; animation:bob 1.8s ease-in-out infinite;}
  @keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}

  /* Section rhythm */
  section{padding:0;}
  .pad{padding:110px 0;}
  .lead-row{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:56px; flex-wrap:wrap;}
  .lead-row h2{font-size:clamp(28px,3.2vw,42px); max-width:14ch;}
  .lead-row p{max-width:42ch; color:var(--ink-dim); font-size:15.5px; line-height:1.7;}
  .eyebrow{display:inline-flex; align-items:center; gap:10px; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.08em; color:var(--blue-deep); text-transform:uppercase; margin-bottom:16px;}
  .eyebrow::before{content:''; width:22px; height:1px; background:var(--blue);}

  /* Three-tile full-bleed "Mehr als nur Marketing" */
  .tile-row{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
  .tile{position:relative; aspect-ratio:3/4; overflow:hidden; border-left:1px solid var(--border);}
  .tile:first-child{border-left:none;}
  .tile img{transition:transform .5s ease; filter:brightness(0.58);}
  .tile:hover img{transform:scale(1.04);}
  .tile .tile-inner{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:34px;}
  .tile .num{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--blue); letter-spacing:0.06em; margin-bottom:14px;}
  .tile h3{color:var(--white); font-size:23px; margin-bottom:10px; max-width:14ch;}
  .tile p{color:rgba(255,255,255,0.78); font-size:14px; max-width:26ch; line-height:1.6; margin-bottom:16px;}
  .tile .go{position:relative; display:inline-block; color:var(--white); font-size:13px; font-weight:500; padding-bottom:2px; width:fit-content;}
  .tile .go::after{content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .45s ease;}
  .tile:hover .go::after{transform:scaleX(1);}

  /* Aktuelles grid */
  .aktuelles{background:var(--white);}
  .grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border);}
  .a-card{background:var(--white); display:flex; flex-direction:column;}
  .a-media{aspect-ratio:4/3; overflow:hidden;}
  .a-body{padding:24px 22px 28px;}
  .a-tag{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.07em; color:var(--blue-deep); text-transform:uppercase; margin-bottom:10px;}
  .a-card h3{font-size:17px; line-height:1.3; margin-bottom:10px;}
  .a-card p{font-size:13.5px; color:var(--ink-dim); line-height:1.6; margin-bottom:14px;}
  .a-card .more{position:relative; display:inline-block; font-size:13px; font-weight:600; color:var(--blue-dark); padding-bottom:2px; width:fit-content;}
  .a-card .more::after{content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--blue-dark); transform:scaleX(0); transform-origin:left; transition:transform .45s ease;}
  .a-card:hover .more::after{transform:scaleX(1);}

  /* Scroll-reveal for Aktuelles cards + slow image drift */
  .a-card{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease, border-color .3s ease;}
  .a-card.in-view{opacity:1; transform:translateY(0);}
  .a-card:nth-child(1){transition-delay:0s;}
  .a-card:nth-child(2){transition-delay:.1s;}
  .a-card:nth-child(3){transition-delay:.2s;}
  .a-card:nth-child(4){transition-delay:.3s;}
  .a-media img{transition:transform 6s ease;}
  .a-card.in-view .a-media img{transform:scale(1.06);}

  /* Stat strip */
  .stat-strip{border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
  .stat-strip .wrap{display:grid; grid-template-columns:repeat(4,1fr); padding:0;}
  .stat{padding:44px 30px; border-left:1px solid var(--border); text-align:left;}
  .stat:first-child{border-left:none;}
  .stat-num{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:34px; color:var(--blue-dark);}
  .stat-label{font-size:13px; color:var(--ink-dim); margin-top:6px; max-width:20ch;}

  /* Auszeichnung */
  .award-row{display:grid; grid-template-columns:200px 1fr; gap:48px; align-items:center;}
  .award-badge{width:200px; height:auto; box-shadow:0 10px 30px rgba(15,30,50,0.12); border-radius:4px;}
  .award-row .eyebrow{margin-bottom:14px;}
  .award-row h2{font-size:clamp(24px,2.6vw,32px); margin-bottom:14px; max-width:20ch;}
  .award-row p{color:var(--ink-dim); font-size:14.5px; line-height:1.75; max-width:62ch;}
  .award-row strong{color:var(--ink); font-weight:600;}

  /* Partner */
  .partner-strip{border-top:1px solid var(--border); text-align:center;}
  .partner-strip .wrap{display:flex; flex-direction:column; align-items:center; gap:36px;}
  .partner-head{font-size:clamp(22px,2.4vw,28px);}
  .partner-logos{display:flex; align-items:center; justify-content:center; gap:56px; flex-wrap:wrap;}
  .partner-logo{width:auto; height:56px; object-fit:contain; filter:grayscale(1); opacity:0.75; transition:filter .3s ease, opacity .3s ease;}
  .partner-logo:hover{filter:grayscale(0); opacity:1;}

  /* FAQ */
  .faq-list{border-top:1px solid var(--border);}
  .faq-item{border-bottom:1px solid var(--border);}
  .faq-q{width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:26px 2px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:18px; color:var(--ink);}
  .faq-q svg{width:19px; height:19px; flex-shrink:0; color:var(--blue); transition:transform .2s ease;}
  .faq-item.open .faq-q svg{transform:rotate(45deg);}
  .faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
  .faq-a p{padding:0 2px 26px; font-size:15px; color:var(--ink-dim); max-width:64ch;}

  /* Final CTA */
  .cta{position:relative; padding:120px 0; background:var(--ink); color:var(--white); text-align:center; overflow:hidden;}
  .cta::before{content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--blue);}
  .cta h2{font-size:clamp(28px,4vw,46px); max-width:18ch; margin:0 auto; line-height:1.12;}
  .cta p.sub{margin-top:20px; color:rgba(255,255,255,0.65); font-size:16px;}
  .cta form{margin-top:36px; display:flex; gap:0; max-width:520px; margin-left:auto; margin-right:auto; border:1px solid rgba(255,255,255,0.25); flex-wrap:wrap;}
  .cta input{flex:1; min-width:160px; padding:16px 18px; border:none; background:transparent; color:var(--white); font-size:15px; border-right:1px solid rgba(255,255,255,0.25);}
  .cta input::placeholder{color:rgba(255,255,255,0.4);}
  .cta button.submit{background:var(--blue); color:var(--white); border:none; padding:16px 28px; font-size:14.5px; font-weight:600; cursor:pointer; transition:background .15s ease;}
  .cta button.submit:hover{background:var(--blue-dark);}
  .cta .err{color:#E8A0A0; font-size:13.5px; margin-top:14px; display:none;}
  .cta .ok{color:var(--blue-200); font-size:15px; margin-top:18px; display:none;}

  footer{background:var(--white); border-top:1px solid var(--border); padding:50px 0 30px;}
  .footer-row{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px;}
  .footer-logo{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:19px;}
  .footer-logo .plus{color:var(--blue);}
  .footer-links{display:flex; gap:24px; font-size:14px; color:var(--ink-dim); flex-wrap:wrap;}
  .footer-links a:hover{color:var(--blue-dark);}
  .footer-note{font-size:12.5px; color:var(--dim); margin-top:10px;}
  .credits{font-size:11px; color:var(--dim); margin-top:20px; border-top:1px solid var(--border); padding-top:16px;}

  @media (max-width:960px){
    .tile-row{grid-template-columns:1fr;}
    .tile{border-left:none; border-top:1px solid var(--border); aspect-ratio:16/10;}
    .tile:first-child{border-top:none;}
    .grid4{grid-template-columns:1fr 1fr;}
    .stat-strip .wrap{grid-template-columns:1fr 1fr;}
    .stat:nth-child(3){border-left:none;}
  }
  @media (max-width:720px){
    .wrap{padding:0 22px;}
    header{padding:20px 0;}
    .header-inner{padding:0 22px;}
    header.solid{padding:14px 22px;}
    .grid4{grid-template-columns:1fr;}
    .pad{padding:70px 0;}
    .cta{padding:80px 0;}
    .award-row{grid-template-columns:1fr; text-align:center; justify-items:center;}
    .partner-logos{gap:36px;}
  }

/* --- Kontakt-Kacheln & Zusatzstyles --- */

/* Kontakt page */
  .kt-hero{background:var(--blue-50); border-bottom:1px solid var(--border);}
  .kt-hero .wrap{max-width:680px; text-align:center; padding-top:20px; padding-bottom:6px;}
  .kt-hero h1{font-size:clamp(30px,4vw,46px); line-height:1.1; margin-bottom:16px;}
  .kt-hero p{color:var(--ink-dim); font-size:16px; line-height:1.7;}

  .contact-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:34px; padding-top:0;}
  .c-tile{position:relative; border:1px solid var(--border); border-radius:14px; padding:42px 28px 34px; text-align:center; background:var(--white); box-shadow:0 2px 6px rgba(15,30,50,0.05), 0 14px 30px rgba(15,30,50,0.03); transition:transform .3s ease, box-shadow .3s ease;}
  .c-tile:hover{box-shadow:0 4px 10px rgba(15,30,50,0.07), 0 22px 40px rgba(15,30,50,0.08); transform:translateY(-4px);}

  .icon-wrap{position:absolute; top:-24px; left:50%; transform:translateX(-50%); width:68px; height:68px; border-radius:50%; background:linear-gradient(145deg, var(--blue), var(--blue-dark)); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 22px rgba(44,111,176,0.38), 0 2px 4px rgba(44,111,176,0.3); border:4px solid var(--white);}
  .icon-wrap svg{width:28px; height:28px; color:var(--white); opacity:0;}
  .c-tile.in-view .icon-wrap svg{opacity:1;}

  .c-tile h3{margin-top:28px; font-size:17px; margin-bottom:10px;}
  .c-tile p{font-size:14px; color:var(--ink-dim); line-height:1.75;}
  .c-tile a{color:var(--blue-dark); font-weight:600;}
  .c-tile a:hover{color:var(--blue-deep);}

  @keyframes flyIn{
    0%{opacity:0; transform:translate(34px,-22px) rotate(-32deg) scale(0.6);}
    65%{opacity:1; transform:translate(-3px,2px) rotate(5deg) scale(1.06);}
    100%{opacity:1; transform:translate(0,0) rotate(0deg) scale(1);}
  }
  .c-tile.in-view.icon-address .icon-wrap svg{animation:flyIn 1.5s cubic-bezier(.22,.8,.25,1) .55s both;}

  @keyframes tickHour{0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}}
  @keyframes tickMinute{0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}}
  .c-tile.in-view.icon-hours .icon-wrap svg{opacity:1; transition:opacity .4s ease .5s;}
  .c-tile.in-view.icon-hours .hand-hour{animation:tickHour 9s linear .6s infinite; transform-origin:12px 12px;}
  .c-tile.in-view.icon-hours .hand-minute{animation:tickMinute 3.4s linear .6s infinite; transform-origin:12px 12px;}

  @keyframes vibrate{
    0%, 8%, 100%{transform:translateX(0) rotate(0deg);}
    1%{transform:translateX(-2px) rotate(-7deg);}
    2%{transform:translateX(2px) rotate(7deg);}
    3%{transform:translateX(-2px) rotate(-5deg);}
    4%{transform:translateX(2px) rotate(5deg);}
    5%{transform:translateX(-1px) rotate(-3deg);}
    6%{transform:translateX(1px) rotate(3deg);}
    7%{transform:translateX(0) rotate(0deg);}
  }
  .c-tile.in-view.icon-phone .icon-wrap svg{animation:vibrate 5.5s ease-in-out .65s infinite;}

  @media (max-width:720px){
    .contact-tiles{grid-template-columns:1fr; gap:46px;}
  }