/* ==========================================================================
   UpNorth Network – Seitenspezifische Bausteine
   01 Fallbeispiele  02 Filter  03 Kontakt  04 Bewerbung  05 Rechtstexte
   06 Feinschliff & Druck
   ========================================================================== */

/* ------------------------------------------------------------------ 01 */
.un-casecard{ display:flex; flex-direction:column; height:100%; }
.un-casecard__media{ display:block; margin-bottom:1.75rem; }
.un-casecard__media img{ width:100%; aspect-ratio:7/5; object-fit:cover; transition:opacity .5s var(--ease); }
.un-casecard:hover .un-casecard__media img{ opacity:.88; }
.un-casecard .un-eyebrow{ margin-bottom:.8rem; }
.un-casecard h2{ font-size:1.2rem; margin-bottom:1rem; }
.un-casecard h2 a{ color:var(--un-dark); }
.un-casecard h2 a:hover{ color:var(--un-gold-deep); }
.un-casecard p{ font-size:.92rem; line-height:1.8; }
.un-casecard__facts{
	display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
	gap:0; margin:2rem 0; border-top:1px solid var(--un-line);
}
.un-casecard__facts > div{
	padding:1.15rem 1.25rem 1.15rem 0;
	border-bottom:1px solid var(--un-line); border-right:1px solid var(--un-line);
}
.un-casecard__facts > div:nth-child(2n){ border-right:0; padding-right:0; }
.un-casecard__facts > div:nth-last-child(-n+2){ border-bottom:0; }
.un-casecard__facts dt{
	font-size:.58rem; font-weight:600; letter-spacing:var(--track-wide);
	text-transform:uppercase; color:var(--un-grey); margin-bottom:.45rem;
}
.un-casecard__facts dd{ margin:0; font-size:.88rem; font-weight:500; color:var(--un-dark); line-height:1.5; }
.un-casecard .un-textlink{ margin-top:auto; align-self:flex-start; }
@media (max-width:480px){
	.un-casecard__facts{ grid-template-columns:minmax(0,1fr); }
	.un-casecard__facts > div{ border-right:0; padding-right:0; }
	.un-casecard__facts > div:nth-last-child(2){ border-bottom:1px solid var(--un-line); }
}

/* ------------------------------------------------------------------ 02 */
.un-filter{ display:flex; flex-wrap:wrap; gap:2rem; padding-bottom:1.5rem; border-bottom:1px solid var(--un-line); }
.un-chip{
	padding:0 0 .5rem; border:0; border-bottom:1px solid transparent; background:none;
	font-family:var(--font-sans); font-size:.64rem; font-weight:500;
	letter-spacing:var(--track-wide); text-transform:uppercase; color:var(--un-grey);
	cursor:pointer; transition:all .25s var(--ease); line-height:1;
}
.un-chip:hover{ color:var(--un-dark); }
.un-chip.is-active{ color:var(--un-dark); border-bottom-color:var(--un-gold); }

/* ------------------------------------------------------------------ 03 */
.un-contactbox{
	background:var(--un-light); border-radius:var(--radius-lg);
	padding:clamp(1.75rem,3.5vw,2.5rem);
}
.un-contactbox h3{ font-size:1.05rem; margin-bottom:0; }
.un-contactlist{ list-style:none; padding:0; margin:2rem 0 0; display:grid; gap:1.75rem; }
.un-contactlist li{ display:flex; gap:1.25rem; align-items:flex-start; margin:0; font-size:.9rem; line-height:1.75; }
.un-contactlist li .un-ico,.un-contactlist li > svg{ flex:none; }
.un-contactlist b{
	display:block; font-size:.6rem; font-weight:600; letter-spacing:var(--track-wide);
	text-transform:uppercase; color:var(--un-dark); margin-bottom:.4rem;
}

/* ------------------------------------------------------------------ 04 */
.un-applysteps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border-top:1px solid var(--un-line); }
@media (max-width:900px){ .un-applysteps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .un-applysteps{ grid-template-columns:minmax(0,1fr); } }
.un-applystep{ padding:2.25rem clamp(1.25rem,2vw,2rem) 0 0; border-right:1px solid var(--un-line); }
.un-applystep:last-child{ border-right:0; }
@media (max-width:900px){
	.un-applystep:nth-child(2n){ border-right:0; }
	.un-applystep:nth-child(-n+2){ padding-bottom:2.25rem; border-bottom:1px solid var(--un-line); }
}
@media (max-width:520px){
	.un-applystep{ border-right:0; padding-bottom:2.25rem; border-bottom:1px solid var(--un-line); }
	.un-applystep:last-child{ border-bottom:0; }
}
.un-applystep__no{ font-size:.62rem; font-weight:600; letter-spacing:var(--track-wide); color:var(--un-gold); margin-bottom:1.1rem; }
.un-applystep h3{ font-size:.98rem; margin-bottom:.65rem; }
.un-applystep p{ font-size:.86rem; margin:0; line-height:1.8; }

