html,body {
    margin: 0;
    padding: 0;
}

body {
    background-color: white;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    font-family:Helvetica, Sans-serif;
    font-weight:lighter;
    font-size: 11pt;
    background-color:white;
}
html {
    overflow-y: scroll;
}

#wrap {
    width: 860px;
    margin: 0 auto; /* mittig zentrieren */
    padding: 0;
    background-color: white;
}

#kopf {
    margin: 0;
    padding: 0;
    height: 160px;
    background-color: white;
    position: fixed;
    top: 0;
    width: 860px;
    /*border-bottom-width: 1px;
    border-bottom-style: solid;*/
    z-index: 999;
}

#content {
    margin-top: 180px;
    margin-bottom: 15px;
}

#nameandlogo {
    float: left;
    width: 185px;
    margin-top: 65px;
    margin-left: 0px;
    z-index: 2;
}
#nameandlogo a {
    font-size:11pt;
    font-family:Helvetica, Sans-serif;
    font-weight:lighter;
    line-height: 15pt;

}

h1 {
    font-size: 10pt;
    font-weight: normal;
    letter-spacing: 2px;
    color: black;
    z-index: 2;
    margin-left:5px;
    margin-top:-1px;

}

h1 a {
    color: black;
}
#content h1 {
    padding-top: 0.6em;
}

h2 {
    font-size: 10pt;
    font-weight:normal;

}
#nameandlogo h3 {
    margin-left:100px;
    margin-top:-15px;
    font-family: Helvetica, Sans-serif;
    font-weight:lighter;

}
#nameandlogo h3 a{
	font-size: 9pt;
	color: #84d3a4;
}

#content p {
    margin: 0;
}

#menue {
    float: right;
    margin-top: 105px;
    z-index: 99;
}

#menue li { /*display: block;*/
    /*background-color: gray;*/
    margin-right:20px;
    float: left;

}

#ica {
    float: left;
    margin-top: 60px;
    float: right;
    z-index: 2;
}

#ica li { /*display: block;*/
    /*background-color: gray;*/
    margin-bottom: 5px;
    text-align: right;
}

#menue a {
    font-size: 12pt;
    font-family: Helvetica, Sans-serif;
	font-weight:lighter;
}
a {
    color: #464544;
    text-decoration: none;
}

#kopf li a {
    border-bottom: 1px solid #ffffff;
    padding-bottom: 2px;
}

#kopf li.selected_li a, #kopf li.childselected_li a {
    border-bottom: 1px solid #000;
    padding-bottom: 2px;
}

#kopf li:hover a {
    /*color: gray;*/
    border-bottom: 1px solid #000;
    padding-bottom: 2px;
}
a:hover {
    /*color: gray;*/
}

#kopf ul li {
    font-size: 10pt;
    list-style: none;
}

#longpicture {
    padding-top: 20px;
    margin-bottom: 60px;
}

#longpicture img {
    display: block;
}


#Tag img {
    margin-right: 0;
    float: left;
}

#menue span {
    /* aktive seite */
    color: red;
}

#littlepictures figure {
    float: left;
    width:185px;
    margin-bottom: 30px;
    -webkit-margin-start: 15px;
    -webkit-margin-end: 15px;
    -webkit-margin-after: 0;
    margin-start: 15px;
    margin-end: 15px;
    padding-bottom: 0;
    margin-after: 0;
}

#littlepictures img {
    display: block;
    border: none;
}

#littlepictures figcaption {
    height:50px;
    background-color: #e1e0e0;
    text-align: center;
    font-size:9pt;
    padding-top: 10px;
    padding-bottom: 10px;
    -webkit-margin-begin: 0;
    position: below;
}

#littlepictures figure a:hover img {
    opacity: 0.5;
}
td.formname {
    width: 120px;
    vertical-align: top;
}
input[type=text], textarea {
    border: 1px solid black;
}
input[type=text], textarea {
    width: 420px;
    padding: 2px;
}
input[type=text]:focus, textarea:focus {
    background-color: #fcffd0;
}
textarea {
    height: 400px;
}

#slides {
    width:860px;
    min-height:350px;
    padding-bottom:40px;
}

.slides_container {
    width:860px;
    overflow:hidden;
    position:relative;
    display:none;
}


.slides_container a {
    width:860px;
    height:350px;
    display:block;
}

.slides_container a img {
    display:block;
}
.pagination {
    margin: 9px auto 15px;
    float:right;
    width:70px;
    position: relative;
    z-index:100;
}

