/*
Theme Name: TUBE Moments
Theme URI: https://tubemoments.com
Author: Oliver Filipzik
Description: Cineastisches WordPress-Theme für die Videoproduktions- und Storytelling-Agentur TUBE Moments. Klassisches Theme mit gestalteter Startseite (front-page.php), Blog und flexibler Navigation. Platzhalter für Showreel, Bilder und Logos einfach austauschen.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tubemoments
*/

/* ============================================================
   DESIGN-TOKENS  (cineastisch, warm-dunkel, Gold-Akzent)
   ============================================================ */
:root{
  --bg:#100d0c;          /* warmes Fast-Schwarz            */
  --bg-2:#17120f;        /* Sektions-Wechsel               */
  --surface:#1c1613;     /* Karten                         */
  --fg:#f4efe8;          /* warmes Off-White               */
  --muted:#a89d90;       /* Sekundärtext                   */
  --line:#2c2420;        /* Linien/Border                  */
  --accent:#e7a33b;      /* Gold                           */
  --accent-2:#d2622f;    /* Ember (Verlauf)                */
  --maxw:1180px;
  --f-display:"Fraunces", Georgia, "Times New Roman", serif;
  --f-body:"Hanken Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color-scheme:dark;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--f-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block;}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(16px,5vw,40px);}
section{padding-block:clamp(64px,9vw,120px);}

/* Typo */
h1,h2,h3,h4{font-family:var(--f-display); font-weight:600; line-height:1.08;
  letter-spacing:-.01em; text-wrap:balance; margin:0 0 .4em;}
h1{font-size:clamp(2.4rem,6vw,4.6rem);}
h2{font-size:clamp(1.9rem,4vw,3rem);}
h3{font-size:1.3rem;}
p{margin:0 0 1em; max-width:68ch;}
.eyebrow{font-family:var(--f-body); font-weight:600; font-size:.78rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
  margin:0 0 18px;}
.lead{font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--muted); max-width:60ch;}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:.5em; font-weight:600;
  font-size:1rem; padding:.9em 1.5em; border-radius:999px; cursor:pointer;
  border:1px solid transparent; transition:transform .15s ease, background .2s;}
.btn:hover{text-decoration:none; transform:translateY(-2px);}
.btn-primary{background:linear-gradient(120deg,var(--accent),var(--accent-2)); color:#1a1200;}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--fg);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent);}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top,0px);}
.header-inner{display:flex; align-items:center; justify-content:space-between;
  gap:20px; height:72px;}
.brand{font-family:var(--f-display); font-weight:600; font-size:1.3rem;
  letter-spacing:.02em; color:var(--fg);}
.brand:hover{text-decoration:none;}
.brand b{color:var(--accent); font-weight:600;}
.custom-logo{max-height:40px; width:auto;}
.main-nav ul{list-style:none; display:flex; gap:28px; margin:0; padding:0;}
.main-nav a{color:var(--fg); font-weight:500; font-size:.98rem;}
.main-nav a:hover{color:var(--accent); text-decoration:none;}
.header-cta{display:inline-flex;}
.nav-toggle{display:none; background:none; border:0; color:var(--fg);
  font-size:1.6rem; cursor:pointer; line-height:1;}

@media (max-width:860px){
  .header-cta{display:none;}
  .nav-toggle{display:block;}
  .main-nav{position:fixed; inset:72px 0 auto 0; background:var(--bg-2);
    border-bottom:1px solid var(--line); transform:translateY(-120%);
    transition:transform .3s ease; padding:8px 0;}
  .main-nav.open{transform:translateY(0);}
  .main-nav ul{flex-direction:column; gap:0;}
  .main-nav li{border-top:1px solid var(--line);}
  .main-nav a{display:block; padding:14px clamp(16px,5vw,40px);}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; overflow:hidden; padding-block:clamp(72px,11vw,150px);}
.hero::before{content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(60% 80% at 75% 20%, rgba(231,163,59,.18), transparent 60%),
    radial-gradient(50% 70% at 10% 90%, rgba(210,98,47,.14), transparent 60%);}
.hero .wrap{position:relative; z-index:1;}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,64px);
  align-items:center;}
