/* ==========================================================================
   UpNorth Network – App-Ansicht
   Gilt nur bis 1024 px: gestapelte Karten auf ruhigem Grund, fester
   Kopfbereich, feste Tab-Leiste am unteren Rand. Farben und Typografie
   bleiben unverändert – nur der Aufbau wird zur App.
   01 Grundlagen  02 Kopfbereich  03 Karten  04 Hero  05 Bausteine
   06 Footer  07 Tab-Leiste
   ========================================================================== */

/* Die Tab-Leiste ist am Desktop nicht sichtbar. */
.un-tabbar{ display:none; }

@media (max-width:1024px){

	/* ------------------------------------------------------------ 01 */
	:root{
		--app-bg: #F1EFEB;          /* ruhiger Grund hinter den Karten */
		--app-gap: 10px;            /* Abstand zwischen den Karten */
		--app-inset: 12px;          /* seitlicher Rand der Karten */
		--app-radius: 22px;
		--app-pad: 22px;            /* Innenabstand der Karten */
		--app-tabbar: 76px;
		/* Wird zusätzlich per JavaScript exakt gemessen. */
		--header-h: max(68px, calc(var(--un-logo-h) + 30px));
	}
	body{ background:var(--app-bg); }

	/* Platz für die feste Tab-Leiste am unteren Rand */
	.un-main{ padding-bottom:0; }
	body{ padding-bottom:calc(var(--app-tabbar) + env(safe-area-inset-bottom,0px)); }

	.un-wrap,.un-wrap--wide,.un-wrap--narrow{ max-width:none; padding-inline:var(--app-pad); }

	/* ------------------------------------------------------------ 02 */
	.un-header{
		background:var(--app-bg); border-bottom:0;
		padding-top:env(safe-area-inset-top,0px);
	}
	.un-header__inner{
		grid-template-columns:auto 1fr; padding:.9rem var(--app-pad);
	}
	.un-header.is-stuck{ box-shadow:none; }
	.un-header.is-stuck .un-header__inner{ padding-block:.75rem; }
	.un-header.is-hidden{ transform:none; }
	.un-header__cta{ justify-self:end; }
	.un-header__cta .un-btn{ display:none; }
	.un-burger{ border:0; width:40px; height:40px; }
	.un-burger span{ left:11px; width:22px; background:var(--un-dark); }
	.un-burger span:nth-child(1){ top:14px; }
	.un-burger span:nth-child(2){ top:20px; }
	.un-burger span:nth-child(3){ top:26px; }
	body.un-nav-open .un-burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
	body.un-nav-open .un-burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
	.un-nav{ background:var(--app-bg); padding-top:calc(var(--header-h) + 1.5rem); }
	body.un-nav-open .un-header{ background:var(--app-bg); }
	.un-nav > ul > li{ border-bottom:1px solid rgba(58,42,35,.10); }
	.un-header-spacer{ height:var(--header-h); }

	/* ------------------------------------------------------------ 03 */
	/* Jeder Abschnitt wird zu einer eigenen Karte. */
	.un-main > section,
	.un-main > .un-hero,
	.un-main > header.un-phead{
		background:#fff;
		border-radius:var(--app-radius);
		margin:0 var(--app-inset) var(--app-gap);
		padding-block:clamp(1.75rem,6vw,2.25rem);
		border:0; overflow:hidden;
		box-shadow:0 1px 2px rgba(42,30,25,.04);
	}
	.un-main > section:first-child,
	.un-main > .un-hero:first-child{ margin-top:var(--app-gap); }
	.un-main > .un-section--light{ background:#fff; }
	.un-main > .un-section--flush-top{ padding-top:clamp(1.75rem,6vw,2.25rem); }
	.un-main > .un-section--flush-bottom{ padding-bottom:clamp(1.75rem,6vw,2.25rem); }
	.un-main > .un-band,
	.un-main > .un-endband{ background:var(--un-ink); }

	/* Abschnittsköpfe rücken näher zusammen */
	.un-shead{ margin-bottom:1.75rem; }
	.un-shead--center h2,.un-phead .un-display{ font-size:1.45rem; }
	.un-shead .un-lead{ font-size:.94rem; }
	.un-section--tight,.un-section{ padding-block:clamp(1.75rem,6vw,2.25rem); }

	/* Seitenkopf der Unterseiten */
	.un-phead{ padding-top:clamp(1.75rem,6vw,2.25rem) !important; }
	.un-phead .un-breadcrumb{ margin-bottom:1.1rem; }
	.un-phead p{ font-size:.94rem; }

	/* ------------------------------------------------------------ 04 */
	.un-hero{
		display:block; min-height:0;
		padding:0 !important; position:relative;
	}
	.un-hero__media{ position:absolute; inset:0; }
	/* Der Schieberegler im Customizer verschiebt hier den sichtbaren Ausschnitt. */
	.un-hero__img{ object-position:var(--un-hero-mobile-pos, var(--un-hero-pos, center)); }
	.un-hero > .un-wrap{ padding:clamp(2rem,8vw,3rem) var(--app-pad) clamp(2rem,7vw,2.75rem); }
	.un-hero__text{ max-width:none; min-height:clamp(300px,52vh,460px); display:flex; flex-direction:column; justify-content:flex-end; }
	.un-display--hero{ font-size:clamp(1.75rem,8vw,2.3rem); margin-bottom:1.1rem; }
	.un-hero .un-eyebrow{ margin-bottom:1rem; font-size:.6rem; }
	.un-hero__claim{ font-size:.62rem; }
	.un-hero .un-btns{ margin-top:1.75rem; }
	.un-hero .un-btn{ width:100%; }

	/* ------------------------------------------------------------ 05 */
	/* Über uns: Überschrift oben, Absätze darunter – am Telefon untereinander */
	.un-about__grid{ gap:1.1rem; }
	.un-about__head h2{ font-size:1.15rem; }
	.un-about__cols,
	.un-about__cols--2,
	.un-about__cols--3{ grid-template-columns:minmax(0,1fr); gap:.9rem; padding-top:1.1rem; }
	.un-about__cols > p{ border-left:0; padding-inline:0; font-size:.86rem; line-height:1.7; }
	.un-about__text .un-btns{ margin-top:1.25rem; }
	.un-about__text .un-btn{ width:100%; }

	/* Leistungen als antippbare Liste */
	.un-cols{ display:grid; grid-template-columns:minmax(0,1fr); gap:.6rem; }
	.un-col{
		display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center;
		gap:1rem; text-align:left; border:0; padding:0;
	}
	.un-col::after{ content:none; }
	.un-col > *{ margin:0; }
	.un-col{
		position:relative; background:var(--un-light);
		border-radius:14px; padding:.95rem 1rem;
	}
	.un-col__icon{ margin:0; display:grid; place-items:center; width:34px; }
	.un-col__icon svg{ width:24px; height:24px; }
	.un-col h3{ font-size:.68rem; grid-column:2; margin:0; }
	.un-col p{
		grid-column:2; font-size:.76rem; line-height:1.55; margin:.3rem 0 0; max-width:none;
	}
	/* Kein sichtbarer Pfeil – die ganze Kachel ist die Schaltfläche. */
	.un-col__more{
		position:absolute; inset:0; margin:0; padding:0;
		width:auto; height:auto; border-radius:14px;
	}
	.un-col__more svg{ display:none; }
	.un-col:active{ background:var(--un-gold-pale); }

	/* Kennzahlen: zwei nebeneinander */
	.un-figures{ grid-template-columns:repeat(2,minmax(0,1fr)); }
	.un-figure{ padding:1rem .5rem; border-left:0; }
	.un-figure:nth-child(2n){ border-left:1px solid rgba(255,255,255,.16); }
	.un-figure:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.16); }
	.un-figure__v{ font-size:1.6rem; }
	.un-figure__l{ font-size:.54rem; }
	.un-clients__row{ justify-content:center; gap:1.5rem 2rem; }
	.un-clients__item img{ max-height:26px; }

	/* Ablauf: zwei mal zwei, ohne Verbindungslinie */
	.un-flow{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.75rem .5rem; }
	.un-flow__step::after{ content:none; }
	.un-flow__no{ width:44px; height:44px; margin-bottom:1rem; }
	.un-flow__step h3{ font-size:.66rem; margin-bottom:.6rem; }
	.un-flow__step p{ font-size:.78rem; line-height:1.6; }

	/* Kundenstimmen: Pfeile und Punkte in einer Zeile unter dem Zitat */
	.un-says__box{
		padding-inline:0;
		display:grid; grid-template-columns:auto 1fr auto; align-items:center;
		grid-template-areas:"stage stage stage" "prev dots next";
		row-gap:1.25rem;
	}
	.un-says__stage{ grid-area:stage; }
	.un-says__nav{ position:static; transform:none; width:40px; height:40px; }
	.un-says__nav--prev{ grid-area:prev; justify-self:start; }
	.un-says__nav--next{ grid-area:next; justify-self:end; }
	.un-says__dots{ grid-area:dots; margin:0; }
	.un-says__item blockquote{ font-size:.95rem; }

	/* Abschlussband */
	.un-endband{ padding-block:clamp(1.75rem,6vw,2.25rem) !important; }
	.un-endband__inner{ display:block; }
	.un-endband__title{ font-size:1.5rem; }
	.un-endband__lead{ font-size:.86rem; }
	.un-endband__action{ margin-top:1.5rem; }
	.un-endband__action .un-btn{ width:100%; }

	/* Karten, Listen, Formulare in der App-Ansicht */
	.un-grid,.un-grid--2,.un-grid--3,.un-grid--4{ grid-template-columns:minmax(0,1fr); gap:.75rem; }
	.un-card{ background:var(--un-light); border:0; padding:1.25rem; }
	.un-card h3{ font-size:.95rem; }
	.un-card p{ font-size:.86rem; }
	.un-split,.un-split--40,.un-split--60,.un-grid--sidebar{ grid-template-columns:minmax(0,1fr); gap:1.75rem; }
	.un-split-cta{ gap:.75rem; }
	.un-split-cta__half{ padding:1.5rem; border-radius:14px; }
	.un-deflist{ border:0; }
	.un-deflist__row{ padding:1rem 0; }
	.un-callout--fill{ border-radius:14px; padding:1.25rem; }
	.un-formbox--boxed{ border:0; padding:0; }
	.un-form{ gap:1.1rem; }
	.un-form__row{ grid-template-columns:minmax(0,1fr); gap:1.1rem; }
	.un-field input,.un-field select,.un-field textarea{ border-radius:12px; font-size:16px; }
	.un-field textarea{ min-height:130px; }
	.un-field .un-field__ta--short{ min-height:88px; }
	.un-form .un-btn{ width:100%; }

	/* Mehrstufiges Formular: Karten untereinander, Navigation als Leiste */
	.un-wizard .un-formstep{ gap:1.1rem; }
	.un-wizard__bar{ margin-bottom:1.35rem; }
	.un-choices{ gap:.6rem; }
	.un-choice__box{ border-radius:14px; padding:1.1rem 1.15rem; gap:.15rem .9rem; }
	.un-choice__ico svg{ width:21px; height:21px; }
	.un-choice__title{ font-size:.92rem; }
	.un-choice__text{ font-size:.78rem; }
	.un-wizard__nav{ margin-top:1.5rem; padding-top:1.35rem; gap:.6rem; }
	.un-wizard__nav .un-btn{ width:100%; }
	.un-contactbox{ border-radius:14px; padding:1.25rem; }
	.un-team{ grid-template-columns:minmax(0,1fr); gap:0; }
	.un-member{ padding:1.1rem 0 1.1rem; }
	/* Hochformate am Telefon flacher halten, sonst füllt ein Platzhalter den Bildschirm */
	.un-frame--portrait,.un-frame--tall,.un-media--tall img,.un-media--tall .un-frame{ aspect-ratio:5/4; }
	.un-rule{ margin-bottom:1.35rem; }
	.un-member h3{ font-size:.9rem; }
	.un-entry{ font-size:.94rem; }
	.un-btns .un-btn{ flex:1 1 auto; }

	/* ------------------------------------------------------------ 06 */
	.un-footer{
		background:#fff; border:0; border-radius:var(--app-radius);
		margin:0 var(--app-inset) var(--app-gap);
		padding:var(--app-pad) 0 0;
	}
	.un-footer__grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
		gap:1.75rem 1rem; padding-bottom:1.75rem;
	}
	.un-footer__brand{ grid-column:1 / -1; max-width:none; }
	.un-footer__col:last-child{ grid-column:1 / -1; }
	.un-footer__col:last-child ul{ display:grid; gap:.2rem; }
	.un-footer a{ overflow-wrap:anywhere; }
	.un-footer__intro{ font-size:.8rem; }
	.un-footer__bottom{ padding-block:1.25rem; font-size:.66rem; }
	.un-footer__claimline{ font-size:.56rem; }

	.un-totop{ display:none; }

	/* ------------------------------------------------------------ 07 */
	.un-tabbar{
		position:fixed; left:0; right:0; bottom:0; z-index:920;
		display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
		background:rgba(255,255,255,.96);
		backdrop-filter:saturate(140%) blur(12px);
		border-top:1px solid rgba(58,42,35,.08);
		padding-bottom:env(safe-area-inset-bottom,0px);
	}
	body.un-nav-open .un-tabbar{ display:none; }
	.un-tab{
		display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem;
		padding:.75rem .25rem .8rem; color:var(--un-grey); text-align:center;
		transition:color .25s var(--ease);
	}
	.un-tab__ico{ display:grid; place-items:center; }
	.un-tab__ico svg{ width:21px; height:21px; stroke-width:1.4; }
	.un-tab__label{
		font-size:.53rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
		line-height:1; white-space:nowrap;
	}
	.un-tab.is-active{ color:var(--un-gold); }
	.un-tab:active{ color:var(--un-gold-deep); }
}