.pagination li {
    float:left;
    margin:0 1px;
    list-style:none;
}

.pagination li a {
    display:block;
    width:12px;
    height:0;
    padding-top:12px;
    background-image:url(/packages/nele_theme/images/pagination.png);
    background-position:0 0;
    float:left;
    overflow:hidden;
}

.pagination li.current a {
    background-position:0 -12px;
}

div.GPAREA:after {
	content: "";
}
.MarginRight40 {
    margin-right:40px;
    margin-bottom:20px;
}
.MarginBottom20 {
	margin-bottom:20px;
}

.BilderFloatRight{
    float:right;
    margin-bottom:20px;
}
.inhalt{
    float:left;
    background-color:transparent;
    width:260px;
    line-height: 13pt;
    text-align: justify;
}


.inhaltabout{
    width:570px;
    float:right;
    margin-top:0px;
   	line-height: 13pt;
}
.hovereffekt {
    display: block;
    float: left;
    width: 260px;
    height: 295px;
    text-align: center;
    line-height: 140%;
}
.hovereffekt span {
    display: block;
    padding: 107.5px 10px;
    color: white;
    position: absolute;
    margin-top: 0px;
    background-color: black;
    background-color: rgba(0,0,0,0.8);
    width: 240px;
    height: 80px;
    overflow: hidden;
}
/* spezialformatierung für während des editierens */
.gp_editing .hovereffekt span {
    display: block;
    opacity: 1;
    position: relative;
    margin-top: 0px;
}
.gp_editing .MarginRight40 {
    margin-bottom: 160px;

}


a img {
    border: none;
}

div.folkefloat {
    width: 900px;
    overflow: hidden;
}


/* special für 1 Spalte */
@media
only screen and(max-device-width: 320px)
{
    #wrap, #kopf {
	width: 300px;
    }
    div.folkefloat {
	width: 320px;
	overflow: hidden;
    }
    #slides {
	display: none;
    }
    @viewport {
	width: 359px;
	min-zoom: 1;
	max-zoom: 2;
    }
}



/* special für 3 Spalten */
@media
only screen and (min-device-width: 800px),
only screen and (min-device-width: 480px) and (orientation: landscape),
only screen and (max-resolution: 2dppx) and (max-width: 800px)
 {
    #wrap, #kopf {
	width: 860px;
    }
    div.folkefloat {
	width: 900px;
	overflow: hidden;
    }
    #slides {
	display: block;
    }
    @viewport {
	width: 900px;
	user-zoom: fixed;
    }
}

/* special für 2 Spalten */
@media
only screen and (max-device-width: 360px) and (orientation: portrait),
only screen and (max-resolution: 2dppx) and (max-width: 900px)
{
    #wrap, #kopf {
	width: 560px;
    }
    div.folkefloat {
	width: 600px;
	overflow: hidden;
    }
    #slides {
	display: none;
    }
    @viewport {
	width: 600px;
	user-zoom: fixed;
    }

}

@media
only screen and (max-width: 1000px)
{
    .inhalt {
	margin: 10px auto 10px auto;
	float: none;
	width: 500px;
	text-align: justify;
    }
    .BilderFloatRight {
	float: none;
	margin: 10px auto 10px auto;

    }
    #wrap {
	padding-left: 15px;
	padding-right: 15px;
    }
    #content {
	text-align: center;
    }
}

div.menuebutton {
    display: none;
    font-size: 36px;
    cursor: pointer;
}
.box-shadow-menu {
  position: relative;
  padding-left: 1.25em;
}
.box-shadow-menu:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 0.75em;
  height: 0.15em;
  background: black;
  box-shadow:
    0 0.25em 0 0 black,
    0 0.5em 0 0 black;
}

@media
only screen and (max-device-width: 700px),
only screen and (max-resolution: 2dppx) and (max-width: 760px)
{
    #menue {
	position: fixed;
	right: 20px;
	z-index: 9000;
    }
    #menueshort {
	display: block;
    }
    #menueinner {
	display: none;
	background-color: black;
	width: 150px;
	z-index: 999;
	position: fixed;
	right: 20px;
	padding: 15px;
	color: white;
    }
    #kopf #menueinner ul {
	margin: 15px auto 0 25px;
	padding: 0;
    }
    #kopf #menueinner ul li a {
	font-size: 18px;
	color: white;
    }
    #kopf #menueinner ul li a:link,
    #kopf #menueinner ul li a:visited,
    #kopf #menueinner ul li a:hover
    {
	color: white;
    }
    #kopf li a, #kopf li.child a {
	border-bottom: 1px solid #000;
    }
    #kopf li.selected_li a, #kopf li.childselected_li a,  #kopf li a:hover {
	border-bottom: 1px solid #ffffff;
    }
    #kopf #menueinner ul li {
	display: block;
	float: left;
	clear: both;
	margin-bottom: 20px;
    }
}

