/* RepTeil Computer e.K. — Stylesheet
   Hausschrift IBM Plex Sans, selbst gehostet unter schriften/.
   Es wird bewusst keine Schrift von einem fremden Server geladen.
   Lizenz der Schrift: SIL Open Font License, siehe schriften/license.txt */

@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/schriften/IBMPlexSans-Regular.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('/schriften/IBMPlexSans-Medium.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('/schriften/IBMPlexSans-SemiBold.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('/schriften/IBMPlexSans-Bold.woff2') format('woff2')}

html{scroll-behavior:smooth}
:target{scroll-margin-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* Original-Hausschrift, nur für die Wortmarke im Logo.
   Achtung: enthält keine Umlaute — deshalb ausschließlich für "RepTeil". */
/* ==========================================================================
   RepTeil — Website-Prototyp
   --------------------------------------------------------------------------
   ALLE FARBEN UND SCHRIFTEN LIEGEN HIER.
   Basis: CI-Farbe #fc880d. Regel aus der Kontrastprüfung —
   Signalorange trägt KEINE weiße Schrift (nur 2,42:1). Für Schrift auf Weiß
   und für Flächen mit weißer Schrift wird das abgedunkelte #a55602 benutzt.
   ========================================================================== */
:root{
  /* --- Markenfarben --- */
  --signal:           #fc880d;   /* CI-Signalorange — Flächen mit DUNKLER Schrift, Bildmarke */
  --brand:            #a55602;   /* Textorange — Schrift auf Weiß, Flächen mit weißer Schrift */
  --brand-dark:       #22282e;   /* Anthrazit — Footer, dunkle Flächen */
  --brand-light:      #fff5eb;

  /* --- Strenges Farbschema nach Logo-Variante A ---
     Auf dunklem Grund: Signalorange. Auf hellem Grund: Textorange.
     Keine orangen Flächen mit weißer Schrift, kein Anthrazit als Markenfarbe. --- */
  --biz:              #a55602;
  --biz-dark:         #22282e;
  --biz-tint:         #f4f6f8;

  --priv:             #a55602;
  --priv-dark:        #22282e;
  --priv-tint:        #fff5eb;

  /* --- Neutral --- */
  --ink:              #22282e;   /* warmes Dunkelgrau statt Schwarz */
  --ink-soft:         #57616b;
  --line:             #dde2e7;
  --bg:               #ffffff;
  --bg-soft:          #f6f8fa;

  --radius: 10px;
  --wrap: 1140px;
  --font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font); color:var(--ink);
  background:var(--bg); line-height:1.65; font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}

h1,h2,h3,h4{line-height:1.2; margin:0 0 .5em; font-weight:700; letter-spacing:-.015em}
h1{font-size:clamp(2rem,4.6vw,3.35rem)}
h2{font-size:clamp(1.55rem,3vw,2.3rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em}
.lead{font-size:clamp(1.05rem,1.7vw,1.28rem); color:var(--ink-soft); max-width:62ch}
.eyebrow{
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent,var(--brand)); margin:0 0 .9rem
}

