/* first for IE 4–8 */
@font-face {
	font-family: DINWeb-Bold;
	src: url("/fileadmin/templates/ds/fonts/ff_din_web_bold/DINWeb-Bold.eot");
}

/* then for WOFF-capable browsers */
@font-face {
	font-family: DINWeb-Bold;
	src: url("/fileadmin/templates/ds/fonts/ff_din_web_bold/DINWeb-Bold.woff") format("woff");
}

/* go on with normal style definitions */


/* first for IE 4–8 */
@font-face {
	font-family: DINWeb-Light;
	src: url("/fileadmin/templates/ds/fonts/ff_din_web_light/DINWeb-Light.eot");
}

/* then for WOFF-capable browsers */
@font-face {
	font-family: DINWeb-Light;
	src: url("/fileadmin/templates/ds/fonts/ff_din_web_light/DINWeb-Light.woff") format("woff");
}

/* go on with normal style definitions */

body {
	font-family: DINWeb-Light, sans-serif;
}


* {outline:none;}

html, body {
	min-height: 100%;
	margin: 0;
	padding: 0;
}

body {
	font-family: DINWeb-Light, sans-serif;
	font-size: 18px;
	line-height: 1.4em;
	background: ;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

p, a, table, td, span, div {
	font-family: DINWeb-Light, sans-serif;
}

a {
	text-decoration: none;
	color: #00adee;
}

h2 {
	color: #00adee;
	font-size: 18px;
	margin-bottom:3px;
}

.storry h3, .imageWithCaption h3, h4 {
	text-transform: uppercase;
	color: #00adee;
	margin: 0;
	padding: 0;
	font-size: 18px;
}

h4 {
	text-transform: none:
}
h5 {
	margin: 0; padding: 0;
}

.plusPlus {
	border: 0;
	display: block;
	z-index: 100;
}

.plusText {
	height: 115px;
	position: absolute;
	bottom: 0px;
	width: 550px;
	left: 26px;
	margin-bottom: -115px;
	margin-left: 3px;
	display: none;
	background: rgb(250,250,250);
	background: rgba(250,250,250,0.3);
	padding: 10px;
}

.plusText h1 {
	font-weight: normal;
	font-size: 30px;
	line-height: 1.2em;
	margin: 0;
	padding: 0;
}

.plusText p {
	padding: 0;
	margin: 0;
	font-size: 14px;
	line-height: 1.4em;
}

.plusText h1 {
	color: #fff;
}

.enter {
	text-align: right;
}

.enter a {
	color: #fff;
	font-size: 14px;
}

.plusText a {
	padding: 0;
	margin: 0;
	font-size: 14px;
	line-height: 1.4em;
}

.plusWrap {
	position: absolute;
	bottom: 40%;
	left: 25%;
	cursor: pointer;
	width: 50px;
	height: 50px;
}

#page {
	min-height: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#content {
	max-width: 960px;
	margin: 0 auto;
	position: relative;
	height: 100%;
}

#logo {
	padding-top: 35px;
	text-align: left;
	width: 160px;
	float: left;
}



#header {
	height: 200px;
	position: fixed;
	z-index: 150;
	width: 960px;
	background: #fff;
}

#contentSec {
	padding-top: 200px;
}

/*Strip the ul of padding and list styling*/
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	position: absolute;
	left: 336px;
	top: 164px;
}

/*Create a horizontal list with spacing*/
li {
	display: inline-block;
	float: left;
	margin-right: 1px;
}

/*Style for menu links*/
li a {
	display: block;
	text-align: center;
	color: #333;
	background: none;
	text-decoration: none;
	margin-right: 25px;
	letter-spacing: 1px;
}

/*Hover state for top level links*/
li:hover a {
	background: none;
}

/*Style for dropdown links*/
li:hover ul a {
	background: none;
	color: #000;
	height: 40px;
	line-height: 40px;
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
	background: none;
	color: #000;
}

/*Hide dropdown links until they are needed*/
li ul {
	display: none;
}

/*Make dropdown links vertical*/
li ul li {
	display: block;
	float: none;
}

/*Prevent text wrapping*/
li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0 20px;
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
	display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	text-decoration: none;
	color: #333;
	background: #fff;
	text-align: right;
	padding: 20px 0;
	display: none;
}

/*Hide checkbox*/
input[type=checkbox] {
	display: none;
	-webkit-appearance: none;
}

#menu {
	font-size: 19px;
	text-transform: uppercase;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~
#menu {
	display: block;
}



.projektDesc {
	background: #00adee;
	color: #fff;
	padding: 15px;
	padding-left: 28px;
}

