/* GERA IT-Service&More ------------------------------------------------- */

:root{
  --ink:        #16233D;
  --ink-soft:   #3C4A63;
  --paper:      #EDEEE7;
  --paper-2:    #E2E0D3;
  --card:       #FFFFFF;
  --accent:     #E07B32;
  --accent-ink: #7A3B10;
  --teal:       #2F8A82;
  --line:       #C9C5B4;
  --radius:     3px;
  --maxw:       1120px;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Kategorie-Farben, farbenfroh und gut unterscheidbar */
  --c-tv:      #E0762A;
  --c-wifi:    #2F8A82;
  --c-home:    #8A5CC9;
  --c-pc:      #3E76C4;
  --c-print:   #D9A226;
  --c-cable:   #D6577C;
  --c-web:     #3D9B6E;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }
img,svg{ max-width:100%; display:block; }

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 28px;
}

h1,h2,h3{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.12;
  margin:0 0 0.4em 0;
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(2.4rem, 5vw, 3.8rem); font-weight:500; }
h2{ font-size:clamp(1.6rem, 3vw, 2.2rem); }
h3{ font-size:1.15rem; font-weight:600; font-family:var(--sans); }

p{ margin:0 0 1em 0; max-width:62ch; }
p.lede{ font-size:1.15rem; color:var(--ink-soft); max-width:48ch; }

/* ---------- Header ---------- */
header.site{
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:sticky;
  top:0;
  z-index:20;
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 0;
  gap:24px;
}
.brand{
  display:flex;
  align-items:baseline;
  gap:9px;
  text-decoration:none;
  color:var(--ink);
}
.brand .mark{
  width:30px; height:30px;
  border-radius:50%;
  background:var(--ink);
  position:relative;
  flex:none;
}
.brand .mark::before{
  content:"";
  position:absolute; inset:9px;
  border:2px solid var(--paper);
  border-radius:50%;
}
.brand .mark::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:5px; height:5px;
  background:var(--accent);
  border-radius:50%;
  transform:translate(-50%,-50%);
}
.brand .name{
  font-family:var(--serif);
  font-size:1.18rem;
  font-weight:600;
  white-space:nowrap;
}
.brand .name em{ font-style:normal; color:var(--teal); }

nav.links{
  display:flex;
  align-items:center;
  gap:30px;
  font-size:0.97rem;
}
nav.links a{
  text-decoration:none;
  color:var(--ink-soft);
  padding:6px 0;
  border-bottom:2px solid transparent;
}
nav.links a:hover,
nav.links a[aria-current="page"]{
  color:var(--ink);
  border-bottom-color:var(--accent);
}
nav.links a.mobile-tel,
nav.links a.mobile-cta{ display:none; }
.nav .call{
  display:flex; align-items:center; gap:10px;
}
.tel{
  font-family:var(--serif);
  font-size:1rem;
  text-decoration:none;
  color:var(--ink);
  white-space:nowrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--ink);
  color:var(--paper);
  text-decoration:none;
  padding:12px 22px;
  border-radius:var(--radius);
  font-size:0.95rem;
  font-weight:500;
  border:1px solid var(--ink);
  cursor:pointer;
}
.btn:hover{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.btn.ghost{
  background:transparent;
  color:var(--ink);
}
.btn.ghost:hover{ background:var(--ink); color:var(--paper); }

/* mobile nav toggle (funktioniert ganz ohne JavaScript) */
.nav-toggle-input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:44px; height:44px;
  margin:-7px -10px -7px 0;
  cursor:pointer;
}
.burger span{ width:22px; }
.burger span{
  display:block;
  height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:transform 150ms ease, opacity 150ms ease;
}
.nav-toggle-input:checked ~ .call .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle-input:checked ~ .call .burger span:nth-child(2){ opacity:0; }
.nav-toggle-input:checked ~ .call .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(440px 340px at 6% -10%, rgba(224,118,42,0.20), transparent 60%),
    radial-gradient(420px 320px at 96% 6%, rgba(138,92,201,0.18), transparent 60%),
    radial-gradient(520px 400px at 55% 105%, rgba(47,138,130,0.16), transparent 65%),
    var(--paper);
}
.hero .grid-bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:46px 46px;
  opacity:0.35;
  mask-image:linear-gradient(to bottom, black, transparent 85%);
}
.hero .wrap{
  position:relative;
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:40px;
  align-items:center;
  padding-top:76px;
  padding-bottom:64px;
}
.hero .eyebrow{
  color:var(--teal);
  font-size:0.95rem;
  margin-bottom:14px;
}
.hero-solution{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.3rem, 2.4vw, 1.6rem);
  color:var(--accent-ink);
  margin:14px 0 18px 0;
  max-width:40ch;
}
.hero .actions{
  display:flex;
  gap:14px;
  margin-top:30px;
  flex-wrap:wrap;
}
.hero-figure{
  animation:rise 700ms ease-out both;
}
.hero-figure svg{ width:100%; height:auto; }
@keyframes rise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------- Section scaffolding ---------- */
section{ padding:72px 0; }
section.tight{ padding:48px 0; }
section.alt{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:40px;
  flex-wrap:wrap;
}