/* ---------- Prototyp-Hinweis ---------- */
/* ---------- Umzugsbanner: Signalorange auf Schwarz, wie im Logo ---------- */
.movebar{background:#000; color:var(--signal); font-size:.93rem}
.movebar .wrap{display:flex; gap:16px; align-items:center; justify-content:center;
  padding-top:11px; padding-bottom:11px; flex-wrap:wrap; text-align:center}
.movebar a{color:var(--signal); text-underline-offset:3px; font-weight:650}

/* ---------- Header ---------- */
header.site{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.hdr{display:flex; align-items:center; gap:28px; padding:14px 0; flex-wrap:wrap}

/* --- Logo-Lockup (Stufe 2 aus der Logo-Studie) --- */
.logo{display:flex; align-items:center; text-decoration:none; line-height:1; margin-right:auto;
  color:var(--brand)}
.logo .lockup{display:block; width:322px; max-width:100%; height:auto}
.logo.fuss{margin:0; color:var(--signal)}
.logo.fuss .lockup{width:296px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media(max-width:860px){.logo .lockup{width:262px}}
@media(max-width:600px){.logo .lockup{width:214px}}

/* Welten-Umschalter */
.switch{display:flex; border:1px solid var(--line); border-radius:999px; padding:3px; background:var(--bg-soft)}
.switch a{
  text-decoration:none; font-size:.83rem; font-weight:650; padding:7px 15px;
  border-radius:999px; color:var(--ink-soft); white-space:nowrap
}
.switch a.on{background:var(--brand-dark); color:var(--signal)}

nav.main{display:flex; gap:20px; flex-wrap:wrap}
nav.main a{text-decoration:none; font-size:.93rem; font-weight:550; color:var(--ink-soft)}
nav.main a:hover{color:var(--accent,var(--brand))}

.tel{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-weight:700; color:var(--accent,var(--brand)); font-size:.95rem; white-space:nowrap
}

/* ---------- Buttons ---------- */
/* Schaltflächen: auf hellem Grund Schwarz mit Signalorange,
   auf dunklem Grund Signalorange mit schwarzer Schrift. Nur diese zwei Farben. */
.btn{
  display:inline-block; text-decoration:none; font-weight:650; font-size:.97rem;
  padding:14px 26px; border-radius:var(--radius); border:1.5px solid transparent;
  background:var(--brand-dark); color:var(--signal); cursor:pointer
}
.btn:hover{background:#000}
.btn.ghost{background:transparent; color:var(--brand); border-color:currentColor}
.btn.ghost:hover{background:transparent; color:var(--brand-dark)}
.btn.big{padding:17px 34px; font-size:1.05rem}
.btns{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px}

/* ---------- Sections ---------- */
section{padding:76px 0}
section.tight{padding:52px 0}
section.soft{background:var(--bg-soft)}
section.tinted{background:var(--tint,var(--brand-light))}
.head-center{text-align:center; max-width:66ch; margin:0 auto 48px}
.head-center .lead{margin-left:auto; margin-right:auto}

/* ---------- Hero ---------- */
.hero{padding:82px 0 66px}
.hero .lead{margin-bottom:0}
.hero-meta{display:flex; gap:34px; flex-wrap:wrap; margin-top:38px; padding-top:26px; border-top:1px solid var(--line)}
.hero-meta div{min-width:120px}
.hero-meta b{display:block; font-size:1.7rem; color:var(--accent,var(--brand)); line-height:1.1}
.hero-meta span{font-size:.87rem; color:var(--ink-soft)}

/* ---------- Die zwei Welten-Kacheln ---------- */
.gates{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.gate{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:14px; padding:38px 34px 34px;
  background:#fff; transition:transform .15s ease, box-shadow .15s ease;
  border-top:5px solid var(--g);
}
.gate:hover{transform:translateY(-4px); box-shadow:0 14px 34px rgba(18,58,99,.13)}
.gate .kicker{font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--g)}
.gate h3{font-size:1.62rem; margin:12px 0 10px}
.gate p{color:var(--ink-soft); margin-bottom:18px}
.gate ul{list-style:none; padding:0; margin:0 0 26px; font-size:.92rem; color:var(--ink-soft)}
.gate ul li{padding:5px 0 5px 22px; position:relative}
.gate ul li::before{content:"›"; position:absolute; left:6px; color:var(--g); font-weight:700}
.gate .go{margin-top:auto; font-weight:700; color:var(--g)}

/* ---------- Ablauf (5 Schritte) ---------- */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:18px; counter-reset:s}
.step{border-top:3px solid var(--accent,var(--brand)); padding-top:18px}
.step b{display:block; font-size:1.05rem; margin-bottom:6px}
.step span{font-size:.9rem; color:var(--ink-soft)}
.step::before{
  counter-increment:s; content:"0" counter(s);
  font-size:.78rem; font-weight:800; color:var(--accent,var(--brand)); letter-spacing:.1em
}

/* ---------- Karten-Grids ---------- */
.grid{display:grid; gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px
}
.card h3{margin-bottom:8px}
.card p{color:var(--ink-soft); font-size:.94rem; margin:0}
.card a.more{display:inline-block; margin-top:14px; font-size:.9rem; font-weight:650;
  color:var(--accent,var(--brand)); text-decoration:none}

.card.link{text-decoration:none; color:inherit; display:block}
.card.link:hover{border-color:var(--accent,var(--brand))}

/* ---------- Pakete ---------- */
.pack{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px; display:flex; flex-direction:column}
.pack.feat{border:2px solid var(--brand-dark); position:relative}
.pack.feat::after{
  content:"Am häufigsten gewählt"; position:absolute; top:-13px; left:26px;
  background:var(--brand-dark); color:var(--signal); font-size:.7rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:4px 12px; border-radius:999px
}
.pack h3{margin-bottom:4px}
.pack .sub{font-size:.88rem; color:var(--ink-soft); margin-bottom:18px}
.pack ul{list-style:none; padding:0; margin:0 0 22px; font-size:.93rem}
.pack ul li{padding:7px 0 7px 24px; position:relative; border-bottom:1px solid var(--line)}
.pack ul li::before{content:"✓"; position:absolute; left:2px; color:var(--signal); font-weight:700}
.pack ul li.no{color:#9aa3ab}
.pack ul li.no::before{content:"–"; color:#c3c9cf}
.pack .price{font-size:.9rem; color:var(--ink-soft); margin-top:auto; margin-bottom:16px}

/* ---------- Zitat ---------- */
blockquote{
  margin:0; padding:34px 38px; background:#fff; border-left:5px solid var(--accent,var(--brand));
  border-radius:0 var(--radius) var(--radius) 0; font-size:1.15rem
}
blockquote footer{margin-top:14px; font-size:.9rem; color:var(--ink-soft); font-style:normal}

/* ---------- Split ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.split.narrow{grid-template-columns:1.15fr .85fr}

/* ---------- Vergleichsliste ---------- */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.compare > div{padding:28px 26px}
.compare .a{background:#fff}
.compare .b{background:var(--priv-tint)}
.compare h4{margin:0 0 14px; font-size:1rem; letter-spacing:.04em; text-transform:uppercase; font-size:.8rem; color:var(--ink-soft)}
.compare ul{list-style:none; padding:0; margin:0; font-size:.95rem}
.compare li{padding:8px 0 8px 24px; position:relative}
.compare .a li::before{content:"✕"; position:absolute; left:0; color:#b9c0c7}
.compare .b li::before{content:"✓"; position:absolute; left:0; color:var(--priv); font-weight:700}

/* ---------- Preistabelle privat ---------- */
table.prices{width:100%; border-collapse:collapse; font-size:.96rem; background:#fff}
table.prices th, table.prices td{text-align:left; padding:14px 16px; border-bottom:1px solid var(--line)}
table.prices th{font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft)}
table.prices td:last-child{text-align:right; font-weight:650; white-space:nowrap}

/* ---------- Fachbegriffe ---------- */
.tags{display:flex; flex-wrap:wrap; gap:9px; margin:22px 0 0}
.tags span{
  font-size:.83rem; background:#fff; border:1px solid var(--line);
  padding:6px 13px; border-radius:999px; color:var(--ink-soft)
}

/* ---------- CTA-Band ---------- */
.cta{background:var(--brand-dark); color:#e6eaee; text-align:center}
.cta h2{color:var(--signal)}
.cta p{color:#c3cad1; max-width:58ch; margin-left:auto; margin-right:auto}
.cta .btn{background:var(--signal); color:#111}
.cta .btn:hover{background:#ffa03a}
.cta .btn.ghost{background:transparent; color:var(--signal); border-color:currentColor}
.cta .btns{justify-content:center}

/* ---------- Standort-Karte ---------- */
.addr{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.addr .old{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; opacity:.62}
.addr .new{background:#fff; border:2px solid var(--brand); border-radius:var(--radius); padding:26px}
.addr .tagline{font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:var(--ink-soft); margin-bottom:10px}
.addr .new .tagline{color:var(--brand)}
.addr address{font-style:normal; font-size:1.12rem; line-height:1.5}

/* --- Google-Bewertung --- */
.stars{display:inline-flex; gap:2px; vertical-align:-2px}
.stars svg{width:19px; height:19px}
.rating{display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px 24px}
.rating .score{font-size:2.3rem; font-weight:700; line-height:1; color:var(--ink)}
.rating .meta{font-size:.88rem; color:var(--ink-soft); line-height:1.45}
.rating .acts{margin-left:auto; display:flex; gap:10px; flex-wrap:wrap}
.rating a.mini{font-size:.85rem; font-weight:650; text-decoration:none; color:var(--brand);
  border:1.5px solid currentColor; border-radius:8px; padding:9px 14px; white-space:nowrap}
.rating a.mini.solid{background:var(--brand-dark); color:var(--signal); border-color:transparent}
@media(max-width:640px){.rating .acts{margin-left:0; width:100%}}

.livehours{background:var(--brand-light); border:1px solid var(--signal); border-radius:12px;
  padding:18px 22px; margin-top:18px; font-size:.94rem}
.livehours b{display:block; margin-bottom:4px}
.livehours a{color:var(--brand); font-weight:650}

/* --- Jahresmarke: „seit 2004" als eigenes Gestaltungselement --- */
.since{display:inline-flex; align-items:center; gap:10px; font-size:.76rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent,var(--brand));
  border:1px solid currentColor; border-radius:999px; padding:7px 16px 7px 10px}
.since svg{width:17px; height:17px; flex:none}
.sinceband{background:var(--brand-dark); color:#fff; padding:44px 0}
.sinceband .wrap{display:flex; align-items:center; gap:38px; flex-wrap:wrap; justify-content:center; text-align:center}
.lageplan-rahmen{margin:0; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:#fff}
.lageplan-rahmen svg.lageplan{display:block; width:100%; height:auto}
.lageplan-rahmen figcaption{padding:14px 20px; font-size:.9rem; color:var(--ink-soft);
  border-top:1px solid var(--line); background:var(--bg-soft)}
.sinceband .yr{font-size:4.6rem; line-height:.85;
  color:var(--signal); letter-spacing:.02em}
.sinceband p{margin:0; max-width:46ch; color:#c9d0d7; text-align:left}
.sinceband p b{color:#fff}
@media(max-width:720px){.sinceband .wrap{flex-direction:column} .sinceband p{text-align:center}}

.hours{width:100%; border-collapse:collapse; font-size:.95rem}
.hours td{padding:7px 0; border-bottom:1px solid var(--line)}
.hours td:last-child{text-align:right; font-weight:600}

/* ---------- Footer ---------- */
footer.site{background:var(--brand-dark); color:#c7d3e0; padding:60px 0 28px; font-size:.92rem}
footer.site a{color:#c7d3e0; text-decoration:none}
footer.site a:hover{color:#fff}
footer.site h4{color:#fff; font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:14px}
.fgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px}
.fgrid ul{list-style:none; padding:0; margin:0}
.fgrid li{padding:4px 0}
.fbottom{margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:.85rem; color:#93a5b8}

/* ---------- Seiten-Routing ---------- */
.page{display:block}


/* ---------- Responsiv ---------- */
@media (max-width:960px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .split, .split.narrow{grid-template-columns:1fr; gap:34px}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  section{padding:54px 0}
  .gates{grid-template-columns:1fr}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .addr{grid-template-columns:1fr}
  .compare{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  nav.main{display:none}
  .hdr{gap:14px}
  .logo{margin-right:0; width:100%}
}