/* ============================================================
   masta – Softwareentwicklung und IT-Consulting
   Homepage-Design angelehnt an masta.co.at
   ============================================================ */

:root{
  /* Markenfarben (aus masta.co.at übernommen) */
  --masta-blue:   #1935aa;
  --masta-azure:  #0085ca;
  --masta-light:  #b3d2e2;
  --masta-brand:  #0099cc;   /* Logo-Farbe */

  /* Ergänzungen */
  --ink:      #10233f;
  --ink-soft: #4a5b72;
  --paper:    #f5f7fb;
  --white:    #ffffff;
  --line:     #d8e1ec;
  --accent:   #ff7a45;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 10px 30px rgba(16, 35, 63, .10);
  --shadow-lg: 0 24px 60px rgba(16, 35, 63, .16);

  --max: 1180px;
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Reset / Basis ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--masta-azure); text-decoration:none; }
a:hover{ color:var(--masta-blue); }

h1,h2,h3,h4{ line-height:1.25; margin:0 0 .6rem; }
h1{ font-size:clamp(2rem, 4.2vw, 3.2rem); font-weight:800; letter-spacing:-.02em; }
h2{ font-size:clamp(1.4rem, 2.6vw, 2rem); font-weight:700; }
h3{ font-size:1.1rem; font-weight:700; }

.wrap{
  width:min(var(--max), 92vw);
  margin:0 auto;
}

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--masta-blue); color:#fff; padding:.6rem 1rem;
  border-radius:var(--radius-sm);
}
.skip-link:focus{ left:1rem; top:1rem; }

/* ---------- Header / Navigation ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}

.brand{
  display:flex; align-items:center; gap:1rem;
  padding:.75rem 0;
}
.brand-logo{
  width:52px; height:52px; border-radius:10px;
  background:var(--masta-brand);
  overflow:hidden;
  flex:0 0 auto;
}
.brand-logo img{ width:100%; height:100%; }
.brand-text{ display:flex; flex-direction:column; }
.brand-name{
  font-size:1.4rem; font-weight:800; letter-spacing:.04em;
  color:var(--masta-blue);
}
.brand-tag{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
}

.nav-toggle{
  border:1px solid var(--line); background:#fff; color:var(--ink);
  padding:.45rem .8rem; border-radius:var(--radius-sm);
  font:inherit; cursor:pointer;
}
.nav-toggle:hover{ background:var(--masta-light); }

.main-nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.35rem;
}
.main-nav a{
  display:inline-block; padding:.55rem .9rem;
  font-size:.82rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink); border-radius:var(--radius-sm);
}
.main-nav a:hover{ background:var(--masta-light); color:var(--masta-blue); }
.main-nav a.active{ background:var(--masta-blue); color:#fff; }

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}

@media (max-width:760px){
  .nav-toggle{ display:block; }
  .main-nav{ display:none; width:100%; }
  .main-nav.open{ display:block; }
  .main-nav ul{ flex-direction:column; }
}
@media (min-width:761px){
  .nav-toggle{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 15% 10%, rgba(25,53,170,.16), transparent 60%),
    radial-gradient(90% 80% at 90% 20%, rgba(0,133,202,.18), transparent 60%),
    url("../assets/img/hero-hintergrund.jpg");
  background-size:cover;
  background-position:center;
  padding:clamp(2rem, 6vw, 4.5rem) 0;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.35));
  pointer-events:none;
}
.hero .wrap{ position:relative; z-index:2; }

.hero::before{
  content:"";
  position:absolute; right:-60px; bottom:-70px;
  width:360px; height:360px;
  background:url("../assets/img/masta-icon.png") no-repeat center/contain;
  opacity:.10;
  pointer-events:none;
}

.hero-title{ margin:0; }
.hero-line{
  display:block;
  font-size:clamp(1.6rem, 4.4vw, 3rem);
  font-weight:800;
  letter-spacing:-.02em;
}
.hero-line.planung   { color:var(--masta-blue); }
.hero-line.entwicklung{ color:var(--masta-azure); margin-left:clamp(0rem, 3vw, 2.2rem); }
.hero-line.umsetzung { color:#5f88a6; margin-left:clamp(0rem, 1vw, .6rem); }

.hero-sub{
  margin:1.1rem 0 0;
  max-width:56ch;
  color:var(--ink-soft);
  font-size:1.05rem;
}

.hero-actions{ margin-top:1.4rem; display:flex; gap:.7rem; flex-wrap:wrap; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  padding:.7rem 1.2rem;
  border-radius:var(--radius-sm);
  font-size:.9rem; font-weight:600;
  border:1px solid transparent;
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--masta-blue); color:#fff; }
.btn-primary:hover{ background:#122a86; color:#fff; }
.btn-secondary{ background:#fff; color:var(--masta-blue); border-color:var(--line); }
.btn-secondary:hover{ background:var(--masta-light); }
.btn-ghost{ background:transparent; color:var(--masta-azure); border-color:var(--masta-azure); }

/* ---------- Sections ---------- */
section{ padding:clamp(1.6rem, 4vw, 3rem) 0; }
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:1.2rem;
}
.kicker{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--masta-azure); font-weight:700;
}

.card-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.2rem 1.3rem;
  box-shadow:var(--shadow);
}
.card h3{ color:var(--masta-blue); }
.card p{ margin:.3rem 0 0; color:var(--ink-soft); }
.card ul{ margin:.7rem 0 0; padding-left:1.1rem; color:var(--ink-soft); }
.card li{ margin:.25rem 0; }
.card:hover{ border-color:var(--masta-azure); }