/* specials menue bei hoher pixeldichte */
@media only screen and (min-resolution: 2dppx)  and (max-width: 760px)
{
    body, p {
	font-size: 2.5vw;
    }

    div.menuebutton {
	font-size: 72px;
	margin-top: -25px;
    }
    #menueinner {
	width: 350px;
    }
    #kopf #menueinner ul li a {
	font-size: 32px;
    }
    #kopf #menueinner ul li {
	margin-bottom: 40px;
    }
    .hovereffekt span {
	height: 130px;
	margin-top: 145px;
    }
}
am-raw { display: block; }

/* ---- Automad image blocks (am-img-loader) ---- */
figure.am-block {
    margin: 0 0 20px 0;
}
figure.BilderFloatRight {
    float: right;
    margin: 0 0 20px 20px;
    max-width: 570px;
}
figure am-img-loader,
figure am-img-loader img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Clearfix: content-bereich nach floating images */
#content::after {
    content: "";
    display: block;
    clear: both;
}

/* Vollbreite Bilder (ueber-mich etc.) */
.inhaltabout figure.am-block,
.inhaltabout figure am-img-loader img {
    max-width: 860px;
    width: 100%;
}

/* ---- Kontaktformular (Automad mail block) ---- */
am-mail .am-field {
    margin-bottom: 16px;
}
am-mail .am-label {
    display: block;
    margin-bottom: 4px;
    font-weight: bold;
    color: #464544;
}
am-mail .am-input {
    display: block;
    width: 100%;
    max-width: 560px;
    padding: 6px 8px;
    border: 1px solid #aaa;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
}
am-mail .am-input:focus {
    background-color: #fcffd0;
    outline: none;
}
am-mail textarea.am-input {
    height: 180px;
    resize: vertical;
}
am-mail .am-error {
    color: red;
    font-size: 12px;
    display: none;
}
am-mail .am-button {
    display: inline-block;
    padding: 10px 28px;
    background-color: #84d3a4;
    color: #fff;
    border: none;
    font-size: 15px;
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: background-color 0.2s;
}
am-mail .am-button:hover {
    background-color: #5fbf88;
}
/* honeypot verstecken */
am-mail input[name="nickname"] {
    display: none;
}

/* ===== MOBILE RESPONSIVE (modern, ersetzt veraltete max-device-width-Queries) ===== */

/* Fluid base: feste px-Breiten aufheben */
#wrap {
    width: 100%;
    max-width: 860px;
    box-sizing: border-box;
}

/* Slider fluid */
#slides {
    width: 100%;
    max-width: 860px;
    box-sizing: border-box;
    min-height: 0;
}
.slides_container {
    width: 100%;
    max-width: 860px;
}
.slides_container a {
    width: 100%;
    height: auto;
    display: block;
}
.slides_container a img {
    width: 100%;
    height: auto;
}

/* Projekt-Grid: flexbox statt float */
div.folkefloat {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

/* ===== ≤ 680px: Mobile Layout ===== */
@media (max-width: 680px) {
    html {
        overflow-x: hidden;
    }

    #wrap {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Header: volle Breite, auto-Höhe */
    #kopf {
        width: 100%;
        left: 0;
        right: 0;
        height: auto;
        min-height: 70px;
        padding: 10px 12px;
        box-sizing: border-box;
    }

    #content {
        margin-top: 90px;
    }

    #nameandlogo {
        margin-top: 12px;
        width: 90px;
    }

    #nul_logo img {
        max-width: 90px;
        height: auto;
    }

    #menue {
        margin-top: 14px;
    }

    /* Slider auf Mobile ausblenden */
    #slides {
        display: none;
    }

    /* Projekte: 2 Spalten */
    div.folkefloat {
        justify-content: space-between;
    }

    a.hovereffekt {
        width: calc(50% - 6px) !important;
        height: auto !important;
        margin-right: 0 !important;
        margin-bottom: 12px;
        display: block;
        float: none;
        position: relative;
        box-sizing: border-box;
    }

    a.hovereffekt img {
        width: 100% !important;
        height: auto !important;
        display: block;
    }

    /* Hover-Overlay auf Touch verstecken */
    a.hovereffekt span {
        display: none;
    }
}