.projektDesc dt {
	float: left;
	clear: left;
	width: 200px;
	text-transform: uppercase;
}

.ui-accordion, .imageWithCaption, .csc-frame-frame1 .csc-textpic-imagewrap img {
	border: 1px solid #abbbc3;
	margin-bottom: 10px;
}

img {
	width: 100%;
	height: auto;
}

.csc-textpic-imagewrap img {
	width: 100%!important;
	height: auto!important;
}


.closeLink {
	text-align: right;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
	height: 25px;
	padding-top: 3px;
	line-height: 25px;
	padding-right: 30px;
	background: #00adef;
	margin-top: -12px;
}

.closeLink a, a {
	color: #fff;
	cursor: pointer;
}

.image {
	position: relative;
}

.projektDescWrap .image {
	margin-bottom: 12px;
}

.accordion {
	position: relative;
}

.projektPlus {
	width: 30px;
	height: 30px;
	background: red;
	display: block;
	background: url("/fileadmin/images/plus.svg");
	background-size: cover;
	position: absolute;
	bottom: 40px;
	right: 50px;
	z-index: 50;
}

.storry p {
	margin: 0;
	padding: 0;
	width: 85%;
	line-height: 1.2em;
}

.storry{
	display: none;
	position: absolute;
	height: 90px;
	top: 476px;
	z-index: 10;
	background: rgba(250,250,250,0.9);
	padding: 10px;
	padding-left: 28px;
}

.imageWithCaption .imageImage {
	display: block;
}


.imageWithCaption .imageCaption {
	display: block;
	padding-top: 20px;
	width: 95%;
	padding-left: 28px;
}

@media screen and (max-width: 760px) {
	.storry {
		visibility: hidden;
	}
}

#footer {
	height: 50px;
	background: #00adee;
	display: block;
	padding: 20px;
	padding-left: 28px;
	margin-bottom: 20px;
	margin-top: 10px;
}

#footer a {
	color: #fff;
}

.colFooter {
	color: #fff;
	float: left;
	font-size: 19px;
	margin-right: 5%;
	line-height: 1.6em;
}

.colFooter:last-child {
	margin-right: 0;
}

.clearer {
	clear: both;
	height: 1px; line-height: 0;
}

.col-left {
	width: 330px;
	float: left;
	padding-right: 7px;
}

.col-right {
	width: 623px;
	float: right;
}

td {
	line-height: 1.4em;
	vertical-align: top;
	padding-left: 0;
}

/*Responsive Styles*/

@media screen and (max-width: 760px) {
	/*Make dropdown links appear inline*/
	ul {
		position: static;
		display: none;
	}
	
	#menu {
		position: fixed;
		left: 0;
		top: 80px;
		z-index: 1600;
		background: #fff;
		width: 100%;
		border-bottom: 1px solid #abbbc3;
		border-top: 1px solid #abbbc3;
	}
	
	#menu li {
		text-align: right;
	}
	
	
	#header {
		height: 150px;
		position: static;
		background: #fff;
		z-index: 160;
		width: 960px;
	}

	#contentSec {
		padding-top: 0px;
	}

	/*Create vertical spacing*/
	li {
		margin-bottom: 1px;
		clear: both;
		
	}
	/*Make all menu links full width*/
	ul li, li a {
		width: 98%;
		text-align: right;
		margin-right: 20px;
	}
	/*Display 'show menu' link*/
	.show-menu {
		display: block;
		position: fixed;
		z-index: 150;
		width: 100%;
		top: 0;
		right: 0;
		height: 60px;
	}
	
	.show-menu img {
		width: 28px;
		height: 23px;
		padding: 10px;
	}
	
	#page {
		padding-left: 1%; padding-right: 1%;
	}
	#contentSec {
		padding-top: 85px;
	}
	
	#header {
	height: auto;
	position: fixed;
	z-index: 150;
	width: 100%;
	background: #fff;
	}
	
	#footer {
	min-height: 50%;
	background: #00adee;
	display: block;
	padding: 20px;
	padding-left: 28px;
	margin-bottom: 20px;
	margin-top: 10px;
}
	

	#logo {
		padding-top: 5px;
		padding-left: 10px;
		text-align: left;
		width: 70px;
		height: 20px;
		float: left;
		position: fixed;
		z-index: 151;
		background: #fff;
	}

	#logo img {
		height: 80px;
		width: auto;
	}
	
	.col-left {
		width: 100%;
		float: none;
		padding-right: 1%;
	}
	
	.col-right {
		width: 100%;
		float: none;
	}
	
	li a {
		padding: 5px;
	}
	
	.colFooter {
		float: none;
	}
	
		.projektDesc dt {
		float: none;
		font-size: 14px;
		line-height: 1.2em;
		clear: left;
		width: 40%;
		text-transform: uppercase;
		margin: 0; padding: 0;
	}
	
	.projektDesc dd {
		font-size: 14px;
		padding: 0;
		margin: 0;
		margin-bottom: 8px;
	}
	
	.csc-frame-frame1 .csc-textpic-imagewrap img {
		width: 150px!important;
	}
	
}


