/*

Kleine Liebchen

Vintage Design

*/

@font-face {

    font-family: 'English111 Vivace BT';

    src: url('css/fonts/E111Viva.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'FlemishScript BT';

    src: url('css/fonts/Flemscrn.ttf')

    format('truetype');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'Roundhand BT';

    src: url('css/fonts/Rndhndn.ttf')

    format('truetype');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'English157 BT';

    src: url('css/fonts/Engl157n.ttf')

    format('truetype');

    font-weight: normal;

    font-style: normal;

}

* {

    margin:0;

    padding:0;

    box-sizing:border-box;

}


body {

    margin: 0;

    font-family: 'Cormorant Garamond', serif;

    color: #4a3525;

}


/* LINKS */

a {

    text-decoration:none;

    color:#5b3428;

}


a:hover {

    color:#b58b4c;

}


/* ================= HEADER ================= */


header {

    text-align: center;

}


/* =========================

   LOGO HEADER

========================= */

.logo {

    text-align:center;

    padding-top:20px;

}


/* =========================

   LOGO HEADER

========================= */

.logo {

    text-align:center;

    padding-top:20px;


}


.logo img {

    display:block;

    margin:0 auto;

    width:900px;

    max-width:150%;

    height:auto;

}


.subtitle {

    margin-top:10px;

    letter-spacing:3px;

    font-size:16px;

    color:#70452d;

}


nav {

    margin-top:20px;

}


nav ul {

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    list-style:none;

    gap:35px;

}


nav a {

    font-size:17px;

    letter-spacing:1px;

    color:#4a3525;

}


/* ================= HERO ================= */


.hero {

    width:90%;

    max-width:1200px;

    height:450px;

    margin:40px auto;

    position:relative;

    overflow:hidden;

}

/* ==========================

   HERO ECKEN

========================== */


.hero {

    position:relative;

    overflow:hidden;

}


.hero-corner {

    position:absolute;

    width:190px;

    opacity:0.30;

    z-index:5;

    pointer-events:none;

}


.hero-corner img {

    width:100%;

    height:auto;

    display:block;

}


/* oben links */

.hero-corner-tl {

    top:0;

    left:0;

}


/* oben rechts */

.hero-corner-tr {

    top:0;

    right:0;

    transform:scaleX(-1);

}


/* unten links */

.hero-corner-bl {

    bottom:0;

    left:0;

    transform:scaleY(-1);

}


/* unten rechts */

.hero-corner-br {

    bottom:0;

    right:0;

    transform:scale(-1);

}

/* Hintergrundbild */

.hero-background {

    position:absolute;

    inset:0;

}


.hero-background img {

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

}


/* weicher Übergang */

.hero-background\:after {

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        to right,

        #eee2c9 0%,

        rgba(238,226,201,0.95) 25%,

        rgba(238,226,201,0.40) 55%,

        transparent 75%

    );

}


/* Rahmen */

.hero\:before {

    content:"";

    position:absolute;

    inset:10px;

    border:1px solid rgba(181,139,76,0.55);

    z-index:3;

    pointer-events:none;

}


/* Text */

.hero-text {

    position:absolute;

    left:50px;

    top:50%;

    transform:translateY(-50%);

    width:360px;

    text-align:center;

    z-index:4;

}


.hero-text h1 {

    font-size:52px;

    line-height:1.1;

    text-transform:uppercase;

    letter-spacing:3px;

    color:#5b3428;

}


.hero-text p {

    font-size:20px;

    line-height:1.5;

    margin-top:20px;

}


/* ================= ORNAMENTE ================= */


.corner {

    position:absolute;

    width:180px;

    height:180px;

    opacity:1;

    z-index:6;

}


.corner-left-top {

    top:0;

    left:0;

}


.corner-right-top {

    top:0;

    right:0;

    transform:scaleX(-1);

}


/* ================= DIVIDER ================= */


.divider-small {

    width:180px;

    height:auto;

    margin:20px auto;

    display:block;

}


.divider-large {

    width:320px;

    max-width:80%;

    height:auto;

    margin:20px auto;

    display:block;

}


/* ================= CLAIM ================= */