/* ------------------------------------------------------------------ 05 */
.un-legal-entry{ max-width:70ch; }
.un-legal-entry h2{
	font-size:clamp(1.1rem,1.7vw,1.35rem); margin-top:3.5rem; padding-top:2rem;
	border-top:1px solid var(--un-line);
}
.un-legal-entry h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.un-legal-entry h3{ font-size:.98rem; margin-top:2.25rem; }
.un-legal-entry p,.un-legal-entry li{ font-size:.92rem; line-height:1.85; }
.un-legal-entry em{ color:var(--un-gold-deep); font-style:normal; }

/* ------------------------------------------------------------------ 06 */
.un-section + .un-section--flush-top{ padding-top:0; }

a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
	outline:1px solid var(--un-gold); outline-offset:4px;
}

@media screen and (max-width:600px){ .admin-bar .un-header{ top:0; } }
@media (min-width:1800px){ :root{ --wrap:1280px; --wrap-wide:1600px; } }

@media print{
	.un-header,.un-footer,.un-totop,.un-marquee,.un-cta,.un-split-cta{ display:none !important; }
	.un-phead,.un-hero{ padding-top:1.5rem !important; }
	.un-section{ padding-block:1.5rem !important; }
	.un-section--ink{ background:#fff !important; color:#000 !important; }
	.un-section--ink h2,.un-section--ink h3,.un-section--ink .un-display{ color:#000 !important; }
	.un-reveal{ opacity:1 !important; transform:none !important; }
	.un-frame{ background:#fff !important; border:1px solid #ccc; }
	a{ color:#000 !important; }
	body{ font-size:10.5pt; }
}

/* Optionales Bild unter der Kontaktbox */
.un-contactbox__media{ margin-top:1rem; }
.un-contactbox__media img{ width:100%; aspect-ratio:16/10; object-fit:cover; }

/* Hinweis während der Gründungsphase */
.un-founding{ border-left:2px solid var(--un-gold); margin-bottom:2.5rem; }
.un-founding p{ margin:0; }

/* ==========================================================================
   07 Bausteine der Unterseiten
   Bildflächen mit festem Seitenverhältnis, klebende Spalte, Team mit Bildern.
   ========================================================================== */

/* Hochgeladene Bilder bekommen dasselbe Seitenverhältnis wie die Platzhalter.
   Ohne diese Regeln läuft ein Foto in seiner Originalhöhe und das
   Bild-Text-Verhältnis der Seite verrutscht. */
.un-img{ width:100%; border-radius:var(--radius); }
.un-img--wide{ aspect-ratio:16/10; object-fit:cover; }
.un-img--card{ aspect-ratio:7/5; object-fit:cover; }
.un-img--tall{ aspect-ratio:4/5; object-fit:cover; }
.un-img--square{ aspect-ratio:1/1; object-fit:cover; }
.un-img--portrait{ aspect-ratio:3/4; object-fit:cover; }

/* Eigener Stapelkontext, damit die versetzte Goldlinie sichtbar bleibt und
   nicht hinter der Abschnittsfläche verschwindet. */
.un-media{ z-index:0; }
.un-media .un-caption{ margin-bottom:0; }

/* Überschrift bleibt neben langen Listen stehen (nur am Desktop sinnvoll) */
@media (min-width:1025px){
	.un-sticky{ position:sticky; top:calc(var(--header-h) + 2rem); }
}

/* Team mit Bildern */
.un-team--photos .un-member{ padding-top:1.75rem; }
.un-member__photo{ margin-bottom:1.5rem; }
.un-member__photo img,.un-member__photo .un-frame{
	width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--radius);
}

/* Zwei Wege am Fuß der Seite „Über uns“ */
.un-split-cta__half .un-textlink{ margin-top:.5rem; }

/* Abstand zwischen breitem Bild und den Textspalten darunter */
.un-mt-lg{ margin-top:clamp(2rem,4vw,3.25rem); }

/* Zitatfläche: Zusatz unter dem Zitat */
.un-bigquote .un-caption{ margin-top:1.75rem; margin-bottom:0; }

/* Nummerierte Aufgabenliste: zweiter Absatz etwas ruhiger */
.un-step p + p{ color:var(--un-grey); margin-bottom:0; }
.un-flow__step p + p{ color:var(--un-grey); }

/* In der App-Ansicht würde die versetzte Linie an der Kartenkante abgeschnitten */
@media (max-width:1024px){
	.un-media--offset::after,.un-media--offset-left::after{ content:none; }
	.un-member__photo img,.un-member__photo .un-frame{ aspect-ratio:4/3; }
	.un-team--photos .un-member{ padding-top:1.25rem; }
	.un-mt-lg{ margin-top:1.5rem; }
}