a {
	text-decoration: none;
	color: #00adee;
}

.marquee {
	text-align:right;
	padding-right: 5%;
}

.marquee img {
	width: 220px;
	height: 19px;
	max-width: 100%;
}

#c137 .col-left {
	padding-left: 25px;
	width: 300px;
}

/* ============================================================
   26.09 Восстановление без JavaScript.
   Исходный сайт на TYPO3 4.5 раскрывал контент через jQuery,
   который в архив не попал. Ниже — правила, возвращающие
   содержимое в статике. Разметка и стили шаблона сохранены.
   ============================================================ */

/* 1. Тексты проектов (.storry) были display:none и раскрывались
      аккордеоном по клику. Показываем их под каждым снимком. */
/* .storry в шаблоне: position:absolute + top:476px — рассчитан на
   наложение поверх фото проекта. Возвращаем в поток: на странице
   Büro снимка нет, и блок повисал под футером. */
.accordion .storry {
  display: block !important;
  position: static !important;
  height: auto !important;
  top: auto !important;
  padding: 18px 0 26px;
  max-width: 62em;
}
/* пустая обёртка изображения (нет фото) не должна занимать место */
.accordion .image:not(:has(img)) { display: none; }
/* Замысел шаблона: снимок ведёт, подпись под ним. В разметке .storry
   идёт первым, поэтому там, где фото ЕСТЬ, меняем порядок флексом. */
.accordion:has(.image img) {
  display: flex;
  flex-direction: column;
}
.accordion:has(.image img) .image  { order: 1; }
.accordion:has(.image img) .storry { order: 2; }
.accordion:has(.image img) .projektDesc { order: 3; }
.accordion .storry h3 {
  margin: 0 0 8px;
  font-size: 19px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #1a1a1a;
}
.accordion .storry p.bodytext {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #3a3a3a;
}
.accordion .storry p:empty { display: none; }

/* 2. Вечный ajax-спиннер: подгрузка не работает без JS,
      полоса-заглушка читалась как мусор под каждым фото. */
p.marquee,
img[src*=ajax-loader] { display: none !important; }

/* 3. Заставка главной: текст и кнопка Enter открывались
      кликом по плюсу. Без JS плюс мёртв — показываем сразу. */
.plusWrap .plusText { display: block !important; }

/* 4. Читаемость заставки. Блок лежит на светлом бетоне: белый h1
      и «Enter» давали контраст 2.20 при норме 4.5 (замерено).
      Плотность подложки поднята, текст — тёмный, как и абзац. */