.hero h1 em{font-style:italic; color:var(--accent);}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px;}
.media-ph{position:relative; aspect-ratio:4/5; border-radius:16px; overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(145deg,#241c17,#14100e);
  display:flex; align-items:center; justify-content:center;}
.media-ph .play{width:76px; height:76px; border-radius:50%;
  background:linear-gradient(120deg,var(--accent),var(--accent-2));
  display:flex; align-items:center; justify-content:center; color:#1a1200;}
.media-ph .play svg{width:30px; height:30px; margin-left:4px;}
.media-ph .ph-cap{position:absolute; left:0; right:0; bottom:0; padding:12px 16px;
  font-size:.8rem; color:var(--muted); background:rgba(0,0,0,.35);
  border-top:1px solid var(--line);}
@media (max-width:860px){ .hero-grid{grid-template-columns:1fr;} .media-ph{aspect-ratio:16/10; order:-1;} }

/* ============================================================
   PHILOSOPHIE (Pull-Quote)
   ============================================================ */
.philosophy{background:var(--bg-2); border-block:1px solid var(--line); text-align:center;}
.philosophy blockquote{margin:0 auto; max-width:20ch;}
.philosophy .q{font-family:var(--f-display); font-size:clamp(2rem,4.5vw,3.4rem);
  line-height:1.12; font-weight:600;}
.philosophy .q b{color:var(--accent); font-weight:600; font-style:italic;}
.philosophy .q-sub{margin:26px auto 0; color:var(--muted); max-width:52ch; font-family:var(--f-body);}

/* ============================================================
   ANSATZ 60/40
   ============================================================ */
.approach-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px;}
.step{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:28px;}
.step .n{font-family:var(--f-display); font-size:1rem; color:var(--accent); letter-spacing:.1em;}
.step h3{margin:10px 0 6px;}
.step p{color:var(--muted); font-size:.96rem; margin:0;}
.split{margin-top:40px;}
.split-bar{display:flex; height:16px; border-radius:999px; overflow:hidden; border:1px solid var(--line);}
.split-bar .plan{width:60%; background:linear-gradient(90deg,var(--accent),var(--accent-2));}
.split-bar .make{width:40%; background:var(--surface);}
.split-legend{display:flex; justify-content:space-between; margin-top:12px; color:var(--muted);
  font-size:.9rem; font-variant-numeric:tabular-nums;}
.split-legend b{color:var(--fg);}
@media (max-width:760px){ .approach-grid{grid-template-columns:1fr;} }

/* ============================================================
   LEISTUNGEN
   ============================================================ */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px;}
.service{background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:26px; transition:border-color .2s, transform .2s;}
.service:hover{border-color:var(--accent); transform:translateY(-3px);}
.service .ico{width:42px; height:42px; border-radius:10px; margin-bottom:16px;
  background:linear-gradient(135deg,rgba(231,163,59,.25),rgba(210,98,47,.2));
  display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:1.2rem;}
.service h3{font-size:1.15rem; margin-bottom:6px;}
.service p{color:var(--muted); font-size:.94rem; margin:0;}
@media (max-width:860px){ .services-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .services-grid{grid-template-columns:1fr;} }

/* ============================================================
   REFERENZEN
   ============================================================ */
.clients{background:var(--bg-2); border-block:1px solid var(--line); text-align:center;}
.client-row{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 40px; margin-top:36px;}
.client-row span{font-family:var(--f-display); font-size:clamp(1.1rem,2.2vw,1.6rem);
  color:var(--muted); opacity:.9;}
.client-note{margin-top:30px; color:var(--muted);}
.client-note b{color:var(--accent);}

/* ============================================================
   CTA
   ============================================================ */
.cta-band{text-align:center;
  background:linear-gradient(120deg, rgba(231,163,59,.12), rgba(210,98,47,.1));
  border-block:1px solid var(--line);}
.cta-band .mail{display:inline-flex; align-items:center; gap:12px; margin-top:22px;
  font-family:var(--f-display); font-size:clamp(1.2rem,2.6vw,1.8rem); color:var(--fg);}
.copy-btn{font-family:var(--f-body); font-size:.8rem; font-weight:600; padding:.4em .8em;
  border-radius:999px; border:1px solid var(--line); background:var(--surface);
  color:var(--muted); cursor:pointer;}
.copy-btn:hover{border-color:var(--accent); color:var(--accent);}

/* ============================================================
   BLOG / STORIES
   ============================================================ */
