/* DigiArhiva — Stylesheet.
 *
 * TEIL A ist die Design-Vorlage (digiarhiva-web/design-vorlage/index.html,
 * Lukas' kanonische Fassung). Farben, Typo, Raster, Abstaende und die
 * Zurueckhaltung bei Bewegung stammen von dort und werden nicht neu
 * erfunden. Wer hier eine Zahl aendert, aendert das Gesetz — dann gehoert
 * die Vorlage mitgeaendert, nicht nur diese Datei.
 *
 * TEIL B sind die Inhaltsklassen der Unterseiten. Sie erfinden keine neuen
 * Werte: jede Farbe, jeder Radius und jeder Abstand ist aus TEIL A
 * genommen. Wo TEIL A kein Vorbild hat (Listen, Schritte, Datenblock),
 * steht in der Regel dabei, aus welchem Vorlagen-Element sie abgeleitet
 * ist.
 *
 * Die Schrift liegt LOKAL (assets/fonts/). Google Fonts waere ein externer
 * Request, und die Seite sagt ueber sich selbst, dass sie keinen stellt.
 * Ohne latin-ext fallen ș und ț auf die Ersatzschrift zurueck — deshalb
 * beide Schnitte.
 */

/* ============================================================
   TEIL A — die Vorlage
   ============================================================ */