.claim {

    text-align:center;

    margin:35px auto;

    font-size:24px;

    letter-spacing:6px;

    color:#70452d;

    font-weight:600;

}


.claim .divider-small {

    width:260px;

    margin:15px auto;

}

.ornament-line {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

    width:35%;

    margin:15px auto;

}


.ornament-line span {

    height:1px;

    background:#b58b4c;

    flex:1;

    max-width:350px;

}


.ornament-line img {

    width:180px;

    height:auto;

}

/* ================= KARTEN ================= */


.boxes {

    width:95%;

    max-width:1800px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}

.box {

    background: rgba(255,255,255,0.65);

    border: 1px solid #c8aa78;

    padding: 20px;

    text-align: center;

    position: relative;

    height: 520px;

    box-shadow: 0 8px 20px rgba(80,50,20,0.15);

    border-radius: 10px 10px 0 0;

    overflow: hidden;

    background-image: url("img/design/altpapier.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}

/* =========================

   BOX HEADER

========================= */

.box-header {

    background: #542b2b;

    margin: -20px -20px 20px -20px;

    padding: 8px 12px 7px;

    text-align: center;

    border-bottom: 1px solid #9b7450;

    border-radius: 10px 10px 0 0;

}


/* Kleines Kleine-Liebchen-Logo */

.box-header-logo {

    display: block;

    width: 130px;

    max-width: 65%;

    height: auto;

    margin: 0 auto 2px;

    filter: brightness(0) invert(1);

}


.box-header-title {

    font-family: 'Cormorant Garamond', serif;

    font-size: 22px;

    font-style: italic;

    font-weight: 500;

    line-height: 1;

    color: #ead9ba;

    margin: 2px 0 5px;

}


/* Linie — Divider — Linie */

.box-header-ornament {

    width: 75%;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

}

.box-header-ornament span {

    flex: 1;

    height: 1px;

    background: #b58b4c;

}

.box-header-ornament img {

    display: block;

    width: 48px;

    height: auto;

}

.box-inner-title {

    text-align: center;

    margin: 20px 0 18px;

}

.box-inner-title h2 {

    font-family: 'English111 Vivace BT', cursive;

    font-size: 32px;

    font-weight: normal;

    color: #5b3428;

    /* 

    font-family: 'Roundhand BT', cursive;

    font-family: 'FlemishScript BT', cursive;

    font-family: 'English157 BT', cursive;

    font-family: 'English111 Vivace BT', cursive;

    */


}

.box-title-corner {

    position: absolute;

    top: 72px;          /* direkt unter dem braunen Titel */

    width: 78px;

    height: auto;

    opacity: 0.35;

    z-index: 4;

    pointer-events: none;

}

.box-title-corner img {

    display: block;

    width: 100%;

    height: auto;

}

.box-title-corner-left {

    left: 0;

}

.box-title-corner-right {

    right: 0;

    transform: scaleX(-1);

}


.box-inner-divider {

    display: block;

    width: 90px;

    height: auto;

    margin: 8px auto 0;

}

.box\:before {

    content:"";

    position:absolute;

    inset:8px;

    border:1px solid rgba(181,139,76,0.5);

}


.box-image {

    width: 100%;

    height: 180px;

    object-fit: cover;

    display: block;

}


.box p {

    font-size:18px;

    line-height:1.5;

}


/* ================= FOOTER ================= */


footer {

    width:90%;

    max-width:1200px;

    margin:40px auto;

    padding:25px;

    text-align:center;

    border-top:1px solid #c8aa78;

}


.social {

    margin-top:20px;

    display:flex;

    justify-content:center;

    gap:20px;

}


.social img {

    width:42px;

    height:42px;

}


.social i {

    font-size:40px;

    color:#70452d;

}


/* ================= MOBILE ================= */


.hero-text h1 {

    font-size:38px;

}


.claim {

    font-size:17px;

    letter-spacing:3px;

}

.contact-icon {

    width:45px !important;

    height:45px !important;

    object-fit:contain !important;

    border:none !important;

    box-shadow:none !important;

    margin:0 auto !important;

}

.contact-links a {

    display:flex;

    flex-direction:column;

    align-items:center;

}

.contact-list {
    width: 250px;
    margin: 20px auto 0;
}


.contact-item {

    display:grid;

    grid-template-columns:40px 1fr;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

    text-decoration:none;

    color:#5b3428;

}


.contact-item i {

    width:40px;

    text-align:center;

    font-size:22px;

}


.contact-item .contact-icon {

    width:28px !important;

    height:28px !important;

    object-fit:contain;

    margin:auto;

}


.contact-item span {

    text-align:left;

    font-size:15px;

    line-height:1.2;

}

.contact-item div {

    text-align:left;

    font-size:13px;

    line-height:1.35;

}


.contact-item\:hover {

    color:#b58b4c;

}

/* =========================

   Alte Papier Optik

========================= */

body {

    background-color: #f2ead8;

    background-image:

        radial-gradient(

        ellipse 190px 165px at left top,

    	#382817 0%,

    	rgba(56, 40, 23, 0.90) 18%,

   	 	rgba(82, 60, 34, 0.55) 40%,

    	rgba(110, 84, 50, 0.25) 60%,

    	rgba(130, 105, 70, 0.08) 75%,

    	transparent 90%

		),

		radial-gradient(

    		ellipse 190px 165px at right top,

    		#382817 0%,

    		rgba(56, 40, 23, 0.90) 18%,

    		rgba(82, 60, 34, 0.55) 40%,

    		rgba(110, 84, 50, 0.25) 60%,

    		rgba(130, 105, 70, 0.08) 75%,

    		transparent 90%

			),

        linear-gradient(

            rgba(239, 227, 200, 0.82),

            rgba(239, 227, 200, 0.82)

       		 ),

        url("img/design/altpapier.png");

    background-repeat:

        no-repeat,

        no-repeat,

        no-repeat,

        repeat;

    background-position:

        left top,

        right top,

        left top,

        left top;

    background-attachment:

        fixed,

        fixed,

        fixed,

        fixed;

    background-size:

        160px 165px,

    	160px 165px,

    	100% 100%,

    	cover;

}

/* Seitenrahmen */

body:before {

    content:"";

    position:fixed;

    inset:6px;

    border:1px solid rgba(181,139,76,0.55);

    pointer-events:none;

    z-index:-10;
}

body::after {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 10;

    background-image:

        url("/img/design/patina-edge.png"),

        url("/img/design/patina-edge.png");

    background-position:

        left top,

        right top;

    background-repeat:

        repeat-y,

        repeat-y;

    background-size:

        140px auto,

        140px auto;

}

/* Ecken */

.page-corner {

    position:fixed;

    width:260px;

    z-index:30;

    opacity:0.55;

    pointer-events:none;


}


.page-corner img {

    width:100%;

    height:auto;

}


.corner-tl {

    top:0;

    left:0;

}


.corner-tr {

    top:0;

    right:0;

    transform:scaleX(-1);

}


.corner-bl {

    bottom:0;

    left:0;

    transform:scaleY(-1);

}


.corner-br {

    bottom:0;

    right:0;

    transform:scale(-1);

}

.contact-links a {

    color:#5b3428;

    text-decoration:none;

}


.contact-links a:hover {

    color:#b58b4c;

}

.ebay-link {

    margin: 0;

}

.ebay-link a {

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:3px;

}

.contact-list {

    position: relative;

    z-index: 10;

}

.contact-item {

    position: relative;

    z-index: 11;

    pointer-events: auto;

}

/* =========================

   FOTOGALERIE SEITENTITEL

========================= */

.gallery-title {

    text-align: center;

     margin:15px auto 20px;

}

.gallery-title h1 {

    font-family: 'English111 Vivace BT', cursive;

    font-size: 52px;

    font-weight: normal;

    color: #5b3428;

    margin: 0 0 10px;

}

.gallery-title .divider-large {

    display: block;

    width: 320px;

    max-width: 80%;

    height: auto;

    margin: 0 auto;

}

/* =========================

   FOTOGALERIE

========================= */

.gallery-grid {

    width: 90%;

    max-width: 1200px;

    margin: 0 auto 50px;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 25px;

}

.gallery-item {

    padding: 10px;

    background-image: url("img/design/altpapier.jpg");

    background-size: cover;

    background-position: center;

    border: 1px solid #c8aa78;

    box-shadow: 0 8px 20px rgba(80,50,20,0.15);

    position: relative;

}

.gallery-item img {

    display: block;

    width: 100%;

    height: 260px;

    object-fit: cover;

}

/* =========================

   FOTOGALERIE KATEGORIEN

========================= */

.gallery-filter {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin: 0 auto 30px;

}

.gallery-filter button {

    padding: 7px 14px;

    border: 1px solid #c8aa78;

    border-radius: 4px;

    background: rgba(255,255,255,0.45);

    font-family: 'Cormorant Garamond', serif;

    font-size: 13px;

    color: #5b3428;

    cursor: pointer;

}

.gallery-filter button:hover {

    background: #ead9ba;

}

.gallery-filter button.active {

    background: #542b2b;

    color: #ead9ba;

    border-color: #542b2b;

}

/* =========================

   GALERIE LIGHTBOX

========================= */

.gallery-item img {

    cursor: pointer;

    transition: transform 0.3s ease;

}

.gallery-item img:hover {

    transform: scale(1.05);

}


.lightbox {

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,0.75);

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 999;

}


.lightbox img {

    max-width: 85%;

    max-height: 85%;

    border: 8px solid #ead9ba;

}


.lightbox-close {

    position: absolute;

    top: 30px;

    right: 40px;

    font-size: 40px;

    color: white;

    cursor: pointer;

}

/* =========================

   GALERIE BILDER

========================= */

.gallery-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

    width: 90%;

    margin: 30px auto;

}