.plusWrap .plusText {
  background: rgba(255,255,255,.88) !important;
  padding: 18px 22px;
  max-width: 34em;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.plusWrap .plusText h1 {
  color: #111 !important;
  font-size: 26px;
  margin: 0 0 10px;
  line-height: 1.2;
}
.plusWrap .plusText p { color: #333 !important; }
.plusWrap .plusText .enter a {
  color: #0d0d0d !important;
  border-bottom: 2px solid #00adee;
  padding-bottom: 2px;
  text-decoration: none;
}
.plusWrap .plusText .enter a:hover { color: #00adee !important; }
.plusWrap .plusText .enter a:focus-visible { outline: 2px solid #00adee; outline-offset: 3px; }

/* 5. Текст «о бюро» перенесён из AJAX-фрагмента id_8 на саму
      страницу Büro — в шрифте и ритме шаблона. */
.buroProfil {
  max-width: 62em;
  padding: 26px 0 10px;
}
.buroProfil h3 {
  margin: 0 0 10px;
  font-size: 19px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #1a1a1a;
}
.buroProfil p.bodytext {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.65;
  color: #3a3a3a;
}

/* 6. Читаемость белого текста на фирменном голубом.
      #00adee под белым даёт контраст 2.56 при норме 4.5 (замерено).
      Оттенок бренда сохранён (тот же hue 196), яркость снижена
      до #0b7ba8 — контраст 4.76. Синий плюс и акценты не тронуты. */
.projektDesc { background: #0b7ba8; }
#footer { background: #0b7ba8; }

/* 7. Заставка на телефоне: .plusWrap позиционирован абсолютно
      (left:25%), и раскрытый текст уезжал за край — 722px при
      экране 390. Прижимаем блок к сетке экрана. */
@media screen and (max-width: 760px) {
  .plusWrap {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 16px 24px;
  }
  .plusWrap .plusPlus { display: none; }
  /* базовое правило задаёт width:550px + position:absolute + height:115px —
     всё это надо перекрыть, иначе блок шире экрана */
  .plusWrap .plusText {
    position: static !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 16px 18px;
  }
  .plusWrap .plusText h1 { font-size: 22px; }
  .plusWrap .plusText p,
  .plusWrap .plusText .enter a { font-size: 16px; }
  /* цель нажатия «Enter» до 44px */
  .plusWrap .plusText .enter a {
    display: inline-block;
    padding: 12px 4px;
  }
  #page { min-height: 100vh; }
}

/* ============================================================
   26.09 Правки по ui-ux-pro-max (CRITICAL/HIGH правила)
   ============================================================ */

/* touch-target-size (CRITICAL, 44x44): пункты меню были 25px.
   Вертикальные поля растят область нажатия, не меняя вид строки. */
#menu a {
  display: inline-block;
  padding: 10px 0;
  line-height: 1.3;
}
#menu li { margin: 0; }

/* line-length (65-75 знаков): абзацы тянулись на 960px = 114 знаков.
   Ограничиваем МЕРУ НАБОРА, не контейнер — фото остаются во всю ширину. */
#contentSec p.bodytext,
.storry p.bodytext,
.buroProfil p.bodytext { max-width: 34em; }

/* horizontal-scroll (HIGH): медиазапрос заставки стоял на 760px,
   на планшете 768 правило не срабатывало и блок уезжал за край. */
@media screen and (max-width: 900px) {
  /* Логотип «POGGENHANS+MÜHL / ARCHITEKTEN BDA» — часть фоновой
     ФОТОГРАФИИ, в DOM его нет, поэтому проверка наложения элементов
     ничего не показывает. Замер по пикселям: на 768px он заканчивается
     на y=571. Блок заставки ставим ниже этой отметки. */
  #content { padding-top: 600px; }
  .plusWrap {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 24px 16px;
  }
  .plusWrap .plusPlus { display: none; }
  .plusWrap .plusText {
    position: static !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 16px 18px;
  }
}

/* readable-font-size (HIGH): на телефоне основной текст был 15px. */
@media screen and (max-width: 760px) {
  #contentSec p.bodytext,
  .storry p.bodytext,
  .buroProfil p.bodytext,
  .projektDesc dt, .projektDesc dd { font-size: 16px; }
  #menu a { padding: 12px 0; }
}

/* touch-target, продолжение. Три разных случая:
   1) ссылка-обёртка вокруг фото проекта: inline → высота 18px,
      хотя кликается весь снимок. Делаем block по размеру фото. */
.accordion .image a { display: block; line-height: 0; }
.accordion .image a img { display: block; }

/* 2) «Enter» на заставке и 3) ссылки в футере — реально мелкие. */
.plusText .enter a,
#footer a, .colFooter a {
  display: inline-block;
  padding: 12px 6px;
  margin: -12px -6px;   /* поля не сдвигают вёрстку */
}

/* Заставка: у «Enter» нижний padding перебивался правилом шаблона
   (.plusText a{padding:0}) — высота выходила 36px вместо 44. */
.plusWrap .plusText .enter a {
  padding: 12px 6px !important;
  margin: -12px -6px;
}
/* Абзац заставки без класса bodytext — мера набора к нему не применялась
   (82 знака при норме 65-75). */
.plusWrap .plusText p { max-width: 34em; }

/* Меню шаблона на узких экранах: position:fixed top:80px — ложилось
   поверх логотипа фоновой фотографии. Возвращаем в поток, полосой
   с подложкой над контентом. */
@media screen and (max-width: 900px) {
  #menu {
    position: static !important;
    background: none;          /* белая полоса перечёркивала логотип */
    border-top: none;
    padding: 6px 16px;
    text-align: left;
  }
  /* подложка только под сами пункты, а не на всю ширину */
  #menu a {
    background: rgba(255,255,255,.9);
    padding: 8px 10px !important;
  }
  /* на узком экране пункты в строку давали скролл 403px —
     переносим и убираем правый отступ у последнего */
  /* у ul остаётся наследованный padding-left шаблона (~24px) —
     из-за него ширина 400 при экране 375. Обнуляем и переносим. */
  #menu {
    display: flex !important; flex-wrap: wrap; gap: 0 18px;
    margin: 0 !important; padding: 6px 16px !important;
    box-sizing: border-box; width: 100%;
    list-style: none;
  }
  #menu li { display: block; text-align: left; margin: 0; padding: 0; }
  label.show-menu { display: none !important; }
  #menu { display: block !important; }
}