/* ---------- Cards / grid ---------- */
.grid3{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.card{
  background:var(--card);
  padding:30px 26px;
}
.card .num{
  font-family:var(--serif);
  color:var(--teal);
  font-size:0.9rem;
  margin-bottom:14px;
  display:block;
}
.card p{ font-size:0.96rem; margin-bottom:0; }
.card h3{ margin-bottom:10px; }

/* farbige Icon-Kacheln */
.icon-box{
  width:52px; height:52px;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
  flex:none;
}
.icon-box svg{ width:26px; height:26px; }
.icon-box.tv{    background:var(--c-tv); }
.icon-box.wifi{  background:var(--c-wifi); }
.icon-box.home{  background:var(--c-home); }
.icon-box.pc{    background:var(--c-pc); }
.icon-box.print{ background:var(--c-print); }
.icon-box.cable{ background:var(--c-cable); }
.icon-box.web{   background:var(--c-web); }
.service-row .icon-box{ margin-bottom:12px; }

.services-list{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  border-top:1px solid var(--line);
}
.service-row{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  padding:26px 0;
  border-bottom:1px solid var(--line);
}
.services-list .service-row:nth-child(odd){ padding-right:36px; border-right:1px solid var(--line); }
.services-list .service-row:nth-child(even){ padding-left:36px; }
.service-row h3{ display:flex; align-items:baseline; gap:12px; }
.service-row .tag{
  font-family:var(--serif);
  font-size:0.85rem;
  color:var(--teal);
}
.service-row p{ font-size:0.95rem; color:var(--ink-soft); margin-bottom:0; }

/* steps */
.steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:30px;
}
.step .n{
  font-family:var(--serif);
  font-size:1.3rem;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  border-radius:50%;
  margin-bottom:16px;
}
.step:nth-child(1) .n{ background:var(--c-wifi); }
.step:nth-child(2) .n{ background:var(--c-tv); }
.step:nth-child(3) .n{ background:var(--c-home); }

/* FAQ (barrierefrei per <details>, ohne JavaScript) */
.faq{ border-top:1px solid var(--line); max-width:74ch; }
.faq details{ border-bottom:1px solid var(--line); padding:18px 4px; }
.faq summary{
  cursor:pointer;
  font-family:var(--serif);
  font-size:1.08rem;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+";
  font-size:1.4rem;
  color:var(--teal);
  flex:none;
}
.faq details[open] summary::after{ content:"\2212"; }
.faq details p{ margin:12px 0 0 0; color:var(--ink-soft); font-size:0.97rem; max-width:60ch; }

/* quote / person block */
.person{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:44px;
  align-items:start;
}
.avatar{
  width:220px; height:220px;
  border-radius:50%;
  background:linear-gradient(155deg, var(--c-pc), var(--c-home) 55%, var(--c-tv));
  position:relative;
  flex:none;
}
.avatar::after{
  content:"JG";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif);
  color:var(--paper);
  font-size:2.6rem;
}