.gallery-item {

    text-align: center;

    background: rgba(255,255,255,0.35);

    padding: 12px;

    border: 1px solid rgba(181,139,76,0.5);

    box-shadow: 0 3px 8px rgba(0,0,0,0.15);

}


.gallery-item img {

    width: 100%;

    height: 260px;

    object-fit: cover;

    cursor: pointer;

    transition: transform 0.3s ease;

}


.gallery-item img:hover {

    transform: scale(1.05);

}


.gallery-item .gallery-category {

    margin-top: 15px;

    font-family: 'Cormorant Garamond', serif;

    font-size: 20px;

    font-weight: 600;

}

/* =========================

   STARTSEITE GALERIE VORSCHAU

========================= */

.gallery-preview {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    grid-auto-rows:80px;

    gap:8px;

    width:90%;

    margin:15px auto;

}


.gallery-preview img {

    width: 100%;

    height: 80px;

    object-fit: cover;

    border: 1px solid rgba(181,139,76,0.6);

}

/* =========================

   FOTOGALERIE ABSTÄNDE

========================= */

.gallery-title {

    text-align: center;

    margin: 10px auto 20px;

}


.gallery-title h1 {

    margin-bottom: 5px;

}


.gallery-title .divider-large {

    margin: 5px auto 15px;

}