/* Фон заставки: background-size:cover на узком экране обрезает края,
   и логотип «POGGENHANS+MÜHL» (он часть фотографии) уходит вправо.
   На телефоне показываем снимок целиком. */
@media screen and (max-width: 760px) {
  #page {
    background-size: contain !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-color: #c9cfd3;
  }
  /* фото целиком занимает меньше высоты — блок поднимаем */
  #content { padding-top: 300px; }
}

/* ★ КРИТИЧНО: #menu позиционирован absolute и лежит в #contentWrap ПЕРЕД
   #content (position:relative). По порядку наложения #content оказывался
   сверху и перехватывал клики — пункты меню не работали вовсе.
   Поднимаем меню над контентом. */
#menu {
  z-index: 30;
}
#contentWrap > label.show-menu { position: relative; z-index: 31; }

/* Меню шаблона стоит на left:336px — рассчитано на маленький логотип
   внутренних страниц. На ГЛАВНОЙ логотип часть фонового фото и тянется
   до x=354 (замер по пикселям) — пункты налезали на буквы «POGGEN».
   Сдвигаем меню правее только там, где логотип крупный. */
body:has(.plusWrap) #menu { left: 400px; }

/* На главной меню лежит поверх ФОТОГРАФИИ, яркость которой меняется по
   ширине: «Kontakt» попадал на тёмный бетон и пропадал. Светлая
   подложка под пунктами — контраст перестаёт зависеть от фона. */
body:has(.plusWrap) #menu {
  background: rgba(255,255,255,.9);
  padding: 4px 16px;
  border-radius: 1px;
}
body:has(.plusWrap) #menu a { color: #1a1a1a; }
body:has(.plusWrap) #menu a:hover { color: #00adee; }

/* На узких экранах меню возвращено в поток (position:static), из-за чего
   z-index не работал и #content снова перехватывал клики. */
@media screen and (max-width: 900px) {
  /* только ГЛАВНАЯ: там меню в потоке и его глушил #content.
     Внутренние страницы трогать нельзя — у них своя раскладка. */
  body:has(.plusWrap) #menu {
    position: relative !important;
    z-index: 30;
    left: auto !important;
  }
}

/* «Enter»: отрицательные margin растягивали ссылку ниже блока — подчёркивание
   свисало на 20px за край. Расширяем область нажатия внутрь, а не наружу:
   блоку добавлен нижний отступ, ссылке — обычные поля. */
/* у .plusText в шаблоне height:115px + margin-bottom:-115px — блок не
   растёт под содержимое, поэтому «Enter» свисал за нижний край. */
.plusWrap .plusText {
  height: auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 26px;
}
.plusWrap .plusText .enter { line-height: 1; }
.plusWrap .plusText .enter a {
  padding: 12px 6px !important;
  margin: 0 !important;
}

/* ============================================================
   26.09 Футер. Было: название + одна ссылка «Kontakt». В оригинале
   там стояли адрес и телефон — сняты как чужие контакты. Взамен
   даём навигацию по разделам, чтобы блок не был пустым.
   ============================================================ */
/* ── футер: единый блок ниже, в конце файла ── */

/* Логотип ведёт на главную (в оригинале ссылки не было —
   привычное поведение, посетитель ожидает его). */
#logo a { display: inline-block; line-height: 0; }
#logo a:focus-visible { outline: 2px solid #00adee; outline-offset: 4px; }

/* На узком экране подложка всей полосы меню перечёркивала логотип.
   Правило body:has(.plusWrap) #menu{background} шло позже и перебивало
   сброс — гасим именно его, подложку оставляем только под пунктами. */
@media screen and (max-width: 900px) {
  body:has(.plusWrap) #menu {
    background: none !important;
    padding: 0 16px !important;
  }
  body:has(.plusWrap) #menu a {
    background: rgba(255,255,255,.92);
    padding: 9px 11px !important;
  }
}

/* Пункты меню — display:block, поэтому подложка растягивалась на всю
   строку (358px) и накрывала логотип. Сужаем до ширины текста. */
@media screen and (max-width: 900px) {
  body:has(.plusWrap) #menu a {
    display: inline-block;
    width: auto;
  }
  body:has(.plusWrap) #menu li { display: block; text-align: right; }
}