/* Sehr schmale Geräte */
@media (max-width:360px){
	.un-tab__label{ font-size:.48rem; letter-spacing:.06em; }
	.un-figures{ grid-template-columns:minmax(0,1fr); }
	.un-figure:nth-child(2n){ border-left:0; }
	.un-figure:nth-child(n+2){ border-top:1px solid rgba(255,255,255,.16); }
}

/* Tablet: zwei Spalten, aber weiterhin App-Aufbau */
@media (min-width:600px) and (max-width:1024px){
	.un-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
	.un-grid--2,.un-grid--3,.un-grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
	.un-flow{ grid-template-columns:repeat(4,minmax(0,1fr)); }
	.un-team{ grid-template-columns:repeat(3,minmax(0,1fr)); }
	.un-member{ padding:1.35rem clamp(1rem,2vw,2rem) 0 0; }
	.un-hero .un-btn,.un-endband__action .un-btn,.un-about__text .un-btn{ width:auto; }
	.un-btns .un-btn{ flex:0 0 auto; }
	/* Ab Tablet passen zwei Spalten nebeneinander. */
	.un-about__cols--2,
	.un-about__cols--3{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:1.35rem; }
	.un-about__cols > p{ padding-inline:clamp(1rem,2.5vw,1.75rem); border-left:1px solid var(--un-line); }
	.un-about__cols > p:first-child{ border-left:0; padding-left:0; }
	.un-about__cols--3 > p:nth-child(3){ border-left:0; padding-left:0; }
}