.gallery-filter {

    margin-top: 10px;

    margin-bottom: 25px;

}


.gallery-grid {

    margin-top: 0;

}

#ueber .box-image {

    height: 260px;

}

/* =========================

   ÜBER MICH LAYOUT

========================= */

.about {

    width: 90%;

    max-width: 1200px;

    margin: 40px auto;

    position: relative;

    padding: 60px;

    min-height: 1200px;

    background-image: url("img/design/altpapier.jpg");

    background-size: cover;

    background-position: center;

    border: 1px solid #c8aa78;

    box-shadow: 0 8px 20px rgba(80,50,20,0.15);

    overflow: hidden;

}


/* Ecken bleiben im Rahmen */

.about-corner {

    position:absolute;

    width:190px;

    opacity:0.55;

    z-index:2;

}

.about-corner img {

    width:100%;

    display:block;

}

.about-corner-tl {

    top:0;

    left:0;

}

.about-corner-tr {

    top:0;

    right:0;

    transform:scaleX(-1);

}

.about-corner-bl {

    bottom:0;

    left:0;

    transform:scaleY(-1);

}

.about-corner-br {

    bottom:0;

    right:0;

    transform:scale(-1);

}


/* Inhalt */

.about-content {

    position:relative;

    z-index:3;

    display:grid;

    grid-template-columns:360px 1fr;

    gap:55px;

    max-width:1050px;

    margin:0 auto;

    align-items:start;

}