/* Шапка внутренних страниц: в шаблоне position:fixed — она «прилипала»
   к экрану и накрывала футер при прокрутке. Возвращаем в поток.
   Граница 900, а не 760: шаблонный fixed включается уже на 900px,
   и на планшете 768 прозрачный низ шапки перехватывал клики по футеру. */
@media screen and (max-width: 900px) {
  #header {
    position: static !important;
    width: auto !important;
    z-index: auto;
  }
  #contentSec { padding-top: 0 !important; }
}

/* На узком экране #logo в шаблоне — position:fixed, z-index:151: он
   «плавал» по экрану и при прокрутке ложился на футер. В поток. */
@media screen and (max-width: 900px) {
  #logo {
    position: static !important;
    z-index: auto !important;
    background: none !important;
  }
}

/* Таблица данных проекта: dt плавает влево на 200px, рядом dd —
   на телефоне пара не влезает и даёт горизонтальный скролл. Столбиком. */
@media screen and (max-width: 760px) {
  .projektDesc dl { margin: 0; }
  .projektDesc dt {
    float: none;
    width: auto;
    margin-top: 10px;
    opacity: .85;
    font-size: 13px;
  }
  .projektDesc dd { margin: 0; }
  .projektDesc { padding: 16px; }
}

/* Остатки переполнения на телефоне: в dd площадь записана как
   «320 m²» — неразрывный пробел держал строку; и таблица
   Referenzen шире экрана на несколько пикселей. */
@media screen and (max-width: 760px) {
  .projektDesc dd, .projektDesc dd span {
    white-space: normal !important;
    word-break: break-word;
  }
  #contentSec table { max-width: 100%; }
  #contentSec td { word-break: break-word; }
  body { overflow-x: hidden; }
}

/* .projektDesc уезжал вправо (left=363): его выталкивал незакрытый float
   от dt внутри соседних блоков. Обхватываем плавающие элементы. */
@media screen and (max-width: 760px) {
  .projektDesc { clear: both; }
  .projektDesc dl { display: flow-root; }
  /* ★ мой flex для порядка карточки схлопывал .accordion до 23px
     и выталкивал блок данных вправо. Явная ширина колонки. */
  .accordion:has(.image img) {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    align-items: stretch;
  }
  .accordion > * { max-width: 100%; }
}

/* Последние 6px переполнения: #page имеет padding 1% с двух сторон при
   width:100% — box-sizing по умолчанию content-box даёт 390+8. */
@media screen and (max-width: 760px) {
  #page, #contentWrap, #content { box-sizing: border-box; max-width: 100%; }
}

/* ★ Источник переполнения на телефоне: #logo шириной 70px+10 padding,
   а картинка внутри 160x149 при height:80px даёт ~86px ширины.
   Контейнер под содержимое, картинка по месту. */
@media screen and (max-width: 760px) {
  #logo {
    width: auto !important;
    height: auto !important;
    padding: 6px 0 6px 10px !important;
    box-sizing: border-box;
  }
  #logo img { height: 56px !important; width: auto !important; max-width: 100%; }
}

/* #header: логотип float:left + меню рядом дают 392 при ширине 382.
   Ставим в колонку — на телефоне они и так друг под другом. */
@media screen and (max-width: 760px) {
  #header {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
  }
  #header #logo { float: none !important; }
}


/* #content padding-top:600px рассчитан под фоновое фото с логотипом
   на десктопе. На узких экранах фото не выводится — отступ оставлял
   600px пустоты над шапкой. Снимаем там же, где шапка уходит в поток. */
@media screen and (max-width: 900px) {
  /* Только внутренние страницы: на главной под этим отступом лежит
     заставка .plusWrap, а меню шаблона смещено top:80/164px под неё —
     обнуление клало меню поверх заголовка заставки. */
  body:not(:has(.plusWrap)) #content { padding-top: 0 !important; }

  /* Главная: меню возвращаем в поток над заставкой, без шаблонного
     смещения, и разводим по вертикали с текстом. */
  body:has(.plusWrap) #menu {
    position: static !important;
    top: auto !important;
    margin: 0 0 14px !important;
    /* пункты меню float:left — контейнер их не содержал и схлопывался
       в 0px, заставка начиналась с той же строки и меню ложилось на H1.
       display здесь задан шаблоном как block !important (стр. 861),
       поэтому float снимаем у самих пунктов, а не меняем display. */
    overflow: hidden;
  }
  body:has(.plusWrap) #menu li { float: none !important; display: block; }
  body:has(.plusWrap) #content { padding-top: 0 !important; }
}