.page-head{padding-block:clamp(48px,8vw,90px); border-bottom:1px solid var(--line);}
.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.card{background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .2s, border-color .2s;}
.card:hover{transform:translateY(-3px); border-color:var(--accent);}
.card .thumb{aspect-ratio:16/10; background:linear-gradient(145deg,#241c17,#14100e);
  display:flex; align-items:center; justify-content:center; color:var(--line); font-size:2rem;}
.card .thumb img{width:100%; height:100%; object-fit:cover;}
.card .body{padding:20px 22px 24px;}
.card .date{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:8px;}
.card h3{font-size:1.2rem; margin:0 0 8px;}
.card h3 a{color:var(--fg);}
.card h3 a:hover{color:var(--accent); text-decoration:none;}
.card .excerpt{color:var(--muted); font-size:.92rem; margin:0;}
@media (max-width:860px){ .post-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .post-grid{grid-template-columns:1fr;} }

/* Single / Page */
.entry{max-width:720px; margin-inline:auto;}
.entry-title{margin-bottom:.2em;}
.entry-meta{color:var(--muted); font-size:.9rem; margin-bottom:28px;}
.entry-content{font-size:1.08rem;}
.entry-content h2,.entry-content h3{margin-top:1.4em;}
.entry-content img{border-radius:12px; margin:1.4em 0;}
.entry-content a{text-decoration:underline;}
.back-link{display:inline-block; margin-top:40px; color:var(--muted);}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:#0a0807; border-top:1px solid var(--line);
  padding-block:56px calc(40px + env(safe-area-inset-bottom,0px));}
.footer-grid{display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; align-items:flex-start;}
.footer-brand{font-family:var(--f-display); font-size:1.4rem; color:var(--fg);}
.footer-brand b{color:var(--accent);}
.socials{display:flex; gap:20px; margin-top:14px; flex-wrap:wrap;}
.socials a{color:var(--muted); font-weight:500;}
.socials a:hover{color:var(--accent); text-decoration:none;}
.footer-contact{color:var(--muted); font-size:.95rem;}
.footer-contact a{color:var(--fg);}
.colophon{margin-top:40px; padding-top:20px; border-top:1px solid var(--line);
  color:var(--muted); font-size:.82rem; display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between;}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto!important;}}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* ============================================================
   BLOCK-EDITOR-SEKTIONEN  (Patterns „TUBE – Startseite" etc.)
   Diese Klassen stylen die im Backend bearbeitbaren Blöcke.
   ============================================================ */
.alignfull{width:100%; max-width:none; margin-left:auto; margin-right:auto;}
.tube-sec{padding-block:clamp(64px,9vw,120px); padding-inline:clamp(16px,5vw,40px);}
.tube-sec.tube-band{text-align:center;}
.tube-sec .wp-block-heading{text-wrap:balance; margin-bottom:.3em;}
.tube-sec .eyebrow{margin-bottom:14px;}
.tube-cards{gap:22px;}
.tube-card{border:1px solid var(--line); border-radius:14px; padding:26px 28px; height:100%;}
.tube-card .wp-block-heading{margin-bottom:.35em;}
.tube-media{border:1px solid var(--line); border-radius:16px; overflow:hidden;}

/* Buttons an die Theme-Optik angleichen */
.wp-block-button__link{border-radius:999px; padding:.9em 1.6em; font-weight:600;}
.wp-block-button.is-style-outline .wp-block-button__link{border:1px solid var(--line); color:var(--fg); background:transparent;}
.wp-block-button.is-style-outline .wp-block-button__link:hover{border-color:var(--accent); color:var(--accent);}

/* Stories-Teaser (Query-Loop) */
.tube-stories .wp-block-post-template{list-style:none; display:grid;
  grid-template-columns:repeat(3,1fr); gap:28px; padding:0; margin-top:44px;}
.tube-stories .wp-block-post-template > li{background:var(--surface);
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column;}
.tube-stories .wp-block-post-featured-image{margin:0;}
.tube-stories .wp-block-post-featured-image img{width:100%; aspect-ratio:16/10; object-fit:cover; display:block;}
.tube-stories .wp-block-post-date{padding:18px 22px 0; font-size:.78rem;
  letter-spacing:.08em; text-transform:uppercase;}
.tube-stories .wp-block-post-title{padding:6px 22px 0;}
.tube-stories .wp-block-post-title a{color:var(--fg);}
.tube-stories .wp-block-post-title a:hover{color:var(--accent); text-decoration:none;}
.tube-stories .wp-block-post-excerpt{padding:8px 22px 24px; color:var(--muted); font-size:.92rem;}
.tube-stories-more{margin-top:32px;}
@media (max-width:860px){ .tube-stories .wp-block-post-template{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .tube-stories .wp-block-post-template{grid-template-columns:1fr;} }