/* Atelier Bild */

.about-image img {

    width:100%;

    display:block;

    mask-image:radial-gradient(

        ellipse,

        black 60%,

        transparent 100%

    );

    -webkit-mask-image:radial-gradient(

        ellipse,

        black 60%,

        transparent 100%

    );

}

/* Text */

.about-text {

    font-family:'Cormorant Garamond', serif;

    font-size:20px;

    line-height:1.5;

}


/* Überschrift */

.about-content h2 {

    font-size:32px;

    color:#70452d;

    margin-bottom:20px;

}


/* kleine Überschrift entfernen */

.about-content h3 {

    display:none;

}

/* =========================

   ÜBER MICH SEITENTITEL

========================= */

.about-title {

    text-align:center;

    margin:30px auto 20px;

}


.about-title h1 {

    font-family:'English111 Vivace BT', cursive;

    font-size:52px;

    font-weight:normal;

    color:#4a3525;

    text-align:center;

    margin:0;

}

/* =========================

   STARTSEITE BOX 2 ÜBER MICH

========================= */

.about-preview-image {

    width:100%;

    height:360px;

    object-fit:cover;

    display:block;


    /* weiche Bildränder */

    mask-image: radial-gradient(

        ellipse,

        black 55%,

        transparent 100%

    );

    -webkit-mask-image: radial-gradient(

        ellipse,

        black 55%,

        transparent 100%

    );

}

/* =========================

   BOX 2 ÜBER MICH VORSCHAU

========================= */

.about-preview {

    display:flex;

    align-items:flex-start;

    gap:25px;

    margin-top:20px;

}


.about-preview-image {

    width:150px;

    height:250px;

    object-fit:cover;


    /* weiche Ränder */

    mask-image:radial-gradient(

        ellipse,

        black 55%,

        transparent 100%

    );

    -webkit-mask-image:radial-gradient(

        ellipse,

        black 55%,

        transparent 100%

    );

}


.about-preview-text {

    flex:1;

	font-size: 10px;

    text-align:left;

    line-height:1.5;

    font-family: "English111 Vivace BT" !important;

    font-size: 10px;

    font-weight: normal;

}

.about-preview-text h3 {

    font-family:'English111 Vivace BT', cursive;

    font-size:10px;

    font-weight:normal;

    color:#5b3428;

    margin:0 0 8px 0;

}


.about-preview-text p {

    font-size:10px;

    line-height:1.3;

}

/* Vorschau Über mich Box */

.about-preview {

    display:flex;

    align-items:flex-start;

    gap:25px;

    margin:25px 20px;

}

.about-preview-image {

    width:150px;

    height:250px;

    object-fit:cover;

    display:block;

    mask-image:radial-gradient(

        ellipse,

        black 55%,

        transparent 100%

    );

    -webkit-mask-image:radial-gradient(

        ellipse,

        black 55%,

        transparent 100%

    );

}

/* =========================

   AUSZEICHNUNGEN VORSCHAU Box 3

========================= */

.award-preview {

    text-align:center;

    margin-top:20px;

}


.award-preview-image {

    width:100%;

    max-width:300px;

    display:block;

    margin:0 auto 15px;

    mask-image: radial-gradient(

        ellipse,

        black 60%,

        transparent 100%

    );

    -webkit-mask-image: radial-gradient(

        ellipse,

        black 60%,

        transparent 100%

    );

}

/* =========================

   AWARDS SEITE

========================= */

.awards {

    width: 90%;

    max-width: 1200px;

    margin: 40px auto;

    position: relative;

    padding: 60px;

    min-height: 1200px;

    background-image: url("img/design/altpapier.jpg");

    background-size: cover;

    background-position: center;

    border: 1px solid #c8aa78;

    box-shadow: 0 8px 20px rgba(80,50,20,0.15);

    overflow: hidden;

}

.awards-content {

    text-align:center;

}