@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url(fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url(fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --brand:#2567ad; --brand-lt:#3a86d4; --navy:#102a47; --navy-2:#0b2138;
  --ink:#1d2b3a; --muted:#5d6b7a; --paper:#f5f8fc; --line:#e2e8f0; --white:#fff;
  --copy:#3c4a59;          /* Fliesstextfarbe der Vorlage (.copy) */
  --paper-2:#eef3fa;       /* unteres Ende des .provided-Verlaufs */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit}

/* Das gemeinsame Mass der Vorlage: 1100 px, 28 px Innenrand. In der Vorlage
   traegt jedes Band dieselben zwei Zahlen selbst; hier tut es ein Wrapper. */
.invelis{max-width:1100px;margin:0 auto;padding:0 28px}

/* ---------- Kopfzeile ----------
   KEIN Balken mehr (Lukas, 26.08.2026, Runde vier). Marke und Pillen liegen
   direkt auf dem Navy-Verlauf des Hero bzw. des Titelbands; der Verlauf
   beginnt an der Oberkante der Seite. Die Kopfzeile steht deshalb IM Hero,
   nicht davor — sie teilt sich dessen .invelis, und damit stimmt die Flucht
   von Siegel und Ueberschrift ohne eine zweite Zahl.

   Ohne Balken klebt auch nichts mehr: das Kleben hing am Balken, und etwas
   Halbdurchsichtiges ueber hellem Inhalt schweben zu lassen waere genau der
   Fehler, den der Wegfall vermeidet. Auf keiner Breite. */
/* align-items:flex-start statt center (Lukas, Runde fuenf): die Pillen
   sollen als leichtes Navigationselement ueber dem Hero schweben, nicht als
   Balken-Erbe auf halber Siegelhoehe haengen. Damit stehen Pillen und
   Siegel-Oberkante auf derselben Linie, 18 px unter der Fensterkante. */
.bar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:18px;margin-bottom:48px}
/* Das Siegel traegt die Kopfzeile: 112 px sichtbare Hoehe. Die Datei ist
   digilocala-round.png — NUR der runde Teil, ohne Schriftzug. */
.bar img{height:112px;width:auto;display:block}
/* Die Vorlage traegt links nur das Zeichen. Diese Seite heisst DigiArhiva,
   also steht der Name daneben — gesetzt wie die h1 der Vorlage, nur klein. */
.marca{display:inline-flex;align-items:center;gap:20px;text-decoration:none;color:#fff}
/* Die Wortmarke waechst mit dem Siegel, aber nicht im selben Faktor: bei 2,6rem
   traete sie gegen die h1 des Hero an (clamp 2,8-5,2rem) und die Kopfzeile
   wuerde zur zweiten Ueberschrift. 2rem haelt den Abstand. */
.marca__nume{font-size:2rem;font-weight:800;letter-spacing:-.02em;line-height:1}
.meniu{list-style:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bar a.link{color:#cfe0f2;text-decoration:none;font-size:.86rem;font-weight:600;letter-spacing:.02em;display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border:1px solid rgba(255,255,255,.22);border-radius:999px;transition:all .2s ease}
.bar a.link:hover,.bar a.link:focus-visible{background:#fff;color:var(--navy);border-color:#fff}
.bar a.link[aria-current="page"]{background:#fff;color:var(--navy);border-color:#fff}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:radial-gradient(120% 120% at 80% -10%,#1c4f86 0%,var(--navy) 45%,var(--navy-2) 100%);color:#fff}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(to bottom,#000,transparent 85%)}
/* Oben kein Innenrand mehr: den minimalen Abstand zur Oberkante traegt die
   Kopfzeile selbst (18 px), die jetzt hier drin steht. Unten bleibt es bei
   den 104 px der Vorlage. */
.hero .invelis{position:relative;padding-top:0;padding-bottom:104px}
.kicker{font-size:.74rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--brand-lt);margin-bottom:22px;opacity:0;animation:rise .6s ease forwards .05s}
.hero h1{font-size:clamp(2.8rem,8vw,5.2rem);font-weight:800;line-height:1;letter-spacing:-.03em;opacity:0;animation:rise .6s ease forwards .15s}
h1 .dot{color:var(--brand-lt)}
.tag{margin-top:26px;max-width:34ch;font-size:clamp(1.1rem,2.4vw,1.5rem);font-weight:500;color:#d4e3f2;line-height:1.45;opacity:0;animation:rise .6s ease forwards .25s}
.cta{margin-top:40px;display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--navy);font-weight:700;font-size:.98rem;text-decoration:none;padding:15px 28px;border-radius:999px;transition:transform .18s ease,box-shadow .18s ease;opacity:0;animation:rise .6s ease forwards .35s;box-shadow:0 16px 36px -16px rgba(0,0,0,.5)}
.cta:hover{transform:translateY(-2px);box-shadow:0 22px 44px -16px rgba(0,0,0,.55)}
.cta span{transition:transform .18s ease}
.cta:hover span{transform:translateX(4px)}

/* ---------- Die zwei Dienste ----------
   Das Herz der Startseite (Lukas, 26.08.2026). Gebaut aus denselben Werten
   wie .pillar der Vorlage — weisser Grund, 1 px --line, 14 px Radius —, nur
   groesser gesetzt, damit die Rangfolge stimmt: erst was DigiArhiva tut,
   dann warum. Kein align-items: beide Karten sollen GLEICH GROSS sein, und
   das ist die Vorgabe von grid, nicht eine Ausnahme davon. */
.servicii{margin-top:56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:22px}
.serviciu{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:34px 32px;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}
.serviciu:hover{transform:translateY(-4px);box-shadow:0 22px 44px -28px rgba(16,42,71,.5)}
.serviciu h2{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.serviciu h2::after{content:"";display:block;width:48px;height:4px;background:var(--brand);border-radius:4px;margin-top:16px}
.serviciu p{margin-top:18px;color:var(--copy);font-size:1.02rem}
.serviciu .discret{font-size:.94rem;line-height:1.55}
.serviciu .stare{margin-top:4px}
/* Der Knopf sitzt unten. margin-top:auto schiebt ihn in der kuerzeren Karte
   ans Ende, damit beide Knoepfe auf einer Linie stehen; den Mindestabstand
   traegt der letzte Absatz, nicht der Knopf — eine zweite margin-top-Regel am
   Knopf wuerde das auto ueberschreiben und ihn in die Mitte kleben lassen
   (beim Bau genau so passiert, im Abnahmebild gesehen). */
.serviciu p:last-of-type{margin-bottom:26px}
.serviciu .buton{align-self:flex-start;margin-top:auto;padding-top:14px;padding-bottom:14px}
.serviciu .mai-departe{align-self:flex-start;margin-top:14px;font-size:.94rem}

/* ---------- Mission ---------- */
.section{padding:88px 0}
.lede{font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:700;letter-spacing:-.02em;line-height:1.25;max-width:20ch}
.lede::after{content:"";display:block;width:64px;height:4px;background:var(--brand);border-radius:4px;margin-top:24px}
.copy{margin-top:30px;max-width:62ch;color:var(--copy);font-size:1.08rem}
.copy p+p{margin-top:18px}

/* Wieder exakt die Vorlage: seit dem Umbau vom 26.08. abends stehen hier nur
   noch die drei gleich langen Wertekarten 01-03. Das align-items:start, das
   die dreifach hohe Dienstkarte noetig gemacht hatte, ist mit ihr entfallen. */
.pillars{margin-top:64px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.pillar{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:30px 28px;transition:transform .2s ease,box-shadow .2s ease}
.pillar:hover{transform:translateY(-4px);box-shadow:0 22px 44px -28px rgba(16,42,71,.5)}
.pillar .num{font-size:.78rem;font-weight:700;letter-spacing:.14em;color:var(--brand);text-transform:uppercase}
.pillar h3{margin-top:14px;font-size:1.22rem;font-weight:700;letter-spacing:-.01em}
.pillar p{margin-top:10px;color:var(--muted);font-size:.98rem}

/* ---------- Provided by — ENTFERNT (Lukas, 26.08.2026) ----------
   Das Band „Un proiect DigiLocala…" samt Knopf ist gestrichen, zusammen mit
   der Nav-Pille und dem Fuss-Link: die Seite verlinkt digilocala.ro nicht
   mehr. Die Marke bleibt als TEXT im Fuss stehen. Die Regeln sind hier
   geloescht statt auskommentiert -- toter Stil sieht aus wie geltender.
   ---------------------------------------------------------------- */

/* ---------- Footer ---------- */
.subsol{background:var(--navy);color:#9fb4ca}
.subsol .invelis{padding-top:40px;padding-bottom:40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;font-size:.88rem}
/* Kein border-radius mehr noetig: das Siegel IST rund und randlos (400x400,
   sichtbarer Inhalt 400x400 — gemessen). Ein Radius auf ein quadratisches
   Logo haette frueher die Ecken beschnitten; hier gaebe es nichts zu
   beschneiden, und die Regel wuerde nur so aussehen, als taete sie etwas. */
/* Der Fuss zieht mit, aber nach Augenmass der Vorlage statt im selben
   Faktor: dort ist das Siegel im Fuss (42 px) rund ein Achtel des Hero-h1 und
   deutlich kleiner als in der Leiste. 72 px halten dieses Verhaeltnis. */
.subsol img{height:72px;width:auto}
.subsol__marca{display:flex;align-items:center;gap:16px}
.subsol a{color:#cfe0f2;text-decoration:none}
.subsol a:hover{text-decoration:underline}
.subsol ul{list-style:none;display:flex;gap:22px;flex-wrap:wrap}

@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
@media(max-width:640px){
  .invelis{padding:0 24px}
  /* Oben kein Innenrand: den minimalen Abstand traegt die Kopfzeile, die in
     Hero und Titelband drin steht. Hier stand bis zur vierten Runde noch die
     72 px der Vorlage — sie haben die Kopfzeile auf dem Telefon um 72 px
     nach unten geschoben, waehrend am Schreibtisch 0 galt. Gemessen, nicht
     vermutet: bar.top war 72 statt 0. */
  .hero .invelis{padding-top:0;padding-bottom:80px}
  .section{padding:64px 0}
  /* Tap-Ziel: mit 7 px Innenrand war die Pille rund 31 px hoch und damit
     unter den 44 px, die ein Finger braucht. Gemessen wird es jetzt auch
     (abnahme-browser.mjs), nicht nur gerechnet. */
  .bar a.link{font-size:.82rem;padding:12px 16px}
  /* Telefon: das Siegel bricht moderat kleiner, bleibt aber deutlich
     praesenter als die 56 px der ersten Fassung. */
  .bar img{height:84px}
  .bar{margin-bottom:36px}
  .marca{gap:14px}
  .marca__nume{font-size:1.5rem}
  .subsol img{height:56px}
}

/* ============================================================
   TEIL B — die Inhaltsklassen
   Kein neuer Wert: alles unten steht in TEIL A schon.
   ============================================================ */

/* Sprungmarke — unsichtbar, bis sie den Fokus hat. */
.sari{position:absolute;left:-9999px;top:0;z-index:20;background:#fff;color:var(--navy);font-weight:700;padding:12px 22px;border-radius:0 0 999px 0;text-decoration:none}
.sari:focus{left:0}

/* Titelband der Unterseiten — der Hero der Vorlage, nur niedriger und ohne
   Knopf. Gleicher Verlauf, gleiches Punktraster, gleiche Kicker-Typo. */
.titlu-pagina{position:relative;overflow:hidden;background:radial-gradient(120% 120% at 80% -10%,#1c4f86 0%,var(--navy) 45%,var(--navy-2) 100%);color:#fff}
.titlu-pagina::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(to bottom,#000,transparent 85%)}
/* Wie im Hero: die Kopfzeile steht hier drin und bringt ihren Abstand mit. */
.titlu-pagina .invelis{position:relative;padding-top:0;padding-bottom:64px}
.titlu-pagina .bar{margin-bottom:36px}
.titlu-pagina .kicker{animation:none;opacity:1}
.titlu-pagina h1{font-size:clamp(2rem,5vw,3.1rem);font-weight:800;line-height:1.08;letter-spacing:-.03em}
.titlu-pagina .sub{margin-top:20px;max-width:52ch;font-size:clamp(1.02rem,2vw,1.18rem);font-weight:500;color:#d4e3f2;line-height:1.5}

/* Fliesstext der Unterseiten — Mass und Farbe der .copy aus TEIL A. */
main{display:block}
main.text{padding:72px 0 96px}
main h2{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:800;letter-spacing:-.02em;line-height:1.25}
main h2+.rigla{margin-top:18px}
/* Abstand zwischen den Abschnitten. Er haengt an der h2, nicht an <section>:
   der GDPR-Block in transparenta.html steht ohne section-Huelle da und wird
   nicht angefasst — er braucht dieselben Abstaende wie die anderen Seiten. */
main.text h2{margin-top:64px}
main.text > .invelis > h2:first-child,
main.text > .invelis > section:first-child > h2{margin-top:0}
main h3{margin-top:34px;font-size:1.15rem;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
main p{max-width:62ch;color:var(--copy);font-size:1.08rem}
main p+p,main p+ul,main ul+p,main p+ol,main ol+p,main h3+p{margin-top:18px}
.intro{font-size:1.14rem}
.discret{font-size:.94rem;color:var(--muted)}

/* Der Balken unter der .lede der Vorlage, als Trenner wiederverwendet. */
.rigla{border:0;width:64px;height:4px;background:var(--brand);border-radius:4px;margin:18px 0 26px}

/* Punktliste — der Punkt ist die .pillar .num-Farbe, nichts Neues. */
.lista-punct{list-style:none;max-width:62ch}
.lista-punct li{position:relative;padding-left:24px;color:var(--copy);font-size:1.08rem}
.lista-punct li+li{margin-top:12px}
.lista-punct li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--brand)}

/* Schritte — die Nummernmarke der .pillar, als Zaehler. */
.pasi{list-style:none;counter-reset:pas;max-width:62ch}
.pasi li{counter-increment:pas;position:relative;padding-left:52px;color:var(--copy);font-size:1.08rem}
.pasi li+li{margin-top:18px}
.pasi li::before{content:counter(pas);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--paper-2);border:1px solid var(--line);color:var(--brand);font-size:.86rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.pasi li strong{display:block;color:var(--ink);font-weight:700}

/* Kasten — die .pillar-Karte, nur breiter. */
.caseta{margin-top:30px;max-width:62ch;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:26px 28px}
.caseta p{max-width:none}
.caseta p+p{margin-top:12px}
.caseta--termen{border-left:4px solid var(--brand)}

/* Verfuegbarkeits-Marke. Beide Zustaende tragen einen gerechneten,
   nicht durchsichtigen Hintergrund — eine Marke ohne Stil waere unsichtbar,
   und die Seite saehe aus, als sei alles verfuegbar.

   .stare--curand wird von KEINER Seite mehr benutzt (Zielzustand seit dem
   26.08.2026 abends: alle drei Mail-Wege offen). Die Regel bleibt trotzdem
   stehen, absichtlich: die Marken-Logik gehoert zum Bestand, kuenftige
   Dienste werden sie brauchen, und verifica.sh Block 12 prueft, dass beide
   Klassen definiert sind. Nicht loeschen, ohne den Block mitzuaendern. */
.stare{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;line-height:1;padding:7px 14px;border-radius:999px;white-space:nowrap}
.stare--acum{background:var(--brand);color:#fff;border:1px solid var(--brand)}
.stare--curand{background:var(--paper-2);color:var(--muted);border:1px solid var(--line)}

/* Knopf — der .provided a.btn der Vorlage. */
.buton{display:inline-flex;align-items:center;gap:10px;background:var(--brand);color:#fff;font-weight:700;text-decoration:none;padding:15px 28px;border-radius:999px;transition:background .2s ease,transform .18s ease}
.buton:hover{background:var(--brand-lt);transform:translateY(-2px)}
.mai-departe{color:var(--brand);font-weight:700;text-decoration:none}
.mai-departe:hover{text-decoration:underline}
main a{color:var(--brand)}

/* Identifikationsdaten. */
.date-firma{margin-top:26px;max-width:62ch;border-top:1px solid var(--line)}
.date-firma>div{display:grid;grid-template-columns:minmax(0,15rem) 1fr;gap:8px 24px;padding:12px 0;border-bottom:1px solid var(--line)}
.date-firma dt{color:var(--muted);font-size:.94rem;font-weight:600}
.date-firma dd{color:var(--ink);font-size:1.02rem}
@media(max-width:640px){
  .date-firma>div{grid-template-columns:1fr;gap:2px}
  main.text{padding:56px 0 72px}
  main.text h2{margin-top:48px}
  .titlu-pagina .invelis{padding-bottom:52px}
}

/* Die vierte Karte traegt einen Knopf — die drei Saeulen der Vorlage nicht.
   Kleiner gesetzt als der Knopf im Fliesstext, damit die Karte nicht kippt. */
.pillar .buton{margin-top:18px;padding:12px 22px;font-size:.92rem}
.pillar .mai-departe{display:inline-block;margin-top:14px;font-size:.94rem}
.pillar .discret{font-size:.9rem;line-height:1.55}
.pillar .stare{margin-top:4px}