/* Хвост под футером: в шаблоне #footer{min-height:50%} — при коротком
   содержимом полоса тянулась на пол-экрана пустотой. Высота по контенту.
   Заголовки колонок имели левый отступ от span — выравниваем со ссылками. */
/* Ссылки футера блочные и в столбик: горизонтальная компенсация -6px
   от правила touch-target сдвигала их левее заголовка колонки.
   Оставляем только вертикальную, зону нажатия расширяем вправо. */
#footer a, .colFooter a {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 12px !important;
}

/* Заставка на узком экране: логотип впечатан в фоновое фото слева
   (замер: правый край 194px, низ ~220px при ширине 390). Меню ставим
   справа от него ровным столбиком с общим правым краем, а не лесенкой. */
@media screen and (max-width: 900px) {
  body:has(.plusWrap) #menu {
    padding: 8px 16px 0 0 !important;
    text-align: right;
  }
  body:has(.plusWrap) #menu li { text-align: right; }
  body:has(.plusWrap) #menu a {
    display: inline-block;
    min-width: 168px;
    text-align: right;
    background: rgba(255,255,255,.92);
    padding: 9px 12px !important;
    margin: 0 0 4px;
  }
}

/* Заставка на средних экранах: логотип впечатан в фотографию.
   Построчный скан тёмных пикселей при 768 и 900: буквы
   «POGGENHANS+MÜHL» идут до y≈570, подпись «ARCHITEKTEN BDA» —
   полоса 630–655. Карточка текста стояла на y≈210 и перечёркивала
   надпись белой плашкой. Отводим её под подпись с запасом ~40px.
   На телефоне логотип мелкий (низ ~222) и карточка уже ниже. */
@media screen and (min-width: 601px) and (max-width: 900px) {
  body:has(.plusWrap) .plusWrap { margin-top: 530px; }
}

/* Шаблон на ≤760px прятал описания проектов (.storry{visibility:hidden}),
   на живом сайте их раскрывал JS по нажатию. В статике JS нет, текст
   выводится сразу — на телефоне было невидимо 30 абзацев на /projekte
   и блок «Heimat» на /buero. */
@media screen and (max-width: 760px) {
  .storry { visibility: visible !important; }
}

/* Имена партнёров на /buero: шаблонный #00adee на белом = 2.56:1.
   Тот же тон 196°, затемнённый до 4.76:1 — как в футере. */
.buroProfil h4 { color: #0b7ba8 !important; }
.buroProfil h5 { margin: 2px 0 8px; }

/* Таблица биографии на телефоне: td width=150 из разметки
   сжимал текст до ~220px. Колонке лет — по содержимому. */
@media screen and (max-width: 760px) {
  .buroProfil .contenttable td:first-child { width: 5.5em !important; white-space: nowrap; padding-right: 10px; }
  .buroProfil .contenttable td p { margin: 0 0 6px; }
}

/* Подложка описаний rgba(250,250,250,.9): сквозь неё просвечивала граница
   фонового фото страницы — на телефоне посреди абзаца была «ступенька»
   оттенка. Непрозрачный тот же цвет. */
.accordion .storry { background-color: #fafafa !important; }

/* H1 разделов: в архиве страниц был только <title>, заголовка первого
   уровня не было ни на одной внутренней странице — иерархия начиналась
   с H2/H3. Название раздела берём из меню, вид — как у прочих
   заголовков шаблона. */
h1.pageH1 {
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #1a1a1a;
  margin: 0 0 18px;
  padding: 0 28px;
}
@media screen and (max-width: 760px) { h1.pageH1 { padding: 0 16px; font-size: 20px; } }

/* Уровни заголовков подняты (h3->h2, h4->h3, h5->h4), чтобы под H1 не было
   пропуска уровня. Вид оставляем прежним — селекторы шаблона были на h3/h4. */
.accordion .storry h2, .buroProfil > h2 { font-size: 18px; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 10px; }
.buroProfil h3.csc-firstHeader { font-size: 17px; letter-spacing: .04em; text-transform: uppercase; color: #0b7ba8 !important; margin: 26px 0 0; }
.buroProfil h4 { font-size: 14px; font-weight: 700; margin: 2px 0 8px; color: #1a1a1a !important; }

/* H1 разделов на десктопе попадал под абсолютное меню (низ меню 209,
   верх H1 200). Отводим ниже шапки; на узких экранах меню уже в потоке. */
@media screen and (min-width: 901px) {
  h1.pageH1 { margin-top: 24px; }
}

/* ═══════════════════════════════════════════════════════════════
   ФУТЕР — единый блок (26.09). Раньше правила лежали в 5 местах
   и перебивали друг друга; собрано в одном месте.
   Колонки лежат внутри обёртки #cNN.csc-default, а не прямо
   в #footer — сетку вешаем на неё.
   ═══════════════════════════════════════════════════════════════ */

#footer {
  height: auto;
  min-height: 0 !important;
  background: #0b7ba8;              /* 4.76:1 под белым, тон 196 шаблона */
  padding: 34px 28px 30px;
  margin-top: 10px;
  margin-bottom: 0;
}

/* Сетка: бренд шире, разделы равны. Раньше было flex+gap 6% —
   колонки жались влево, справа пустовало ~40% ширины. */
#footer > .csc-default {
  display: grid;
  grid-template-columns: minmax(240px, 1.6fr) repeat(2, minmax(150px, 1fr));
  gap: 26px 48px;
  align-items: start;
  max-width: 1100px;
}

#footer .fCol {
  float: none;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #fff;
  min-width: 0;                     /* иначе длинное слово рвёт колонку */
}

#footer .fBrand {
  font-size: 16px;
  line-height: 1.55;
  max-width: 24em;
}