.awards-content h2 {

    font-family:"English111 Vivace BT", cursive;

    font-size:42px;

    font-weight:normal;

    color:#5b3428;

}


.awards-main-image {

    width:80%;

    max-width:650px;

    margin:30px auto;

    display:block;


    mask-image:radial-gradient(

        ellipse,

        black 65%,

        transparent 100%

    );

    -webkit-mask-image:radial-gradient(

        ellipse,

        black 65%,

        transparent 100%

    );

}


.awards-text {

    max-width:650px;

    margin:auto;

    text-align:left;

    font-family:'Cormorant Garamond', serif;

    font-size:20px;

    line-height:1.5;

}

    #cookie-banner {

    position:fixed;

    bottom:0;

    left:0;

    width:100%;

    background:#4a3525;

    color:#fff;

    padding:15px;

    text-align:center;

    z-index:9999;

    font-size:16px;

}

/* Auszeichnungen - warme braune Textfarbe */

.awards-text {

    color: #7a5a3a;

}


.awards-text p {

    color: #7a5a3a;

}


.award-entry h2 {

    color: #6b4328;

}


.award-entry h3 {

    color: #8b6a45;

}


.award-entry strong {

    color: #5a3820;

}


.award-entry a {

    color: #8b5e34;

}


.award-entry a:hover {

    color: #b58b4c;

}

#cookie-banner a {

    color:#e6c88b;

}


#cookie-accept {

    margin-left:20px;

    padding:8px 25px;

    border:none;

    background:#b58b4c;

    color:white;

    cursor:pointer;

}

.disclaimer-text {

    max-width:900px;

    margin:auto;

    line-height:1.6;

    text-align:left;

}


.disclaimer-text h3 {

    font-family:"English111 Vivace BT";

    font-size:32px;

    font-weight:normal;

    margin-top:35px;

}

.modal {

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,0.45);

    z-index:9999;

}


.modal-content {

    position:relative;

    max-width:850px;

    max-height:95vh;

    overflow:auto;

    margin:5% auto;

    padding:50px;

    color: #382817;

    background:#f3e6c8;

    border:1px solid #b58b4c;

    background-image:url("img/design/altpapier.png");

    font-weight: bold;

}


.modal-content h2 {

    text-align:center;

    font-family:"English111 Vivace BT";

    font-size:42px;

     color: #382817;

}


.modal-close {

    position:absolute;

    right:20px;

    top:15px;

    border:none;

    background:none;

    font-size:35px;

    cursor:pointer;

    color:#4a3525;

}

.modal-content p {

	color: #382817;

}

.modal-content li {

    color: #382817;

}

.impressum-name {

    background: transparent;

    padding: 0;

    margin: 20px 0;

    color: #382817;

    text-align: center;

}

.impressum-adresse-bild {

    display:block;

    width:70%;

    max-width:400px;

    height:auto;

    margin:15px auto;

}


.figuren-stimme {

    max-width: 700px;

    margin: 45px auto 20px;

    text-align: left;

}

.figuren-stimme .divider-small {

    display: block;

    margin: 0 auto 20px;

}

.figuren-stimme h2 {

    text-align: center;

    margin-bottom: 24px;

}

.figuren-stimme p {

    line-height: 1.65;

    margin-bottom: 16px;

}

.figuren-stimme .figuren-abschluss {

    text-align: center;

    font-style: italic;

    margin-top: 26px;

}


/* =========================================================
   RESPONSIVE DESIGN
   Alle geräteabhängigen Abweichungen stehen ab hier.
   ========================================================= */

/* ---------- TABLET / KLEINERE BILDSCHIRME: bis 900px ---------- */
@media (max-width: 900px) {

.hero {

    width:95%;

    height:auto;

    min-height:600px;

    position:relative;

    overflow:hidden;

}


.hero-background img {

    width:100%;

    height:100%;

    object-position:85% center;

}


.hero-text {

    position:relative;

    left:auto;

    top:auto;

    transform:none;

    width:100%;

    padding:40px;

}


.boxes {

    width:95%;

    grid-template-columns:repeat(2,1fr);

}

}