/* ===== 681px – 860px: Tablet (2 Spalten) ===== */
@media (min-width: 681px) and (max-width: 860px) {
    #wrap {
        padding-left: 12px;
        padding-right: 12px;
    }

    #kopf {
        width: 100%;
        left: 0;
        right: 0;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
    }

    div.folkefloat {
        justify-content: flex-start;
    }

    a.hovereffekt {
        width: 220px !important;
        height: 249px !important;
        margin-right: 20px !important;
        margin-bottom: 20px;
    }

    a.hovereffekt img {
        width: 220px !important;
        height: 249px !important;
    }

    .hovereffekt span {
        width: 200px;
        height: 60px;
        padding: 94.5px 10px;
    }
}

/* ===== MOBILE FIX 2: Slider einblenden, Menü nicht fixiert ===== */

@media (max-width: 680px) {
    /* Header nicht sticky – scrollt mit */
    #kopf {
        position: relative;
        top: auto;
    }

    /* Content braucht keinen Abstand mehr für fixed header */
    #content {
        margin-top: 10px;
    }

    /* Menü oben rechts, nicht fixed */
    #menue {
        position: static;
        float: right;
        margin-top: 15px;
    }

    /* Burger-Menü-Dropdown ebenfalls nicht fixed */
    #menueinner {
        position: absolute;
        right: 12px;
    }

    /* Slider einblenden, volle Breite */
    #slides {
        display: block !important;
        width: 100%;
        min-height: 0;
        padding-bottom: 20px;
    }

    .slides_container {
        display: block;
    }
}

/* ===== MOBILE FIX 3: Schrift größer, Bilder 100% auf Unterseiten ===== */

@media (max-width: 680px) {
    /* Schrift auf Unterseiten größer */
    body {
        font-size: 15px;
        line-height: 1.6;
    }

    #content p,
    #content .ce-paragraph,
    am-raw p {
        font-size: 15px;
        line-height: 1.6;
    }

    h1 { font-size: 13px; }
    h2 { font-size: 13px; }

    /* Bilder: Float aufheben, volle Breite */
    .BilderFloatRight,
    figure.BilderFloatRight {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 16px 0 !important;
    }

    figure.am-block {
        width: 100%;
        max-width: 100%;
        margin: 0 0 16px 0;
    }

    figure am-img-loader,
    figure am-img-loader img,
    am-img-loader img,
    #content img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block;
    }

    /* inhaltabout (z.B. über-mich) volle Breite */
    .inhaltabout {
        width: 100%;
        float: none;
    }

    .inhalt {
        width: 100%;
        float: none;
    }
}

/* ===== MOBILE FIX 4: Schrift größer, Slider Höhe fix ===== */

/* Slider: aspect-ratio statt height:auto, damit JS korrekte Höhe liest */
.slides_container a {
    aspect-ratio: 860 / 350;
    height: auto;
}

.slides_container a img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    display: block;
}

@media (max-width: 680px) {
    /* Schrift deutlich größer */
    body {
        font-size: 18px !important;
        line-height: 1.65;
    }

    #content p,
    #content .ce-paragraph,
    am-raw p {
        font-size: 18px !important;
        line-height: 1.65;
    }
}

/* ===== MOBILE FIX 5: Burger-Menü kleiner + weiter oben rechts ===== */

@media (max-width: 680px) {
    #menue {
        margin-top: 4px !important;
    }

    div.menuebutton {
        font-size: 22px !important;
        margin-top: 0 !important;
    }
}

/* HiDPI Mobile */
@media only screen and (min-resolution: 2dppx) and (max-width: 680px) {
    div.menuebutton {
        font-size: 22px !important;
        margin-top: 0 !important;
    }
}

/* ===== MOBILE FIX 6: Burger 25% größer (22px → 28px) ===== */

@media (max-width: 680px) {
    div.menuebutton {
        font-size: 28px !important;
    }
}

@media only screen and (min-resolution: 2dppx) and (max-width: 680px) {
    div.menuebutton {
        font-size: 28px !important;
    }
}

/* ===== MOBILE FIX 7: Mehr Abstand Header, größere Texte/Titel ===== */