/* Заголовки разделов: различаем ВЕСОМ и трекингом, а не прозрачностью.
   Было opacity:.85 — контраст падал до 3.89:1, ниже нормы 4.5. */
#footer .fHead {
  display: block;
  /* 2px: у ссылок свой padding 7px сверху, вместе даёт ровно тот же
     шаг, что между ссылками. С margin 10px разрыв читался как разрыв. */
  margin: 0 0 2px;
  padding: 0;
  font-size: 12px;
  font-weight: 700 !important;      /* шаблон глушит bold правилом выше */
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  opacity: 1;
}

#footer .fCol a {
  display: block;
  width: fit-content;
  max-width: 100%;
  color: #fff;
  text-decoration: none;
  padding: 7px 0;                   /* со строкой даёт цель ≥44px */
  margin: 0;
  border-bottom: 1px solid transparent;
  transition: border-color .18s cubic-bezier(.22,.61,.36,1);
}
#footer .fCol a:hover,
#footer .fCol a:active { border-bottom-color: rgba(255,255,255,.75); }
#footer .fCol a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  #footer .fCol a { transition: none; }
}

/* Копирайт: футер обрывался последней ссылкой без замыкающей строки. */
#footer .fBase {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.28);
  font-size: 13px;
  line-height: 1.5;
  color: #fff;
}

/* Планшет: бренд занимает всю строку, разделы под ним парой. */
@media screen and (max-width: 900px) {
  #footer > .csc-default {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 24px 36px;
  }
  #footer .fBrand { grid-column: 1 / -1; }
}

/* Телефон: одна колонка, ровный вертикальный ритм. */
@media screen and (max-width: 640px) {
  #footer { padding: 28px 20px 26px; }
  #footer > .csc-default {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  #footer .fCol { font-size: 16px; }
  #footer .fBrand { margin-bottom: 0; }
  /* Цель нажатия: строка 25.6px + padding 7px давала 41px.
     Доводим до 44px минимума через min-height. */
  #footer .fCol a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 4px 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ДОСТУПНОСТЬ (26.09, аудит)
   ═══════════════════════════════════════════════════════════════ */

/* 1. Контраст заголовков. Шаблонный #00adee на белом = 2.56:1,
   на подложке #fafafa = 2.45:1 — при норме 4.5 для текста 18px.
   Тот же тон 196°, затемнённый: 4.76 на белом, 4.56 на подложке.
   Затронуты 28 заголовков: названия проектов, разделы Referenzen,
   Heimat / Das Büro. */
h2,
.storry h2, .storry h3,
.imageWithCaption h3,
.accordion .storry h2,
h4 {
  color: #0b7ba8;
}

/* 2. Фокус с клавиатуры. У ссылок меню обводки не было вовсе —
   навигация табом была невидима. */
#menu a:focus-visible {
  outline: 2px solid #0b7ba8;
  outline-offset: 3px;
  border-radius: 1px;
}
/* На заставке меню лежит на фотографии — там обводка белая с тенью,
   иначе тёмная не видна на светлом снимке. */
body:has(.plusWrap) #menu a:focus-visible {
  outline: 2px solid #fff;
  box-shadow: 0 0 0 4px rgba(11,123,168,.85);
}

/* 3. Ссылка «к содержимому» для клавиатуры и читалок:
   видна только при фокусе, иначе уведена за экран. */
.skipLink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #0b7ba8;
  color: #fff;
  padding: 12px 18px;
  font-size: 15px;
}
.skipLink:focus {
  left: 0;
  outline: 2px solid #fff;
  outline-offset: -4px;
}