/* ---------- MOBILE: bis 768px ---------- */
@media (max-width: 768px) {

/* Header */

header {

    padding:20px 10px;

}


.logo img {

    width:220px;

    max-width:90%;

}


.subtitle {

    font-size:14px;

    letter-spacing:1px;

}


/* Navigation kleiner */

nav ul {

    gap:5px;

}


nav a {

    font-size:14px;

}
/* Sprachumschalter DE | EN */

.language-switch {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
}

.language-switch a {
    font-size: 14px;
    letter-spacing: 0;
}

.language-switch span {
    color: #8b6a45;
}

.language-switch .active-language {
    font-weight: 700;
    color: #6b4328;
}

/* ================= HERO ================= */

.hero {

    min-height:auto;

    padding:40px 10px;

}


.hero-background {

    position:relative;

}


.hero-background img {

    width:100%;

    height:auto;

}


/* Hero Text über Bild */

.hero-text {

    position:relative;

    width:90%;

    padding:20px;

}


.hero-text h1 {

    font-size:36px;

}


.hero-text p {

    font-size:18px;

}


/* Claim */

.claim {

    padding:20px 10px;

}


.claim p {

    font-size:18px;

}


/* Boxen */

.boxes {

    display:flex;

    flex-direction:column;

    align-items:center;

}


.box-link {

    width:90%;

}


.box {

    width:100%;

}


.box-header-logo {

    max-width:150px;

}


.box-inner-title h3 {

    font-size:28px;

}


.box p {

    font-size:16px;

}


/* Ecken etwas kleiner */

.page-corner img,

.hero-corner img,

.box-title-corner img {

    width:35px;

}

.about-content {

    display:flex;

    flex-direction:column;

    width:100%;

}


.about-image {

    width:100%;

    text-align:center;

}


.about-image img {

    max-width:90%;

    height:auto;

}


.about-text {

    width:100%;

    text-align:left;

}


.about-text p {

    font-size:16px;

    line-height:1.5;

}

.about-text {

    width:100% !important;

    display:block;

}

/* Fotogalerie und Auszeichnungen Bilder */

.gallery-content,

.awards-content {

    display:flex;

    flex-direction:column;

    width:100%;

}


/* Bilder auf Handy */

.gallery-content img,

.awards-content img,

.awards-main-image,

.box-image {

    display:block;

    width:100%;

    max-width:100%;

    height:auto;

    margin-left:auto;

    margin-right:auto;

}


/* Text unter das Bild */

.gallery-text,

.awards-text {

    width:100%;

    text-align:left;

}


/* Galerie auf Handy einspaltig */

.gallery-container,

.gallery-grid,

.gallery {

    display:flex;

    flex-direction:column;

    width:100%;

}


/* einzelne Galerie-Karten */

.gallery-item {

    width:90%;

    margin:20px auto;

}


/* Bilder */
/* ---------- STARTSEITE BOX 2: ÜBER MICH ---------- */
#ueber {
    height: auto;
    min-height: 520px;
}
/* =========================================================
   STARTSEITE – BOX 2 ÜBER MICH
   ========================================================= */

.about-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 15px auto;
}

.about-preview-image {
    width: 220px;
    max-width: 80%;
    height: 220px;
    object-fit: cover;
    margin: 0 auto;
}

.about-preview-text {
    width: 90%;
    max-width: 360px;
    margin: 0 auto;
    padding: 0;
    text-align: center;

}

.about-preview-text p {
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
    
}

/* Auf der Startseite mobil nur den eigentlichen Vorschautext zeigen */
.about-preview-text p:nth-of-type(n+2) {
    display: none;
}
/* ---------- STARTSEITE BOX 4: KONTAKT ---------- */

#kontakt {
    width: 90%;
    height: auto;
    min-height: 520px;
    margin-left: auto;
    margin-right: auto;
}

.contact-list {
    width: 100%;
    max-width: 320px;
    margin: 20px auto 0;
}

.contact-item {
    width: 100%;
    margin-bottom: 18px;
}

.contact-item span {
    text-align: left;
}
}

/* ---------- KLEINE HANDYS: bis 600px ----------
   Derzeit keine zusätzlichen Regeln erforderlich.
   ------------------------------------------------- */