@media (max-width: 680px) {
    /* Mehr Luft unter Logo/Menü */
    #kopf {
        padding-bottom: 18px !important;
    }

    #content {
        margin-top: 20px !important;
    }

    /* Fließtext größer */
    body {
        font-size: 20px !important;
        line-height: 1.7;
    }

    #content p,
    #content .ce-paragraph,
    am-raw p {
        font-size: 20px !important;
        line-height: 1.7;
    }

    /* Projekttitel (h2) deutlich größer */
    h2, #content h2 {
        font-size: 22px !important;
        line-height: 1.3;
        margin-bottom: 0.4em;
    }

    h1, #content h1 {
        font-size: 18px !important;
    }
}

/* ===== FIX: Hover-Overlay korrekt auf der Karte positioniert ===== */

.hovereffekt {
    position: relative;
}

/* ===== Hover-Overlay deaktiviert ===== */

.hovereffekt span {
    display: none !important;
}

/* ===== FIXES: Slider, Hover, 3-Spalten ===== */

/* --- Slider: vw statt % damit absolute Positionierung korrekt bleibt --- */
.slides_container a {
    width: 100vw !important;
    max-width: 860px !important;
    height: auto !important;
    aspect-ratio: auto !important;   /* aspect-ratio-Override aufheben */
}

.slides_container a img {
    width: 100% !important;
    height: auto !important;
    object-fit: fill !important;     /* keine crop-Logik, Bild füllt exakt */
    display: block !important;
}

/* --- Hover: nur auf Mobile deaktiviert --- */
.hovereffekt span {
    display: block !important;       /* Desktop: Hover wieder an */
}

@media (max-width: 680px) {
    .hovereffekt span {
        display: none !important;    /* Mobile: aus */
    }
}

/* --- 3-Spalten Projekt-Grid auf Desktop wiederherstellen --- */
@media (min-width: 681px) {
    div.folkefloat {
        width: 900px;
        display: block;              /* float-basiertes Layout wie original */
    }

    a.hovereffekt {
        float: left;
        width: 260px !important;
        height: 295px !important;
        margin-right: 40px !important;
        margin-bottom: 20px;
    }

    a.hovereffekt img {
        width: 260px !important;
        height: 295px !important;
    }
}

/* ===== MOBILE FIX 10: Header als Flexbox, Logo + Burger bündig ===== */

@media (max-width: 680px) {
    #kopf {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 12px !important;
        height: auto !important;
        box-sizing: border-box !important;
    }

    #nameandlogo {
        float: none !important;
        margin: 0 !important;
        width: auto !important;
    }

    #nul_logo img {
        display: block;
        max-height: 40px;
        width: auto !important;
        max-width: none !important;
    }

    #menue {
        float: none !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    div.menuebutton {
        margin: 0 !important;
        line-height: 1 !important;
    }
}

/* ===== FIX: Hover nur bei :hover, Slider Desktop ===== */

/* Hover: rein CSS-gesteuert, kein JS-Konflikt */
.hovereffekt span {
    display: none !important;
}
.hovereffekt:hover span {
    display: block !important;
}
@media (max-width: 680px) {
    .hovereffekt:hover span {
        display: none !important;
    }
}

/* Slider: Desktop mit originaler Höhe, Mobile fluid */
.slides_container a {
    height: 350px !important;
}
@media (max-width: 680px) {
    .slides_container a {
        height: calc(100vw * 350 / 860) !important;
    }
}

/* ===== Slider Desktop: gleiche Breite wie Projekt-Grid (900px) ===== */

@media (min-width: 681px) {
    #slides,
    .slides_container {
        width: 900px !important;
        max-width: none !important;
    }

    .slides_container a {
        width: 860px !important;
    }
}

/* ===== Pagination: rechts innerhalb der sichtbaren 860px ===== */

@media (min-width: 681px) {
    .pagination {
        margin-right: 40px;
    }
}

/* ===== Mobile Dropdown: unter Header, kleinere Texte ===== */

@media (max-width: 680px) {
    #menueinner {
        position: absolute !important;
        top: 100% !important;
        right: 12px !important;
        width: 140px !important;
        padding: 12px !important;
    }

    #kopf #menueinner ul li a {
        font-size: 14px !important;
    }

    #kopf #menueinner ul li {
        margin-bottom: 12px !important;
    }
}

/* ===== Mobile Dropdown: Schrift etwas größer ===== */

@media (max-width: 680px) {
    #kopf #menueinner ul li a {
        font-size: 17px !important;
    }
}

@media (max-width: 680px) {
    #kopf #menueinner ul li a {
        font-size: 22px !important;
    }
}