/* 3d.vetaas.net — felles stilark. Mobil først; bredere skjermer får mer luft,
   ikke et annet oppsett. Systemfonter: ingen fontnedlasting, ingen tredjepart. */

:root {
	/* Mørkt som standard – ikke bare når systemet ber om det. */
	color-scheme: dark;
	--tekst: #e7e4de;
	--dempet: #a8a49c;
	--bakgrunn: #131416;
	--flate: #1c1e21;
	--topp: #0b0c0d;
	--linje: #33363b;
	--felt-kant: #5c5f66;
	--aksent: #c2410c;       /* knapper: hvit tekst på denne gir 5,2:1 */
	--aksent-mork: #9a3412;
	--lenke: #f59a5c;        /* oransje tekst på mørk bakgrunn: 8,5:1 */
	--ok: #6fcf8f;
	--ok-bg: #16281c;
	--feil: #f28b82;
	--feil-bg: #2d1718;
	--radius: 6px;
	--maks: 68rem;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	line-height: 1.55;
	color: var(--tekst);
	background: var(--bakgrunn);
	-webkit-text-size-adjust: 100%;
}

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

body { margin: 0; font-size: 1.0625rem; }

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

a { color: var(--lenke); text-underline-offset: 0.15em; }
a:hover { color: #ffb987; }

:focus-visible { outline: 3px solid var(--lenke); outline-offset: 2px; }

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.9rem, 6vw, 3rem); margin: 0 0 0.75rem; }
h2 { font-size: clamp(1.4rem, 4vw, 1.9rem); margin: 0 0 1rem; }
h3 { font-size: 1.15rem; margin: 0 0 0.35rem; }

.hopp { position: absolute; left: -9999px; }
.hopp:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--flate); padding: 0.5rem 1rem; }

.innhold { max-width: var(--maks); margin: 0 auto; padding: 0 1rem; }