/* ---------- Referenzen ---------- */
.ref-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
}
.ref-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}
.ref-card img{
  width:100%; height:180px; object-fit:cover;
  border-bottom:1px solid var(--line);
}
.ref-card .ref-body{ padding:1rem 1.1rem; }
.ref-card h3{ margin:0 0 .35rem; font-size:1rem; color:var(--masta-blue); }
.ref-card p{ margin:0; color:var(--ink-soft); font-size:.92rem; }
.ref-tag{
  display:inline-block; margin-top:.7rem;
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--masta-azure); background:#eef5fa;
  padding:.3rem .6rem; border-radius:6px;
}

/* ---------- Kunden ---------- */
.logo-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
}
.logo-cell{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:.9rem; display:flex; align-items:center; justify-content:center;
  min-height:90px;
}
.logo-cell img{ max-height:70px; width:auto; }
.logo-cell:hover{ border-color:var(--masta-azure); }

/* ---------- Kontakt ---------- */
.contact-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.contact-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.1rem 1.2rem; box-shadow:var(--shadow);
}
.contact-card dt{ font-weight:700; color:var(--masta-blue); }
.contact-card dd{ margin:.2rem 0 .8rem; color:var(--ink-soft); }

form{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.2rem; box-shadow:var(--shadow);
}
.field{ display:grid; gap:.35rem; margin-bottom:.9rem; }
.field label{ font-size:.85rem; font-weight:600; color:var(--ink); }
.field input, .field textarea{
  font:inherit; padding:.6rem .75rem;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:#fbfdff;
}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--masta-azure);
  box-shadow:0 0 0 3px rgba(0,133,202,.15);
}
.form-note{ font-size:.85rem; color:var(--ink-soft); }

/* ---------- Über mich ---------- */
.bio{ display:grid; gap:1.2rem; grid-template-columns:1fr 1fr; }
@media (max-width:760px){ .bio{ grid-template-columns:1fr; } }
.bio-photos{ display:grid; gap:.7rem; grid-template-columns:repeat(2,1fr); }
.bio-photos img{ border-radius:var(--radius-sm); }
.timeline{ list-style:none; margin:0; padding:0; }
.timeline li{
  padding:.55rem .8rem; border-left:3px solid var(--masta-azure);
  background:#fff; margin-bottom:.5rem; border-radius:var(--radius-sm);
}
.timeline li strong{ color:var(--masta-blue); }

/* ---------- Footer ---------- */
.site-footer{
  background:var(--ink); color:#e8eef6;
  padding:2rem 0 1.2rem; margin-top:2rem;
}
.footer-grid{
  display:grid; gap:1.2rem;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
.site-footer h4{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--masta-light); }
.site-footer a{ color:#cfe0f2; }
.site-footer a:hover{ color:#fff; }
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin:.3rem 0; }
.footer-bottom{
  margin-top:1.4rem; border-top:1px solid rgba(255,255,255,.14);
  padding-top:.9rem; font-size:.8rem; color:#9fb1c4;
  display:flex; gap:1rem; flex-wrap:wrap; justify-content:space-between;
}

/* ---------- Cookie-Banner ---------- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:var(--ink); color:#fff;
  padding:.9rem 1rem;
  display:flex; gap:.8rem; align-items:center; flex-wrap:wrap;
  box-shadow:var(--shadow-lg);
}
.cookie-banner p{ margin:0; font-size:.9rem; }
.cookie-banner button{
  font:inherit; border:1px solid rgba(255,255,255,.3);
  background:transparent; color:#fff; padding:.5rem .9rem;
  border-radius:var(--radius-sm); cursor:pointer;
}
.cookie-banner button.accept{ background:var(--masta-azure); border-color:transparent; }
.cookie-banner.hidden{ display:none; }

/* ---------- Scroll-Reveal ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- Ergänzungen / Feinschliff ---------- */
:focus-visible{
  outline:3px solid var(--masta-azure);
  outline-offset:2px;
}

/* Kompakte Hero auf Unterseiten */
.hero--compact{ padding:1.4rem 0 1.2rem; }
.hero--compact .hero-line{ font-size:clamp(1.4rem, 3.4vw, 2.4rem); }

/* Nummerierte Säulen */
.card--pillar{ position:relative; }
.card--pillar::before{
  content:attr(data-num);
  position:absolute; top:-14px; left:14px;
  width:34px; height:34px; border-radius:50%;
  background:var(--masta-azure); color:#fff;
  display:grid; place-items:center;
  font-weight:700; font-size:.9rem;
}

/* Hover- lift */
.ref-card:hover, .logo-cell:hover, .contact-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
}
.ref-card img{ transition:transform .3s ease; }
.ref-card:hover img{ transform:scale(1.04); }

/* Kundenlogos sauber einrahmen */
.logo-cell img{
  max-width:100%; max-height:70px;
  filter:contrast(1.05);
}

/* Kleine Statistik-Leiste */
.stats{
  display:flex; gap:1rem; flex-wrap:wrap;
  margin-top:1rem;
}
.stat{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:.7rem 1rem;
  font-size:.9rem; color:var(--ink-soft);
}
.stat strong{ color:var(--masta-blue); font-size:1.1rem; display:block; }

/* ---------- Druck ---------- */
@media print{
  .site-header, .cookie-banner, .hero-actions{ display:none; }
  body{ background:#fff; }
}