/* CTA banner */
.cta-banner{
  background:var(--ink);
  color:var(--paper);
  border-radius:var(--radius);
  padding:48px 44px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
}
.cta-banner h2{ color:var(--paper); margin-bottom:6px; }
.cta-banner p{ color:#C9CEDA; margin-bottom:0; }
.cta-banner .btn{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.cta-banner .btn:hover{ background:var(--paper); border-color:var(--paper); }

/* area list */
.area-list{
  display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:18px;
}
.area-list span{
  font-size:0.9rem;
  color:var(--ink-soft);
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:20px;
}

/* contact page */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}
.contact-card{
  background:var(--card);
  border:1px solid var(--line);
  padding:34px;
  border-radius:var(--radius);
}
.contact-card dl{ margin:22px 0 0 0; }
.contact-card dt{ font-size:0.82rem; color:var(--teal); margin-top:16px; }
.contact-card dt:first-child{ margin-top:0; }
.contact-card dd{ margin:2px 0 0 0; font-family:var(--serif); font-size:1.15rem; }

form.contact-form{ display:flex; flex-direction:column; gap:16px; }
form.contact-form label{ font-size:0.86rem; color:var(--ink-soft); display:block; margin-bottom:6px; }
form.contact-form input,
form.contact-form select,
form.contact-form textarea{
  width:100%;
  font-family:var(--sans);
  font-size:0.98rem;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);
  color:var(--ink);
}
form.contact-form textarea{ resize:vertical; min-height:110px; }
form.contact-form input:focus,
form.contact-form select:focus,
form.contact-form textarea:focus{
  outline:2px solid var(--teal);
  outline-offset:1px;
}
form.contact-form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.botcheck-field{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.form-status{
  font-size:0.92rem;
  margin:2px 0 0 0;
  min-height:1.4em;
}
.form-status.ok{ color:var(--teal); font-weight:500; }
.form-status.error{ color:var(--c-cable); font-weight:500; }

/* footer */
footer.site{
  border-top:1px solid var(--line);
  padding:44px 0 30px;
  font-size:0.88rem;
  color:var(--ink-soft);
}
footer.site .wrap{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  flex-wrap:wrap;
}
footer.site .fbrand{ font-family:var(--serif); color:var(--ink); font-size:1rem; margin-bottom:6px; }

/* Impressum / Datenschutz */
.legal h1{ font-size:clamp(2rem, 4vw, 2.6rem); margin-bottom:0.6em; }
.legal h3{ font-family:var(--serif); font-size:1.05rem; margin:2em 0 0.5em 0; }
.legal p{ max-width:70ch; color:var(--ink-soft); }
.legal a{ color:var(--teal); }
.notice-box{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 20px;
  margin:14px 0;
  font-size:0.92rem;
  max-width:70ch;
}
.notice-box strong{ color:var(--ink); }

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:2px;
}

/* ---------- responsive ---------- */
@media (max-width: 880px){
  .nav{ position:relative; }
  .nav .call .tel,
  .nav .call .btn{ display:none; }
  .burger{ display:flex; }
  nav.links{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:10px 16px 16px;
    margin-top:8px;
    box-shadow:0 10px 24px rgba(22,35,61,0.12);
  }
  nav.links a{ width:100%; padding:12px 2px; border-bottom:1px solid var(--line); }
  nav.links a.mobile-tel,
  nav.links a.mobile-cta{ display:block; }
  nav.links a.mobile-tel,
  nav.links a.mobile-cta{ border-bottom:none; }
  nav.links a.mobile-tel{
    padding-top:16px;
    font-family:var(--serif);
    font-size:1.1rem;
    color:var(--ink);
  }
  nav.links a.mobile-cta{
    margin-top:8px;
    text-align:center;
    background:var(--ink);
    color:var(--paper);
    border-radius:var(--radius);
    padding:13px 0;
  }
  .nav-toggle-input:checked ~ nav.links{ display:flex; }
  .hero .wrap{ grid-template-columns:1fr; padding-top:44px; }
  .grid3{ grid-template-columns:1fr; }
  .services-list{ grid-template-columns:1fr; }
  .services-list .service-row:nth-child(odd){ padding-right:0; border-right:none; }
  .services-list .service-row:nth-child(even){ padding-left:0; }
  .steps{ grid-template-columns:1fr; }
  .person{ grid-template-columns:1fr; }
  .avatar{ width:140px; height:140px; }
  .avatar::after{ font-size:1.8rem; }
  .contact-grid{ grid-template-columns:1fr; }
  form.contact-form .row2{ grid-template-columns:1fr; }
  .cta-banner{ flex-direction:column; align-items:flex-start; }
}