/* ---------- topp ---------- */
.topp { background: var(--topp); color: #fff; border-bottom: 1px solid var(--linje); }
.topp .innhold { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding-block: 0.8rem; }
.merke { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; }
.merke:hover { color: #fff; }
.merke svg { width: 1.6rem; height: 1.6rem; }
.meny { display: flex; gap: 0.25rem 1.1rem; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.meny a { color: #e8e6e1; text-decoration: none; padding: 0.4rem 0; display: inline-block; }
.meny a:hover, .meny a[aria-current="page"] { color: #fff; text-decoration: underline; text-decoration-color: var(--aksent); text-decoration-thickness: 3px; }

/* ---------- seksjoner ---------- */
section { padding: 2.5rem 0; }
section + section { border-top: 1px solid var(--linje); }

.helt { padding: 2rem 0 2.5rem; }
.helt-rutenett { display: grid; gap: 1.5rem; align-items: center; }
.helt p.ingress { font-size: 1.15rem; color: var(--dempet); margin: 0 0 1.5rem; max-width: 36rem; }
.helt img { border-radius: var(--radius); background: var(--linje); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

.knapp {
	display: inline-block; background: var(--aksent); color: #fff; font-weight: 600;
	text-decoration: none; padding: 0.85rem 1.4rem; border-radius: var(--radius);
	border: 0; font-size: 1.05rem; cursor: pointer; min-height: 48px; font-family: inherit;
}
.knapp:hover { background: var(--aksent-mork); color: #fff; }
.knapp.sekundar { background: transparent; color: var(--tekst); box-shadow: inset 0 0 0 2px var(--tekst); }
.knapp.sekundar:hover { background: var(--tekst); color: var(--bakgrunn); }
.knapper { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.steg { counter-reset: steg; list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.steg li { counter-increment: steg; background: var(--flate); border: 1px solid var(--linje); border-radius: var(--radius); padding: 1rem 1rem 1rem 3.4rem; position: relative; }
.steg li::before { content: counter(steg); position: absolute; left: 1rem; top: 1rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--aksent); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 0.95rem; }
.steg p { margin: 0; color: var(--dempet); }

.jobber { columns: 1; padding-left: 1.2rem; margin: 0; }
.jobber li { margin-bottom: 0.35rem; break-inside: avoid; }

.kort-rutenett { display: grid; gap: 1rem; }
.kort { background: var(--flate); border: 1px solid var(--linje); border-radius: var(--radius); padding: 1.1rem; }
.kort p { margin: 0; color: var(--dempet); }
.merkelapp { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lenke); margin-bottom: 0.3rem; }

.pristabell { width: 100%; border-collapse: collapse; background: var(--flate); border: 1px solid var(--linje); border-radius: var(--radius); overflow: hidden; }
.pristabell th, .pristabell td { text-align: left; padding: 0.8rem 1rem; border-bottom: 1px solid var(--linje); vertical-align: top; }
.pristabell tr:last-child th, .pristabell tr:last-child td { border-bottom: 0; }
.pristabell td { font-weight: 700; white-space: nowrap; text-align: right; }
.pristabell th { font-weight: 400; }
.pristabell small { display: block; color: var(--dempet); }
.merknad { color: var(--dempet); font-size: 0.95rem; }

.cta { background: var(--flate); border: 1px solid var(--linje); border-left: 4px solid var(--aksent); border-radius: var(--radius); padding: 1.5rem; }

/* ---------- delekatalog ---------- */
.deler { display: grid; gap: 1rem; list-style: none; padding: 0; margin: 0; }
.del { background: var(--flate); border: 1px solid var(--linje); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.del img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; background: var(--linje); }
.del-tekst { padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.del-tekst p { margin: 0; }
.del h2 { font-size: 1.2rem; margin: 0; }
.del dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.75rem; font-size: 0.95rem; }
.del dt { color: var(--dempet); }
.del dd { margin: 0; }
.del .pris { font-size: 1.25rem; font-weight: 700; margin-top: auto; }
.del .knapp { text-align: center; }
.status { padding: 1rem; background: var(--flate); border: 1px solid var(--linje); border-radius: var(--radius); }

/* ---------- skjema ---------- */
.skjema { display: grid; gap: 1.1rem; background: var(--flate); border: 1px solid var(--linje); border-radius: var(--radius); padding: 1.1rem; }
.felt { display: grid; gap: 0.35rem; }
.felt label { font-weight: 600; }
.felt .hint { color: var(--dempet); font-size: 0.9rem; margin: 0; }
.felt input, .felt textarea {
	font: inherit; font-size: 1rem; /* 16px hindrer autozoom på iOS */
	padding: 0.75rem; border: 1px solid var(--felt-kant); border-radius: var(--radius);
	background: var(--bakgrunn); color: var(--tekst); width: 100%; min-height: 48px;
}
.felt textarea { min-height: 8rem; resize: vertical; }
.felt input[type="file"] { padding: 0.6rem; }
.felt input:focus, .felt textarea:focus { border-color: var(--lenke); outline: 2px solid var(--lenke); outline-offset: 0; }
.valgfritt { font-weight: 400; color: var(--dempet); }
.honning { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.melding { padding: 1rem; border-radius: var(--radius); border: 2px solid; }
.melding.ok { border-color: var(--ok); color: var(--ok); background: var(--ok-bg); }
.melding.feil { border-color: var(--feil); color: var(--feil); background: var(--feil-bg); }
.melding h2 { color: inherit; font-size: 1.3rem; margin-bottom: 0.5rem; }
.melding p { margin: 0 0 0.5rem; color: var(--tekst); }
.alternativ { margin-top: 1.5rem; }

/* ---------- tekstsider ---------- */
.tekstside { max-width: 42rem; }
.tekstside p, .tekstside li { color: var(--tekst); }

/* ---------- bunn ---------- */
.bunn { background: var(--topp); border-top: 1px solid var(--linje); margin-top: 2rem; font-size: 0.95rem; color: var(--dempet); }
.bunn .innhold { padding-block: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.bunn p { margin: 0; }
.bunn a { color: var(--tekst); }

@media (min-width: 40rem) {
	.jobber { columns: 2; column-gap: 2rem; }
	.kort-rutenett { grid-template-columns: repeat(3, 1fr); }
	.steg { grid-template-columns: repeat(3, 1fr); }
	.deler { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
	.skjema { padding: 1.5rem; }
	.cta { padding: 2rem; }
}

@media (min-width: 56rem) {
	.helt { padding: 3rem 0; }
	.helt-rutenett { grid-template-columns: 1.1fr 1fr; gap: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}